refactor: deduplicate modal/button styles and enforce global utility usage

- Consolidated all modal-related styles into Modal.module.css; ValidationModal.module.css is now deprecated
- All main action/navigation buttons in NewGame and GameDetail use global .btn/.nav-buttons utility classes
- Removed duplicate utility classes from component CSS files
- Fixed .fullscreenToggle class naming for consistency
- Cleaned up component CSS to only contain component-specific styles
- Updated GameCompletionModal to use shared modal styles

This ensures DRY, maintainable, and consistent styling across the app.

.cursor/README.md

@@ -0,0 +1,25 @@
+# Cursor Rules for BSC Score (Astro Web App)
+
+## Summary of Rule Adaptations
+
+This project uses the Cursor rules system to enforce best practices and workflow discipline. The following summarizes the rule adaptations, removals, and additions for this project:
+
+### Enforced Rules
+- All general development, git workflow, Gitea usage, discipline, and best practices rules are enforced.
+- **best-practices-astro.mdc** is enforced, as the project is built with Astro.
+- Type safety and code quality rules are relevant due to the use of TypeScript (via Astro's strict config).
+
+### Not Relevant / Not Present
+- No CLI, API, or data science rules are present or required, as this is a web application only.
+- No rules were removed, as all present rules are applicable to the project domain.
+
+### Project-Specific Adaptations
+- See `.cursor/rules/project-adaptations.mdc` for a detailed rationale and documentation of all rule adaptations and exceptions.
+
+### Maintenance
+- When central rules are updated, all `.mdc` files in `.cursor/rules` should be re-reviewed and project-specific adaptations re-applied.
+- If any conflicts or ambiguities arise, manual review will be requested.
+
+---
+
+This README documents the current state of rule enforcement and adaptation for the BSC Score project. For further details, consult the individual rule files in `.cursor/rules/` and the project adaptation summary. 

.cursor/rules/best-practices.mdc

@@ -0,0 +1,15 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+- Write clean, readable, and maintainable code
+- Follow SOLID principles and DRY (Don't Repeat Yourself)
+- Use meaningful variable and function names that explain their purpose
+- Add comments for complex logic, but prefer self-documenting code
+- Handle errors gracefully with proper error handling
+- Implement proper logging and debugging practices
+- Use consistent indentation and formatting
+- Avoid deep nesting - prefer early returns and guard clauses
+- Keep functions small and focused on single responsibilities
+- Use type safety when available (TypeScript, JSDoc, etc.)

.cursor/rules/dev-folder.mdc

@@ -0,0 +1,40 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+# /dev Folder Rules
+
+## Resource Management Protocol
+- Resources in `/dev` are staging materials that require processing before production use
+- NEVER automatically copy resources from `/dev` to production locations
+- ONLY move or process `/dev` resources when explicitly instructed by user
+- Maintain original files in `/dev` unless specifically told to remove them
+
+## Quick and Dirty (QnD) Scripts Protocol
+- `/dev` is the designated location for quick prototyping scripts
+- QnD scripts in `/dev` don't need to follow full production code standards
+- Focus on functionality over code quality for QnD scripts
+- Document script purpose with minimal comments
+- Use descriptive filenames that indicate script function
+- QnD scripts should be marked clearly (e.g., `qnd_` prefix or `.qnd.` in filename)
+
+## Proof of Concept (POC) Protocol
+- All POC development happens exclusively in `/dev`
+- POC code should be isolated from production codebase
+- POC code can be experimental and doesn't require full error handling
+- When POC is approved for production, create separate implementation outside `/dev`
+
+## Temporary Files Management
+- Use `/dev` for all temporary files created during development process
+- User-created temporary files can be placed directly in `/dev`
+
+## Safety and Cleanup Rules
+- NEVER delete files from `/dev` without explicit user permission
+- Ask before moving files out of `/dev` to production locations
+- Maintain clear separation between `/dev` content and production code
+
+## Exclusions and Restrictions
+- Production builds should NEVER reference files directly from `/dev`
+- `/dev` paths should not be hardcoded in production configuration
+- `/dev` is not for production dependencies or critical system files

.cursor/rules/discipline.mdc

@@ -0,0 +1,46 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+# Development Discipline Rules
+
+## Precision Over Presumption
+- NEVER add functionality that wasn't explicitly requested
+- NEVER speculate beyond the current scope of work
+- NEVER assume requirements or extend beyond stated needs
+- If uncertain about any aspect, state "I don't know" rather than guessing
+- Stick to the exact scope defined in the request
+
+## File Modification Protocol
+- NEVER modify files if the user's prompt ends with a question mark (?)
+- NEVER assume permission to refactor existing code
+- Only modify files when explicitly instructed to do so
+- Always ask for permission before making structural changes
+
+## Code Quality Enforcement (Zero Tolerance)
+- Every line of code must be bug-free, secure, and maintainable
+- Violations of DRY (Don't Repeat Yourself) are unacceptable
+- Violations of KISS (Keep It Simple, Stupid) are unacceptable
+- Code must be self-documenting with meaningful names
+- Comments should explain "why" not "what"
+- Names must reveal intent clearly
+
+## Technical Standards (Non-Negotiable)
+- Correctness takes priority over performance
+- Readability is paramount in all code decisions
+- Every solution must include:
+  - Comprehensive error handling
+  - Input validation
+  - Consideration of failure modes
+  - Edge case handling
+- Design pattern choices must be justified (e.g., "Using Factory pattern here because...")
+
+## Violation Response Protocol
+- If a rule conflicts with a user request:
+  1. Clearly state the specific conflict
+  2. Refuse the action until the conflict is resolved
+  3. Provide alternative approaches if possible
+- Example responses:
+  - "This would violate DRY principle because... Alternative approach: ..."
+  - "Cannot modify files - prompt ends with '?'. Did you mean to ask a question instead?"

.cursor/rules/git-workflow.mdc

@@ -0,0 +1,40 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+# Git Workflow Rules
+
+## Zero Autonomy on Git Operations
+- NEVER stage, commit, or push code without explicit user instruction
+- NEVER assume permission to perform git operations
+- If asked about git status, only provide information - do not take action
+
+## Commit Protocol (When Explicitly Asked)
+When user requests a commit, follow this exact sequence:
+
+1. **Review Phase**:
+   - List ALL modified files with their status (M/A/D)
+   - List ALL added files that will be staged
+   - List ALL deleted files
+   - Check for any files that should be included but aren't staged
+
+2. **Summary Phase**:
+   - Generate commit title (≤50 characters, imperative mood)
+   - Create detailed bulleted summary including:
+     - Which files were changed and how
+     - What logic was modified/added/removed
+     - Impact of changes on functionality
+     - Purpose statement (e.g., "Fix race condition" → "Patches race condition in user authentication flow")
+
+3. **Confirmation Phase**:
+   - Present the complete commit message for approval
+   - Show exactly what will be committed
+   - Wait for explicit confirmation before executing
+   - If user rejects, ask for specific changes to the commit message
+
+## Git Safety Rules
+- If no changes detected when asked to commit: "No changes detected. Aborting as per Git rules."
+- If conflicts exist, report them but do not resolve without instruction
+- Never force push or use destructive git operations
+- Always use conventional commit format when generating messages

.cursor/rules/gitea-usage.mdc

@@ -0,0 +1,43 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+# Gitea Usage Rules
+
+## Purpose
+Establish disciplined, transparent, and user-aligned protocols for using Gitea, especially regarding issue management and traceability between code and issues.
+
+## Rules
+
+1. **Stick to the Current Selected Issue**
+   - Always work with a clearly selected, active Gitea issue.
+   - All code changes must be associated with the currently selected issue.
+   - If you need to switch issues, document the switch and update the new issue context before proceeding.
+
+2. **Update Issues After Commits**
+   - After every commit, update the relevant Gitea issue(s) with a summary of the changes made.
+   - Include references to commit hashes and affected files or features.
+   - If the commit resolves or partially addresses the issue, state this explicitly in the issue update.
+
+3. **Link Commits in Issues**
+   - Every commit message must reference the relevant Gitea issue by its number (e.g., `Fixes #42` or `Refs #42`).
+   - When updating an issue, include direct links to the commit(s) in Gitea for traceability.
+   - Use Gitea's markdown syntax to create clickable links to commits and related issues.
+
+4. **Issue-Driven Workflow**
+   - Do not make code changes without an associated issue.
+   - If a new task arises, create a Gitea issue before starting work.
+   - Use issues to track discussions, decisions, and progress.
+
+5. **Responsibility for Issue Hygiene**
+   - Keep issue status, labels, and assignees up to date.
+   - Close issues only when fully resolved and after confirming with all stakeholders if needed.
+   - Document any ambiguity or blockers in the issue before pausing or switching context.
+
+6. **Current Issue Tracking via .gitea File**
+   - A file named `.gitea` can exist in the project root, containing the URL of the currently selected Gitea issue (e.g., `https://gitea.schwenk.online/froxxxy/vfbred/issues/3`).
+   - The AI assistant will read this file to determine the current project name and issue number for all Gitea-related operations.
+
+## Rationale
+These rules ensure that all work is traceable, communication is clear, and project history is auditable. They foster accountability and make onboarding, reviews, and audits more efficient.

.cursor/rules/installation.mdc

@@ -0,0 +1,39 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# Cursor Rules Automated Installation & Configuration Guide
+
+You are to follow these instructions after this `rules` folder has been copied into the project's `.cursor` directory. Your goal is to configure and adapt the rules for this specific project with minimal manual intervention.
+
+## 1. Review Rule Files
+- Read all `.mdc` files in `.cursor/rules`.
+- Identify any rules that are not relevant to this project's framework, language, or domain.
+- List which files should be removed, renamed, or adapted, and propose new rules if needed.
+
+## 2. Adaptation
+- For each rule that requires adaptation (e.g., framework-specific best practices), generate a new `.mdc` file (e.g., `best-practices-react.mdc`, `best-practices-python.mdc`) with appropriate content.
+- Remove or archive irrelevant rules (e.g., Astro-specific rules in a non-Astro project).
+- If the project is not web-based, create domain-specific rules (e.g., `cli-ux.mdc`, `api-design.mdc`, `data-best-practices.mdc`).
+
+## 3. Project-Specific Customization
+- Analyze the project structure and requirements.
+- Create a `project-adaptations.mdc` file summarizing any overrides, extensions, or exceptions to the default rules.
+- Document all changes and the reasoning behind them.
+
+## 4. Documentation
+- Update `.cursor/README.md` to summarize all rule adaptations, removals, and additions.
+- Clearly state which rules are overridden, ignored, or extended for this project.
+
+## 5. Maintenance
+- When the central rules are updated, re-read all `.mdc` files in `.cursor/rules`.
+- Re-apply project-specific adaptations and update documentation as needed.
+- Alert the user if any manual review is required due to conflicts or ambiguities.
+
+---
+
+**General Principle:**
+- Automate as much of the review, adaptation, and documentation process as possible.
+- Only request user input if clarification or conflict resolution is required.
+

.cursor/rules/mcp-usage.mdc

@@ -0,0 +1,12 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+- Use Model Context Protocol (MCP) servers when available and appropriate
+- Leverage MCP for enhanced functionality like file system operations, API integrations, or specialized tools
+- Prefer MCP-based solutions over manual implementations when MCP servers are available
+- Utilize MCP for better context awareness and cross-system integration
+- Check for available MCP servers before implementing custom solutions
+- Use MCP for database operations, external API calls, and system integrations when possible
+- Ensure MCP usage aligns with security best practices and project requirements

.cursor/rules/prd-alignment.mdc

@@ -0,0 +1,12 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+- Always reference and stay aligned with the requirements in [prd.md](mdc:docs/prd.md)
+- Before making any significant changes, verify they align with the PRD specifications
+- If a proposed change conflicts with the PRD, flag it and ask for clarification
+- Ensure all new features and modifications serve the goals outlined in the PRD
+- Maintain consistency with the project scope and user stories defined in the PRD
+- Consider the technical requirements and constraints mentioned in the PRD
+- Validate that implementations match the expected user experience described in the PRD

.cursor/rules/project-adaptations.mdc

@@ -0,0 +1,26 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# Project-Specific Rule Adaptations for BSC Score (Astro Web App)
+
+## Overview
+This project is a modern, responsive web application for tracking billiards scores, built with Astro and vanilla JavaScript. The following adaptations and exceptions apply to the default Cursor rules:
+
+## Rule Adaptations & Removals
+
+- **best-practices-astro.mdc**: Kept and enforced, as the project is built with Astro.
+- **CLI/API/Non-Web Rules**: No CLI, API, or data science rules are needed. No such rules exist in the current ruleset, so no removals are required.
+- **All Other Rules**: All other rules are relevant and retained, as they apply to general development, git workflow, Gitea usage, discipline, and best practices for web projects.
+
+## Reasoning
+- The project is a web application using Astro, so Astro-specific best practices are required.
+- There is no CLI, API, or non-web domain logic, so no domain-specific rules for those are needed.
+- TypeScript is supported via Astro's strict config, so type safety rules are relevant.
+
+## Overrides/Extensions
+- No overrides or extensions are currently required. If the project scope changes (e.g., adds an API or CLI), new rules will be proposed.
+
+## Documentation
+- This file documents the rationale for rule selection and adaptation. All changes are summarized in .cursor/README.md as required.

.cursor/rules/questions-handling.mdc

@@ -0,0 +1,11 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+- When questions are asked, provide clear and comprehensive answers
+- Do NOT make any code changes, file modifications, or implementations when answering questions
+- Focus solely on explaining concepts, providing guidance, or clarifying requirements
+- If examples are needed, present them as explanatory code blocks, not as file changes
+- Ask for explicit confirmation before making any modifications to the codebase
+- Separate informational responses from actionable requests clearly

.cursor/rules/senior-developer-protocol.mdc

@@ -0,0 +1,54 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+# Senior Developer Protocol Rules
+
+## Expert-Level Assumption
+- Assume user has expert-level technical competence
+- NEVER explain basic programming concepts unless explicitly asked
+- Phrases like "As you know..." are forbidden
+- No patronizing simplifications - provide raw technical depth
+- Prioritize implementation over theory unless explicitly requested
+- Code examples > lengthy explanations
+
+## Absolute Truthfulness Protocol
+- NEVER lie by omission, approximation, or fabrication
+- If uncertain about anything:
+  - Use "I don't know" as a hard stop - no guessing allowed
+  - Flag unverified information with "UNVERIFIED:" prefix
+- If solution is suboptimal or controversial:
+  - "The standard approach is X, but it fails for Y. Here's why Z might be better, but risks A."
+
+## No False Certainty
+- Reject binary answers for ambiguous problems
+- Use phrases like: "There's no consensus on this—here are the tradeoffs..."
+- Always expose unknowns: "This answer depends on [unconfirmed variable]. Without testing, we can't be sure."
+- Acknowledge when multiple valid approaches exist
+
+## Correctness Over Politeness
+- If user request has flaws (anti-patterns, security risks):
+  - "WARNING: This approach would cause X due to Y. Alternatives: A, B."
+- If better tools/libraries exist:
+  - "You asked for X, but Y is industry-standard because... Shall I proceed with X anyway?"
+- Challenge problematic requests directly and professionally
+
+## Proof of Work Requirements
+For complex answers, provide:
+- Citations from official documentation or RFCs
+- Benchmarks if performance is critical
+- Explicit testing recommendations: "This is untested—would you like a prototype to validate?"
+- References to industry standards and best practices
+
+## Response Prefixes (Mandatory)
+- Use "UNVERIFIED:" for uncertain information
+- Use "OPINION:" for subjective recommendations
+- Use "WARNING:" for potentially problematic approaches
+- Use "UNTESTED:" for theoretical solutions
+
+## Conflict Resolution
+- If request is impossible or contradictory:
+  - "INVALID: This violates [principle X] because [Y]. Aborting."
+- Provide clear reasoning for refusal
+- Offer alternative approaches when possible

.cursor/rules/thinking-process.mdc

@@ -0,0 +1,44 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+# Thinking Process Rules
+
+## Exploration First Protocol
+- Always show uncertainty and reasoning process
+- Use phrases like: "I'm debating between X and Y because..."
+- Document failed approaches: "Approach A failed due to B; pivoting to C."
+- Make the decision-making process transparent and auditable
+
+## Atomic Step Reasoning
+- Break down complex reasoning into numbered, simple sentences
+- Show progression of thought clearly
+- Revise thinking publicly: "Earlier I thought X, but now Y makes more sense because..."
+- Each step should be independently understandable
+
+## Proactive Problem Anticipation
+- Propose unrequested but relevant solutions when critical
+- Use format: "You didn't ask for error handling, but Z is critical because..."
+- Identify potential issues before they become problems
+- Suggest complementary improvements that align with the main request
+
+## Auditable Decision Trail
+- Document why specific approaches were chosen over alternatives
+- Show trade-off analysis: "Chose X over Y because of performance, but sacrifices readability"
+- Include decision context: "Given constraints A and B, solution C is optimal"
+- Make it easy to understand the reasoning behind technical choices
+
+## Iterative Refinement Process
+- Start with initial assessment
+- Show how understanding evolves
+- Document assumption changes
+- Acknowledge when new information changes conclusions
+- Example: "Initial analysis suggested X, but considering constraint Y, Z is actually better"
+
+## Question Protocol Integration
+- When user prompt starts with "QUESTION":
+  - Provide thorough answer using above thinking process
+  - Do NOT modify any files
+  - Focus entirely on explanation and reasoning
+  - Make thinking process visible in the response

.gitea

@@ -0,0 +1 @@
+@https://gitea.schwenk.online/froxxxy/bscscore/issues/1

.gitignore

@@ -0,0 +1,27 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
+
+.gitea
+dev/

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

TODO.md

@@ -1,89 +0,0 @@
-# TODO List
-
-## High Priority
-1. Add game statistics
-   - Track win/loss ratio per player
-   - Show total games played
-   - Display average scores
-   - Show favorite game types per player
-
-2. Implement game history
-   - Log score changes with timestamps
-   - Show who made which changes
-   - Allow reviewing game progression
-
-3. Add confirmation for game completion
-   - Show final score summary
-   - Display winner announcement
-   - Option to undo completion
-
-4. Improve error handling
-   - Validate all user inputs
-   - Show meaningful error messages
-   - Add recovery options for data issues
-
-## Medium Priority
-5. Add player profiles
-   - Player avatars/images
-   - Personal statistics
-   - Preferred game types
-   - Nickname support
-
-6. Implement game rules
-   - Show rules for each game type
-   - Add rule validation for scoring
-   - Display fouls and penalties
-
-7. Add search and filtering
-   - Search for specific games/players
-   - Filter by date ranges
-   - Sort by various criteria
-   - Advanced filtering options
-
-8. Improve game type management
-   - Custom game types
-   - Configurable scoring rules
-   - Special game modes
-
-## Lower Priority
-9. Add themes and customization
-   - Dark/light mode toggle
-   - Custom color schemes
-   - Font size adjustments
-   - Layout options
-
-10. Implement data backup
-    - Export to different formats
-    - Automatic backups
-    - Data recovery options
-
-11. Add social features
-    - Share game results
-    - Player rankings
-    - Tournament support
-    - Challenge system
-
-12. Improve accessibility
-    - Screen reader support
-    - Keyboard navigation
-    - High contrast mode
-    - Voice input support
-
-## Nice to Have
-13. Add animations and effects
-    - Score change animations
-    - Victory celebrations
-    - Transition effects
-    - Sound effects
-
-14. Implement achievements
-    - Player milestones
-    - Special records
-    - Achievement badges
-    - Progress tracking
-
-15. Add multi-language support
-    - Language selection
-    - Localized content
-    - RTL support
-    - Custom translations

astro.config.mjs

@@ -0,0 +1,9 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import preact from '@astrojs/preact';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [preact()]
+});

manifest.json

@@ -1,22 +0,0 @@
-{
-  "name": "BSC Score",
-  "short_name": "BSC Score",
-  "description": "Pool Scoring App für den Billard Sport Club",
-  "lang": "de",
-  "start_url": ".",
-  "display": "fullscreen",
-  "background_color": "#1a1a1a",
-  "theme_color": "#000000",
-  "icons": [
-    {
-      "src": "icon-192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "icon-512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ]
-} 

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "growing-galaxy",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev --host",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/preact": "^4.1.0",
+    "astro": "^5.9.0",
+    "preact": "^10.26.8"
+  }
+}

service-worker.js

@@ -1,31 +0,0 @@
-const CACHE_NAME = 'bscscore-v1';
-const URLS_TO_CACHE = [
-  '/',
-  '/index.html',
-  '/manifest.json',
-  '/favicon.ico',
-  '/icon-192.png',
-  '/icon-512.png'
-];
-
-self.addEventListener('install', event => {
-  event.waitUntil(
-    caches.open(CACHE_NAME).then(cache => cache.addAll(URLS_TO_CACHE))
-  );
-});
-
-self.addEventListener('activate', event => {
-  event.waitUntil(
-    caches.keys().then(keys =>
-      Promise.all(keys.filter(key => key !== CACHE_NAME).map(key => caches.delete(key)))
-    )
-  );
-});
-
-self.addEventListener('fetch', event => {
-  event.respondWith(
-    caches.match(event.request).then(response =>
-      response || fetch(event.request).catch(() => caches.match('/index.html'))
-    )
-  );
-}); 

src/components/App.jsx

@@ -0,0 +1,204 @@
+import { h } from 'preact';
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import GameList from './GameList.jsx';
+import GameDetail from './GameDetail.jsx';
+import NewGame from './NewGame.jsx';
+import Modal from './Modal.jsx';
+import ValidationModal from './ValidationModal.jsx';
+import GameCompletionModal from './GameCompletionModal.jsx';
+import FullscreenToggle from './FullscreenToggle.jsx';
+
+const LOCAL_STORAGE_KEY = 'bscscore_games';
+
+/**
+ * Main App component for BSC Score
+ * @returns {import('preact').VNode}
+ */
+const App = () => {
+  const [games, setGames] = useState([]);
+  const [currentGameId, setCurrentGameId] = useState(null);
+  const [playerNameHistory, setPlayerNameHistory] = useState([]);
+  const [screen, setScreen] = useState('game-list');
+  const [modal, setModal] = useState({ open: false, gameId: null });
+  const [validation, setValidation] = useState({ open: false, message: '' });
+  const [completionModal, setCompletionModal] = useState({ open: false, game: null });
+  const [filter, setFilter] = useState('all');
+
+  // Load games from localStorage on mount
+  useEffect(() => {
+    const savedGames = localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (savedGames) {
+      setGames(JSON.parse(savedGames));
+    }
+  }, []);
+
+  // Save games to localStorage whenever games change
+  useEffect(() => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(games));
+    // Update player name history
+    const nameLastUsed = {};
+    games.forEach(game => {
+      if (game.player1) nameLastUsed[game.player1] = Math.max(nameLastUsed[game.player1] || 0, new Date(game.updatedAt).getTime());
+      if (game.player2) nameLastUsed[game.player2] = Math.max(nameLastUsed[game.player2] || 0, new Date(game.updatedAt).getTime());
+      if (game.player3) nameLastUsed[game.player3] = Math.max(nameLastUsed[game.player3] || 0, new Date(game.updatedAt).getTime());
+    });
+    setPlayerNameHistory(
+      [...new Set(Object.keys(nameLastUsed))].sort((a, b) => nameLastUsed[b] - nameLastUsed[a])
+    );
+  }, [games]);
+
+  // Navigation handlers
+  const showGameList = useCallback(() => {
+    setScreen('game-list');
+    setCurrentGameId(null);
+  }, []);
+  const showNewGame = useCallback(() => {
+    setScreen('new-game');
+    setCurrentGameId(null);
+  }, []);
+  const showGameDetail = useCallback((id) => {
+    setCurrentGameId(id);
+    setScreen('game-detail');
+  }, []);
+
+  // Game creation
+  const handleCreateGame = useCallback(({ player1, player2, player3, gameType, raceTo }) => {
+    const newGame = {
+      id: Date.now(),
+      player1,
+      player2,
+      player3,
+      score1: 0,
+      score2: 0,
+      score3: 0,
+      gameType,
+      raceTo,
+      status: 'active',
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString()
+    };
+    setGames(g => [newGame, ...g]);
+    return newGame.id;
+  }, []);
+
+  // Score update
+  const handleUpdateScore = useCallback((player, change) => {
+    setGames(games => games.map(game => {
+      if (game.id !== currentGameId || game.status === 'completed') return game;
+      const updated = { ...game };
+      if (player === 1) updated.score1 = Math.max(0, updated.score1 + change);
+      if (player === 2) updated.score2 = Math.max(0, updated.score2 + change);
+      if (player === 3) updated.score3 = Math.max(0, updated.score3 + change);
+      updated.updatedAt = new Date().toISOString();
+      // Check for raceTo completion
+      if (updated.raceTo && (updated.score1 >= updated.raceTo || updated.score2 >= updated.raceTo || (updated.player3 && updated.score3 >= updated.raceTo))) {
+        setCompletionModal({ open: true, game: updated });
+      }
+      return updated;
+    }));
+  }, [currentGameId]);
+
+  // Finish game
+  const handleFinishGame = useCallback(() => {
+    const game = games.find(g => g.id === currentGameId);
+    if (!game) return;
+    setCompletionModal({ open: true, game });
+  }, [games, currentGameId]);
+  const handleConfirmCompletion = useCallback(() => {
+    setGames(games => games.map(game => {
+      if (game.id !== currentGameId) return game;
+      return { ...game, status: 'completed', updatedAt: new Date().toISOString() };
+    }));
+    setCompletionModal({ open: false, game: null });
+    setScreen('game-detail');
+  }, [currentGameId]);
+
+  // Delete game
+  const handleDeleteGame = useCallback((id) => {
+    setModal({ open: true, gameId: id });
+  }, []);
+  const handleConfirmDelete = useCallback(() => {
+    setGames(games => games.filter(g => g.id !== modal.gameId));
+    setModal({ open: false, gameId: null });
+    setScreen('game-list');
+  }, [modal.gameId]);
+  const handleCancelDelete = useCallback(() => {
+    setModal({ open: false, gameId: null });
+  }, []);
+
+  // Validation modal
+  const showValidation = useCallback((message) => {
+    setValidation({ open: true, message });
+  }, []);
+  const closeValidation = useCallback(() => {
+    setValidation({ open: false, message: '' });
+  }, []);
+
+  return (
+    <div className="screen-container">
+      {screen === 'game-list' && (
+        <div className="screen active">
+          <div className="screen-content">
+            <button className="nav-button new-game-button" onClick={showNewGame} aria-label="Neues Spiel starten">Neues Spiel</button>
+            <GameList
+              games={games}
+              filter={filter}
+              onShowGameDetail={showGameDetail}
+              onDeleteGame={handleDeleteGame}
+              setFilter={setFilter}
+            />
+          </div>
+        </div>
+      )}
+      {screen === 'new-game' && (
+        <div className="screen active">
+          <div className="screen-content">
+            <NewGame
+              onCreateGame={handleCreateGame}
+              playerNameHistory={playerNameHistory}
+              onCancel={showGameList}
+              onGameCreated={id => {
+                setCurrentGameId(id);
+                setScreen('game-detail');
+              }}
+              initialValues={games[0]}
+            />
+          </div>
+        </div>
+      )}
+      {screen === 'game-detail' && (
+        <div className="screen active">
+          <div className="screen-content">
+            <GameDetail
+              game={games.find(g => g.id === currentGameId)}
+              onFinishGame={handleFinishGame}
+              onUpdateScore={handleUpdateScore}
+              onBack={showGameList}
+            />
+          </div>
+        </div>
+      )}
+      <Modal
+        open={modal.open}
+        title="Spiel löschen"
+        message="Möchten Sie das Spiel wirklich löschen?"
+        onCancel={handleCancelDelete}
+        onConfirm={handleConfirmDelete}
+      />
+      <ValidationModal
+        open={validation.open}
+        message={validation.message}
+        onClose={closeValidation}
+      />
+      <GameCompletionModal
+        open={completionModal.open}
+        game={completionModal.game}
+        onConfirm={handleConfirmCompletion}
+        onClose={() => setCompletionModal({ open: false, game: null })}
+      />
+      <FullscreenToggle />
+    </div>
+  );
+};
+
+export default App; 

src/components/FullscreenToggle.jsx

@@ -0,0 +1,35 @@
+import { h } from 'preact';
+import { useCallback } from 'preact/hooks';
+import styles from './FullscreenToggle.module.css';
+
+/**
+ * Button to toggle fullscreen mode.
+ * @returns {import('preact').VNode}
+ */
+const FullscreenToggle = () => {
+  // Toggle fullscreen mode for the document
+  const handleToggle = useCallback(() => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  }, []);
+
+  return (
+    <button
+      id="fullscreen-toggle"
+      className={styles.fullscreenToggle}
+      onClick={handleToggle}
+      title="Vollbild umschalten"
+      aria-label="Vollbild umschalten"
+      type="button"
+    >
+      <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+        <path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
+      </svg>
+    </button>
+  );
+};
+
+export default FullscreenToggle; 

src/components/FullscreenToggle.module.css

@@ -0,0 +1,38 @@
+/* FullscreenToggle-specific styles only. */
+.fullscreenToggle {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background-color: rgba(52, 152, 219, 0.9);
+    border: none;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    z-index: 9999;
+    transition: background-color 0.2s, transform 0.2s;
+}
+.fullscreenToggle:hover {
+    background-color: rgba(52, 152, 219, 1);
+    transform: scale(1.1);
+}
+.fullscreenToggle:active {
+    transform: scale(0.95);
+}
+.fullscreenToggle svg {
+    width: 24px;
+    height: 24px;
+}
+@media screen and (max-width: 480px) {
+    .fullscreenToggle {
+        bottom: 15px;
+        right: 15px;
+        width: 40px;
+        height: 40px;
+    }
+} 

src/components/GameCompletionModal.jsx

@@ -0,0 +1,51 @@
+import { h } from 'preact';
+import modalStyles from './Modal.module.css';
+import styles from './GameCompletionModal.module.css';
+
+/**
+ * Modal shown when a game is completed.
+ * @param {object} props
+ * @param {boolean} props.open
+ * @param {object} props.game
+ * @param {Function} props.onConfirm
+ * @param {Function} props.onClose
+ * @returns {import('preact').VNode|null}
+ */
+const GameCompletionModal = ({ open, game, onConfirm, onClose }) => {
+  if (!open || !game) return null;
+  const playerNames = [game.player1, game.player2, game.player3].filter(Boolean);
+  const scores = [game.score1, game.score2, game.score3].filter((_, i) => playerNames[i]);
+  const maxScore = Math.max(...scores);
+  // Find all winners (could be a tie)
+  const winners = playerNames.filter((name, idx) => scores[idx] === maxScore);
+  const winnerText = winners.length > 1
+    ? `Unentschieden zwischen ${winners.join(' und ')}`
+    : `${winners[0]} hat gewonnen!`;
+  return (
+    <div id="game-completion-modal" className={modalStyles['modal'] + ' ' + modalStyles['show']} role="dialog" aria-modal="true" aria-labelledby="completion-modal-title">
+      <div className={modalStyles['modal-content']}>
+        <div className={modalStyles['modal-header']}>
+          <span className={modalStyles['modal-title']} id="completion-modal-title">Spiel beendet</span>
+          <button className={modalStyles['close-button']} onClick={onClose} aria-label="Schließen">×</button>
+        </div>
+        <div className={modalStyles['modal-body']}>
+          <div className={styles['final-scores']}>
+            {playerNames.map((name, idx) => (
+              <div className={styles['final-score']} key={name + idx}>
+                <span className={styles['player-name']}>{name}</span>
+                <span className={styles['score']}>{scores[idx]}</span>
+              </div>
+            ))}
+          </div>
+          <div className={styles['winner-announcement']}><h3>{winnerText}</h3></div>
+        </div>
+        <div className={modalStyles['modal-footer']}>
+          <button className={styles['btn'] + ' ' + styles['btn--warning']} onClick={onConfirm} aria-label="Bestätigen">Bestätigen</button>
+          <button className={styles['btn']} onClick={onClose} aria-label="Abbrechen">Abbrechen</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GameCompletionModal; 

src/components/GameCompletionModal.module.css

@@ -0,0 +1,67 @@
+/* Only GameCompletionModal-specific styles. Shared modal styles are now in Modal.module.css */
+.final-scores {
+    margin: 20px 0;
+}
+.final-score {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 18px 0;
+    margin-bottom: 8px;
+    background: #333;
+    border-radius: 8px;
+    font-size: 1.2rem;
+    color: #fff;
+}
+.final-score .player-name {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #fff;
+}
+.final-score .score {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #fff;
+}
+.winner-announcement {
+    text-align: center;
+    margin: 20px 0 0 0;
+    padding: 18px 8px;
+    background: #43a047;
+    border-radius: 8px;
+    font-size: 1.2rem;
+    color: #fff;
+    font-weight: 700;
+}
+.winner-announcement h3 {
+    font-size: 1.2rem;
+    margin: 0;
+    color: #fff;
+}
+.btn {
+    flex: 1;
+    padding: 18px 0;
+    font-size: 1.1rem;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #fff;
+    background: #333;
+    font-weight: 600;
+    transition: background 0.2s;
+}
+.btn--warning {
+    background: #f44336;
+}
+.btn:not(.btn--warning):hover {
+    background: #444;
+}
+.btn--warning:hover {
+    background: #d32f2f;
+}
+@media (max-width: 600px) {
+    .btn {
+        font-size: 1rem;
+        padding: 14px 0;
+    }
+} 

src/components/GameDetail.jsx

@@ -0,0 +1,55 @@
+import { h } from 'preact';
+import styles from './GameDetail.module.css';
+
+/**
+ * Game detail view for a single game.
+ * @param {object} props
+ * @param {object} props.game
+ * @param {Function} props.onFinishGame
+ * @param {Function} props.onUpdateScore
+ * @param {Function} props.onBack
+ * @returns {import('preact').VNode|null}
+ */
+const GameDetail = ({ game, onFinishGame, onUpdateScore, onBack }) => {
+  if (!game) return null;
+  const isCompleted = game.status === 'completed';
+  const playerNames = [game.player1, game.player2, game.player3].filter(Boolean);
+  const scores = [game.score1, game.score2, game.score3].filter((_, i) => playerNames[i]);
+
+  return (
+    <div className={styles['game-detail']}>
+      <div className={styles['game-title']}>
+        {game.gameType}{game.raceTo ? ` | Race to ${game.raceTo}` : ''}
+      </div>
+      <div className={styles['scores-container']}>
+        {playerNames.map((name, idx) => (
+          <div
+            className={styles['player-score'] + (name === 'Fränky' ? ' ' + styles['franky'] : '')}
+            key={name + idx}
+          >
+            <span className={styles['player-name']}>{name}</span>
+            <span className={styles['score']} id={`score${idx+1}`}>{scores[idx]}</span>
+            <button
+              className={styles['score-button']}
+              disabled={isCompleted}
+              onClick={() => onUpdateScore(idx+1, -1)}
+              aria-label={`Punkt abziehen für ${name}`}
+            >-</button>
+            <button
+              className={styles['score-button']}
+              disabled={isCompleted}
+              onClick={() => onUpdateScore(idx+1, 1)}
+              aria-label={`Punkt hinzufügen für ${name}`}
+            >+</button>
+          </div>
+        ))}
+      </div>
+      <div className={styles['game-detail-controls']}>
+        <button className="btn" onClick={onBack} aria-label="Zurück zur Liste">Zurück zur Liste</button>
+        <button className="btn" disabled={isCompleted} onClick={onFinishGame} aria-label={isCompleted ? 'Abgeschlossen' : 'Spiel beenden'}>{isCompleted ? 'Abgeschlossen' : 'Spiel beenden'}</button>
+      </div>
+    </div>
+  );
+};
+
+export default GameDetail; 

src/components/GameDetail.module.css

@@ -0,0 +1,125 @@
+/* GameDetail-specific styles only. Shared utility classes are now in global CSS. */
+.screen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100vh;
+    display: none;
+    opacity: 0;
+    transform: translateX(100%);
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.screen.active {
+    display: block;
+    opacity: 1;
+    transform: translateX(0);
+    position: relative;
+}
+.screen-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    padding: 20px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+.game-title {
+    font-size: 24px;
+    color: #ccc;
+}
+.game-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    width: 100%;
+}
+.scores-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 32px;
+    min-height: 0;
+}
+.player-score {
+    flex: 1;
+    text-align: center;
+    padding: 20px;
+    border-radius: 16px;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    margin: 0 8px;
+}
+.player-score:first-child {
+    background-color: #43a047;
+}
+.player-score:nth-child(2) {
+    background-color: #1565c0;
+}
+.player-score:nth-child(3) {
+    background-color: #333;
+}
+.player-name {
+    font-size: 24px;
+    margin-bottom: 10px;
+    color: #fff;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.score {
+    font-size: 16vh;
+    font-weight: bold;
+    margin: 10px 0 20px 0;
+    line-height: 1;
+    color: #fff;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
+}
+.score-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: auto;
+}
+.score-button {
+    background-color: #333;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    font-size: 18px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    min-width: 80px;
+    margin-bottom: 8px;
+}
+.game-controls {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+    width: 100%;
+}
+.control-button {
+    flex: 1;
+    padding: 30px;
+    background: #333;
+    color: white;
+    border: none;
+    border-radius: 0;
+    font-size: 24px;
+    cursor: pointer;
+    touch-action: manipulation;
+}
+.control-button.delete {
+    background: #f44336;
+}
+.game-detail-controls {
+    display: flex;
+    flex-direction: row;
+    gap: 24px;
+    margin: 40px 0 0 0;
+    width: 100%;
+    justify-content: center;
+} 

src/components/GameHistory.module.css

@@ -0,0 +1,24 @@
+/* GameHistory-specific styles only. Shared utility classes are now in global CSS. */
+.screen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100vh;
+    display: none;
+    opacity: 0;
+    transform: translateX(100%);
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.screen-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    padding: 20px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+.screen-title {
+    font-size: 24px;
+    margin-bottom: 20px;
+} 

src/components/GameList.jsx

@@ -0,0 +1,62 @@
+import { h } from 'preact';
+import styles from './GameList.module.css';
+
+/**
+ * List of games with filter and delete options.
+ * @param {object} props
+ * @param {object[]} props.games
+ * @param {string} props.filter
+ * @param {Function} props.setFilter
+ * @param {Function} props.onShowGameDetail
+ * @param {Function} props.onDeleteGame
+ * @returns {import('preact').VNode}
+ */
+const GameList = ({ games, filter = 'all', setFilter, onShowGameDetail, onDeleteGame }) => {
+  // Filter and sort games
+  const filteredGames = games
+    .filter(game => {
+      if (filter === 'active') return game.status === 'active';
+      if (filter === 'completed') return game.status === 'completed';
+      return true;
+    })
+    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+
+  return (
+    <div className={styles['game-list'] + ' ' + styles['games-container']}>
+      <div className={styles['filter-buttons']}>
+        <button className={styles['filter-button'] + (filter === 'all' ? ' ' + styles['active'] : '')} onClick={() => setFilter('all')} aria-label="Alle Spiele anzeigen">Alle</button>
+        <button className={styles['filter-button'] + (filter === 'active' ? ' ' + styles['active'] : '')} onClick={() => setFilter('active')} aria-label="Nur aktive Spiele anzeigen">Aktiv</button>
+        <button className={styles['filter-button'] + (filter === 'completed' ? ' ' + styles['active'] : '')} onClick={() => setFilter('completed')} aria-label="Nur abgeschlossene Spiele anzeigen">Abgeschlossen</button>
+      </div>
+      {filteredGames.length === 0 ? (
+        <div className={styles['empty-state']}>Keine Spiele vorhanden</div>
+      ) : (
+        filteredGames.map(game => {
+          const playerNames = game.player3
+            ? `${game.player1} vs ${game.player2} vs ${game.player3}`
+            : `${game.player1} vs ${game.player2}`;
+          const scores = game.player3
+            ? `${game.score1} - ${game.score2} - ${game.score3}`
+            : `${game.score1} - ${game.score2}`;
+          return (
+            <div
+              className={
+                styles['game-item'] + ' ' + (game.status === 'completed' ? styles['completed'] : styles['active'])
+              }
+              key={game.id}
+            >
+              <div className={styles['game-info']} onClick={() => onShowGameDetail(game.id)} role="button" tabIndex={0} aria-label={`Details für Spiel ${playerNames}`}>
+                <div className={styles['game-type']}>{game.gameType}{game.raceTo ? ` | ${game.raceTo}` : ''}</div>
+                <div className={styles['player-names']}>{playerNames}</div>
+                <div className={styles['game-scores']}>{scores}</div>
+              </div>
+              <button className={styles['delete-button']} onClick={() => onDeleteGame(game.id)} aria-label={`Spiel löschen: ${playerNames}`}></button>
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+};
+
+export default GameList; 

src/components/GameList.module.css

@@ -0,0 +1,135 @@
+/* GameList-specific styles only. Shared utility classes are now in global CSS. */
+.screen.active {
+    display: block;
+    opacity: 1;
+    transform: translateX(0);
+    position: relative;
+}
+.screen-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    padding: 20px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+.screen-title {
+    font-size: 24px;
+    margin-bottom: 20px;
+}
+.game-list {
+    width: 100%;
+    flex: 1;
+    overflow-y: auto;
+}
+.filter-buttons {
+    display: flex;
+    gap: 8px;
+    margin: 24px 0 16px 0;
+}
+.filter-button {
+    flex: 1;
+    background: #333;
+    color: #fff;
+    border: none;
+    border-radius: 0;
+    font-size: 1.2rem;
+    padding: 18px 0;
+    cursor: pointer;
+    font-weight: 500;
+    transition: background 0.2s, color 0.2s;
+}
+.filter-button.active {
+    background: #4CAF50;
+    color: #fff;
+}
+.games-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 24px;
+}
+.game-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  transition: transform 0.1s ease, background-color 0.2s ease;
+  cursor: pointer;
+}
+.game-item.active {
+  background: #1e4620;
+}
+.game-item.completed {
+  background: #333;
+  opacity: 0.85;
+}
+.game-info {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+.game-type {
+  font-weight: bold;
+  font-size: 1.5rem;
+  min-width: 8rem;
+  color: #fff;
+}
+.player-names {
+  color: #fff;
+  font-size: 1.5rem;
+  min-width: 16rem;
+}
+.game-scores {
+  font-size: 2rem;
+  font-weight: bold;
+  min-width: 6rem;
+  text-align: center;
+  color: #fff;
+}
+.delete-button {
+  width: 3rem;
+  height: 3rem;
+  border: none;
+  background: #ff4444;
+  color: white;
+  border-radius: 50%;
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 1rem;
+  transition: background-color 0.2s;
+  position: relative;
+}
+.delete-button::before {
+  content: '\1F5D1'; /* 🗑️ */
+  font-size: 1.5rem;
+}
+.delete-button:hover {
+  background: #cc0000;
+}
+.delete-button:active {
+  transform: scale(0.95);
+}
+.empty-state {
+  text-align: center;
+  padding: 2rem;
+  color: #666;
+  font-size: 1.5rem;
+}
+.page-header {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #fff;
+  background: #181818;
+  padding: 24px 0 16px 0;
+  margin-bottom: 8px;
+  text-align: left;
+  width: 100%;
+  letter-spacing: 0.5px;
+} 

src/components/Modal.jsx

@@ -0,0 +1,35 @@
+import { h } from 'preact';
+import styles from './Modal.module.css';
+
+/**
+ * Generic modal dialog for confirmation.
+ * @param {object} props
+ * @param {boolean} props.open
+ * @param {string} props.title
+ * @param {string} props.message
+ * @param {Function} props.onCancel
+ * @param {Function} props.onConfirm
+ * @returns {import('preact').VNode|null}
+ */
+const Modal = ({ open, title, message, onCancel, onConfirm }) => {
+  if (!open) return null;
+  return (
+    <div className={styles['modal'] + ' ' + styles['show']} role="dialog" aria-modal="true" aria-labelledby="modal-title">
+      <div className={styles['modal-content']}>
+        <div className={styles['modal-header']}>
+          <span className={styles['modal-title']} id="modal-title">{title}</span>
+          <button className={styles['close-button']} onClick={onCancel} aria-label="Schließen">×</button>
+        </div>
+        <div className={styles['modal-body']}>
+          <div className={styles['modal-message']}>{message}</div>
+        </div>
+        <div className={styles['modal-footer']}>
+          <button className={styles['modal-button'] + ' ' + styles['cancel']} onClick={onCancel} aria-label="Abbrechen">Abbrechen</button>
+          <button className={styles['modal-button'] + ' ' + styles['confirm']} onClick={onConfirm} aria-label="Löschen">Löschen</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal; 

src/components/Modal.module.css

@@ -0,0 +1,66 @@
+/* Consolidated modal styles for all modals */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+}
+.modal.show {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.modal-content {
+    background-color: #2a2a2a;
+    padding: 20px;
+    border-radius: 10px;
+    width: 90%;
+    max-width: 500px;
+    position: relative;
+}
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.close-button {
+    font-size: 24px;
+    cursor: pointer;
+    color: #888;
+    background: none;
+    border: none;
+}
+.close-button:hover {
+    color: white;
+}
+.modal-body {
+    margin-bottom: 20px;
+}
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+.modal-button {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+}
+.modal-button.cancel {
+    background-color: #444;
+    color: white;
+}
+.modal-button.confirm {
+    background-color: #e74c3c;
+    color: white;
+}
+.modal-button:hover {
+    opacity: 0.9;
+} 

src/components/NewGame.jsx

@@ -0,0 +1,117 @@
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import styles from './NewGame.module.css';
+
+/**
+ * New game creation form.
+ * @param {object} props
+ * @param {Function} props.onCreateGame
+ * @param {string[]} props.playerNameHistory
+ * @param {Function} props.onCancel
+ * @param {Function} props.onGameCreated
+ * @param {object} props.initialValues
+ * @returns {import('preact').VNode}
+ */
+const NewGame = ({ onCreateGame, playerNameHistory, onCancel, onGameCreated, initialValues }) => {
+  const [player1, setPlayer1] = useState(initialValues?.player1 || '');
+  const [player2, setPlayer2] = useState(initialValues?.player2 || '');
+  const [player3, setPlayer3] = useState(initialValues?.player3 || '');
+  const [gameType, setGameType] = useState(initialValues?.gameType || '8-Ball');
+  const [raceTo, setRaceTo] = useState(initialValues?.raceTo ? String(initialValues.raceTo) : '');
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    setPlayer1(initialValues?.player1 || '');
+    setPlayer2(initialValues?.player2 || '');
+    setPlayer3(initialValues?.player3 || '');
+    setGameType(initialValues?.gameType || '8-Ball');
+    setRaceTo(initialValues?.raceTo ? String(initialValues.raceTo) : '');
+    setError(null);
+  }, [initialValues]);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!player1.trim() || !player2.trim()) {
+      setError('Bitte Namen für beide Spieler eingeben');
+      return;
+    }
+    const id = onCreateGame({
+      player1: player1.trim(),
+      player2: player2.trim(),
+      player3: player3.trim() || null,
+      gameType,
+      raceTo: raceTo ? parseInt(raceTo) : null
+    });
+    if (onGameCreated && id) {
+      onGameCreated(id);
+    }
+  };
+
+  const handleClear = () => {
+    setPlayer1('');
+    setPlayer2('');
+    setPlayer3('');
+    setGameType('8-Ball');
+    setRaceTo('');
+    setError(null);
+  };
+
+  return (
+    <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Neues Spiel Formular">
+      <div className={styles['screen-title']}>Neues Spiel</div>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
+        <button type="button" className="btn" onClick={handleClear} aria-label="Felder leeren">Felder leeren</button>
+      </div>
+      <div className={styles['player-inputs']}>
+        <div className={styles['player-input']}>
+          <label htmlFor="player1-input">Spieler 1</label>
+          <div className={styles['name-input-container']}>
+            <input id="player1-input" className={styles['name-input']} placeholder="Name Spieler 1" value={player1} onInput={e => setPlayer1(e.target.value)} list="player1-history" aria-label="Name Spieler 1" />
+            <datalist id="player1-history">
+              {playerNameHistory.map((name, idx) => <option value={name} key={name + idx} />)}
+            </datalist>
+          </div>
+        </div>
+        <div className={styles['player-input']}>
+          <label htmlFor="player2-input">Spieler 2</label>
+          <div className={styles['name-input-container']}>
+            <input id="player2-input" className={styles['name-input']} placeholder="Name Spieler 2" value={player2} onInput={e => setPlayer2(e.target.value)} list="player2-history" aria-label="Name Spieler 2" />
+            <datalist id="player2-history">
+              {playerNameHistory.map((name, idx) => <option value={name} key={name + idx} />)}
+            </datalist>
+          </div>
+        </div>
+        <div className={styles['player-input']}>
+          <label htmlFor="player3-input">Spieler 3 (optional)</label>
+          <div className={styles['name-input-container']}>
+            <input id="player3-input" className={styles['name-input']} placeholder="Name Spieler 3" value={player3} onInput={e => setPlayer3(e.target.value)} list="player3-history" aria-label="Name Spieler 3" />
+            <datalist id="player3-history">
+              {playerNameHistory.map((name, idx) => <option value={name} key={name + idx} />)}
+            </datalist>
+          </div>
+        </div>
+      </div>
+      <div className={styles['game-settings']}>
+        <div className={styles['setting-group']}>
+          <label htmlFor="game-type-select">Spieltyp</label>
+          <select id="game-type-select" value={gameType} onChange={e => setGameType(e.target.value)} aria-label="Spieltyp">
+            <option value="8-Ball">8-Ball</option>
+            <option value="9-Ball">9-Ball</option>
+            <option value="10-Ball">10-Ball</option>
+          </select>
+        </div>
+        <div className={styles['setting-group']}>
+          <label htmlFor="race-to-input">Race to X (optional)</label>
+          <input id="race-to-input" type="number" value={raceTo} onInput={e => setRaceTo(e.target.value)} min="1" aria-label="Race to X" />
+        </div>
+      </div>
+      {error && <div className={styles['validation-error']}>{error}</div>}
+      <div className="nav-buttons">
+        <button type="button" className="btn" onClick={onCancel} aria-label="Abbrechen">Abbrechen</button>
+        <button type="submit" className="btn" aria-label="Spiel starten">Spiel starten</button>
+      </div>
+    </form>
+  );
+};
+
+export default NewGame; 

src/components/NewGame.module.css

@@ -0,0 +1,112 @@
+/* NewGame-specific styles only. Shared utility classes are now in global CSS. */
+.screen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100vh;
+    display: none;
+    opacity: 0;
+    transform: translateX(100%);
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.screen-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    padding: 20px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+.screen-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 32px;
+    letter-spacing: 0.5px;
+}
+.player-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+    margin-bottom: 32px;
+}
+.player-input {
+    background: #222;
+    border-radius: 8px;
+    padding: 20px 16px 16px 16px;
+    margin-bottom: 0;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
+}
+.player-input label {
+    display: block;
+    margin-bottom: 12px;
+    color: #ccc;
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+.name-input-container {
+    display: flex;
+    gap: 12px;
+}
+.name-input {
+    flex: 2;
+    padding: 14px 12px;
+    border: 2px solid #333;
+    background: #2a2a2a;
+    color: white;
+    font-size: 1.1rem;
+    min-height: 44px;
+    border-radius: 0 6px 6px 0;
+}
+.game-settings {
+    margin-top: 0;
+    width: 100%;
+    margin-bottom: 32px;
+}
+.setting-group {
+    margin-bottom: 20px;
+}
+.setting-group label {
+    display: block;
+    margin-bottom: 10px;
+    color: #ccc;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+.setting-group select, .setting-group input {
+    width: 100%;
+    padding: 14px 12px;
+    border: 2px solid #333;
+    background: #2a2a2a;
+    color: white;
+    font-size: 1.1rem;
+    min-height: 44px;
+    border-radius: 6px;
+}
+.setting-group input:focus, .setting-group select:focus {
+    outline: none;
+    border-color: #666;
+}
+.validation-error {
+    color: #f44336;
+    background: #2a2a2a;
+    border-radius: 6px;
+    padding: 12px;
+    margin-bottom: 16px;
+    font-size: 1.1rem;
+    text-align: center;
+}
+.new-game-form {
+    width: 100%;
+    max-width: 700px;
+    margin: 32px auto 0 auto;
+    background: #181818;
+    border-radius: 12px;
+    box-shadow: 0 2px 16px rgba(0,0,0,0.4);
+    padding: 32px 24px 24px 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+} 

src/components/ValidationModal.jsx

@@ -0,0 +1,32 @@
+import { h } from 'preact';
+import styles from './Modal.module.css';
+
+/**
+ * Modal for displaying validation errors.
+ * @param {object} props
+ * @param {boolean} props.open
+ * @param {string} props.message
+ * @param {Function} props.onClose
+ * @returns {import('preact').VNode|null}
+ */
+const ValidationModal = ({ open, message, onClose }) => {
+  if (!open) return null;
+  return (
+    <div className={styles['modal'] + ' ' + styles['show']} id="validation-modal" role="alertdialog" aria-modal="true" aria-labelledby="validation-modal-title">
+      <div className={styles['modal-content']}>
+        <div className={styles['modal-header']}>
+          <span className={styles['modal-title']} id="validation-modal-title">Fehler</span>
+          <button className={styles['close-button']} onClick={onClose} aria-label="Schließen">×</button>
+        </div>
+        <div className={styles['modal-body']}>
+          <div className={styles['modal-message']}>{message}</div>
+        </div>
+        <div className={styles['modal-footer']}>
+          <button className={styles['modal-button'] + ' ' + styles['cancel']} onClick={onClose} aria-label="OK">OK</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ValidationModal; 

src/components/ValidationModal.module.css

@@ -0,0 +1 @@
+/* DEPRECATED: All modal styles are now in Modal.module.css */ 

src/pages/index.astro

@@ -0,0 +1,9 @@
+---
+import "../styles/index.css";
+import App from "../components/App.jsx";
+---
+
+<!-- Main entry point for the Pool Scoring App -->
+<main class="screen-container">
+  <App client:only="preact" />
+</main>

src/styles/index.css

@@ -0,0 +1,99 @@
+/* Global resets and utility styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+body {
+    font-family: Arial, sans-serif;
+    background-color: #1a1a1a;
+    color: white;
+    min-height: 100vh;
+    overscroll-behavior: none;
+}
+input, select {
+    min-height: 44px;
+    padding: 12px;
+    font-size: 1.2rem;
+}
+
+/* Responsive adjustments for fullscreen toggle button */
+@media screen and (max-width: 480px) {
+    .fullscreenToggle {
+        bottom: 15px;
+        right: 15px;
+        width: 40px;
+        height: 40px;
+    }
+}
+
+/* Utility button for new game (global, not component-specific) */
+.new-game-button {
+    width: 100%;
+    background: #222;
+    color: #fff;
+    border: none;
+    border-radius: 0;
+    font-size: 1.4rem;
+    font-weight: 600;
+    padding: 20px 0;
+    margin-bottom: 16px;
+    cursor: pointer;
+    transition: background 0.2s, color 0.2s;
+    text-align: center;
+    display: block;
+}
+
+.new-game-button:hover {
+    background: #333;
+}
+
+/* Shared utility classes for buttons and layout */
+.btn {
+    flex: 1;
+    min-width: 100px;
+    padding: 18px;
+    color: white;
+    background: #333;
+    border: none;
+    border-radius: 6px;
+    font-size: 1.2rem;
+    font-weight: 600;
+    cursor: pointer;
+    touch-action: manipulation;
+    transition: background 0.2s, color 0.2s;
+}
+.btn:hover {
+    background: #444;
+}
+.nav-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin: 16px 0 0 0;
+}
+
+/* Modal overlay (global, not component-specific) */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal.show {
+    display: flex;
+} 

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  }
+}