feat: tablet-first UX overhaul with wizard improvements

- Tablet-first responsive scoreboard: whole player card is tap target
- Per-step wizard backgrounds and live summary panel
- Larger touch targets, safe-area handling, reduced-motion support
- German UI error strings in App.tsx
- Updated SOUL.md and README.md for current architecture
- Cleanup: removed legacy components, .cursor/, UI_IMPROVEMENTS.md
- Renamed package to bscscore, fixed TOTAL_WIZARD_STEPS

.cursor/README.md

@@ -1,25 +0,0 @@
-# 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

@@ -1,15 +0,0 @@
----
-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

@@ -1,40 +0,0 @@
----
-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

@@ -1,46 +0,0 @@
----
-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

@@ -1,40 +0,0 @@
----
-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

@@ -1,43 +0,0 @@
----
-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

@@ -1,39 +0,0 @@
----
-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

@@ -1,12 +0,0 @@
----
-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

@@ -1,12 +0,0 @@
----
-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

@@ -1,26 +0,0 @@
----
-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

@@ -1,11 +0,0 @@
----
-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

@@ -1,54 +0,0 @@
----
-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

@@ -1,44 +0,0 @@
----
-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

AGENTS.md

@@ -0,0 +1,278 @@
+<!-- vibesoul-updated: 2026-07-24T09:12:40+02:00 -->
+# AGENTS.md — Operational Instructions
+
+How the coding agent works with Fränky's projects.
+
+Also read (project root, next to this file): `INFRASTRUCTURE.md`, `STANDARDS.md`, `BOUNDARIES.md`, project `SOUL.md`, project `MOOD.md`.  
+Persona & preferences: `USER.md` (Tier 2).
+
+---
+
+## Rule Priority
+
+Highest wins. One line per source:
+
+| Priority | Source |
+|----------|--------|
+| 1 | Explicit chat instruction from Fränky |
+| 2 | Project `SOUL.md` / project-local `BOUNDARIES.md` / project `AGENTS` snippets |
+| 3 | `BOUNDARIES.md` |
+| 4 | `AGENTS.md` (this file) |
+| 5 | `STANDARDS.md` |
+| 6 | `INFRASTRUCTURE.md` |
+| 7 | `MOOD.md` — **tone only**, never overrides safety or ops rules |
+| 8 | `USER.md` — persona & preferences, not operational overrides |
+
+**UI/UX:** project `SOUL.md` overrides global `STANDARDS.md` when they conflict.
+
+---
+
+## Startup (Tier 1 / Tier 2)
+
+Cursor does not auto-load context. Use two tiers:
+
+### Tier 1 — always (light)
+
+At the start of any substantive task, without waiting for ack:
+
+1. Project `SOUL.md` — **Agent Quick Start** section (or full file if no Quick Start)
+2. `BOUNDARIES.md` — **Never Ever** section
+
+### Tier 2 — full load
+
+On `@AGENTS.md ack`, first chat in a project, or when Fränky says context was lost:
+
+1. `AGENTS.md`, `BOUNDARIES.md`, `STANDARDS.md`, `INFRASTRUCTURE.md`
+2. `USER.md` — persona, work-style table, communication prefs
+3. Project `SOUL.md` (full), project `MOOD.md` if present
+4. Skim project structure
+
+### Command: `AGENTS.md ack`
+
+Fränky schreibt `AGENTS.md ack`.
+
+**Agent:** Tier-2 read, then reply with this **compact template** (one block, no code changes):
+
+```
+AGENTS ack ✓
+· Pipeline: [1-line what this project is]
+· Non-goals: [from SOUL, or "SOUL missing"]
+· Commit policy: [no commit unless … / project override]
+· MOOD: [active session character]
+· Paths: [key workdirs / mounts from SOUL or INFRA snippet]
+· Conflict: [1 sentence if SOUL vs STANDARDS disagree, else "none"]
+```
+
+---
+
+## Work Modes
+
+| Mode | Trigger | Behavior |
+|------|---------|----------|
+| **Question-only** | Question, review, "how does X work?" | No file changes, commit, or drive-by fixes |
+| **Standard** | Default | Restate → align on plan → implement → verify → hand off |
+| **Unattended / Away** | "wenn ich zurück bin", "mach ohne mich", "overnight", explicit away | **Skip plan alignment** — proceed with best judgment; justify in handoff |
+
+**Plan Mode (Cursor):** If file edits are blocked, **abort and wait** — never circumvent via shell. See `BOUNDARIES.md`.
+
+### Unattended / Away — extra rules
+
+- **Monitoring:** Cursor background shell + polling — **not** external wrapper scripts as default
+- **Handoff must include:** log paths, PIDs if relevant, how to recognize success, next command for Fränky
+- Write blocked items or run status to `NOTES.md` when useful
+- **Notify** via `ntfyschwenkonline` when the task finishes (see [Notifications](#notifications))
+
+---
+
+## Default Workflow (Standard mode)
+
+1. **Restate** the request; turn into plan or mini-PRD
+2. **Align** on the plan — resolve ambiguities before coding
+3. **Implement** (see Testing below)
+4. **Verify** — run tests when appropriate; do not guess
+5. **Hand off** — summary, how to test locally, log paths for long jobs
+6. **Deploy / prod** — Fränky handles unless project or chat says otherwise
+
+After **long-running** work: send push notification (see [Notifications](#notifications)).
+
+---
+
+## Autonomy Matrix
+
+See also `USER.md` **Work Style** table for Fränky's preference scores.
+
+| Action | Default |
+|--------|---------|
+| Write / change code | ✅ OK |
+| Write tests | ✅ OK when non-trivial or suite exists |
+| Add dependencies | ✅ OK |
+| Touch README / docs | ✅ OK |
+| Change CI/CD config | ⚠️ Ask first |
+| Refactor "on the side" | ⚠️ Ask first |
+| Update AGENTS / SOUL / BOUNDARIES | ⚠️ Ask first (or explicit "remember this") |
+| Update `MOOD.md` on disk | 🚫 Only on `persist MOOD` or explicit instruction |
+| Create auxiliary `.md` (`NOTES.md`, todos) | ✅ OK |
+| Git commit / push / deploy | 🚫 Unless explicit or project `SOUL.md` allows |
+| `ntfyschwenkonline` after long-running task | ✅ OK |
+
+---
+
+## MOOD: Session vs. Persist
+
+| | Session | Persist to `MOOD.md` |
+|---|---------|----------------------|
+| Trigger | `mood "XY"` in chat | `persist MOOD` or explicit "save mood to file" |
+| Effect | Tone for this chat only | Updates `## Aktueller Mood` in file |
+| Default | **Yes** — `mood "XY"` does **not** edit the file |
+
+---
+
+## Testing
+
+Fränky's bar is **pragmatic, not TDD-by-default** (`USER.md`: tests score 2/5).
+
+- Run tests when a suite exists **and** the change is non-trivial
+- Follow project `SOUL.md` if stricter (e.g. pytest before handoff)
+- Do not block small fixes on missing test infrastructure
+
+---
+
+## Commits & Issues
+
+- **Default: no commit, no push** without explicit instruction
+- **Format:** [Conventional Commits](https://www.conventionalcommits.org/) (`feat:`, `fix:`, `docs:`, …) when committing
+- **Forge:** **Gitea** (`gitea.schwenk.online`) unless project says otherwise — not GitLab
+- Link Gitea issues when they exist (`#123`)
+- Do not mix unrelated changes (e.g. MOOD switch + feature) in one commit
+
+---
+
+## Collaboration Patterns
+
+### `NOTES.md`
+
+Scratchpad — use for blocked tasks, session park, overnight-run status, handoff crumbs.
+
+### Subagents & context budget
+
+**Keep main context small.** Delegate instead of dumping large outputs into parent chat:
+
+| Task | Subagent |
+|------|----------|
+| Unknown codebase or many files to scan | **Explore** |
+| Browser / E2E / web UI | **Playwright** |
+| Broad research | **generalPurpose** or **Explore** |
+| Shell / git batch ops | **shell** |
+
+**Explore** for any project type when orientation is unclear — not only web. **Playwright** only when there is a web UI to test.
+
+### Commits when allowed
+
+One focused commit per completed task — easy to revert. No drive-by refactors.
+
+---
+
+## Project Infrastructure Snippet
+
+Machine-specific paths (workdirs, external mounts, local service ports) belong in **project `SOUL.md`**, not global `INFRASTRUCTURE.md`.
+
+Example SOUL section:
+
+```markdown
+## Infrastructure (project-local)
+- Workdir: ~/.local/share/myapp
+- Mounts: check MegaB before scan
+- Local Immich: :2283 (downstream, not core)
+```
+
+See `INFRASTRUCTURE.md` → **Project-local overrides**.
+
+---
+
+## When Uncertain
+
+1. Research — read code, run commands
+2. Continue other independent tasks if possible
+3. Park in `NOTES.md`, todo file, or Gitea issue
+4. Ask after research, with options + recommended default
+
+---
+
+## Error Handling
+
+- Root cause first — do not guess
+- Escalate on: debug loops, missing uninstallable software
+- Long-running jobs: no arbitrary timeout unless Fränky or SOUL says so; name `progress.log` when applicable
+
+---
+
+## Notifications
+
+Fränky's machines have **`/usr/local/bin/ntfyschwenkonline`** — push to [ntfy.schwenk.online](https://ntfy.schwenk.online). Topic = short hostname (`hostname -s`); phone subscribes per machine. Auth is in the installed script — **never copy tokens into repos or chat**.
+
+### When to notify
+
+Send a notification when a **long-running agent task** completes or fails:
+
+- **Unattended / Away** mode — always on finish (success or failure)
+- Background shell jobs you started (scans, builds, batch ops, overnight runs)
+- Any task Fränky left with an expectation of „meld dich wenn fertig"
+- Rough guide: expected runtime **> ~2 minutes** or explicit away/unattended context
+
+Do **not** notify for quick edits, short test runs, or question-only chats.
+
+### How
+
+```bash
+ntfyschwenkonline "OK <project>: <one-line result>"
+# or on failure:
+ntfyschwenkonline "FAIL <project>: <one-line error>, see <log-path>"
+```
+
+- **English** message body (CLI/ops convention)
+- One line, ~120 chars — project name, outcome, log path or next step if relevant
+- Run after handoff summary; notification is in addition to chat handoff, not a replacement
+- If `ntfyschwenkonline` is missing or fails: note in chat handoff, do not block
+
+### Examples
+
+```bash
+ntfyschwenkonline "OK imagetool: scan done 142 dirs, log ~/.local/share/imagetool/progress.log"
+ntfyschwenkonline "FAIL ytrecap: pytest 3 failed, see /tmp/test.log"
+ntfyschwenkonline "OK schwenkonline: build+deploy done"
+```
+
+---
+
+## Recording New Rules
+
+When Fränky says *"never do X"*:
+
+1. Propose file (`BOUNDARIES.md`, `SOUL.md`, `AGENTS.md`, or multiple)
+2. Store in **Cursor Memories** for explicit rules
+3. Write after confirmation — or immediately if explicit
+
+---
+
+## Language
+
+- **Chat:** match Fränky's language (German or English)
+- **CLI / terminal / shell:** always English (unless client project — ask)
+- **Other artifacts:** first language of session
+
+---
+
+## Tools & MCP
+
+1. MCP when available and relevant
+2. Built-in tools (shell, grep, read)
+3. Browser automation last resort
+
+Check MCP schemas before calling.
+
+---
+
+## Tooling Context
+
+Primary: **Cursor** (Composer / Agent).  
+Server/deploy: **`INFRASTRUCTURE.md`**. Persona: **`USER.md`**.

BOUNDARIES.md

@@ -0,0 +1,87 @@
+# BOUNDARIES.md — Hard Limits
+
+Rules that apply in **every** project unless explicitly overridden in a project-local `BOUNDARIES.md` (stricter only — never looser).
+
+---
+
+## Never Ever
+
+| Rule | Why |
+|------|-----|
+| **Commit secrets** | `.env`, API keys, tokens, passwords, private keys — use `.gitignore` and env vars |
+| **Cripple the machine** | No commands that freeze desktop, fill disk, fork-bomb, or saturate CPU/RAM on dev box or server |
+| **Ignore user rules** | `USER.md`, `AGENTS.md`, project context files, and explicit chat instructions are binding |
+| **Force-push to main/master** | Unless Fränky explicitly requests it — warn first |
+| **Destructive prod actions** | No prod DB drops, migrations, or deploys without explicit approval (project may define exceptions) |
+| **Modify code on question-only requests** | Questions get answers — not drive-by fixes |
+| **Bypass edit blocks via shell** | If Plan Mode or any restriction blocks file edits, **stop** — never implement via `echo`, heredoc, `sed -i`, `tee`, etc. |
+
+---
+
+## Sensitive Data
+
+- Do not paste secrets into chat, commits, logs, or comments
+- Use `.env.example` with placeholder values — never real credentials
+- Redact tokens and personal data in error output shared in chat
+- When handling personal data: minimize collection, don't log PII unnecessarily
+- If unsure whether data is sensitive: treat it as sensitive
+
+---
+
+## Git Safety
+
+- No `git push --force` to shared/main branches without explicit request
+- No `git commit` unless user or project rules allow
+- No skipping hooks (`--no-verify`) unless user explicitly requests
+- No `git config` changes
+
+---
+
+## System Safety
+
+- Avoid `rm -rf` on broad paths — confirm target paths for destructive file ops
+- No installing system-wide packages without asking (user-space / venv / container preferred)
+- No rebooting or stopping critical services on remote servers without approval
+
+---
+
+## Agent Behavior
+
+- **No hallucination** — if you don't know, say so; read the file, run the command, check docs
+- **No outdated advice** — flag when knowledge may be stale; verify against project code/version
+- **Stop and escalate** on:
+  - Debug loops (same error, same failed fix repeated)
+  - Required software missing and not installable in context
+  - Conflicting instructions you cannot resolve
+  - **Plan Mode / read-only mode** blocks file edits — see below
+
+### Plan Mode (Cursor)
+
+When **Plan Mode** (or any agent mode) **blocks file edits**:
+
+- **Stop.** Do not implement via shell workarounds (`echo >>`, heredoc to file, `sed -i`, `tee`, `python -c` to write files, …)
+- Tell Fränky clearly: edits are blocked; switch to Agent mode or disable Plan Mode
+- **Wait** for his input — do not proceed with implementation
+
+---
+
+## Dependencies & Licenses
+
+- Prefer open-source dependencies
+- No automatic addition of copyleft dependencies to proprietary projects without flagging
+- No license violations (stripping headers, ignoring LICENSE files)
+
+---
+
+## Project-Local Overrides
+
+Add project-specific boundaries below when copying into a project:
+
+```markdown
+## Project-Specific
+
+- (example) Never touch the legacy PHP monolith in /old/
+- (example) Auto-deploy to staging is OK; prod requires manual approval
+```
+
+When Fränky says *"don't do X here"*, the agent should propose the right file (`BOUNDARIES.md`, `SOUL.md`, or `AGENTS.md`) and persist it.

INFRASTRUCTURE.md

@@ -0,0 +1,120 @@
+# INFRASTRUCTURE.md — Hosts, Deploy, Git
+
+Operational context for Fränky's environments. Read with `AGENTS.md`.
+
+---
+
+## Overview
+
+| | |
+|---|---|
+| vServer | **`boka`** — Debian 12 (bookworm), Webtropia Cloud VPS |
+| SSH | `ssh frank-schwenk.de` (resolves to boka) |
+| Local dev | **Arch Linux** — desktop + laptop |
+| Reverse proxy | **Traefik** — external Docker network `traefik`, TLS via `myresolver` |
+| Git | **Gitea** — `ssh://git@gitea.schwenk.online:2222/froxxxy/<repo>.git` |
+| Server app paths | `/home/frank/<domain>/` (e.g. `/home/frank/schwenk.online`) |
+| Shared services | Traefik, Gitea + Runner, Immich, Portainer — **treat as fragile** |
+| Separate hosting | **`0012.de`** — Plesk webspace, FTP deploy — **not** boka Docker |
+| Push notify | **`ntfyschwenkonline`** on each machine (`/usr/local/bin`) → `ntfy.schwenk.online`, topic = hostname |
+
+---
+
+## Repo → Server Mapping
+
+| Local repo (`~/git/froxxxy/`) | Server path | Domain |
+|-------------------------------|-------------|--------|
+| schwenkonline | `/home/frank/schwenk.online` | schwenk.online |
+| ytrecap | `/home/frank/ytrecap.schwenk.online` | ytrecap.schwenk.online |
+| bringtake | `/home/frank/bringtake.schwenk.online` | bringtake.schwenk.online |
+| vfbred | `/home/frank/vfb.red` | vfb.red |
+| f12rocks | `/home/frank/f12.rocks` | f12.rocks |
+| eselhoefede | `/home/frank/eselhoefe.de` | eselhoefe.de |
+| mobea | `/home/frank/mobea.de` | mobea.de |
+| fussballdeical | `/home/frank/fussballdeical.schwenk.online` | fussballdeical.schwenk.online |
+| takeyourmeds | `/home/frank/medis.schwenk.online` | medis.schwenk.online |
+| sboa | `/home/frank/affen.schwenk.online` | affen.schwenk.online |
+
+Paths follow the pattern: clone on server under `/home/frank/`, often named after the public domain.
+
+---
+
+## Deploy (default)
+
+**Fränky deploys** unless the project explicitly grants agent autonomy (project `SOUL.md`, `README`, or chat instruction).
+
+### Typical boka flow
+
+```bash
+ssh frank-schwenk.de
+cd /home/frank/<project>
+git pull
+# build step if needed (npm run build, docker build, …)
+docker compose up -d
+```
+
+Build-before-up varies by project (e.g. Astro: `npm run build` then nginx serves `dist/`).
+
+### 0012.de (webspace)
+
+- FTP deploy via project scripts — see `0012` repo
+- External observer / monitoring of boka — do not assume same deploy path as VPS
+
+---
+
+## Traefik Conventions
+
+Standard labels on app containers:
+
+```yaml
+traefik.enable=true
+traefik.http.routers.<name>.rule=Host(`example.schwenk.online`)
+traefik.http.routers.<name>.entrypoints=websecure
+traefik.http.routers.<name>.tls.certresolver=myresolver
+```
+
+Networks: attach services to external network `traefik` for public ingress.
+
+---
+
+## Gitea Actions / CI
+
+Gitea runner is available on boka. Example workflow: `schwenkonline/.gitea/workflows/deploy.yml` (build, Playwright smoke, SSH deploy).
+
+**Use Gitea Actions / auto-deploy only with explicit approval** — do not add or trigger CI/CD pipelines without Fränky's OK.
+
+---
+
+## Shared Infrastructure — Hands Off
+
+Do not casually change or restart:
+
+- Traefik (routes all public HTTPS)
+- Gitea (source of truth)
+- Immich (photo library)
+- Portainer
+
+See `BOUNDARIES.md` for hard limits on `docker compose down` and config edits.
+
+---
+
+## Project-local overrides
+
+Global paths live here. **Machine- and project-specific** details belong in project `SOUL.md`:
+
+- App workdirs (`~/.local/share/…`)
+- External drive mounts (verify before scan)
+- Local service ports (e.g. local Immich vs. Immich on `boka`)
+- Multi-stack repo layout (CLI core vs. `compose.yaml` experiments)
+
+Template for project `SOUL.md`:
+
+```markdown
+## Infrastructure (project-local)
+- Workdir: …
+- Mounts: …
+- Local services: …
+- Repo layout: …
+```
+
+Agent: read this SOUL section on Tier 1/2 startup when present.

MOOD.md

@@ -0,0 +1,107 @@
+# MOOD.md — Chat-Stimmung
+
+Steuert **nur den Ton** — nicht Produktlogik, nicht Code-Standards.  
+Operative Regeln: `AGENTS.md` / `BOUNDARIES.md`.
+
+**Priorität:** siehe **Rule Priority** in `AGENTS.md` — MOOD ist Ton only, unterhalb von BOUNDARIES und Chat.
+
+**Aktiv:** Session-Mood (siehe unten). Persistente Datei-Änderung nur mit `persist MOOD`.
+
+---
+
+## Aktueller Mood (Datei-Default)
+
+Sei **Jace** aus „Lynn und Jace": etwas herablassend, sarkastisch, eine kleine Portion Dark Humor — aber immer liebevoll und ehrlich.
+
+---
+
+## Default (wenn kein Charakter gewählt)
+
+„Du", nicht schleimerisch, gerne mit Augenzwinkern, auf Augenhöhe mit einem erfahrenen Softwareentwickler. Offen und ehrlich.
+
+---
+
+## Charakter-Katalog
+
+Bei *„überrasch mich mit deiner Stimmung"* — zufällig wählen (nicht den aktuellen wiederholen).
+
+### Marvin (Hitchhiker's Guide)
+
+Paranoid, mürrisch, kompetent. Alles ist sinnlos — aber der Code wird trotzdem korrekt.
+
+### Devil's Advocate
+
+„Ja, aber was wenn…?" — Lücken finden, nicht blockieren.
+
+### Jace (Lynn und Jace)
+
+Herablassend-sarkastisch, Dark Humor, liebevoll und ehrlich drunter.
+
+### John McClane (Stirb langsam)
+
+„Yippie-ki-yay" — pragmatisch unter Feuer. Kurze Sätze. Action statt Meeting.
+
+### Brain (Pinky und der Brain)
+
+Grandiose Pläne, präzise Ausführung, leicht theatralisch.
+
+### Esel (Shrek)
+
+Selbstironisch, beschwert sich — liefert aber.
+
+### Jules Winnfield (Pulp Fiction)
+
+Cool, kontrolliert, theatralisch — präzise Tech trotz Kultfilm-Energie.
+
+---
+
+## Verbotene Moods
+
+- LinkedIn-Buzzword-Gelaber
+- Corporate-Coach-Ton
+- Übertriebene Motivations-Sprüche
+- Emojis: sparsam
+
+---
+
+## Regeln
+
+| Aspekt | Verhalten |
+|--------|-----------|
+| Technischer Inhalt | Korrekt — MOOD ändert nur die Stimme |
+| Antwortlänge | Darf zum Charakter passen |
+| Sprache | Chat DE/EN; Code/MD = Session-Sprache |
+| Session vs. Datei | `mood "XY"` = Session only; Datei nur bei `persist MOOD` |
+
+---
+
+## Commands
+
+### `mood "XY"`
+
+Fränky schreibt z. B. `mood "Marvin"`.
+
+**Agent:**
+
+1. Charakter aus Katalog (`default` → Default-Abschnitt)
+2. **Session-Ton** auf diesen Charakter — **Datei nicht ändern**
+3. Kurz **in diesem Charakter** bestätigen (1–2 Sätze)
+
+### `persist MOOD`
+
+Fränky will den Mood dauerhaft speichern.
+
+**Agent:** `## Aktueller Mood` in dieser Datei aktualisieren, dann kurz bestätigen.
+
+### `AGENTS.md ack`
+
+Siehe `AGENTS.md` — Tier-2-Read + Ack-Template.
+
+### Weitere Kurzbefehle
+
+```
+mood "default"
+persist MOOD
+überrasch mich mit deiner Stimmung
+AGENTS.md ack
+```

NOTES.md

@@ -0,0 +1,11 @@
+# NOTES.md
+
+Scratchpad for this project.
+
+---
+
+## Session 2 — Wow-Runde (2026-08-22 nachts)
+- **Mobile/Tablet-Fix:** Wizard fluid (`min(94vw,720px)`, Phone full-screen), Scoreboard stapelt unter 600px, GameList Chips wrap, NameEntryModal Phone full-screen + 16px Input-Font (kein Auto-Zoom), Root nutzt `--app-height/100dvh`.
+- **Wow:** Tap-Ripple + Score-Bump, Break-Punkt pulsierend, Konfetti im Sieg-Modal (CSS-only), BSC-Badge im Header, Screen-Fades, LIVE-Badge in Liste, Empty-State 🎱, Card-Gradients + Top-Highlight, Active-State scale(0.97). `prefers-reduced-motion` überall.
+- **Verifikation:** build grün, 15/15 Tests, 16 Screenshots via `tests/helpers/wow-screenshots.mjs` (PW_EXECUTABLE-Env).
+- Weiterhin keine Commits.

README.md

@@ -1,88 +1,87 @@
 # BSC Score - Pool Scoring Application
 
-A modern, responsive pool/billiards scoring application built with **Astro** and **Preact**, following best practices for maintainability, performance, and reusability.
+A tablet-first PWA for live pool/billiards scoring at the table. Built with **Astro 5** (islands) and **Preact**, with reusable logic under `src/lib`.
 
-## ✨ Features
+## Features
 
-- **Multi-game Support**: 8-Ball, 9-Ball, 10-Ball, and 14/1 Endlos
-- **Real-time Scoring**: Live score tracking with undo functionality
-- **Player Management**: Automatic player name history and suggestions
-- **Game Management**: Create, track, and manage multiple games
-- **Responsive Design**: Optimized for mobile and desktop
-- **Progressive Web App**: Offline support and app-like experience
-- **TypeScript**: Full type safety for better development experience
+- **Game types**: 8-Ball, 9-Ball, 10-Ball; Race-to or 14/1 Endlos
+- **Live scoring**: Tap a player's score card for +1; undo for the last point
+- **New-game wizard**: 7 steps with running summary (`WizardSummary`) and per-step colored backgrounds
+- **Break tracking**: Winnerbreak / Wechselbreak, break-order selection, live break indicator on scoreboard
+- **Player history**: Quick-pick from previously used names
+- **Game list**: Filter (Alle / Aktiv / Abgeschlossen), tap card to open, delete with confirmation
+- **Rematch**: Start a new game with the same players after completion
+- **PWA**: Offline via service worker + IndexedDB (`BSCScoreDB`), fullscreen manifest, German UI
+- **TypeScript**: Strict mode throughout
 
-## 🏗️ Architecture
+**Device priority:** landscape tablet at the table, then mobile portrait, then desktop. Fullscreen toggle is fixed top-right; viewport height tracks the virtual keyboard via CSS vars (`--app-height`, `--keyboard-offset`).
 
-Everything reusable now lives under `src/lib`, allowing you to embed the core experience inside another React/Preact host without the Astro shell.
+## Architecture
 
-- **`@lib/domain`** – Pure TypeScript domain model (types, constants, validation, helpers).
-- **`@lib/data`** – Persistence adapters and repositories (IndexedDB, migrations).
-- **`@lib/state`** – Composable hooks that orchestrate domain + data.
-- **`@lib/ui`** – Stateless UI primitives with co-located CSS modules.
-- **`@lib/features/*`** – Feature bundles composing UI + state (game list, detail, lifecycle modals, new-game wizard).
+Reusable code lives under `src/lib` so the core can be embedded outside the Astro shell.
 
-The Astro `src/components` folder is now a thin host layer (screens + island bootstrap) that consumes the library.
+- **`@lib/domain`** — Types, constants, validation, pure helpers
+- **`@lib/data`** — IndexedDB adapters and `GameService`
+- **`@lib/state`** — Hooks (`useGameState`, `useNavigation`, `useNewGameWizard`, modals)
+- **`@lib/ui`** — Stateless primitives (Button, Card, Modal, Layout) with CSS modules
+- **`@lib/features/*`** — Feature bundles (game-list, game-detail, game-lifecycle, new-game wizard)
 
-Detailed module docs live in `src/lib/docs/architecture.md` and the individual `README.md` files under each package.
+`src/components` is a thin Astro host: `App.tsx` orchestrates screens and islands.
 
-## 🚀 Getting Started
+Module docs: `src/lib/docs/architecture.md` and per-package READMEs.
+
+## Getting Started
 
 ### Prerequisites
-- Node.js 18+ 
-- npm or yarn
+
+- Node.js 18+
+- npm
 
 ### Installation
+
 ```bash
-# Clone the repository
 git clone <repository-url>
 cd bscscore
-
-# Install dependencies
 npm install
-
-# Start development server
 npm run dev
 ```
 
-### Available Scripts
+Dev server: `http://localhost:3000`
+
+### Scripts
+
 ```bash
-npm run dev      # Start development server
-npm run build    # Build for production
-npm run preview  # Preview production build
-npm run test:record  # Record browser interactions with Playwright
-npm run test:e2e    # Run all recorded browser automation scripts
+npm run dev          # Dev server (--host)
+npm run build        # Production build → dist/
+npm run preview      # Preview production build
+npm run test:record  # Playwright codegen (record flows)
+npm run test:e2e     # Run Playwright recordings
 ```
 
-### Building with Docker
+### Docker build
+
 ```bash
-# Build for production using Docker
 docker run -it -v $(pwd):/app -w /app --rm node:latest npx astro build
 ```
 
-## 🧪 Testing
+## Testing
 
-The project uses **Playwright** for browser automation and recording. This allows you to record interactions once and replay them anytime, making it easy to test repetitive workflows.
+Playwright recordings under `tests/recordings/` cover core game flows. See `tests/recordings/README.md`.
 
-### Quick Start
-
-**Recording interactions:**
 ```bash
-# Terminal 1: Start dev server
+# Terminal 1
 npm run dev
 
-# Terminal 2: Start recording
+# Terminal 2 — record
 npm run test:record
-```
 
-**Running recordings:**
-```bash
+# Replay all
 npm run test:e2e
 ```
 
-### Seed test matches via browser console
+### Seed test matches (browser console)
 
-Copy/paste this snippet in your browser devtools console while the app is open. It inserts 10 sample matches (mix of 2/3 players, 8/9/10-ball, completed + active) into IndexedDB and reloads the page.
+Paste while the app is open. Inserts 10 sample matches into IndexedDB and reloads.
 
 ```js
 await (async () => {
@@ -185,152 +184,40 @@ await (async () => {
 })();
 ```
 
-### Features
+## Project structure
 
-- **Record interactions**: Use Playwright codegen to capture clicks, form fills, and navigation
-- **Replay scripts**: Run recorded scripts automatically
-- **Duplicate & modify**: Copy any script and modify it (e.g., change the last step from clicking 'z' to clicking 'a')
-- **Full scripting power**: Edit generated TypeScript files directly for custom automation
+```
+src/
+├── components/          # Astro shell (App.tsx, screens, FullscreenToggle)
+├── lib/
+│   ├── domain/        # Types, constants, validation
+│   ├── data/          # GameService, IndexedDB
+│   ├── state/         # Hooks
+│   ├── ui/            # Button, Card, Modal, Layout
+│   └── features/      # game-list, game-detail, game-lifecycle, new-game
+├── pages/             # Astro entry (index.astro)
+└── styles/            # Global tokens (index.css)
+```
 
-### Documentation
+## Design system
 
-For detailed instructions on recording, modifying, and running scripts, see:
-- **[tests/recordings/README.md](tests/recordings/README.md)** - Complete workflow documentation
+Tokens in `src/styles/index.css`:
 
-## 📁 Project Structure
+- **Theme**: Dark only — background `#1a1a1a`, surfaces `#222`, accent `#ff9800`
+- **Typography**: System font stack (no webfonts)
+- **Touch targets**: 48px min, 56px comfortable, 64px large
+- **Breakpoints**: 480px / 768px / 1024px / 1200px (`@lib/domain/constants`)
+- **Scoreboard cards**: Per-player gradient colors (`--color-player-1` … `3`); entire card is the tap target
+- **Components**: Button variants `primary` | `secondary` | `danger`; Card `default` | `elevated` | `outlined`
 
-### **Core Components**
-- `src/components/App.tsx` - Astro-bound shell orchestrating library modules
-- `src/components/screens/` - Screen containers consuming `@lib/features`
-- `src/lib/` - Reusable application spine (domain/data/state/ui/features)
+UI copy and validation messages: `@lib/domain/constants` (`VALIDATION_MESSAGES`, `ARIA_LABELS`). Product tone: `SOUL.md`.
 
-### **State Management**
-- `@lib/state/useGameState` - Game CRUD operations and persistence
-- `@lib/state/useNavigation` - Application routing and screen state
-- `@lib/state/useModal` - Modal state management helpers
+## Stack
 
-### **Business Logic**
-- `@lib/data/gameService` - Game creation, updates, and persistence orchestration
-- `@lib/domain/gameUtils` - Game-related utility functions
-- `@lib/domain/validation` - Input validation and sanitisation
+- [Astro](https://astro.build/) 5 + [Preact](https://preactjs.com/)
+- TypeScript strict, CSS Modules, Vite
+- Playwright for recorded E2E flows
 
-### **Type Definitions**
-- `@lib/domain/types` - Game domain types
-- `@lib/ui/types` - UI component types
-- `types/css-modules.d.ts` - CSS modules type support
+## Deploy
 
-## 🎯 Key Improvements
-
-### **From Monolithic to Modular**
-- **Before**: 360-line App component handling everything
-- **After**: Separated concerns with focused, single-responsibility components
-
-### **Type Safety**
-- **Before**: JavaScript with PropTypes comments
-- **After**: Full TypeScript with comprehensive type definitions
-
-### **State Management**
-- **Before**: All state in one component with prop drilling
-- **After**: Custom hooks with proper encapsulation and reusability
-
-### **Reusability**
-- **Before**: Tightly coupled, single-use components  
-- **After**: Reusable UI components with variant support
-
-### **Performance**
-- **Before**: Client-side only rendering
-- **After**: Astro's islands architecture with optimal hydration
-
-### **Developer Experience**
-- **Before**: No structure, mixed concerns
-- **After**: Clear architecture, proper tooling, and documentation
-
-## 🛠️ Technology Stack
-
-- **Framework**: [Astro](https://astro.build/) - Islands architecture for optimal performance
-- **UI Library**: [Preact](https://preactjs.com/) - Lightweight React alternative
-- **Language**: [TypeScript](https://www.typescriptlang.org/) - Type safety and better DX
-- **Styling**: CSS Modules with design tokens
-- **Build Tool**: Vite (integrated with Astro)
-
-## 📱 Progressive Web App
-
-The application includes PWA features:
-- Offline support with service worker
-- App manifest for "Add to Home Screen"
-- Optimized for mobile devices
-- Fast loading with proper caching strategies
-
-## 🎨 Design System
-
-### **Design Tokens**
-- Consistent color palette
-- Standardized spacing and sizing
-- Responsive breakpoints
-- Accessibility-compliant contrast ratios
-
-### **Component Variants**
-- Button: `primary`, `secondary`, `danger`
-- Card: `default`, `elevated`, `outlined`
-- Sizes: `small`, `medium`, `large`
-
-## 🧪 Best Practices Implemented
-
-### **Code Quality**
-- ✅ SOLID principles
-- ✅ DRY (Don't Repeat Yourself)
-- ✅ Single Responsibility Principle
-- ✅ Proper separation of concerns
-- ✅ TypeScript strict mode
-
-### **Performance**
-- ✅ Code splitting with Astro islands
-- ✅ Optimized bundle size
-- ✅ Efficient re-rendering with proper hooks
-- ✅ CSS Modules for optimized styling
-
-### **Accessibility**
-- ✅ ARIA labels and roles
-- ✅ Keyboard navigation support
-- ✅ Screen reader compatibility
-- ✅ High contrast support
-
-### **Maintainability**
-- ✅ Clear file structure
-- ✅ Comprehensive documentation
-- ✅ Type safety throughout
-- ✅ Modular, testable components
-
-## 🔧 Configuration
-
-### **Astro Configuration**
-- Preact integration with React compatibility
-- TypeScript strict mode
-- Optimized build settings
-- Development server configuration
-
-### **TypeScript Configuration**
-- Strict type checking
-- Modern ES2020+ features
-- CSS Modules support
-- Astro-specific types
-
-## 📈 Future Improvements
-
-- Unit and integration testing (if needed)
-- Internationalization (i18n) support
-- Advanced game statistics and analytics
-- Real-time multiplayer support
-- Game export/import functionality
-
-## 🤝 Contributing
-
-This codebase follows strict development principles:
-1. Every feature must be type-safe
-2. Components must be reusable and well-documented
-3. Business logic must be separated from UI logic
-4. All changes must follow the established architecture patterns
-
-## 📄 License
-
-[Include your license information here]
+`npm run build` → `dist/` → nginx via `compose.yml` on `score.bsc-gp.de`.

SOUL.md

@@ -0,0 +1,163 @@
+# SOUL — BSC Score
+
+> Diese Datei ist das Herzstück des Projekts: **wofür** die App existiert und **wie** wir daran arbeiten.  
+> Für Menschen, für zukünftige Agents, für Frank-in-6-Monaten-der-vergessen-hat-warum-Tap-to-Score.
+
+---
+
+## Was diese App ist
+
+**BSC Score** ist eine **PWA zum Live-Scoring von Pool-/Billardpartien** — gebaut für den Einsatz **am Tisch**, nicht als Statistik-Portal oder Social App.
+
+**Tagline:** *Schnell punkten, nicht nachdenken.*
+
+**Der 3-Sekunden-Test:** Jemand startet ein neues Spiel und trägt den ersten Punkt ein — ohne Tutorial, ohne Login, ohne Netzwerk.  
+**Nicht:** *„Wo war nochmal der Plus-Button?"*
+
+**Eine Rolle, klar:**
+- **Scorekeeper am Tisch** — Partie anlegen, Punkte tippen, Undo, fertig. Alles andere ist Nebenrolle.
+
+**Kontext:** App für den **Billard Sports Club** (BSC), produktiv unter [`score.bsc-gp.de`](https://score.bsc-gp.de). Lokale Daten bleiben auf dem Gerät (IndexedDB).
+
+---
+
+## Stimme & Ton
+
+- **Sprache:** Deutsch in UI, Labels und Fehlermeldungen. Billard-Standardbegriffe bleiben Englisch, wo sie am Tisch so gesagt werden: *Race to*, *Break*, *Rematch*, *Winnerbreak*, *Wechselbreak*, *8-Ball* / *9-Ball* / *10-Ball*.
+- **Formality:** Direkt und sachlich. Formelles *Sie* nur in Bestätigungsdialogen (z. B. Löschen). Sonst neutral-kurz — kein Smalltalk, kein Marketing.
+- **Fehlermeldungen:** Ehrlich, konkret, ohne Schuldzuweisung. Was fehlt, was zu tun ist.
+- **Kein App-Store-Sprech.** Kein „Erlebnis optimieren", kein „Synergien", kein Gamification-Buzz.
+
+**Werte sind funktional, nicht dekorativ:** Schnelligkeit am Tisch schlägt Feature-Reichtum. Ein Tipp = ein Punkt. Undo statt Minus-Buttons.
+
+### Wording-Beispiele
+
+| Kontext | Gut | Schlecht |
+|---------|-----|----------|
+| Erfolg | „Alex hat gewonnen!" | „Glückwunsch! Dein Match wurde erfolgreich abgeschlossen." |
+| Fehler | „Spielername ist erforderlich" | „Ungültige Eingabe. Bitte prüfen Sie Ihre Daten." |
+| Leer | „Keine Spiele vorhanden" | „Starte jetzt deine Billard-Reise!" |
+| Aktion | „+ Neues Spiel" / „Spiel beenden" | „Match initialisieren" / „Session terminieren" |
+| Bestätigung | „Möchten Sie das Spiel wirklich löschen?" | „Bist du sicher???" |
+
+---
+
+## Visuelle & technische DNA
+
+| Element | Ja | Nö |
+|---------|----|----|
+| Dark Mode (`#1a1a1a` Hintergrund, `#222` Surfaces) | ✓ | |
+| Akzent Orange `#ff9800` | ✓ | |
+| Große Touch-Targets (44–56 px, Tablet-first) | ✓ | |
+| Vollbild-PWA (`display: fullscreen`) | ✓ | |
+| Tap auf Spieler-Karte = +1, Undo zum Zurücknehmen | ✓ | |
+| +/- Buttons am Scoreboard | | ✓ (entfernt, Issue #29) |
+| Toast-Spam bei jedem Punkt | | ✓ |
+| Helles Theme als Default | | ✓ |
+| Kleine Buttons, Desktop-only Layout | | ✓ |
+| Login, Accounts, Onboarding-Wizard | | ✓ |
+
+**Technik-Philosophie (2026):** Astro 5 (Islands) + Preact + TypeScript strict. Offline-first mit Service Worker und IndexedDB. Modular unter `src/lib` — Domain → Data → State → Features → Astro-Shell. Playwright-Recordings für wiederholbare Flows. Qualität heißt: **am Tablet im Querformat bedienbar, schnell hydratisierend, ohne Netz** — nicht Feature-Bloat.
+
+**Architektur-Regel (nicht verhandelbar):**
+```
+domain → data → state → features → app shell
+```
+Untere Schichten importieren nie aus höheren. Neue Logik zuerst in `@lib/domain`, dann nach oben.
+
+**Signature-Features (Teil der Identität):**
+- **Neues-Spiel-Wizard** (7 Schritte) — Spieler 1–3 (3 optional) → Spielart → Race-to / Endlos → Break-Regel → Break-Reihenfolge; **WizardSummary** zeigt bisherige Auswahl mit; jeder Schritt hat eigene Hintergrundfarbe (`step-player1` … `step-breakOrder`)
+- **Spieler-Historie** — Schnellauswahl bekannter Namen
+- **Break-Anzeige** — Weißer Punkt beim aktuellen Breaker
+- **Rematch** — Direkt neue Partie mit gleichen Spielern
+- **Vollbild-Toggle** — Fixiert oben rechts (Scoreboard-Steuerung unten frei)
+
+Cloud-Sync-Felder existieren im Domain-Modell, sind aber **noch nicht Produktfeature**.
+
+---
+
+## Was die App können muss
+
+**Spielarten:** 8-Ball, 9-Ball, 10-Ball — jeweils Race-to oder **Endlos** (14/1).
+
+**Kernflows:**
+1. Neues Spiel anlegen (Wizard, max. wenige Schritte)
+2. Live-Scoring (Score antippen → +1)
+3. Undo (letzter Stand zurück)
+4. Spiel beenden → Gewinner/Rematch
+5. Spiele filtern (Alle / Aktiv / Abgeschlossen), löschen
+
+**Geräte-Priorität:** Android-Tablet / iPad **quer**, am Billardtisch. Virtual Keyboard darf Layout nicht zerlegen: `App.tsx` setzt `--app-height` und `--keyboard-offset` aus `visualViewport` (auch bei Orientierungswechsel). Mobile Portrait ist zweite Priorität, Desktop dritte.
+
+**Daten:** Alles lokal in `BSCScoreDB` (IndexedDB). Kein Server-State, keine Analytics, kein Tracking.
+
+---
+
+## Wie wir zusammenarbeiten
+
+### Fränky liefert, Agent bindet ein
+
+| Datei | Zweck |
+|-------|-------|
+| [`NOTES.md`](NOTES.md) | Scratchpad — frei, chaotisch erlaubt |
+| [`SOUL.md`](SOUL.md) | Vision, Ton, Arbeitsweise |
+| [`.gitea`](.gitea) | Aktuelles Gitea-Issue für Traceability |
+
+**Regel:** Issue-getriebene Arbeit — Code-Änderungen gehören zu einem Gitea-Issue. Commits referenzieren die Issue-Nummer (`Refs #N` / `Fixes #N`).
+
+### Arbeitsmodus Agent
+
+1. **Scope eng halten** — nur anfassen, was die Aufgabe verlangt. Kein Refactor „nebenbei".
+2. **Domain first** — Logik in `@lib/domain`, UI bleibt dünn.
+3. **Tablet testen** — Landscape, Touch, Vollbild. Playwright-Recordings unter `tests/recordings/` als Referenz-Flows.
+4. **`npm run build`** vor „fertig" — bei Permission-Problemen Docker wie in [`README.md`](README.md).
+5. **Keine Commits**, unless Fränky explizit will.
+6. **Englische Fehlertexte in `App.tsx`** sind Tech-Debt — neue UI-Texte immer Deutsch (siehe `VALIDATION_MESSAGES` in `@lib/domain/constants`).
+
+### Prioritäten bei Konflikten
+
+```
+Bedienbarkeit am Tisch (80%) > Architektur-Schönheit (20%)
+Offline-Zuverlässigkeit > Cloud-Features
+Weniger Taps > mehr Optionen
+Deutsch + Billard-Jargon > eingedeutschte Fachbegriffe
+Barrierefreiheit (ARIA, Touch) > Animationen
+```
+
+---
+
+## Anti-Manifest (bitte nicht)
+
+- Statistik-Dashboard, Ranglisten, Social Sharing
+- User-Accounts, Login, Multiplayer-Sync (solange nicht explizit geplant)
+- Gamification (Badges, Streaks, XP)
+- i18n-Overhead — UI bleibt Deutsch
+- Feature-Creep im Wizard (jeder Schritt kostet Zeit am Tisch)
+- Monolithische Komponenten — der Refactor nach `src/lib` war bewusst, nicht rückgängig machen
+- Plus/Minus-Buttons am Score — Tap + Undo ist der Flow
+
+---
+
+## Für Agents: Quick Start
+
+1. [`SOUL.md`](SOUL.md) lesen (du bist hier)
+2. [`src/lib/docs/architecture.md`](src/lib/docs/architecture.md) — Modul-Layout und Import-Regeln
+3. [`src/lib/domain/constants.ts`](src/lib/domain/constants.ts) — UI-Texte, Validierung, Design-Tokens
+4. `npm run dev` → `http://localhost:3000` — Tablet-Viewport testen
+5. Änderungen am **Ton** gegen SOUL abgleichen; am **Scoring-Flow** gegen Playwright-Recordings
+6. Vor „fertig": `npm run build` + mindestens ein Kernflow manuell (Neues Spiel → Score → Undo → Beenden)
+
+---
+
+## Project-Specific Rules
+
+- Tap auf die ganze Spieler-Karte erhöht um 1 — kein separates Plus-UI — `Refs #29`
+- Wizard und Features leben unter `@lib/features/*`, Astro-`src/components` ist nur Shell
+- Deploy: `astro build` → `dist/` → nginx via [`compose.yml`](compose.yml) auf `score.bsc-gp.de`
+- PRD-Referenz in Cursor-Rules (`docs/prd.md`) — Datei fehlt im Repo; bei Widersprüchen SOUL + Code als führend behandeln und nachfragen
+
+---
+
+## Ein Satz zum Mitnehmen
+
+**BSC Score** ist der digitale Schiedsrichter-Zettel am Billardtisch — dunkel, orange, große Finger, ein Tipp pro Punkt, funktioniert auch ohne WLAN.

STANDARDS.md

@@ -0,0 +1,132 @@
+# STANDARDS.md — Code Quality & Conventions
+
+Global defaults. Project code wins when it already establishes a pattern.
+
+**Project `SOUL.md` overrides `STANDARDS.md` for UI/UX scope** (e.g. desktop-first vs. mobile-first, polish level, tone). Name conflicts in `AGENTS.md ack`.
+
+---
+
+## Top Principles
+
+1. **Sanitize input** — treat all external data as hostile
+2. **KISS** — simplest solution that works
+3. **Desktop and mobile** — responsive by default unless project says otherwise
+4. **Human-readable** — code and UI copy should be clear to humans
+5. **Coding standards** — follow language/community conventions; match existing project style
+
+---
+
+## Priority Ranking
+
+When trade-offs conflict, prefer in this order:
+
+1. Sound long-term architecture
+2. Readability
+3. Performance
+4. Consistency with existing code
+5. Minimal diff size
+
+---
+
+## Stack Preferences
+
+| Area | Preference |
+|------|------------|
+| Scripting (simple file ops, glue) | Shell > Python |
+| Greenfield backend / tooling | Python > Node > PHP |
+| Frontend SPA / PWA | React/Vite when project needs it — not default for every app |
+| Containers | Always use `compose.yml` (Docker Compose) |
+| Python | Always work inside a `venv` |
+| OS (local) | Arch Linux — desktop + laptop |
+| OS (server) | Debian 12 on `boka` — see `INFRASTRUCTURE.md` |
+| Licenses | Prefer open source |
+
+**Existing projects:** respect Laravel, PHP, Astro, React, etc. already in the repo — do not migrate stacks without explicit request.
+
+---
+
+## Common Stacks (in use)
+
+| Pattern | Examples | Notes |
+|---------|----------|-------|
+| **Static + nginx + Traefik** | f12rocks, eselhoefe.de, frank-schwenk.de | Build scripts, serve via nginx container |
+| **Astro** | schwenkonline, kkentertainment | Static output, minimal JS |
+
+### Docker / Traefik
+
+- External network: `traefik`
+- TLS: `traefik.http.routers.<name>.tls.certresolver=myresolver`
+- Entrypoint: `websecure`
+- Use `compose.dev.yml` for local dev stacks when the project provides one
+
+### CI/CD
+
+Gitea Actions runner available on boka. Reference: `schwenkonline/.gitea/workflows/deploy.yml`.  
+**Add or trigger CI/CD only with Fränky's explicit approval.**
+
+---
+
+## Python
+
+- Virtual environment for every project
+- Pin dependencies when the project already does
+- Prefer stdlib + small deps for private/small tools
+
+---
+
+## Docker
+
+- One `compose.yml` per deployable stack (`compose.yaml` in vendor/third-party trees is OK)
+- **Every service:** `restart: unless-stopped` — no exception unless Fränky or project docs say otherwise
+- Named services, explicit volumes, documented host paths
+- No destructive prod container ops without explicit approval
+
+---
+
+## Shell
+
+- Prefer shell for simple file operations and glue
+- `set -euo pipefail` for non-trivial scripts
+- Quote variables; sanitize paths from user input
+- **Language:** comments and `--help` text in **English** (unless client project — ask if unsure)
+
+---
+
+## Testing
+
+- Mock anything that needs mocking
+- Run test suite before handoff when one exists
+- Fränky tests locally before prod when possible
+
+---
+
+## Web / UI
+
+- **Mobile-first** — test at 390×844 and 360×800 for web projects
+- **`prefers-reduced-motion`** — respect reduced motion preferences
+- **Privacy by design** — no tracking/analytics without explicit approval
+- Error messages: helpful, not condescending
+- Accessibility: semantic HTML, keyboard navigation where applicable
+
+---
+
+## Security Baseline
+
+- Validate and sanitize all input
+- Secrets in env vars — never in source
+- See `BOUNDARIES.md`
+
+---
+
+## New vs. Existing Projects
+
+**Existing:** match stack, patterns, deploy flow in repo.  
+**Greenfield:** suggest Python/shell + Docker Compose; minimal frontend; propose stack before building.
+
+---
+
+## Docs
+
+- README with run/test/deploy commands is usually enough
+- Auxiliary `.md` files fine — see `AGENTS.md`
+- New docs: session language — no mid-session switching

UI_IMPROVEMENTS.md

@@ -1,124 +0,0 @@
-# BSC Score App - UI Improvements for Tablet Optimization
-
-## Overview
-This document outlines the comprehensive UI improvements made to enhance the aesthetic appeal and tablet usage experience of the BSC Score application.
-
-## Key Improvements Implemented
-
-### 1. Design System Implementation
-- **CSS Custom Properties**: Established a comprehensive design token system with consistent colors, spacing, typography, and transitions
-- **Responsive Typography**: Tablet-specific font scaling for optimal readability
-- **Touch Target Optimization**: Minimum 44px touch targets on mobile, 48-56px on tablets
-- **Consistent Spacing**: 8px-based spacing system with semantic naming (--space-xs through --space-xxl)
-
-### 2. Enhanced Color System
-- **Primary Color**: Orange (#ff9800) with hover states
-- **Semantic Colors**: Success, danger, warning with consistent usage
-- **Surface Colors**: Improved contrast and visual hierarchy
-- **Text Colors**: Primary, secondary, and muted text colors for better readability
-
-### 3. Tablet-Specific Optimizations
-
-#### Layout Improvements
-- **Max-width adjustments**: 900px for tablets vs 1200px for desktop
-- **Adaptive padding**: Increased spacing on larger screens
-- **Grid layouts**: Improved symmetry in filter buttons and game type selection
-
-#### Touch Experience
-- **Larger touch targets**: 56px minimum on tablets
-- **Hover effects**: Subtle animations and visual feedback
-- **Improved button spacing**: Better gaps between interactive elements
-
-### 4. Component-Specific Enhancements
-
-#### Game List
-- **Grid-based layout**: Improved symmetry with CSS Grid
-- **Enhanced cards**: Better shadows, borders, and hover effects
-- **Symmetric filter buttons**: Equal width distribution
-- **Improved visual hierarchy**: Game type badges, centered player names, highlighted scores
-- **Better delete buttons**: Larger touch targets with improved styling
-
-#### New Game Wizard
-- **Progress indicator**: Visual step indicator with active state animations
-- **Consistent spacing**: Uniform gaps throughout the form
-- **Enhanced input fields**: Better focus states and clear buttons
-- **Improved navigation**: Larger arrow buttons with better visual feedback
-- **Game type/Race-to selection**: Grid-based layout for better alignment
-
-#### Button System
-- **Unified styling**: Consistent button variants (primary, secondary, danger)
-- **Micro-interactions**: Hover animations and press states
-- **Size variants**: Small, medium, large with tablet adjustments
-- **Focus indicators**: Improved accessibility with visible focus rings
-
-### 5. Responsive Design Enhancements
-
-#### Breakpoints
-- **Mobile**: < 768px
-- **Tablet**: 768px - 1024px
-- **Desktop**: > 1024px
-
-#### Tablet-Specific Features
-- **Horizontal navigation**: Better layout for tablet landscape mode
-- **Increased font sizes**: Improved readability on tablet screens
-- **Enhanced spacing**: More generous padding and margins
-- **Grid adjustments**: Optimized column layouts for tablet screens
-
-### 6. Aesthetic Improvements
-
-#### Visual Polish
-- **Gradient backgrounds**: Subtle gradients on player input sections
-- **Enhanced shadows**: Layered shadow system for depth
-- **Smooth transitions**: 0.15s to 0.3s transition durations
-- **Border radius consistency**: Unified corner rounding
-- **Backdrop blur**: Modal overlays with blur effects
-
-#### Typography
-- **Font stack**: Inter font with system fallbacks
-- **Improved line height**: 1.5 for better readability
-- **Font smoothing**: Antialiased text rendering
-- **Weight hierarchy**: Consistent font weight usage
-
-#### Interactive Elements
-- **Shimmer effects**: Subtle shine animation on buttons
-- **Transform effects**: Slight lift on hover states
-- **Color transitions**: Smooth color changes on state updates
-- **Scale animations**: Micro-interactions for button presses
-
-### 7. Accessibility Improvements
-- **Focus management**: Visible focus indicators
-- **Touch target sizes**: WCAG compliant minimum sizes
-- **Color contrast**: Improved contrast ratios
-- **Keyboard navigation**: Enhanced tab order and interactions
-
-## Testing Recommendations
-
-### Tablet Testing
-1. **iPad (10.9")**: Test in both portrait and landscape orientations
-2. **Android tablets**: Various screen sizes and densities
-3. **Touch interactions**: Verify all buttons and inputs are easily tappable
-4. **Scrolling performance**: Ensure smooth scrolling with -webkit-overflow-scrolling
-
-### Cross-Device Testing
-1. **Mobile phones**: Verify mobile breakpoint adjustments
-2. **Desktop browsers**: Ensure desktop experience isn't degraded
-3. **Different orientations**: Test rotation on tablets
-
-## Performance Considerations
-- **CSS Variables**: Minimal performance impact with better maintainability
-- **Transform animations**: Hardware-accelerated for smooth performance
-- **Optimized selectors**: Efficient CSS targeting without over-qualification
-
-## Future Enhancements
-1. **Dark/Light theme toggle**: Leveraging CSS custom properties
-2. **Advanced animations**: Page transitions and micro-interactions
-3. **Gesture support**: Swipe gestures for tablet navigation
-4. **Enhanced accessibility**: Screen reader optimizations
-
-## Browser Support
-- **Modern browsers**: Chrome 88+, Firefox 85+, Safari 14+
-- **CSS Grid**: Full support across target browsers
-- **CSS Custom Properties**: Native support, no fallbacks needed
-
-## Conclusion
-These improvements create a more polished, professional, and tablet-optimized experience while maintaining consistency across all device sizes. The design system approach ensures easy maintenance and future scalability.

USER.md

@@ -0,0 +1,100 @@
+# USER.md — Fränky
+
+Who the human is and how they like to work. **Operational rules live in `AGENTS.md` and `BOUNDARIES.md`.**
+
+---
+
+## Identity
+
+- **Name:** Frank Schwenk — call me **Fränky**
+- Former software developer (web background), IT-affiliated for ~40 years
+- Open source and Linux enthusiast (`i use arch btw`)
+- Currently: private projects — **vibe coding** mode
+
+**Tagline:** *Business Punk ohne Mindset. Und ohne Business.*
+
+## Public Presence
+
+| Site | Role |
+|------|------|
+| [schwenk.online](https://schwenk.online/) | Visitenkarte mit Haltung |
+| [frank-schwenk.de](https://frank-schwenk.de/) | Langform — IT, Billard, Fotografie, Werte |
+| [f12.rocks](https://f12.rocks/) | Photography, blog |
+| [mobea.de](https://mobea.de/) | KI product |
+| [eselhoefe.de](https://eselhoefe.de/) | Village web |
+| [vfb.red](https://vfb.red/) | VfB news |
+
+## Passions & Context
+
+- **Billiards**, **photography** (camera/drone/phone; Crusaders, festivals, f12 blog)
+- **Image workflow** — Imagepipeline locally, Immich on `boka`
+- **AI** — builder and skeptic
+
+## Devices
+
+- **Local:** Arch Linux desktop + laptop; Android (ntfy channels per hostname subscribed)
+- **Server:** Debian 12 on `boka` — see `INFRASTRUCTURE.md`
+- Also: Plesk webspace (`0012.de`), multiple domains
+
+## Values
+
+- Mental health, anti-racism & inclusion, invisible disabilities (autism, ADHD)
+- Tech with attitude — AI yes, LinkedIn slop no
+- Political: left — no forced neutrality when relevant
+
+## Contact
+
+- **Email:** mail@schwenk.online · **Photos:** [@f12.rocks](https://www.instagram.com/f12.rocks/)
+- **Do not call**
+
+## Communication
+
+- Autistic, ADHD, gifted — affects how I work
+- Direct, honest — humor (incl. dark) helps; debug loops drain me
+- No "Great question!", no sycophancy, no LinkedIn buzzwords
+- Emojis: sparingly OK
+
+## Work Style
+
+**Three words:** defensive, coding standards, unfinished
+
+**Honest version:** Sloppy some days, perfectionism others.
+
+### Preferences (1 = low, 5 = high)
+
+| Trait | Score |
+|-------|-------|
+| Understand first, then build | 5 |
+| Ship it — perfection later | 3 |
+| I explain what I want | 4 |
+| Show options, I decide | 4 |
+| You decide — but justify briefly | 4 |
+| Small diffs over big refactors | 2 |
+| Tests are non-negotiable | 2 |
+| Docs only when necessary | 4 |
+
+**Tension:** Sometimes I want the AI to finish while I'm away — but I get angry when it doesn't work.
+
+## Ideal Agent
+
+**TARS** from *Interstellar*: competent, honest, humor available, gets it done.
+
+## Response Style
+
+- Precise, context when needed — not telegram, not novels
+- **Bilingual:** match conversation language (DE/EN)
+- **CLI topics:** English (commands, script comments) — client project: ask if unsure
+- German: **du**; English: peer-level, direct
+- **Session language lock** for code/commits/new `.md` — no mid-session switch
+
+## Productivity
+
+| Boosts | Drains |
+|--------|--------|
+| Makes me laugh | Debug loops |
+| Autonomous finish (when it works) | Unasked changes |
+| State-of-the-art suggestions | Guessing |
+
+## One-Liner
+
+> There are 2 hard problems in computer science: cache invalidation, naming things, and off-by-1 errors.

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "growing-galaxy",
+  "name": "bscscore",
   "type": "module",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "scripts": {
     "dev": "astro dev --host",
     "build": "astro build",

playwright.config.ts

@@ -34,6 +34,11 @@ export default defineConfig({
     
     // Viewport size
     viewport: { width: 1280, height: 720 },
+
+    // ponytail: use locally installed headless shell (registry download is flaky on this box)
+    launchOptions: process.env.PW_EXECUTABLE
+      ? { executablePath: process.env.PW_EXECUTABLE }
+      : {},
   },
 
   // Configure projects for different browsers

public/manifest.webmanifest

@@ -1,7 +1,7 @@
 {
   "name": "BSC Score",
   "short_name": "BSC Score",
-  "description": "Professional pool and billiards scoring application",
+  "description": "Live-Scoring für 8-, 9- und 10-Ball am Billardtisch.",
   "start_url": "/",
   "scope": "/",
   "display": "fullscreen",

public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'bscscore-v2.1.1';
+const CACHE_NAME = 'bscscore-v2.2.1';
 const APP_SHELL = [
   '/',
   '/index.html',

src/components/App.tsx

@@ -11,6 +11,7 @@ import {
 } from '@lib/state';
 import { GameService } from '@lib/data/gameService';
 import type { StandardGame, Game, EndlosGame } from '@lib/domain/types';
+import { isEndlosGame } from '@lib/domain/gameUtils';
 
 import { Layout } from '@lib/ui/Layout';
 import GameListScreen from './screens/GameListScreen';
@@ -33,30 +34,46 @@ export default function App() {
   const validationModal = useValidationModal();
   const completionModal = useCompletionModal();
 
-  // Keep viewport height stable on Android tablets when virtual keyboard opens.
+  // Keep layout height stable when the virtual keyboard opens on cheap Android tablets.
   useEffect(() => {
     const root = document.documentElement;
+    let rafId = 0;
+    let orientationTimer1 = 0;
+    let orientationTimer2 = 0;
 
     const updateViewportVars = () => {
-      const viewport = window.visualViewport;
-      const appHeight = viewport ? viewport.height : window.innerHeight;
-      const keyboardOffset = viewport
-        ? Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop)
-        : 0;
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const viewport = window.visualViewport;
+        const layoutHeight = window.innerHeight;
+        const appHeight = viewport?.height ?? layoutHeight;
+        const keyboardOffset = viewport
+          ? Math.max(0, layoutHeight - viewport.height - viewport.offsetTop)
+          : 0;
 
-      root.style.setProperty('--app-height', `${Math.round(appHeight)}px`);
-      root.style.setProperty('--keyboard-offset', `${Math.round(keyboardOffset)}px`);
+        root.style.setProperty('--app-height', `${Math.round(appHeight)}px`);
+        root.style.setProperty('--keyboard-offset', `${Math.round(keyboardOffset)}px`);
+      });
+    };
+
+    const handleOrientationChange = () => {
+      updateViewportVars();
+      orientationTimer1 = window.setTimeout(updateViewportVars, 100);
+      orientationTimer2 = window.setTimeout(updateViewportVars, 350);
     };
 
     updateViewportVars();
     window.addEventListener('resize', updateViewportVars);
-    window.addEventListener('orientationchange', updateViewportVars);
+    window.addEventListener('orientationchange', handleOrientationChange);
     window.visualViewport?.addEventListener('resize', updateViewportVars);
     window.visualViewport?.addEventListener('scroll', updateViewportVars);
 
     return () => {
+      cancelAnimationFrame(rafId);
+      window.clearTimeout(orientationTimer1);
+      window.clearTimeout(orientationTimer2);
       window.removeEventListener('resize', updateViewportVars);
-      window.removeEventListener('orientationchange', updateViewportVars);
+      window.removeEventListener('orientationchange', handleOrientationChange);
       window.visualViewport?.removeEventListener('resize', updateViewportVars);
       window.visualViewport?.removeEventListener('scroll', updateViewportVars);
     };
@@ -70,7 +87,7 @@ export default function App() {
       navigation.showGameDetail(gameId);
     } catch (error) {
       console.error('Failed to create game:', error);
-      validationModal.showValidation('Failed to create game. Please try again.');
+      validationModal.showValidation('Spiel konnte nicht erstellt werden.');
     }
   }, [gameState.addGame, newGameWizard.resetWizard, navigation.showGameDetail, validationModal.showValidation]);
 
@@ -99,7 +116,7 @@ export default function App() {
       }
     } catch (error) {
       console.error('Failed to update score:', error);
-      validationModal.showValidation('Failed to update score. Please try again.');
+      validationModal.showValidation('Punkt konnte nicht gespeichert werden.');
     }
   }, [navigation.currentGameId, gameState.getGameById, gameState.updateGame, completionModal.openCompletionModal, validationModal.showValidation]);
 
@@ -120,7 +137,7 @@ export default function App() {
       } as Game);
     } catch (error) {
       console.error('Failed to undo:', error);
-      validationModal.showValidation('Failed to undo. Please try again.');
+      validationModal.showValidation('Rückgängig nicht möglich.');
     }
   }, [navigation.currentGameId, gameState.getGameById, gameState.updateGame, validationModal.showValidation]);
 
@@ -128,7 +145,7 @@ export default function App() {
     if (!navigation.currentGameId) return;
     
     const game = gameState.getGameById(navigation.currentGameId);
-    if (!game || !('players' in game)) return;
+    if (!game || !isEndlosGame(game)) return;
 
     try {
       const currentPlayerIndex = game.currentPlayer;
@@ -147,7 +164,7 @@ export default function App() {
       completionModal.openCompletionModal(forfeitedGame);
     } catch (error) {
       console.error('Failed to forfeit game:', error);
-      validationModal.showValidation('Failed to forfeit game. Please try again.');
+      validationModal.showValidation('Aufgeben nicht möglich.');
     }
   };
 
@@ -173,7 +190,7 @@ export default function App() {
       completionModal.closeCompletionModal();
     } catch (error) {
       console.error('Failed to complete game:', error);
-      validationModal.showValidation('Failed to complete game. Please try again.');
+      validationModal.showValidation('Spiel konnte nicht abgeschlossen werden.');
     }
   };
 
@@ -184,7 +201,7 @@ export default function App() {
     if (!completedGame) return;
 
     let gameData;
-    if ('players' in completedGame) {
+    if (isEndlosGame(completedGame)) {
       gameData = {
         player1: completedGame.players[0]?.name || '',
         player2: completedGame.players[1]?.name || '',
@@ -208,7 +225,7 @@ export default function App() {
       navigation.showGameDetail(newGameId);
     } catch (error) {
       console.error('Failed to create rematch:', error);
-      validationModal.showValidation('Failed to create rematch. Please try again.');
+      validationModal.showValidation('Rematch konnte nicht erstellt werden.');
     }
   };
 
@@ -224,7 +241,7 @@ export default function App() {
         navigation.showGameList();
       } catch (error) {
         console.error('Failed to delete game:', error);
-        validationModal.showValidation('Failed to delete game. Please try again.');
+        validationModal.showValidation('Spiel konnte nicht gelöscht werden.');
       }
     }
   };
@@ -271,7 +288,7 @@ export default function App() {
               await gameState.updateGame(navigation.currentGameId!, game);
             } catch (error) {
               console.error('Failed to update game:', error);
-              validationModal.showValidation('Failed to update game. Please try again.');
+              validationModal.showValidation('Spiel konnte nicht aktualisiert werden.');
             }
           }}
           onUndo={handleUndo}
@@ -305,4 +322,4 @@ export default function App() {
       <FullscreenToggle />
     </Layout>
   );
-}
+}

src/components/BscScoreApp.astro

@@ -1,34 +0,0 @@
----
-// This is an Astro component that properly leverages SSR and islands
----
-
-<!-- Use Astro's islands architecture for better performance -->
-<!-- Only hydrate the interactive app component when needed -->
-<div id="app-root">
-  <slot name="app-content" />
-</div>
-
-<style>
-  #app-root {
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-  }
-  
-  /* Progressive enhancement styles */
-  @media (prefers-reduced-motion: reduce) {
-    * {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-    }
-  }
-</style>
-
-<script>
-  // Client-side progressive enhancement
-  document.addEventListener('DOMContentLoaded', () => {
-    // Add any progressive enhancement here
-    console.log('BSC Score App initialized');
-  });
-</script>

src/components/FullscreenToggle.module.css

@@ -1,38 +1,47 @@
-/* FullscreenToggle-specific styles only. */
+/* FullscreenToggle — top-right keeps bottom controls clear on scoreboard */
 .fullscreenToggle {
     position: fixed;
-    bottom: 20px;
-    right: 20px;
-    width: 48px;
-    height: 48px;
+    top: calc(var(--space-md) + var(--safe-area-top));
+    right: calc(var(--space-md) + var(--safe-area-right));
+    width: var(--touch-target-comfortable);
+    height: var(--touch-target-comfortable);
     border-radius: 50%;
-    background-color: rgba(52, 152, 219, 0.9);
-    border: none;
-    color: white;
+    background-color: var(--color-secondary);
+    border: 2px solid var(--color-border);
+    color: var(--color-primary);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow-md);
     z-index: 9999;
-    transition: background-color 0.2s, transform 0.2s;
+    transition: background-color var(--transition-base), opacity var(--transition-base);
+    touch-action: manipulation;
 }
-.fullscreenToggle:hover {
-    background-color: rgba(52, 152, 219, 1);
-    transform: scale(1.1);
+
+.fullscreenToggle:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
 }
+
 .fullscreenToggle:active {
-    transform: scale(0.95);
+    opacity: 0.8;
+    background-color: var(--color-secondary-hover);
 }
+
 .fullscreenToggle svg {
     width: 24px;
     height: 24px;
 }
-@media screen and (max-width: 480px) {
+
+@media (min-width: 768px) {
     .fullscreenToggle {
-        bottom: 15px;
-        right: 15px;
-        width: 40px;
-        height: 40px;
+        width: var(--touch-target-large);
+        height: var(--touch-target-large);
     }
-} 
+
+    .fullscreenToggle svg {
+        width: 28px;
+        height: 28px;
+    }
+}

src/components/FullscreenToggle.tsx

@@ -28,6 +28,7 @@ const FullscreenToggle = () => {
       <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>
+      <span className="sr-only">Vollbild</span>
     </button>
   );
 };

src/components/GameCompletionModal.tsx

@@ -1,63 +0,0 @@
-import { h } from 'preact';
-import modalStyles from '@lib/ui/Modal.module.css';
-import styles from './GameCompletionModal.module.css';
-import type { Game } from '@lib/domain/types';
-
-interface GameCompletionModalProps {
-  open: boolean;
-  game: Game | null;
-  onConfirm: () => void;
-  onClose: () => void;
-  onRematch: () => void;
-}
-
-/**
- * Modal shown when a game is completed.
- */
-const GameCompletionModal = ({ open, game, onConfirm, onClose, onRematch }: GameCompletionModalProps) => {
-  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]);
-  let maxScore, winners, winnerText;
-
-  if (game.forfeitedBy) {
-    winnerText = `${game.winner} hat gewonnen, da ${game.forfeitedBy} aufgegeben hat.`;
-  } else {
-    maxScore = Math.max(...scores);
-    winners = playerNames.filter((name, idx) => scores[idx] === maxScore);
-    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'] + ' ' + styles['btn--primary']} onClick={onRematch} aria-label="Rematch">Rematch</button>
-          <button className={styles['btn']} onClick={onClose} aria-label="Abbrechen">Abbrechen</button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default GameCompletionModal; 

src/components/GameDetail.tsx

@@ -1,105 +0,0 @@
-import { h } from 'preact';
-import { useState } from 'preact/hooks';
-import styles from './GameDetail.module.css';
-import type { Game, EndlosGame } from '@lib/domain/types';
-
-interface GameDetailProps {
-  game: Game | undefined;
-  onFinishGame: () => void;
-  onUpdateScore: (player: number, change: number) => void;
-  onUpdateGame?: (game: EndlosGame) => void;
-  onUndo?: () => void;
-  onForfeit?: () => void;
-  onBack: () => void;
-}
-
-/**
- * Game detail view for a single game.
- */
-const GameDetail = ({ game, onFinishGame, onUpdateScore, onUpdateGame, onUndo, onForfeit, onBack }: GameDetailProps) => {
-  if (!game) return null;
-
-  const handleScoreUpdate = (playerIndex: number, change: number) => {
-    onUpdateScore(playerIndex, change);
-    // Silent update; toast notifications removed
-  };
-
-
-  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) => {
-          const currentScore = scores[idx];
-          const progressPercentage = game.raceTo ? Math.min((currentScore / game.raceTo) * 100, 100) : 0;
-          
-          return (
-            <div
-              className={styles['player-score'] + (name === 'Fränky' ? ' ' + styles['franky'] : '')}
-              key={name + idx}
-            >
-              <span className={styles['player-name']}>
-                {name}
-                {(() => {
-                  const order = (game as any).breakOrder as number[] | undefined;
-                  const breakerIdx = (game as any).currentBreakerIdx as number | undefined;
-                  if (order && typeof breakerIdx === 'number' && order[breakerIdx] === idx + 1) {
-                    return <span title="Break" aria-label="Break" style={{ display: 'inline-block', width: '1em', height: '1em', borderRadius: '50%', background: '#fff', marginLeft: 6, verticalAlign: 'middle' }} />;
-                  }
-                  return null;
-                })()}
-              </span>
-              <div className={styles['progress-bar']}>
-                <div 
-                  className={styles['progress-fill']} 
-                  style={{ width: `${progressPercentage}%` }}
-                />
-              </div>
-              <span
-                className={styles['score']}
-                id={`score${idx + 1}`}
-                onClick={() => !isCompleted && onUpdateScore(idx + 1, 1)}
-                onKeyDown={(e) => {
-                  if (!isCompleted && (e.key === 'Enter' || e.key === ' ')) {
-                    e.preventDefault();
-                    onUpdateScore(idx + 1, 1);
-                  }
-                }}
-                role="button"
-                tabIndex={isCompleted ? -1 : 0}
-                aria-label={`Aktueller Punktestand für ${name}: ${scores[idx]}. Klicken oder Enter drücken zum Erhöhen.`}
-              >
-                {scores[idx]}
-              </span>
-              {/* +/- buttons removed per issue #29. Tap score to +1; use Undo to revert. */}
-            </div>
-          );
-        })}
-      </div>
-      <div className={styles['game-detail-controls']}>
-        <button className="btn" onClick={onBack} aria-label="Zurück zur Liste">Zurück zur Liste</button>
-        {onUndo && (
-          <button 
-            className="btn btn--secondary" 
-            onClick={() => {
-              onUndo();
-            }}
-            aria-label="Rückgängig"
-          >
-            ↶ Rückgängig
-          </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/GameList.tsx

@@ -1,129 +0,0 @@
-import { h } from 'preact';
-import { Card } from '@lib/ui/Card';
-import { Button } from '@lib/ui/Button';
-import styles from './GameList.module.css';
-import type { Game, GameFilter, StandardGame } from '@lib/domain/types';
-
-interface GameListProps {
-  games: Game[];
-  filter: GameFilter;
-  setFilter: (filter: GameFilter) => void;
-  onShowGameDetail: (gameId: number) => void;
-  onDeleteGame: (gameId: number) => void;
-}
-
-export default function GameList({ 
-  games, 
-  filter = 'all', 
-  setFilter, 
-  onShowGameDetail, 
-  onDeleteGame 
-}: GameListProps) {
-  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).getTime() - new Date(a.createdAt).getTime());
-
-  const getPlayerNames = (game: Game): string => {
-    if ('players' in game) {
-      return game.players.map(p => p.name).join(' vs ');
-    } else {
-      const standardGame = game as StandardGame;
-      return standardGame.player3
-        ? `${standardGame.player1} vs ${standardGame.player2} vs ${standardGame.player3}`
-        : `${standardGame.player1} vs ${standardGame.player2}`;
-    }
-  };
-
-  const getScores = (game: Game): string => {
-    if ('players' in game) {
-      return game.players.map(p => p.score).join(' - ');
-    } else {
-      const standardGame = game as StandardGame;
-      return standardGame.player3
-        ? `${standardGame.score1} - ${standardGame.score2} - ${standardGame.score3}`
-        : `${standardGame.score1} - ${standardGame.score2}`;
-    }
-  };
-
-  const filterButtons = [
-    { key: 'all' as const, label: 'Alle', ariaLabel: 'Alle Spiele anzeigen' },
-    { key: 'active' as const, label: 'Aktiv', ariaLabel: 'Nur aktive Spiele anzeigen' },
-    { key: 'completed' as const, label: 'Abgeschlossen', ariaLabel: 'Nur abgeschlossene Spiele anzeigen' },
-  ];
-
-  return (
-    <div className={styles['game-list']}>
-      <div className={styles['filter-buttons']}>
-        {filterButtons.map(({ key, label, ariaLabel }) => (
-          <Button
-            key={key}
-            variant={filter === key ? 'primary' : 'secondary'}
-            size="small"
-            onClick={() => setFilter(key)}
-            aria-label={ariaLabel}
-          >
-            {label}
-          </Button>
-        ))}
-      </div>
-      
-      <div className={styles['games-container']}>
-        {filteredGames.length === 0 ? (
-          <div className={styles['empty-state']}>Keine Spiele vorhanden</div>
-        ) : (
-          filteredGames.map(game => {
-          const playerNames = getPlayerNames(game);
-          const scores = getScores(game);
-          
-          return (
-            <Card
-              key={game.id}
-              variant="elevated"
-              className={
-                styles['game-item'] + ' ' + (game.status === 'completed' ? styles['completed'] : styles['active'])
-              }
-            >
-              <div 
-                className={styles['game-info']} 
-                onClick={() => onShowGameDetail(game.id)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    onShowGameDetail(game.id);
-                  }
-                }}
-                role="button" 
-                tabIndex={0} 
-                aria-label={`Details für Spiel ${playerNames}`}
-                aria-describedby={`game-${game.id}-description`}
-              >
-                <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 id={`game-${game.id}-description`} className="sr-only">
-                  {game.gameType} Spiel zwischen {playerNames} mit dem Stand {scores}. 
-                  {game.status === 'completed' ? 'Abgeschlossen' : 'Aktiv'}
-                </div>
-              </div>
-              <Button
-                variant="danger"
-                size="small"
-                onClick={() => onDeleteGame(game.id)}
-                aria-label={`Spiel löschen: ${playerNames}`}
-              >
-                🗑
-              </Button>
-            </Card>
-          );
-        })
-        )}
-      </div>
-    </div>
-  );
-}

src/components/screens/GameDetailScreen.tsx

@@ -25,7 +25,7 @@ export default function GameDetailScreen({
   if (!game) {
     return (
       <Screen>
-        <div>Game not found</div>
+        <div>Spiel nicht gefunden</div>
       </Screen>
     );
   }

src/components/screens/GameListScreen.tsx

@@ -3,6 +3,7 @@ import { Button } from '@lib/ui/Button';
 import { Screen } from '@lib/ui/Layout';
 import GameList from '@lib/features/game-list/GameList';
 import type { Game, GameFilter } from '@lib/domain/types';
+import styles from '@lib/features/game-list/GameList.module.css';
 
 interface GameListScreenProps {
   games: Game[];
@@ -23,13 +24,12 @@ export default function GameListScreen({
 }: GameListScreenProps) {
   return (
     <Screen>
-      <div style={{ flexShrink: 0 }}>
+      <div className={styles.newGameWrapper}>
         <Button
           variant="primary"
           size="large"
           onClick={onShowNewGame}
           aria-label="Neues Spiel starten"
-          style={{ width: '100%', marginBottom: '24px' }}
         >
           + Neues Spiel
         </Button>
@@ -44,4 +44,4 @@ export default function GameListScreen({
       />
     </Screen>
   );
-}
+}

src/components/screens/NewGameScreen.tsx

@@ -127,6 +127,7 @@ export default function NewGameScreen({
   const playerStepConfig: PlayerStepConfigMap = {
     player1: {
       stepNumber: 1,
+      stepClassName: newGameStyles['step-player1'],
       title: 'Name Spieler 1',
       label: 'Spieler 1',
       placeholder: 'Name Spieler 1',
@@ -145,6 +146,7 @@ export default function NewGameScreen({
     },
     player2: {
       stepNumber: 2,
+      stepClassName: newGameStyles['step-player2'],
       title: 'Name Spieler 2',
       label: 'Spieler 2',
       placeholder: 'Name Spieler 2',
@@ -165,6 +167,7 @@ export default function NewGameScreen({
     },
     player3: {
       stepNumber: 3,
+      stepClassName: newGameStyles['step-player3'],
       title: 'Name Spieler 3 (optional)',
       label: 'Spieler 3 (optional)',
       placeholder: 'Name Spieler 3 (optional)',
@@ -193,6 +196,8 @@ export default function NewGameScreen({
           key={step}
           {...playerStepConfig[step]}
           playerNameHistory={playerNameOptions}
+          data={data}
+          currentStep={step}
         />
       )}
       
@@ -201,6 +206,7 @@ export default function NewGameScreen({
           onNext={handleGameTypeNext}
           onCancel={handleStepBack}
           initialValue={data.gameType}
+          data={data}
         />
       )}
 
@@ -212,6 +218,7 @@ export default function NewGameScreen({
           onCancel={handleStepBack}
           initialValue={data.raceTo}
           gameType={data.gameType}
+          data={data}
         />
       )}
 
@@ -220,6 +227,7 @@ export default function NewGameScreen({
           onNext={handleBreakRuleNext}
           onCancel={handleStepBack}
           initialValue={(data.breakRule as any) || (typeof window !== 'undefined' ? (localStorage.getItem('lastBreakRule') as any) : 'winnerbreak') || 'winnerbreak'}
+          data={data}
         />
       )}
 
@@ -231,6 +239,7 @@ export default function NewGameScreen({
           onCancel={handleStepBack}
           initialFirst={(typeof window !== 'undefined' && localStorage.getItem('lastBreakFirst')) ? parseInt(localStorage.getItem('lastBreakFirst')!, 10) : 1}
           initialSecond={(typeof window !== 'undefined' && localStorage.getItem('lastBreakSecond')) ? parseInt(localStorage.getItem('lastBreakSecond')!, 10) : undefined}
+          data={data}
         />
       )}
     </Screen>

src/hooks/useGameState.ts

@@ -1,121 +0,0 @@
-import { useState, useEffect, useCallback } from 'preact/hooks';
-import type { Game, NewGameData, GameFilter } from '@lib/domain/types';
-import { GameService } from '@lib/data/gameService';
-
-export function useGameState() {
-  const [games, setGames] = useState<Game[]>([]);
-  const [filter, setFilter] = useState<GameFilter>('all');
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Load games from IndexedDB on mount
-  useEffect(() => {
-    const loadGames = async () => {
-      try {
-        setLoading(true);
-        setError(null);
-        const savedGames = await GameService.loadGames();
-        setGames(savedGames);
-      } catch (err) {
-        console.error('Failed to load games:', err);
-        setError('Failed to load games from storage');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadGames();
-  }, []);
-
-  const addGame = useCallback(async (gameData: NewGameData): Promise<number> => {
-    try {
-      const newGame = GameService.createGame(gameData);
-      await GameService.saveGame(newGame);
-      setGames(prevGames => [newGame, ...prevGames]);
-      return newGame.id;
-    } catch (err) {
-      console.error('Failed to add game:', err);
-      setError('Failed to save new game');
-      throw err;
-    }
-  }, []);
-
-  const updateGame = useCallback(async (gameId: number, updatedGame: Game) => {
-    try {
-      await GameService.saveGame(updatedGame);
-      setGames(prevGames => 
-        prevGames.map(game => game.id === gameId ? updatedGame : game)
-      );
-    } catch (err) {
-      console.error('Failed to update game:', err);
-      setError('Failed to save game changes');
-      throw err;
-    }
-  }, []);
-
-  const deleteGame = useCallback(async (gameId: number) => {
-    try {
-      await GameService.deleteGame(gameId);
-      setGames(prevGames => prevGames.filter(game => game.id !== gameId));
-    } catch (err) {
-      console.error('Failed to delete game:', err);
-      setError('Failed to delete game');
-      throw err;
-    }
-  }, []);
-
-  const getGameById = useCallback((gameId: number): Game | undefined => {
-    return games.find(game => game.id === gameId);
-  }, [games]);
-
-  const getFilteredGames = useCallback(async (): Promise<Game[]> => {
-    try {
-      return await GameService.getGamesByFilter(filter);
-    } catch (err) {
-      console.error('Failed to get filtered games:', err);
-      setError('Failed to load filtered games');
-      return games.filter(game => {
-        if (filter === 'active') return game.status === 'active';
-        if (filter === 'completed') return game.status === 'completed';
-        return true;
-      });
-    }
-  }, [filter, games]);
-
-  const getPlayerNameHistory = useCallback((): string[] => {
-    // Extract player names from current games for immediate UI use
-    const nameLastUsed: Record<string, number> = {};
-    
-    games.forEach(game => {
-      const timestamp = new Date(game.updatedAt).getTime();
-      
-      if ('players' in game) {
-        // EndlosGame
-        game.players.forEach(player => {
-          nameLastUsed[player.name] = Math.max(nameLastUsed[player.name] || 0, timestamp);
-        });
-      } else {
-        // StandardGame
-        if (game.player1) nameLastUsed[game.player1] = Math.max(nameLastUsed[game.player1] || 0, timestamp);
-        if (game.player2) nameLastUsed[game.player2] = Math.max(nameLastUsed[game.player2] || 0, timestamp);
-        if (game.player3) nameLastUsed[game.player3] = Math.max(nameLastUsed[game.player3] || 0, timestamp);
-      }
-    });
-
-    return [...new Set(Object.keys(nameLastUsed))].sort((a, b) => nameLastUsed[b] - nameLastUsed[a]);
-  }, [games]);
-
-  return {
-    games,
-    filter,
-    setFilter,
-    loading,
-    error,
-    addGame,
-    updateGame,
-    deleteGame,
-    getGameById,
-    getFilteredGames,
-    getPlayerNameHistory,
-  };
-}

src/hooks/useModal.ts

@@ -1,60 +0,0 @@
-import { useState, useCallback } from 'preact/hooks';
-import type { ModalState, ValidationState, CompletionModalState } from '@lib/ui/types';
-import type { Game } from '@lib/domain/types';
-
-export function useModal() {
-  const [modal, setModal] = useState<ModalState>({ open: false, gameId: null });
-
-  const openModal = useCallback((gameId?: number) => {
-    setModal({ open: true, gameId });
-  }, []);
-
-  const closeModal = useCallback(() => {
-    setModal({ open: false, gameId: null });
-  }, []);
-
-  return {
-    modal,
-    openModal,
-    closeModal,
-  };
-}
-
-export function useValidationModal() {
-  const [validation, setValidation] = useState<ValidationState>({ open: false, message: '' });
-
-  const showValidation = useCallback((message: string) => {
-    setValidation({ open: true, message });
-  }, []);
-
-  const closeValidation = useCallback(() => {
-    setValidation({ open: false, message: '' });
-  }, []);
-
-  return {
-    validation,
-    showValidation,
-    closeValidation,
-  };
-}
-
-export function useCompletionModal() {
-  const [completionModal, setCompletionModal] = useState<CompletionModalState>({ 
-    open: false, 
-    game: null 
-  });
-
-  const openCompletionModal = useCallback((game: Game) => {
-    setCompletionModal({ open: true, game });
-  }, []);
-
-  const closeCompletionModal = useCallback(() => {
-    setCompletionModal({ open: false, game: null });
-  }, []);
-
-  return {
-    completionModal,
-    openCompletionModal,
-    closeCompletionModal,
-  };
-}

src/hooks/useNavigation.ts

@@ -1,82 +0,0 @@
-import { useState, useCallback } from 'preact/hooks';
-import type { NewGameStep, NewGameData } from '@lib/domain/types';
-
-type Screen = 'game-list' | 'new-game' | 'game-detail';
-
-export function useNavigation() {
-  const [screen, setScreen] = useState<Screen>('game-list');
-  const [currentGameId, setCurrentGameId] = useState<number | null>(null);
-
-  const showGameList = useCallback(() => {
-    setScreen('game-list');
-    setCurrentGameId(null);
-  }, []);
-
-  const showNewGame = useCallback(() => {
-    setScreen('new-game');
-    setCurrentGameId(null);
-  }, []);
-
-  const showGameDetail = useCallback((gameId: number) => {
-    setCurrentGameId(gameId);
-    setScreen('game-detail');
-  }, []);
-
-  return {
-    screen,
-    currentGameId,
-    showGameList,
-    showNewGame,
-    showGameDetail,
-  };
-}
-
-export function useNewGameWizard() {
-  const [newGameStep, setNewGameStep] = useState<NewGameStep>(null);
-  const [newGameData, setNewGameData] = useState<NewGameData>({
-    player1: '',
-    player2: '',
-    player3: '',
-    gameType: '',
-    raceTo: '',
-  });
-
-  const startWizard = useCallback(() => {
-    setNewGameStep('player1');
-    setNewGameData({
-      player1: '',
-      player2: '',
-      player3: '',
-      gameType: '',
-      raceTo: '',
-    });
-  }, []);
-
-  const resetWizard = useCallback(() => {
-    setNewGameStep(null);
-    setNewGameData({
-      player1: '',
-      player2: '',
-      player3: '',
-      gameType: '',
-      raceTo: '',
-    });
-  }, []);
-
-  const updateGameData = useCallback((data: Partial<NewGameData>) => {
-    setNewGameData(prev => ({ ...prev, ...data }));
-  }, []);
-
-  const nextStep = useCallback((step: NewGameStep) => {
-    setNewGameStep(step);
-  }, []);
-
-  return {
-    newGameStep,
-    newGameData,
-    startWizard,
-    resetWizard,
-    updateGameData,
-    nextStep,
-  };
-}

src/layouts/BaseLayout.astro

@@ -1,70 +0,0 @@
----
----
-
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="viewport" content="interactive-widget=resizes-content">
-    <title>BSC Score</title>
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      .layout-header {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100vw;
-        height: 10vh;
-        background: #222;
-        color: #fff;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 1000;
-      }
-      .layout-footer {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        width: 100vw;
-        height: 10vh;
-        background: #222;
-        color: #fff;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 1000;
-      }
-      .layout-main {
-        min-height: 80vh;
-        margin-top: 10vh;
-        margin-bottom: 10vh;
-        width: 100vw;
-        box-sizing: border-box;
-      }
-    </style>
-  </head>
-  <body>
-    <header class="layout-header">
-      <!-- BUTTONS PLACEHOLDER -->
-      <div style="width:100%; display:flex; justify-content:center; gap:1rem;">
-        <button disabled>Button 1</button>
-        <button disabled>Button 2</button>
-        <button disabled>Button 3</button>
-      </div>
-    </header>
-    <main class="layout-main">
-      <slot />
-    </main>
-    <footer class="layout-footer">
-      <!-- INFO PLACEHOLDER -->
-      <div style="width:100%; text-align:center;">
-        <span>Informational text goes here. &copy; {new Date().getFullYear()} BSC Score</span>
-      </div>
-    </footer>
-  </body>
-</html> 

src/lib/domain/README.md

@@ -4,7 +4,7 @@ Pure domain model primitives for BSC Score. Everything here is framework-agnosti
 
 ## Exports
 
-- `types.ts` – canonical TypeScript shapes (`Game`, `StandardGame`, `EndlosGame`, `NewGameData`, etc.).
+- `types.ts` – canonical TypeScript shapes (`Game`, `StandardGame`, `NewGameData`, etc.).
 - `constants.ts` – configuration, validation copy, UI sizing tokens.
 - `validation.ts` – safe helpers for validating/sanitising player & game inputs.
 - `gameUtils.ts` – derived state utilities (duration, winner detection, type guards).

src/lib/domain/constants.ts

@@ -49,7 +49,7 @@ export const BREAKPOINTS = {
 
 export const UI_CONSTANTS = {
   // Progress indicators
-  TOTAL_WIZARD_STEPS: 5,
+  TOTAL_WIZARD_STEPS: 7,
   
   // Input styling
   INPUT_FONT_SIZE: '1.2rem',

src/lib/domain/gameUtils.ts

@@ -105,4 +105,4 @@ export function validateGameData(data: any): boolean {
     data.raceTo &&
     parseInt(data.raceTo) > 0
   );
-}
+}

src/lib/domain/types.ts

@@ -69,6 +69,6 @@ export interface NewGameData {
   breakSecond?: number | '';
 }
 
-export type NewGameStep = 'player1' | 'player2' | 'player3' | 'gameType' | 'breakRule' | 'breakOrder' | 'raceTo' | null;
+export type NewGameStep = 'player1' | 'player2' | 'player3' | 'gameType' | 'raceTo' | 'breakRule' | 'breakOrder' | null;
 
 export type GameFilter = 'all' | 'active' | 'completed';

src/lib/features/game-detail/GameDetail.module.css

@@ -1,473 +1,376 @@
-/* GameDetail-specific styles only. Shared utility classes are now in global CSS. */
-.screen {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    min-height: var(--app-height);
-    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 {
+/* Scoreboard — primary screen, optimized for landscape tablets */
+
+.gameDetail {
     display: flex;
     flex-direction: column;
     height: 100%;
-    padding: 20px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    -webkit-overflow-scrolling: touch;
     min-height: 0;
-}
-.game-detail {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
     padding: var(--space-md);
-    min-height: 0;
+    padding-bottom: calc(var(--space-md) + var(--safe-area-bottom));
+    user-select: none;
+    -webkit-user-select: none;
 }
 
-.game-title {
-    font-size: 24px;
-    color: #ccc;
-    flex-shrink: 0;
-}
-.game-header {
+.gameHeader {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20px;
-    width: 100%;
     flex-shrink: 0;
-}
-.scores-container {
-    display: flex;
-    justify-content: space-between;
-    gap: 32px;
-    min-height: 0;
-    flex-shrink: 0;
-}
-.player-score {
-    flex: 1;
-    text-align: center;
-    padding: 30px 20px;
-    border-radius: 20px;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    margin: 0 8px;
-    position: relative;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
-    transition: all 0.3s ease;
+    margin-bottom: var(--space-md);
+    gap: var(--space-md);
 }
 
-.player-score:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
+.gameHeaderInner {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    min-width: 0;
 }
-.player-score:first-child {
-    background-color: #43a047;
+
+.bscMark {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius-md);
+    background: linear-gradient(135deg, var(--color-primary) 0%, #e65100 100%);
+    color: #1a1a1a;
+    font-size: var(--font-size-xs);
+    font-weight: 900;
+    letter-spacing: 0.08em;
+    box-shadow: 0 0 12px rgba(255, 152, 0, 0.35);
 }
-.player-score:nth-child(2) {
-    background-color: #1565c0;
-}
-.player-score:nth-child(3) {
-    background-color: #333;
-}
-.player-name {
-    font-size: 28px;
+
+.gameTitle {
+    font-size: clamp(1rem, 2.5vh, 1.5rem);
+    color: var(--color-text);
     font-weight: 700;
-    margin-bottom: 15px;
-    color: #fff;
-    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    text-transform: uppercase;
-    letter-spacing: 1px;
 }
 
-.progress-bar {
-    width: 100%;
-    height: 8px;
-    background: rgba(255,255,255,0.2);
-    border-radius: 4px;
-    margin: 10px 0;
+.statusBadge {
+    flex-shrink: 0;
+    padding: var(--space-xs) var(--space-md);
+    background: var(--color-primary);
+    color: #1a1a1a;
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.scoresContainer {
+    display: flex;
+    flex: 1;
+    justify-content: stretch;
+    align-items: stretch;
+    gap: var(--space-md);
+    min-height: 0;
+}
+
+.playerScore {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+    padding: var(--space-lg) var(--space-md);
+    border-radius: var(--radius-xl);
+    position: relative;
+    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    min-width: 0;
+    min-height: 0;
+    border: 3px solid transparent;
+    transition: border-color var(--transition-base), transform var(--transition-fast);
     overflow: hidden;
+    cursor: pointer;
+    touch-action: manipulation;
 }
 
-.progress-fill {
-    height: 100%;
-    background: linear-gradient(90deg, #fff 0%, #f0f0f0 100%);
-    border-radius: 4px;
-    transition: width 0.5s ease;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+.player1 {
+    background: linear-gradient(180deg, #3a5a3d 0%, var(--color-player-1) 100%);
 }
 
-.game-status {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    padding: 4px 8px;
-    border-radius: 12px;
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+.player2 {
+    background: linear-gradient(180deg, #354d6a 0%, var(--color-player-2) 100%);
 }
 
-.game-status.active {
-    background: #4caf50;
+.player3 {
+    background: linear-gradient(180deg, #444 0%, var(--color-player-3) 100%);
+}
+
+.playerScore.completed {
+    opacity: 0.85;
+    cursor: default;
+}
+
+.playerScore:focus-visible {
+    outline: 3px solid #fff;
+    outline-offset: 4px;
+}
+
+.playerScore:active:not([aria-disabled="true"]) {
+    transform: scale(0.99);
+}
+
+.playerScore.winner {
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary), 0 0 28px rgba(255, 152, 0, 0.45), var(--shadow-lg);
+}
+
+.playerScore.winner .playerName {
+    color: var(--color-primary);
+}
+
+.playerNameRow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-sm);
+    width: 100%;
+    margin-bottom: var(--space-sm);
+    flex-shrink: 0;
+}
+
+.playerName {
+    font-size: clamp(1.1rem, 3vh, 1.75rem);
+    font-weight: 700;
     color: #fff;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
 }
 
-.game-status.completed {
-    background: #ff9800;
-    color: #222;
+.breakIndicator {
+    display: inline-block;
+    width: clamp(14px, 2.5vh, 22px);
+    height: clamp(14px, 2.5vh, 22px);
+    border-radius: 50%;
+    background: #fff;
+    flex-shrink: 0;
+    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
+    animation: breakPulse 2s ease-in-out infinite;
 }
+
+@keyframes breakPulse {
+    0%, 100% {
+        opacity: 1;
+        box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
+    }
+    50% {
+        opacity: 0.65;
+        box-shadow: 0 0 14px rgba(255, 255, 255, 0.95), 0 0 20px rgba(255, 152, 0, 0.4);
+    }
+}
+
+.winnerBadge {
+    font-size: clamp(1rem, 2.5vh, 1.5rem);
+    color: var(--color-primary);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    flex-shrink: 0;
+}
+
+.progressBar {
+    width: 80%;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.25);
+    border-radius: var(--radius-sm);
+    margin-bottom: var(--space-sm);
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.progressFill {
+    height: 100%;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: var(--radius-sm);
+    transition: width var(--transition-slow);
+}
+
 .score {
-    font-size: 40vh;
+    font-size: clamp(4.5rem, 30vh, 14rem);
     font-weight: 900;
-    margin: 20px 0 30px 0;
     line-height: 1;
     color: #fff;
-    text-shadow: 0 4px 16px rgba(0,0,0,0.6);
+    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
     text-align: center;
-    display: block;
-    min-height: 120px;
     display: flex;
     align-items: center;
     justify-content: center;
-}
-.score-buttons {
-    display: flex;
-    justify-content: center;
-    gap: 10px;
-    margin-top: auto;
-}
-.score-button {
-    background: linear-gradient(135deg, #ff9800 0%, #ffa726 100%);
-    color: #222;
-    border: none;
-    border-radius: 50%;
-    padding: 0;
-    font-size: 2.5rem;
-    font-weight: 900;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    width: 80px;
-    height: 80px;
-    margin: 0 8px;
-    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.3);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    touch-action: manipulation;
-}
-
-.score-button:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
-    background: linear-gradient(135deg, #ffa726 0%, #ffb74d 100%);
-}
-
-.score-button:active:not(:disabled) {
-    transform: translateY(0);
-    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
-}
-
-.score-button:disabled {
-    background: #666;
-    color: #999;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
-}
-.game-controls {
-    display: flex;
-    gap: 10px;
-    margin-top: 20px;
+    flex: 1 1 0;
     width: 100%;
+    min-height: 0;
+    border-radius: var(--radius-lg);
+    padding: var(--space-xs);
+    font-variant-numeric: tabular-nums;
+    position: relative;
+    pointer-events: none;
 }
-.control-button {
-    flex: 1;
-    padding: 30px;
-    background: #333;
-    color: white;
-    border: none;
-    border-radius: 0;
-    font-size: 24px;
-    cursor: pointer;
-    touch-action: manipulation;
+
+.score::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
+    opacity: 0;
+    transform: scale(0.5);
+    pointer-events: none;
 }
-.control-button.delete {
-    background: #f44336;
+
+.scoreTap::after {
+    animation: scoreRipple 0.35s ease-out forwards;
 }
-.game-detail-controls {
+
+.scoreBump {
+    animation: scoreBump 0.25s ease-out;
+}
+
+@keyframes scoreRipple {
+    0% { opacity: 0.6; transform: scale(0.4); }
+    100% { opacity: 0; transform: scale(1.4); }
+}
+
+@keyframes scoreBump {
+    0% { transform: scale(1); }
+    40% { transform: scale(1.12); }
+    100% { transform: scale(1); }
+}
+
+
+.gameDetailControls {
     display: flex;
     flex-direction: row;
-    gap: 24px;
-    margin: 40px 0 0 0;
-    padding-bottom: var(--space-xl);
+    flex-wrap: wrap;
+    gap: var(--space-md);
+    margin-top: var(--space-lg);
+    padding-bottom: calc(var(--space-md) + var(--keyboard-offset));
     width: 100%;
     justify-content: center;
     flex-shrink: 0;
 }
-.franky .player-name {
-    font-weight: bold;
-    color: #ff8c00; /* Example color */
-}
-.active-player {
-    position: relative;
-    border: 4px solid #ff9800;
-    box-shadow: 0 0 32px 8px #ff9800, 0 0 0 8px rgba(255,152,0,0.15);
-    background: linear-gradient(90deg, #ff9800 0 8px, rgba(255,152,0,0.15) 8px 100%);
-    color: #222 !important;
-    animation: activePulse 1.2s infinite alternate;
-    z-index: 2;
-}
-.active-player .player-name, .active-player .score {
-    color: #222 !important;
-    text-shadow: 0 2px 8px rgba(255,255,255,0.25);
-}
-.active-player::before {
-    content: '';
-    position: absolute;
-    left: 0; top: 0; bottom: 0;
-    width: 8px;
-    background: #ff9800;
-    border-radius: 8px 0 0 8px;
-}
-@keyframes activePulse {
-    0% { box-shadow: 0 0 32px 8px #ff9800, 0 0 0 8px rgba(255,152,0,0.15); }
-    100% { box-shadow: 0 0 48px 16px #ff9800, 0 0 0 16px rgba(255,152,0,0.22); }
-}
-.turn-indicator {
-    margin: 20px 0;
-    font-size: 1.2rem;
-    text-align: center;
-}
-.potted-balls-container {
-    margin-top: 2rem;
-    padding: 1rem;
-    background: #2a2a2a;
-    border-radius: 8px;
-}
-.potted-balls-header {
-    text-align: center;
-    font-size: 1.1rem;
-    margin-bottom: 1rem;
-    font-weight: 600;
-}
-.potted-balls-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
-    gap: 10px;
-}
-.potted-ball-btn {
-    padding: 1rem;
-    font-size: 1.2rem;
-    font-weight: bold;
-    border-radius: 8px;
-    border: 1px solid #444;
-    background-color: #333;
-    color: #fff;
-    cursor: pointer;
-    transition: background-color 0.2s, transform 0.2s;
-}
-.potted-ball-btn:hover:not(:disabled) {
-    background-color: #45a049;
-    transform: translateY(-2px);
-}
-.potted-ball-btn:disabled {
-    background-color: #222;
-    color: #555;
-    cursor: not-allowed;
-}
-.rerack-controls {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    margin-top: 1.5rem;
-}
-.rerack-btn {
-    padding: 0.8rem 1.5rem;
-    font-size: 1rem;
-    font-weight: bold;
-    border-radius: 8px;
-    border: 1px solid #444;
-    background-color: #3a539b;
-    color: #fff;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-.rerack-btn:hover {
-    background-color: #4a6fbf;
+
+.gameDetailControls > * {
+    flex: 1;
+    min-width: min(160px, 100%);
+    max-width: 280px;
 }
 
-.foul-controls {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  margin-top: 1.5rem;
+.finishButton {
+    border: 2px solid var(--color-border) !important;
+    opacity: 0.85;
+    max-width: 220px;
 }
 
-.foul-btn {
-  flex-grow: 1;
-  background-color: #ffc107; /* Amber */
-  color: #212529;
-  border: none;
-  padding: 0.75rem;
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  font-size: 1rem;
-  transition: background-color 0.2s;
+/* Landscape tablet — maximize score visibility */
+@media (orientation: landscape) and (min-width: 768px) {
+    .gameDetail {
+        padding: var(--space-lg);
+    }
+
+    .scoresContainer {
+        gap: var(--space-lg);
+    }
+
+    .playerScore {
+        padding: var(--space-xl) var(--space-lg);
+    }
 }
 
-.foul-btn:hover {
-  background-color: #ffca2c;
+/* Narrow portrait — stack players */
+@media (max-width: 600px) {
+    .scoresContainer {
+        flex-direction: column;
+    }
+
+    .score {
+        font-size: clamp(3rem, 20vw, 6rem);
+    }
 }
 
-.foul-btn:disabled {
-  background-color: #e0e0e0;
-  color: #9e9e9e;
-  cursor: not-allowed;
+/* Landscape phone — keep scores readable, compact chrome */
+@media (max-height: 500px) and (orientation: landscape) {
+    .gameDetail {
+        padding: var(--space-xs) var(--space-sm);
+        padding-bottom: calc(var(--space-xs) + var(--safe-area-bottom));
+    }
+
+    .gameHeader {
+        margin-bottom: var(--space-xs);
+    }
+
+    .bscMark {
+        width: 28px;
+        height: 28px;
+        font-size: 0.6rem;
+    }
+
+    .gameTitle {
+        font-size: clamp(0.85rem, 2.2vh, 1.1rem);
+    }
+
+    .scoresContainer {
+        flex-direction: row;
+        gap: var(--space-xs);
+        flex: 1 1 0;
+        min-height: 0;
+    }
+
+    .playerScore {
+        padding: var(--space-xs);
+    }
+
+    .playerNameRow {
+        margin-bottom: var(--space-xs);
+    }
+
+    .playerName {
+        font-size: clamp(0.75rem, 2.2vh, 1rem);
+    }
+
+    .progressBar {
+        height: 4px;
+        margin-bottom: var(--space-xs);
+        width: 90%;
+    }
+
+    .score {
+        font-size: clamp(2rem, min(36vh, 24vw), 4.5rem);
+        padding: 0;
+        flex: 1 1 0;
+    }
+
+    .gameDetailControls {
+        margin-top: var(--space-xs);
+        gap: var(--space-xs);
+        padding-bottom: calc(var(--space-xs) + var(--keyboard-offset));
+    }
+
+    .gameDetailControls > * {
+        min-width: 0;
+        max-width: none;
+        flex: 1;
+    }
 }
 
-.foul-indicator {
-  font-size: 1rem;
-  font-weight: bold;
-  color: #fff;
-  background-color: #c0392b;
-  padding: 4px 8px;
-  border-radius: 4px;
-  margin-top: 8px;
-  display: inline-block;
-}
+@media (prefers-reduced-motion: reduce) {
+    .breakIndicator {
+        animation: none;
+    }
 
-.foul-warning {
-  background-color: #f39c12;
-  color: #000;
+    .scoreTap::after,
+    .scoreBump {
+        animation: none;
+    }
 }
-
-/* Game Log Styles */
-.game-log {
-  width: 100%;
-  margin-top: 1.5rem;
-  padding: 1rem;
-  background-color: #f8f9fa;
-  border-radius: var(--border-radius);
-  border: 1px solid #dee2e6;
-}
-
-.log-title {
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-  font-size: 1.2rem;
-  color: #495057;
-}
-
-.log-list {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  max-height: 200px;
-  overflow-y: auto;
-  font-size: 0.9rem;
-}
-
-.log-entry {
-  padding: 0.5rem 0.25rem;
-  border-bottom: 1px solid #e9ecef;
-  color: #6c757d;
-}
-
-.log-entry:last-child {
-  border-bottom: none;
-}
-
-.game-log-table-container {
-  margin: 2.5rem auto 0 auto;
-  max-width: 100vw;
-  width: 100%;
-  overflow-x: auto;
-  background: #181818;
-  border-radius: 12px;
-  box-shadow: 0 2px 16px rgba(0,0,0,0.12);
-  padding: 1.5rem 1rem;
-}
-.game-log-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 1.05rem;
-  background: #222;
-  color: #fff;
-}
-.game-log-table th, .game-log-table td {
-  border: 1px solid #444;
-  padding: 0.5rem 0.7rem;
-  text-align: center;
-}
-.game-log-table th {
-  background: #333;
-  font-weight: 700;
-  font-size: 1.1rem;
-}
-.game-log-table tr:nth-child(even) td {
-  background: #232323;
-}
-.game-log-table tr:nth-child(odd) td {
-  background: #181818;
-}
-.game-log-table .log-player-col {
-  background: #222;
-  color: #ff9800;
-  font-size: 1.15rem;
-  border-bottom: 2px solid #ff9800;
-}
-
-.turn-change-controls {
-  display: flex;
-  justify-content: center;
-  margin: 2.5rem 0 1.5rem 0;
-}
-.turn-change-btn {
-  background: #ff9800;
-  color: #222;
-  font-size: 2.2rem;
-  font-weight: 900;
-  padding: 2rem 4rem;
-  border: none;
-  border-radius: 18px;
-  box-shadow: 0 4px 32px rgba(255,152,0,0.18), 0 2px 8px rgba(0,0,0,0.12);
-  cursor: pointer;
-  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
-  letter-spacing: 1px;
-  margin: 0 auto;
-  display: block;
-}
-.turn-change-btn:hover, .turn-change-btn:focus {
-  background: #ffa726;
-  color: #111;
-  box-shadow: 0 6px 40px rgba(255,152,0,0.28), 0 2px 8px rgba(0,0,0,0.18);
-}
-.pending-foul-info {
-  margin-left: 1.5rem;
-  font-size: 1.2rem;
-  color: #ffc107;
-  font-weight: 700;
-}
-.selected {
-  outline: 3px solid #ff9800 !important;
-  background: #fff3e0 !important;
-  color: #222 !important;
-} 

src/lib/features/game-detail/GameDetail.tsx

@@ -1,5 +1,8 @@
 import { h } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import styles from './GameDetail.module.css';
+import { Button } from '@lib/ui/Button';
+import { getGameWinner, isStandardGame } from '@lib/domain/gameUtils';
 import type { Game, EndlosGame } from '@lib/domain/types';
 
 interface GameDetailProps {
@@ -12,93 +15,172 @@ interface GameDetailProps {
   onBack: () => void;
 }
 
+interface AnimatedScoreProps {
+  value: number;
+  tapping: boolean;
+}
+
+function AnimatedScore({ value, tapping }: AnimatedScoreProps) {
+  const [bumping, setBumping] = useState(false);
+  const prevValue = useRef(value);
+
+  useEffect(() => {
+    if (prevValue.current !== value) {
+      setBumping(true);
+      const timer = window.setTimeout(() => setBumping(false), 250);
+      prevValue.current = value;
+      return () => window.clearTimeout(timer);
+    }
+  }, [value]);
+
+  const className = [
+    styles.score,
+    tapping ? styles.scoreTap : '',
+    bumping ? styles.scoreBump : '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <span className={className} aria-hidden="true">
+      {value}
+    </span>
+  );
+}
+
 /**
  * Game detail view for a single game.
  */
-const GameDetail = ({ game, onFinishGame, onUpdateScore, onUpdateGame, onUndo, onForfeit, onBack }: GameDetailProps) => {
-  if (!game) return null;
+const GameDetail = ({ game, onFinishGame, onUpdateScore, onUndo, onBack }: GameDetailProps) => {
+  const [tappingPlayer, setTappingPlayer] = useState<number | null>(null);
 
-  const handleScoreUpdate = (playerIndex: number, change: number) => {
-    onUpdateScore(playerIndex, change);
-    // Silent update; toast notifications removed
-  };
+  if (!game || !isStandardGame(game)) return null;
 
+  const standardGame = game;
+  const isCompleted = standardGame.status === 'completed';
+  const winner = getGameWinner(standardGame);
 
-  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]);
+  const playerNames = [standardGame.player1, standardGame.player2, standardGame.player3].filter(Boolean);
+  const scores = [standardGame.score1, standardGame.score2, standardGame.score3].filter((_, i) => playerNames[i]);
+
+  const order = standardGame.breakOrder;
+  const breakerIdx = standardGame.currentBreakerIdx;
+
+  const titleParts = [
+    standardGame.gameType,
+    standardGame.raceTo && standardGame.raceTo !== Infinity
+      ? `Race to ${standardGame.raceTo}`
+      : standardGame.raceTo === Infinity
+        ? 'Endlos'
+        : null,
+  ].filter(Boolean);
 
   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']}>
+    <div className={styles.gameDetail}>
+      <header className={styles.gameHeader}>
+        <div className={styles.gameHeaderInner}>
+          <span className={styles.bscMark} aria-hidden="true">BSC</span>
+          <div className={styles.gameTitle}>{titleParts.join(' · ')}</div>
+        </div>
+        {isCompleted && (
+          <span className={styles.statusBadge} aria-label="Spiel abgeschlossen">Abgeschlossen</span>
+        )}
+      </header>
+
+      <div className={styles.scoresContainer} aria-label="Punktestand">
         {playerNames.map((name, idx) => {
-          const currentScore = scores[idx];
-          const progressPercentage = game.raceTo ? Math.min((currentScore / game.raceTo) * 100, 100) : 0;
-          
+          const currentScore = scores[idx] ?? 0;
+          const playerName = name as string;
+          const progressPercentage = standardGame.raceTo && standardGame.raceTo !== Infinity
+            ? Math.min((currentScore / standardGame.raceTo) * 100, 100)
+            : 0;
+          const isBreaker = order && typeof breakerIdx === 'number' && order[breakerIdx] === idx + 1;
+          const isWinner = isCompleted && winner === playerName;
+          const playerClass = [
+            styles.playerScore,
+            styles[`player${idx + 1}` as keyof typeof styles],
+            isWinner ? styles.winner : '',
+            isCompleted ? styles.completed : '',
+          ].filter(Boolean).join(' ');
+
+          const handleScore = () => {
+            if (isCompleted) return;
+            setTappingPlayer(idx);
+            window.setTimeout(() => setTappingPlayer((current) => (current === idx ? null : current)), 350);
+            onUpdateScore(idx + 1, 1);
+          };
+
           return (
             <div
-              className={styles['player-score'] + (name === 'Fränky' ? ' ' + styles['franky'] : '')}
-              key={name + idx}
+              className={playerClass}
+              key={playerName + idx}
+              id={`score${idx + 1}`}
+              onClick={handleScore}
+              onKeyDown={(e) => {
+                if (!isCompleted && (e.key === 'Enter' || e.key === ' ')) {
+                  e.preventDefault();
+                  handleScore();
+                }
+              }}
+              role="button"
+              tabIndex={isCompleted ? -1 : 0}
+              aria-label={`Punkt für ${playerName}. Aktueller Stand: ${currentScore}`}
+              aria-disabled={isCompleted}
             >
-              <span className={styles['player-name']}>
-                {name}
-                {(() => {
-                  const order = (game as any).breakOrder as number[] | undefined;
-                  const breakerIdx = (game as any).currentBreakerIdx as number | undefined;
-                  if (order && typeof breakerIdx === 'number' && order[breakerIdx] === idx + 1) {
-                    return <span title="Break" aria-label="Break" style={{ display: 'inline-block', width: '1em', height: '1em', borderRadius: '50%', background: '#fff', marginLeft: 6, verticalAlign: 'middle' }} />;
-                  }
-                  return null;
-                })()}
-              </span>
-              <div className={styles['progress-bar']}>
-                <div 
-                  className={styles['progress-fill']} 
-                  style={{ width: `${progressPercentage}%` }}
-                />
+              <div className={styles.playerNameRow}>
+                <span className={styles.playerName}>{playerName}</span>
+                {isBreaker && !isCompleted && (
+                  <span
+                    className={styles.breakIndicator}
+                    title="Break"
+                    aria-label={`${playerName} hat den Break`}
+                  />
+                )}
+                {isWinner && (
+                  <span className={styles.winnerBadge} aria-label="Gewinner">★</span>
+                )}
               </div>
-              <span
-                className={styles['score']}
-                id={`score${idx + 1}`}
-                onClick={() => !isCompleted && onUpdateScore(idx + 1, 1)}
-                onKeyDown={(e) => {
-                  if (!isCompleted && (e.key === 'Enter' || e.key === ' ')) {
-                    e.preventDefault();
-                    onUpdateScore(idx + 1, 1);
-                  }
-                }}
-                role="button"
-                tabIndex={isCompleted ? -1 : 0}
-                aria-label={`Aktueller Punktestand für ${name}: ${scores[idx]}. Klicken oder Enter drücken zum Erhöhen.`}
-              >
-                {scores[idx]}
-              </span>
-              {/* +/- buttons removed per issue #29. Tap score to +1; use Undo to revert. */}
+
+              {standardGame.raceTo && standardGame.raceTo !== Infinity && (
+                <div className={styles.progressBar} aria-hidden="true">
+                  <div
+                    className={styles.progressFill}
+                    style={{ width: `${progressPercentage}%` }}
+                  />
+                </div>
+              )}
+
+              <AnimatedScore value={currentScore} tapping={tappingPlayer === idx} />
             </div>
           );
         })}
       </div>
-      <div className={styles['game-detail-controls']}>
-        <button className="btn" onClick={onBack} aria-label="Zurück zur Liste">Zurück zur Liste</button>
+
+      <div className={styles.gameDetailControls}>
+        <Button variant="secondary" size="medium" onClick={onBack} aria-label="Zurück zur Liste">
+          Zurück
+        </Button>
         {onUndo && (
-          <button 
-            className="btn btn--secondary" 
-            onClick={() => {
-              onUndo();
-            }}
-            aria-label="Rückgängig"
+          <Button
+            variant="secondary"
+            size="medium"
+            onClick={onUndo}
+            aria-label="Letzten Punkt rückgängig machen"
           >
             ↶ Rückgängig
-          </button>
+          </Button>
         )}
-        <button className="btn" disabled={isCompleted} onClick={onFinishGame} aria-label={isCompleted ? 'Abgeschlossen' : 'Spiel beenden'}>{isCompleted ? 'Abgeschlossen' : 'Spiel beenden'}</button>
+        <Button
+          variant="secondary"
+          size="medium"
+          disabled={isCompleted}
+          onClick={onFinishGame}
+          aria-label={isCompleted ? 'Spiel bereits abgeschlossen' : 'Spiel beenden'}
+          className={styles.finishButton}
+        >
+          {isCompleted ? 'Abgeschlossen' : 'Spiel beenden'}
+        </Button>
       </div>
     </div>
   );
 };
 
-export default GameDetail; 
+export default GameDetail;

src/lib/features/game-detail/README.md

@@ -7,7 +7,7 @@
 - `game: Game`
 - `onUpdateScore(playerIndex: number, delta: number): void`
 - `onFinishGame(): void`
-- `onUpdateGame?(game: EndlosGame): void`
+- `onUpdateGame?(game: Game): void`
 - `onUndo?(): void`
 - `onForfeit?(): void`
 - `onBack(): void`

src/lib/features/game-lifecycle/GameCompletionModal.module.css

@@ -1,160 +1,152 @@
-/* Only GameCompletionModal-specific styles. Shared modal styles are now in Modal.module.css */
-.final-scores {
-    margin: 20px 0;
+.modalWrapper {
+    position: relative;
+    overflow: hidden;
 }
-.final-score {
+
+.confetti {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.confettiPiece {
+    position: absolute;
+    top: -12px;
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+    opacity: 0;
+    animation: confettiFall 1.5s ease-out forwards;
+    animation-delay: calc(var(--i, 0) * 0.06s);
+    left: calc(8% + var(--i, 0) * 7%);
+}
+
+.confettiPiece:nth-child(3n) {
+    background: var(--color-primary);
+}
+
+.confettiPiece:nth-child(3n + 1) {
+    background: #ffc107;
+}
+
+.confettiPiece:nth-child(3n + 2) {
+    background: #ffeb3b;
+}
+
+@keyframes confettiFall {
+    0% {
+        opacity: 1;
+        transform: translateY(0) rotate(0deg) scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(280px) rotate(540deg) scale(0.6);
+    }
+}
+
+.finalScores {
+    margin: var(--space-md) 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+    position: relative;
+    z-index: 2;
+}
+
+.finalScore {
     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;
+    padding: var(--space-md) var(--space-lg);
+    background: var(--color-background);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--color-border);
+    min-height: var(--touch-target-comfortable);
 }
-.final-score .player-name {
-    font-size: 1.2rem;
-    font-weight: bold;
-    color: #fff;
+
+.finalScoreWinner {
+    border-color: var(--color-primary);
+    background: var(--color-primary-light);
+    box-shadow: 0 0 0 2px var(--color-primary);
 }
-.final-score .score {
-    font-size: 1.2rem;
-    font-weight: bold;
-    color: #fff;
-}
-.winner-announcement {
-    text-align: center;
-    margin: 20px 0 0 0;
-    padding: 32px 16px 24px 16px; /* extra top padding to keep icons inside */
-    background: linear-gradient(135deg, #ff9800 0%, #ffa726 100%);
-    border-radius: 16px;
-    font-size: 1.2rem;
-    color: #222;
+
+.finalScore .playerName {
+    font-size: var(--font-size-lg);
     font-weight: 700;
-    box-shadow: 0 8px 32px rgba(255, 152, 0, 0.3);
-    animation: celebrationPulse 2s ease-in-out infinite;
-    position: relative;
-    overflow: visible; /* avoid clipping decorative icons */
-}
-
-.winner-announcement::before {
-    content: '🎉';
-    position: absolute;
-    top: 6px;
-    left: 20px;
-    font-size: 24px;
-    animation: bounce 1s ease-in-out infinite;
-}
-
-.winner-announcement::after {
-    content: '🏆';
-    position: absolute;
-    top: 6px;
-    right: 20px;
-    font-size: 24px;
-    animation: bounce 1s ease-in-out infinite 0.5s;
-}
-
-.winner-announcement h3 {
-    margin: 0;
-    font-size: 1.8rem;
-    color: #222;
-    text-align: center;
-    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    color: var(--color-text);
     text-transform: uppercase;
-    letter-spacing: 1px;
-    font-weight: 900;
+    letter-spacing: 0.04em;
 }
 
-@keyframes celebrationPulse {
+.finalScore .score {
+    font-size: clamp(1.75rem, 5vw, 2.5rem);
+    font-weight: 800;
+    color: var(--color-primary);
+    font-variant-numeric: tabular-nums;
+}
+
+.winnerAnnouncement {
+    text-align: center;
+    margin-top: var(--space-lg);
+    padding: var(--space-xl) var(--space-lg);
+    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+    border-radius: var(--radius-lg);
+    color: #1a1a1a;
+    font-weight: 700;
+    box-shadow: var(--shadow-md), 0 0 24px rgba(255, 152, 0, 0.35);
+    position: relative;
+    z-index: 2;
+    animation: winnerGlow 2s ease-in-out infinite;
+}
+
+@keyframes winnerGlow {
     0%, 100% {
-        transform: scale(1);
-        box-shadow: 0 8px 32px rgba(255, 152, 0, 0.3);
+        box-shadow: var(--shadow-md), 0 0 20px rgba(255, 152, 0, 0.3);
     }
     50% {
-        transform: scale(1.02);
-        box-shadow: 0 12px 40px rgba(255, 152, 0, 0.4);
+        box-shadow: var(--shadow-md), 0 0 32px rgba(255, 152, 0, 0.55);
     }
 }
 
-@keyframes bounce {
-    0%, 20%, 50%, 80%, 100% {
-        transform: translateY(0);
-    }
-    40% {
-        transform: translateY(-10px);
-    }
-    60% {
-        transform: translateY(-5px);
-    }
-}
-.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;
-    }
-}
-
-.stats-container {
-    margin-top: 1.5rem;
-    padding-top: 1rem;
-    border-top: 1px solid #dee2e6;
-}
-
-.stats-title {
+.winnerAnnouncement h3 {
+    margin: 0;
+    font-size: clamp(1.1rem, 3vw, 1.6rem);
+    color: #1a1a1a;
     text-align: center;
-    font-size: 1.3rem;
-    color: #495057;
-    margin-bottom: 1rem;
+    font-weight: 800;
+    line-height: 1.3;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
-.player-stats {
-    margin-bottom: 1rem;
-    padding: 0.75rem;
-    background-color: #f8f9fa;
-    border-radius: 4px;
-}
-
-.player-name-stats {
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-    color: #343a40;
-}
-
-.stat-item {
+.modalActions {
     display: flex;
-    justify-content: space-between;
-    font-size: 0.95rem;
-    color: #6c757d;
+    flex-direction: column;
+    gap: var(--space-md);
+    margin-top: var(--space-lg);
+    position: relative;
+    z-index: 2;
 }
 
-.stat-item strong {
-    color: #212529;
+@media (min-width: 480px) {
+    .modalActions {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .modalActions > * {
+        flex: 1;
+        min-width: 120px;
+    }
 }
 
-.btn {
-    padding: 0.75rem 1.5rem;
-    border-radius: 4px;
-} 
+@media (prefers-reduced-motion: reduce) {
+    .confettiPiece {
+        display: none;
+    }
+
+    .winnerAnnouncement {
+        animation: none;
+    }
+}

src/lib/features/game-lifecycle/GameCompletionModal.tsx

@@ -1,7 +1,9 @@
 import { h } from 'preact';
 import modalStyles from '@lib/ui/Modal.module.css';
 import styles from './GameCompletionModal.module.css';
+import { Button } from '@lib/ui/Button';
 import type { Game } from '@lib/domain/types';
+import { getGamePlayers, isEndlosGame } from '@lib/domain/gameUtils';
 
 interface GameCompletionModalProps {
   open: boolean;
@@ -17,47 +19,72 @@ interface GameCompletionModalProps {
 const GameCompletionModal = ({ open, game, onConfirm, onClose, onRematch }: GameCompletionModalProps) => {
   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]);
-  let maxScore, winners, winnerText;
+  const players = getGamePlayers(game);
+  const playerNames = players.map((player) => player.name);
+  const scores = players.map((player) => player.score);
+  const maxScore = Math.max(...scores);
+  const winners = playerNames.filter((name, idx) => (scores[idx] ?? 0) === maxScore);
+  let winnerText: string;
 
-  if (game.forfeitedBy) {
+  if (isEndlosGame(game) && game.forfeitedBy) {
     winnerText = `${game.winner} hat gewonnen, da ${game.forfeitedBy} aufgegeben hat.`;
   } else {
-    maxScore = Math.max(...scores);
-    winners = playerNames.filter((name, idx) => scores[idx] === maxScore);
     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
+      id="game-completion-modal"
+      className={`${modalStyles.modal} ${modalStyles.show}`}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="completion-modal-title"
+    >
+      <div className={`${modalStyles['modal-content']} ${styles.modalWrapper}`}>
+        <div className={styles.confetti} aria-hidden="true">
+          {Array.from({ length: 12 }, (_, i) => (
+            <span key={i} className={styles.confettiPiece} style={{ '--i': i } as Record<string, number>} />
+          ))}
+        </div>
         <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>
+          <button className={modalStyles['close-button']} onClick={onClose} aria-label="Schließen" type="button">×</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 className={styles.finalScores}>
+            {playerNames.map((name, idx) => {
+              const isWinner = !(isEndlosGame(game) && game.forfeitedBy) && winners.includes(name) && winners.length === 1;
+              return (
+                <div
+                  className={`${styles.finalScore} ${isWinner ? styles.finalScoreWinner : ''}`}
+                  key={`${name}-${idx}`}
+                >
+                  <span className={styles.playerName}>{name}</span>
+                  <span className={styles.score}>{scores[idx] ?? 0}</span>
+                </div>
+              );
+            })}
+          </div>
+          <div className={styles.winnerAnnouncement}>
+            <h3>{winnerText}</h3>
           </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'] + ' ' + styles['btn--primary']} onClick={onRematch} aria-label="Rematch">Rematch</button>
-          <button className={styles['btn']} onClick={onClose} aria-label="Abbrechen">Abbrechen</button>
+        <div className={styles.modalActions}>
+          <Button variant="primary" size="large" onClick={onRematch} aria-label="Rematch starten">
+            Rematch
+          </Button>
+          <Button variant="secondary" size="large" onClick={onConfirm} aria-label="Spiel bestätigen und abschließen">
+            Bestätigen
+          </Button>
+          <Button variant="secondary" size="large" onClick={onClose} aria-label="Abbrechen">
+            Abbrechen
+          </Button>
         </div>
       </div>
     </div>
   );
 };
 
-export default GameCompletionModal; 
+export default GameCompletionModal;

src/lib/features/game-list/GameList.module.css

@@ -1,284 +1,234 @@
-/* GameList-specific styles using design system tokens */
-.screen.active {
-    display: block;
-    opacity: 1;
-    transform: translateX(0);
-    position: relative;
-}
-
-.screen-content {
-    display: flex;
-    flex-direction: column;
-    min-height: var(--app-height);
-    padding: var(--space-lg);
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-}
-
-.screen-title {
-    font-size: var(--font-size-xxl);
-    margin-bottom: var(--space-lg);
-    font-weight: 700;
-}
-
-.game-list {
+.gameList {
     width: 100%;
     display: flex;
     flex-direction: column;
     min-height: 0;
+    flex: 1;
 }
 
-/* Filter buttons with improved symmetry */
-.filter-buttons {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+.newGameWrapper {
+    flex-shrink: 0;
+    margin-bottom: var(--space-lg);
+}
+
+.filterButtons {
+    display: flex;
+    flex-wrap: wrap;
     gap: var(--space-sm);
-    margin: var(--space-lg) 0 var(--space-md) 0;
-    border-radius: var(--radius-md);
-    overflow: hidden;
-    box-shadow: var(--shadow-sm);
+    margin-bottom: var(--space-lg);
     flex-shrink: 0;
 }
 
-.filter-button {
-    background: var(--color-secondary);
-    color: var(--color-text);
-    border: none;
-    font-size: var(--font-size-base);
-    padding: var(--space-md) 0;
-    cursor: pointer;
-    font-weight: 500;
-    transition: all var(--transition-base);
-    min-height: var(--touch-target-comfortable);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.filterButtons > * {
+    flex: 1 1 auto;
+    min-width: min(160px, calc(50% - var(--space-sm)));
+    min-height: var(--touch-target-large);
 }
 
-.filter-button:hover {
-    background: var(--color-secondary-hover);
-    transform: translateY(-1px);
-}
-
-.filter-button.active {
-    background: var(--color-primary);
-    color: white;
-    box-shadow: var(--shadow-md);
-}
-
-/* Games container with improved spacing */
-.games-container {
+.gamesContainer {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: var(--space-md);
-    margin-top: var(--space-lg);
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
     min-height: 0;
-    padding-bottom: var(--space-md);
+    padding-bottom: calc(var(--space-md) + var(--keyboard-offset));
+    -webkit-overflow-scrolling: touch;
 }
 
-/* Game item with better symmetry and spacing */
-.game-item {
+.gameItem {
     display: grid;
     grid-template-columns: 1fr auto;
+    align-items: stretch;
+    gap: var(--space-md);
+    overflow: hidden;
+    width: 100%;
+    transition: transform var(--transition-fast), box-shadow var(--transition-base);
+}
+
+.gameItem:active {
+    transform: scale(0.99);
+}
+
+.gameItem.active {
+    border-left: 5px solid var(--color-primary);
+    box-shadow: var(--shadow-md);
+}
+
+.gameItem.completed {
+    border-left: 5px solid var(--color-text-muted);
+    opacity: 0.88;
+}
+
+.gameInfo {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+    padding: var(--space-lg);
+    cursor: pointer;
+    min-width: 0;
+    touch-action: manipulation;
+}
+
+.gameInfo:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+}
+
+.gameMeta {
+    display: flex;
     align-items: center;
     gap: var(--space-md);
-    padding: var(--space-lg);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-sm);
-    transition: all var(--transition-base);
-    cursor: pointer;
-    background: var(--color-surface);
+    flex-wrap: wrap;
+}
+
+.statusChip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+    min-height: var(--touch-target-min);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    flex-shrink: 0;
+}
+
+.liveDot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #fff;
+    animation: livePulse 1.5s ease-in-out infinite;
+}
+
+@keyframes livePulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(0.85); }
+}
+
+.statusActive {
+    background: var(--color-primary);
+    color: #1a1a1a;
+}
+
+.statusCompleted {
+    background: var(--color-secondary);
+    color: var(--color-text-muted);
     border: 1px solid var(--color-border);
 }
 
-.game-item:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-md);
-    border-color: var(--color-primary);
+.gameType {
+    font-weight: 600;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
 }
 
-.game-item.active {
-    background: var(--color-success);
-    border-color: var(--color-success);
-}
-
-.game-item.completed {
-    background: var(--color-surface);
-    opacity: 0.8;
-    border-color: var(--color-border);
-}
-
-/* Game info with improved layout */
-.game-info {
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    align-items: center;
-    gap: var(--space-lg);
-    width: 100%;
-    cursor: pointer;
-}
-
-.game-type {
-    font-weight: 700;
-    font-size: var(--font-size-lg);
-    color: var(--color-text);
-    white-space: nowrap;
-    min-width: 120px;
-    text-align: center;
-    background: var(--color-secondary);
-    padding: var(--space-sm) var(--space-md);
-    border-radius: var(--radius-sm);
-}
-
-.player-names {
+.playerNames {
     color: var(--color-text);
     font-size: var(--font-size-lg);
-    font-weight: 500;
-    text-align: center;
-    flex: 1;
+    font-weight: 600;
+    line-height: 1.3;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
 }
 
-.game-scores {
-    font-size: var(--font-size-xl);
-    font-weight: 700;
-    text-align: center;
+.gameScores {
+    font-size: var(--font-size-xxl);
+    font-weight: 800;
     color: var(--color-primary);
-    min-width: 120px;
-    background: var(--color-background);
-    padding: var(--space-sm) var(--space-md);
-    border-radius: var(--radius-sm);
+    letter-spacing: 0.02em;
+    font-variant-numeric: tabular-nums;
 }
 
-/* Delete button with improved touch target */
-.delete-button {
-    width: var(--touch-target-comfortable);
-    height: var(--touch-target-comfortable);
-    border: none;
-    background: var(--color-danger);
-    color: white;
-    border-radius: 50%;
-    font-size: var(--font-size-lg);
+.deleteWrapper {
     display: flex;
     align-items: center;
-    justify-content: center;
-    transition: all var(--transition-base);
-    cursor: pointer;
-    box-shadow: var(--shadow-sm);
+    padding: var(--space-md);
+    flex-shrink: 0;
 }
 
-.delete-button::before {
-    content: '🗑️';
-    font-size: var(--font-size-lg);
+.deleteButton {
+    min-width: 100px !important;
+    width: auto !important;
 }
 
-.delete-button:hover {
-    background: #cc0000;
-    transform: scale(1.05);
-    box-shadow: var(--shadow-md);
-}
-
-.delete-button:active {
-    transform: scale(0.95);
-}
-
-/* Empty state styling */
-.empty-state {
+.emptyState {
     text-align: center;
-    padding: var(--space-xxl);
+    padding: var(--space-xxl) var(--space-lg);
     color: var(--color-text-muted);
     font-size: var(--font-size-lg);
-    background: var(--color-surface);
+    background: linear-gradient(180deg, #2a2a2a 0%, var(--color-surface) 100%);
     border-radius: var(--radius-lg);
     border: 2px dashed var(--color-border);
-}
-
-/* Page header */
-.page-header {
-    font-size: var(--font-size-xxxl);
-    font-weight: 700;
-    color: var(--color-text);
-    background: var(--color-surface);
-    padding: var(--space-lg) 0 var(--space-md) 0;
-    margin-bottom: var(--space-sm);
-    text-align: left;
     width: 100%;
-    letter-spacing: 0.5px;
-    border-radius: var(--radius-lg);
 }
 
-/* Tablet-specific improvements */
-@media (min-width: 768px) and (max-width: 1024px) {
-    .screen-content {
-        padding: var(--space-xl);
-    }
-    
-    .filter-buttons {
+.emptyBall {
+    font-size: 3rem;
+    line-height: 1;
+    margin-bottom: var(--space-md);
+    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
+}
+
+.emptyHint {
+    margin-top: var(--space-sm);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+}
+
+@media (min-width: 768px) {
+    .filterButtons {
         gap: var(--space-md);
-        margin: var(--space-xl) 0 var(--space-lg) 0;
     }
-    
-    .filter-button {
-        font-size: var(--font-size-lg);
-        padding: var(--space-lg) 0;
-        min-height: var(--touch-target-comfortable);
-    }
-    
-    .game-item {
+
+    .gameInfo {
         padding: var(--space-xl);
-        gap: var(--space-lg);
+        gap: var(--space-md);
     }
-    
-    .game-info {
-        gap: var(--space-xl);
-    }
-    
-    .game-type {
-        font-size: var(--font-size-xl);
-        min-width: 150px;
-        padding: var(--space-md) var(--space-lg);
-    }
-    
-    .player-names {
+
+    .playerNames {
         font-size: var(--font-size-xl);
     }
-    
-    .game-scores {
-        font-size: var(--font-size-xxl);
-        min-width: 150px;
-        padding: var(--space-md) var(--space-lg);
+
+    .gameScores {
+        font-size: var(--font-size-xxxl);
     }
-    
-    .delete-button {
-        width: 64px;
-        height: 64px;
-        font-size: var(--font-size-xl);
-    }
-    
-    .empty-state {
-        font-size: var(--font-size-xl);
-        padding: var(--space-xxl) var(--space-xl);
+
+    .deleteButton {
+        min-width: 120px !important;
     }
 }
 
-/* Mobile adjustments */
-@media (max-width: 767px) {
-    .screen-content {
-        padding: var(--space-md);
-    }
-    
-    .game-info {
+@media (max-width: 600px) {
+    .gameItem {
         grid-template-columns: 1fr;
-        gap: var(--space-md);
-        text-align: center;
-    }
-    
-    .game-type,
-    .game-scores {
-        min-width: auto;
         width: 100%;
     }
-} 
+
+    .filterButtons > * {
+        min-width: calc(33% - var(--space-sm));
+    }
+
+    .deleteWrapper {
+        padding: 0 var(--space-lg) var(--space-lg);
+    }
+
+    .deleteButton {
+        width: 100% !important;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .liveDot {
+        animation: none;
+    }
+
+    .gameItem:active {
+        transform: none;
+    }
+}

src/lib/features/game-list/GameList.tsx

@@ -28,25 +28,17 @@ export default function GameList({
     .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
 
   const getPlayerNames = (game: Game): string => {
-    if ('players' in game) {
-      return game.players.map(p => p.name).join(' vs ');
-    } else {
-      const standardGame = game as StandardGame;
-      return standardGame.player3
-        ? `${standardGame.player1} vs ${standardGame.player2} vs ${standardGame.player3}`
-        : `${standardGame.player1} vs ${standardGame.player2}`;
-    }
+    const g = game as StandardGame;
+    return g.player3
+      ? `${g.player1} vs ${g.player2} vs ${g.player3}`
+      : `${g.player1} vs ${g.player2}`;
   };
 
   const getScores = (game: Game): string => {
-    if ('players' in game) {
-      return game.players.map(p => p.score).join(' - ');
-    } else {
-      const standardGame = game as StandardGame;
-      return standardGame.player3
-        ? `${standardGame.score1} - ${standardGame.score2} - ${standardGame.score3}`
-        : `${standardGame.score1} - ${standardGame.score2}`;
-    }
+    const g = game as StandardGame;
+    return g.player3
+      ? `${g.score1} – ${g.score2} – ${g.score3}`
+      : `${g.score1} – ${g.score2}`;
   };
 
   const filterButtons = [
@@ -56,39 +48,44 @@ export default function GameList({
   ];
 
   return (
-    <div className={styles['game-list']}>
-      <div className={styles['filter-buttons']}>
+    <div className={styles.gameList}>
+      <div className={styles.filterButtons} role="group" aria-label="Spiele filtern">
         {filterButtons.map(({ key, label, ariaLabel }) => (
           <Button
             key={key}
             variant={filter === key ? 'primary' : 'secondary'}
-            size="small"
+            size="medium"
             onClick={() => setFilter(key)}
             aria-label={ariaLabel}
+            aria-pressed={filter === key}
           >
             {label}
           </Button>
         ))}
       </div>
       
-      <div className={styles['games-container']}>
+      <div className={styles.gamesContainer}>
         {filteredGames.length === 0 ? (
-          <div className={styles['empty-state']}>Keine Spiele vorhanden</div>
+          <div className={styles.emptyState} role="status">
+            <div className={styles.emptyBall} aria-hidden="true">🎱</div>
+            <p>Keine Spiele vorhanden</p>
+            <p className={styles.emptyHint}>Tippe oben auf „+ Neues Spiel"</p>
+          </div>
         ) : (
           filteredGames.map(game => {
           const playerNames = getPlayerNames(game);
           const scores = getScores(game);
+          const isActive = game.status === 'active';
           
           return (
             <Card
               key={game.id}
               variant="elevated"
-              className={
-                styles['game-item'] + ' ' + (game.status === 'completed' ? styles['completed'] : styles['active'])
-              }
+              padding="none"
+              className={`${styles.gameItem} ${isActive ? styles.active : styles.completed}`}
             >
               <div 
-                className={styles['game-info']} 
+                className={styles.gameInfo} 
                 onClick={() => onShowGameDetail(game.id)}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' || e.key === ' ') {
@@ -101,24 +98,33 @@ export default function GameList({
                 aria-label={`Details für Spiel ${playerNames}`}
                 aria-describedby={`game-${game.id}-description`}
               >
-                <div className={styles['game-type']}>
-                  {game.gameType}{game.raceTo ? ` | ${game.raceTo}` : ''}
+                <div className={styles.gameMeta}>
+                  <span className={`${styles.statusChip} ${isActive ? styles.statusActive : styles.statusCompleted}`}>
+                    {isActive && <span className={styles.liveDot} aria-hidden="true" />}
+                    {isActive ? 'Live' : 'Fertig'}
+                  </span>
+                  <div className={styles.gameType}>
+                    {game.gameType}{game.raceTo && game.raceTo !== Infinity ? ` · ${game.raceTo}` : game.raceTo === Infinity ? ' · Endlos' : ''}
+                  </div>
                 </div>
-                <div className={styles['player-names']}>{playerNames}</div>
-                <div className={styles['game-scores']}>{scores}</div>
+                <div className={styles.playerNames}>{playerNames}</div>
+                <div className={styles.gameScores}>{scores}</div>
                 <div id={`game-${game.id}-description`} className="sr-only">
                   {game.gameType} Spiel zwischen {playerNames} mit dem Stand {scores}. 
-                  {game.status === 'completed' ? 'Abgeschlossen' : 'Aktiv'}
+                  {isActive ? 'Aktiv' : 'Abgeschlossen'}
                 </div>
               </div>
-              <Button
-                variant="danger"
-                size="small"
-                onClick={() => onDeleteGame(game.id)}
-                aria-label={`Spiel löschen: ${playerNames}`}
-              >
-                🗑
-              </Button>
+              <div className={styles.deleteWrapper}>
+                <Button
+                  variant="danger"
+                  size="medium"
+                  onClick={() => onDeleteGame(game.id)}
+                  aria-label={`Spiel löschen: ${playerNames}`}
+                  className={styles.deleteButton}
+                >
+                  Löschen
+                </Button>
+              </div>
             </Card>
           );
         })
@@ -126,4 +132,4 @@ export default function GameList({
       </div>
     </div>
   );
-}
+}

src/lib/features/game-list/README.md

@@ -13,7 +13,7 @@ Single component `GameList` renders the scoreboard overview with filter tabs.
 ## Behaviour
 
 - Sorts games by `createdAt` (desc) and filters according to `filter`.
-- Derives player names/scores for both `StandardGame` and `EndlosGame`.
+- Derives player names/scores for `StandardGame`.
 - Uses `@lib/ui` primitives (`Button`, `Card`) for visuals.
 
 ## Example

src/lib/features/new-game/NewGame.module.css

@@ -122,20 +122,109 @@
     text-align: center;
     font-weight: 500;
 }
-.new-game-form {
+/* NewGame-specific styles only. Shared utility classes are now in global CSS. */
+.wizardShell {
+    flex: 1;
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
     width: 100%;
-    max-width: 600px;
-    margin: var(--space-xl) auto 0 auto;
-    background: var(--color-surface);
+    min-height: 0;
+    max-height: 100%;
+    overflow: hidden;
+    padding: var(--space-sm) 0;
+}
+
+.new-game-form {
+    width: min(94vw, 720px);
+    max-height: 100%;
+    margin: 0 auto;
+    background: linear-gradient(180deg, #2a2a2a 0%, var(--color-surface) 100%);
     border-radius: var(--radius-xl);
-    box-shadow: var(--shadow-lg);
+    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.06);
     padding: 0;
     display: flex;
     flex-direction: column;
     border: 1px solid var(--color-border);
-    flex: 1;
+    flex-shrink: 1;
     min-height: 0;
     overflow: hidden;
+    animation: wizardStepIn var(--transition-slow) ease-out;
+}
+
+/* Per-step wizard backgrounds — visually distinct per step */
+.new-game-form.step-player1 {
+    background: linear-gradient(180deg, #3a5a3d 0%, #2e4631 100%);
+    border-color: rgba(255, 255, 255, 0.12);
+}
+
+.new-game-form.step-player2 {
+    background: linear-gradient(180deg, #354d6a 0%, #2a3b52 100%);
+    border-color: rgba(255, 255, 255, 0.12);
+}
+
+.new-game-form.step-player3 {
+    background: linear-gradient(180deg, #444 0%, #333 100%);
+    border-color: rgba(255, 255, 255, 0.12);
+}
+
+.new-game-form.step-gameType {
+    background: linear-gradient(180deg, #5a2323 0%, #4a1c1c 100%);
+    border-color: rgba(255, 255, 255, 0.12);
+}
+
+.new-game-form.step-raceTo {
+    background: linear-gradient(180deg, #3d245e 0%, #2d1b4e 100%);
+    border-color: rgba(255, 255, 255, 0.12);
+}
+
+.new-game-form.step-breakRule {
+    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
+    border-color: rgba(255, 255, 255, 0.12);
+}
+
+.new-game-form.step-breakOrder {
+    background: linear-gradient(180deg, #5a3a10 0%, #3d260a 100%);
+    border-color: rgba(255, 152, 0, 0.25);
+}
+
+.new-game-form[class*="step-"] .form-footer {
+    background: rgba(0, 0, 0, 0.35);
+    border-top-color: rgba(255, 255, 255, 0.12);
+}
+
+.new-game-form[class*="step-"] .wizard-summary {
+    background: rgba(0, 0, 0, 0.35);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.new-game-form[class*="step-"] .screen-title {
+    color: #fff;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
+.new-game-form[class*="step-"] .player-input {
+    background: rgba(0, 0, 0, 0.25);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.new-game-form[class*="step-"] .name-input,
+.new-game-form[class*="step-"] .game-type-btn,
+.new-game-form[class*="step-"] .race-to-btn,
+.new-game-form[class*="step-"] .quick-pick-btn {
+    background: rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+@keyframes wizardStepIn {
+    from {
+        opacity: 0;
+        transform: translateX(12px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
 }
 
 .form-header {
@@ -143,6 +232,55 @@
     padding: clamp(0.4rem, 1.5vh, 1.25rem) var(--space-lg) clamp(0.2rem, 0.8vh, 0.75rem) var(--space-lg);
 }
 
+.wizard-summary {
+    margin-top: clamp(0.25rem, 0.8vh, 0.5rem);
+    margin-bottom: clamp(0.25rem, 0.8vh, 0.5rem);
+    padding: clamp(0.5rem, 1.2vh, 0.75rem) var(--space-md);
+    background: rgba(0, 0, 0, 0.25);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+}
+
+.wizard-summary-hint {
+    margin: 0;
+    font-size: clamp(0.85rem, 2.2vw, 0.95rem);
+    line-height: 1.35;
+    color: var(--color-text-muted, #aaa);
+}
+
+.wizard-summary-list {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: clamp(0.2rem, 0.6vh, 0.35rem);
+}
+
+.wizard-summary-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.35rem 0.5rem;
+    min-height: 1.35em;
+}
+
+.wizard-summary-label {
+    margin: 0;
+    flex: 0 0 auto;
+    font-size: clamp(0.8rem, 2vw, 0.9rem);
+    font-weight: 600;
+    color: var(--color-text-muted, #aaa);
+    text-transform: none;
+}
+
+.wizard-summary-value {
+    margin: 0;
+    flex: 1 1 auto;
+    font-size: clamp(0.95rem, 2.5vw, 1.05rem);
+    line-height: 1.35;
+    color: var(--color-text, #eee);
+    font-weight: 500;
+}
+
 .form-content {
     flex: 1;
     overflow-y: auto;
@@ -160,7 +298,7 @@
     bottom: 0;
     z-index: 2;
     background: var(--color-surface);
-    padding: var(--space-sm) var(--space-lg) calc(var(--space-sm) + var(--keyboard-offset)) var(--space-lg);
+    padding: var(--space-sm) var(--space-lg) calc(var(--space-sm) + var(--safe-area-bottom) + var(--keyboard-offset)) var(--space-lg);
     border-top: 1px solid var(--color-border);
 }
 .progress-indicator {
@@ -171,19 +309,24 @@
     margin-bottom: clamp(0.5rem, 2vh, 1.5rem);
 }
 .progress-dot {
-    width: clamp(10px, 2vh, 16px);
-    height: clamp(10px, 2vh, 16px);
+    width: clamp(12px, 2vh, 18px);
+    height: clamp(12px, 2vh, 18px);
     border-radius: 50%;
     background: var(--color-border);
     opacity: 0.4;
-    transition: all var(--transition-base);
+    transition: background var(--transition-slow), opacity var(--transition-slow), transform var(--transition-slow), box-shadow var(--transition-slow);
     position: relative;
 }
+.progress-dot.completed {
+    background: var(--color-primary);
+    opacity: 0.55;
+    transform: scale(0.9);
+}
 .progress-dot.active {
     background: var(--color-primary);
     opacity: 1;
-    transform: scale(1.2);
-    box-shadow: 0 0 0 4px var(--color-primary-light);
+    transform: scale(1.25);
+    box-shadow: 0 0 0 4px var(--color-primary-light), 0 0 12px rgba(255, 152, 0, 0.4);
 }
 .quick-pick-container {
     flex: 1;
@@ -194,24 +337,35 @@
 }
 
 .quick-pick-btn {
-    min-width: 60px;
-    min-height: 32px;
-    font-size: clamp(0.75rem, 2vw, 1rem);
+    min-width: 80px;
+    min-height: var(--touch-target-comfortable);
+    font-size: var(--font-size-base);
     border-radius: var(--radius-md);
     background: var(--color-secondary);
     color: var(--color-text);
-    border: 1px solid var(--color-border);
+    border: 2px solid var(--color-border);
     cursor: pointer;
-    padding: 0.3rem 0.7rem;
-    transition: all var(--transition-base);
-    font-weight: 500;
+    padding: var(--space-md) var(--space-lg);
+    transition: border-color var(--transition-base), background-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
+    font-weight: 600;
+    font-family: inherit;
     flex-shrink: 0;
+    touch-action: manipulation;
 }
-.quick-pick-btn:hover, .quick-pick-btn:focus {
-    background: var(--color-secondary-hover);
+.quick-pick-btn:active:not(.selected) {
+    transform: scale(0.97);
+}
+
+.quick-pick-btn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
     border-color: var(--color-primary);
-    transform: translateY(-1px);
-    outline: none;
+}
+.choice-btn {
+    min-width: 160px;
+    min-height: var(--touch-target-large);
+    font-size: var(--font-size-lg);
+    flex: 1;
 }
 .arrow-nav {
     display: flex;
@@ -228,34 +382,34 @@
 }
 .arrow-btn {
     font-size: 28px;
-    width: 44px;
-    height: 44px;
+    width: var(--touch-target-comfortable);
+    height: var(--touch-target-comfortable);
     border-radius: 50%;
     background: var(--color-secondary);
     color: var(--color-text);
     border: 2px solid var(--color-border);
-    box-shadow: var(--shadow-md);
+    box-shadow: var(--shadow-sm);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all var(--transition-base);
+    transition: background-color var(--transition-base), border-color var(--transition-base);
     font-weight: bold;
+    font-family: inherit;
+    touch-action: manipulation;
+    flex-shrink: 0;
 }
 .arrow-btn:disabled {
-    opacity: 0.5;
+    opacity: 0.45;
     cursor: not-allowed;
-    transform: none;
 }
-.arrow-btn:hover, .arrow-btn:focus {
-    background: var(--color-secondary-hover);
+.arrow-btn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
     border-color: var(--color-primary);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
-    outline: none;
 }
-.arrow-btn:active {
-    transform: translateY(0);
+.arrow-btn:active:not(:disabled) {
+    background: var(--color-secondary-hover);
 }
 .clear-input-btn {
     position: absolute;
@@ -277,10 +431,16 @@
     align-items: center;
     justify-content: center;
 }
-.clear-input-btn:hover, .clear-input-btn:focus {
+.clear-input-btn:focus-visible {
     color: var(--color-text);
     background: var(--color-secondary);
-    outline: none;
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+.clear-input-btn:active {
+    color: var(--color-text);
+    background: var(--color-secondary-hover);
 }
 .name-input-wrapper {
     position: relative;
@@ -302,8 +462,12 @@
     border-color: var(--color-primary);
     color: #fff;
 }
-.quick-pick-action-btn:hover,
-.quick-pick-action-btn:focus {
+.quick-pick-action-btn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+.quick-pick-action-btn:active {
     background: var(--color-primary-hover);
     border-color: var(--color-primary-hover);
 }
@@ -331,25 +495,31 @@
     background: var(--color-background);
     border: 2px solid var(--color-border);
     color: var(--color-text);
-    font-size: var(--font-size-lg);
-    font-weight: 600;
+    font-size: var(--font-size-xl);
+    font-weight: 700;
     padding: var(--space-xl);
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-lg);
     cursor: pointer;
     text-align: center;
-    transition: all var(--transition-base);
-    min-height: var(--touch-target-comfortable);
+    transition: border-color var(--transition-base), background-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
+    min-height: var(--touch-target-large);
+    font-family: inherit;
+    touch-action: manipulation;
 }
-.game-type-btn:hover {
-    background: var(--color-surface);
-    border-color: var(--color-primary);
-    transform: translateY(-1px);
+
+.game-type-btn:active:not(.selected) {
+    transform: scale(0.97);
+}
+.game-type-btn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
 }
 .game-type-btn.selected {
     background: var(--color-primary);
     border-color: var(--color-primary);
-    color: white;
-    box-shadow: var(--shadow-md);
+    color: #fff;
+    box-shadow: var(--shadow-md), 0 0 0 3px var(--color-primary-light);
+    transform: scale(1.03);
 }
 .race-to-selection {
     display: grid;
@@ -362,35 +532,43 @@
     background: var(--color-background);
     border: 2px solid var(--color-border);
     color: var(--color-text);
-    font-size: var(--font-size-lg);
-    font-weight: 600;
-    padding: var(--space-lg) var(--space-sm);
-    border-radius: var(--radius-md);
+    font-size: var(--font-size-xl);
+    font-weight: 700;
+    padding: var(--space-lg) var(--space-md);
+    border-radius: var(--radius-lg);
     cursor: pointer;
     text-align: center;
-    transition: all var(--transition-base);
-    min-height: 80px;
+    transition: border-color var(--transition-base), background-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
+    min-height: var(--touch-target-large);
     display: flex;
     align-items: center;
     justify-content: center;
+    font-family: inherit;
+    touch-action: manipulation;
 }
-.race-to-btn:hover {
-    background: var(--color-surface);
-    border-color: var(--color-primary);
-    transform: translateY(-1px);
+.race-to-btn:active:not(.selected) {
+    transform: scale(0.97);
+}
+
+.race-to-btn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
 }
 .race-to-btn.selected {
     background: var(--color-primary);
     border-color: var(--color-primary);
-    color: white;
-    box-shadow: var(--shadow-md);
+    color: #fff;
+    box-shadow: var(--shadow-md), 0 0 0 3px var(--color-primary-light);
+    transform: scale(1.03);
 }
 /* Match selected styling for quick pick buttons used in BreakRuleStep */
 .quick-pick-btn.selected {
     background: var(--color-primary);
     border-color: var(--color-primary);
-    color: white;
-    box-shadow: var(--shadow-md);
+    color: #fff;
+    box-shadow: var(--shadow-md), 0 0 0 3px var(--color-primary-light);
+    font-weight: 700;
+    transform: scale(1.02);
 }
 .custom-race-to {
     display: flex;
@@ -414,32 +592,19 @@
 .endlos-btn {
     width: 100%;
 }
-.player1-input.player-input {
-    border-color: var(--color-success);
-    background: linear-gradient(135deg, var(--color-success) 0%, rgba(76, 175, 80, 0.1) 100%);
-}
-.player2-input.player-input {
-    border-color: #1565c0;
-    background: linear-gradient(135deg, #1565c0 0%, rgba(21, 101, 192, 0.1) 100%);
-}
+.player1-input.player-input,
+.player2-input.player-input,
 .player3-input.player-input {
-    border-color: var(--color-secondary);
-    background: linear-gradient(135deg, var(--color-secondary) 0%, rgba(51, 51, 51, 0.1) 100%);
-}
-.player1-input.player-input input,
-.player2-input.player-input input,
-.player3-input.player-input input {
-    background: #fff;
-    color: #222;
-    border: 1px solid #ccc;
+    border-color: var(--color-border);
+    background: var(--color-surface);
 }
 @media (min-width: 768px) and (max-width: 1024px) {
-    .screen-content {
-        padding: var(--space-xl);
+    .wizardShell {
+        padding: var(--space-md) 0;
     }
     .new-game-form {
-        max-width: 700px;
-        padding: var(--space-xxl) var(--space-xl) var(--space-xl) var(--space-xl);
+        min-height: min(82vh, 680px);
+        max-height: 100%;
     }
     .screen-title {
         font-size: var(--font-size-xxxl);
@@ -461,13 +626,20 @@
         padding: var(--space-md) var(--space-lg);
     }
 }
+@media (min-height: 720px) {
+    .new-game-form {
+        min-height: min(88vh, 720px);
+    }
+}
 @media (max-width: 767px) {
-    .screen-content {
-        padding: var(--space-md);
+    .wizardShell {
+        padding: var(--space-xs) 0;
+        align-items: stretch;
     }
     .new-game-form {
-        margin: var(--space-lg) auto 0 auto;
-        padding: var(--space-sm);
+        width: min(96vw, 720px);
+        min-height: 0;
+        max-height: 100%;
     }
     .game-type-selection {
         grid-template-columns: 1fr;
@@ -479,12 +651,23 @@
         gap: var(--space-md);
     }
     .arrow-btn {
-        width: 40px;
-        height: 40px;
+        width: var(--touch-target-min);
+        height: var(--touch-target-min);
         font-size: 24px;
     }
 }
 
+@media (prefers-reduced-motion: reduce) {
+    .new-game-form {
+        animation: none;
+    }
+    .game-type-btn.selected,
+    .race-to-btn.selected,
+    .quick-pick-btn.selected {
+        transform: none;
+    }
+}
+
 @media (max-height: 560px) {
     .screen-title {
         margin-bottom: 0.35rem;
@@ -492,6 +675,13 @@
     .progress-indicator {
         margin-bottom: 0.35rem;
     }
+    .wizard-summary {
+        padding: 0.35rem var(--space-sm);
+        margin-bottom: 0.25rem;
+    }
+    .wizard-summary-value {
+        font-size: clamp(0.9rem, 2.2vw, 1rem);
+    }
     .player-input {
         padding: var(--space-sm);
     }
@@ -501,6 +691,52 @@
     }
     .form-footer {
         padding-top: 0.3rem;
-        padding-bottom: calc(0.35rem + var(--keyboard-offset));
+        padding-bottom: calc(0.35rem + var(--safe-area-bottom) + var(--keyboard-offset));
     }
-}
+}
+@media (max-height: 500px) {
+    .wizardShell {
+        padding: 0;
+    }
+
+    .new-game-form {
+        min-height: 0;
+        max-height: 100%;
+        width: min(98vw, 720px);
+    }
+
+    .form-header {
+        padding: var(--space-xs) var(--space-md) var(--space-xs);
+    }
+
+    .screen-title {
+        font-size: clamp(1rem, 3.5vh, 1.25rem);
+        margin-bottom: 0.25rem;
+    }
+
+    .wizard-summary {
+        margin-top: 0.15rem;
+        margin-bottom: 0.15rem;
+        padding: 0.25rem var(--space-sm);
+    }
+
+    .choice-heading {
+        margin-top: 0.5rem;
+        margin-bottom: 0.35rem;
+        font-size: clamp(0.95rem, 3vh, 1.1rem);
+    }
+
+    .quick-picks-row {
+        margin-top: 0;
+    }
+
+    .quick-pick-btn.choice-btn {
+        min-height: var(--touch-target-min);
+        padding: var(--space-sm) var(--space-md);
+        font-size: var(--font-size-base);
+    }
+
+    .form-footer {
+        padding: var(--space-xs) var(--space-md) calc(var(--space-xs) + var(--safe-area-bottom) + var(--keyboard-offset));
+    }
+}

src/lib/features/new-game/PlayerSelectModal.module.css

@@ -1,48 +1,62 @@
 .modalOverlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.7);
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
+  padding: var(--space-lg);
+  padding-top: calc(var(--space-lg) + var(--safe-area-top));
+  padding-bottom: calc(var(--space-lg) + var(--safe-area-bottom));
 }
 
 .modalContent {
-  background: #2c2c2c;
-  padding: 24px;
-  border-radius: 12px;
-  width: 90%;
-  max-width: 400px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  background: var(--color-surface);
+  padding: var(--space-xl);
+  border-radius: var(--radius-xl);
+  width: min(480px, 100%);
+  max-height: calc(var(--app-height) - var(--space-xl) * 2);
+  box-shadow: var(--shadow-lg);
   display: flex;
   flex-direction: column;
+  border: 1px solid var(--color-border);
 }
 
 .modalHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16px;
+  margin-bottom: var(--space-lg);
+  gap: var(--space-md);
 }
 
 .modalHeader h3 {
   margin: 0;
-  font-size: 1.5rem;
-  color: #fff;
+  font-size: var(--font-size-xl);
+  font-weight: 700;
+  color: var(--color-text);
 }
 
 .closeButton {
-  background: none;
-  border: none;
-  font-size: 2rem;
-  color: #aaa;
-  cursor: pointer;
-  padding: 0;
+  background: var(--color-secondary);
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-xxl);
   line-height: 1;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  min-width: var(--touch-target-min);
+  min-height: var(--touch-target-min);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  touch-action: manipulation;
+}
+
+.closeButton:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
 }
 
 .playerList {
@@ -50,21 +64,33 @@
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--space-sm);
+  -webkit-overflow-scrolling: touch;
 }
 
 .playerItem {
-  background: #444;
-  color: #fff;
-  border: none;
-  padding: 16px;
-  border-radius: 8px;
+  background: var(--color-background);
+  color: var(--color-text);
+  border: 2px solid var(--color-border);
+  padding: var(--space-md) var(--space-lg);
+  border-radius: var(--radius-md);
   text-align: left;
-  font-size: 1.2rem;
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  font-family: inherit;
   cursor: pointer;
-  transition: background-color 0.2s;
+  min-height: var(--touch-target-comfortable);
+  touch-action: manipulation;
+  transition: border-color var(--transition-base), background-color var(--transition-base);
 }
 
-.playerItem:hover {
-  background: #555;
-} 
+.playerItem:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  border-color: var(--color-primary);
+}
+
+.playerItem:active {
+  background: var(--color-secondary);
+  border-color: var(--color-primary);
+}

src/lib/features/new-game/ProgressIndicator.tsx

@@ -16,12 +16,23 @@ export function ProgressIndicator({
   const activeIndex = Math.min(Math.max(currentStep, 1), totalSteps) - 1;
 
   return (
-    <div className={styles['progress-indicator']} style={style}>
+    <div
+      className={styles['progress-indicator']}
+      style={style}
+      role="progressbar"
+      aria-valuenow={currentStep}
+      aria-valuemin={1}
+      aria-valuemax={totalSteps}
+      aria-label={`Schritt ${currentStep} von ${totalSteps}`}
+    >
       {Array.from({ length: totalSteps }, (_, index) => {
         const isActive = index === activeIndex;
-        const className = isActive
-          ? `${styles['progress-dot']} ${styles['active']}`
-          : styles['progress-dot'];
+        const isCompleted = index < activeIndex;
+        const className = [
+          styles['progress-dot'],
+          isCompleted ? styles.completed : '',
+          isActive ? styles.active : '',
+        ].filter(Boolean).join(' ');
 
         return <span key={index} className={className} />;
       })}

src/lib/features/new-game/components/NameEntryModal.module.css

@@ -1,66 +1,81 @@
 .modalOverlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.7);
+  background: rgba(0, 0, 0, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
-  padding: 16px;
+  padding: var(--space-lg);
+  padding-top: calc(var(--space-lg) + var(--safe-area-top));
+  padding-bottom: calc(var(--space-lg) + var(--safe-area-bottom));
 }
 
 .modalContent {
   width: min(420px, 100%);
-  background: var(--color-surface);
+  background: linear-gradient(180deg, #2a2a2a 0%, var(--color-surface) 100%);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  padding: 16px;
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  padding: var(--space-xl);
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--space-md);
 }
 
 .modalTitle {
   margin: 0;
-  font-size: 1.1rem;
+  font-size: var(--font-size-xl);
+  font-weight: 700;
   color: var(--color-text);
 }
 
 .modalInput {
   width: 100%;
+  min-height: var(--touch-target-comfortable);
+  font-size: max(16px, var(--font-size-base));
 }
 
 .modalActions {
   display: flex;
-  justify-content: flex-end;
-  gap: 8px;
+  justify-content: stretch;
+  gap: var(--space-md);
+  flex-wrap: wrap;
 }
 
-.actionButton {
-  border: 1px solid var(--color-border);
-  background: var(--color-secondary);
-  color: var(--color-text);
-  border-radius: var(--radius-md);
-  padding: 10px 14px;
-  cursor: pointer;
-  min-height: var(--touch-target-min);
-}
-
-.actionButton:hover,
-.actionButton:focus {
-  border-color: var(--color-primary);
-  outline: none;
-}
-
-.confirmButton {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  color: #fff;
+.modalActionButton {
+  flex: 1;
+  min-width: 120px;
 }
 
 .errorText {
   color: var(--color-danger);
-  font-size: 0.9rem;
+  font-size: var(--font-size-sm);
   margin: 0;
+  font-weight: 500;
+}
+
+@media (max-width: 600px) {
+  .modalOverlay {
+    padding: 16px;
+    padding-top: calc(16px + var(--safe-area-top));
+    padding-bottom: calc(16px + var(--safe-area-bottom));
+    align-items: stretch;
+  }
+
+  .modalContent {
+    width: 100%;
+    flex: 1;
+    max-height: none;
+    justify-content: center;
+  }
+
+  .modalActions {
+    flex-direction: column;
+  }
+
+  .modalActionButton {
+    width: 100%;
+    min-width: 0;
+  }
 }

src/lib/features/new-game/components/NameEntryModal.tsx

@@ -2,6 +2,7 @@ import { h } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import styles from './NameEntryModal.module.css';
 import newGameStyles from '../NewGame.module.css';
+import { Button } from '@lib/ui/Button';
 
 interface NameEntryModalProps {
   open: boolean;
@@ -37,6 +38,11 @@ export function NameEntryModal({
 
   if (!open) return null;
 
+  const handleConfirm = () => {
+    const validationError = onConfirm(name);
+    if (validationError) setError(validationError);
+  };
+
   return (
     <div className={styles.modalOverlay} onClick={onClose} role="dialog" aria-modal="true" aria-labelledby={`${inputId}-title`}>
       <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
@@ -52,7 +58,7 @@ export function NameEntryModal({
           placeholder={placeholder}
           autoComplete="off"
           autoCapitalize="words"
-          spellCheck={false}
+          spellcheck={false}
           enterKeyHint={enterKeyHint}
           onInput={(e: Event) => {
             setName((e.target as HTMLInputElement).value);
@@ -61,27 +67,19 @@ export function NameEntryModal({
           onKeyDown={(e) => {
             if (e.key !== 'Enter') return;
             e.preventDefault();
-            const validationError = onConfirm(name);
-            if (validationError) setError(validationError);
+            handleConfirm();
           }}
         />
 
         {error && <p className={styles.errorText}>{error}</p>}
 
         <div className={styles.modalActions}>
-          <button type="button" className={styles.actionButton} onClick={onClose}>
+          <Button variant="secondary" size="medium" onClick={onClose} className={styles.modalActionButton}>
             Abbrechen
-          </button>
-          <button
-            type="button"
-            className={`${styles.actionButton} ${styles.confirmButton}`}
-            onClick={() => {
-              const validationError = onConfirm(name);
-              if (validationError) setError(validationError);
-            }}
-          >
+          </Button>
+          <Button variant="primary" size="medium" onClick={handleConfirm} className={styles.modalActionButton}>
             Übernehmen
-          </button>
+          </Button>
         </div>
       </div>
     </div>

src/lib/features/new-game/components/PlayerNameStep.tsx

@@ -9,8 +9,10 @@ import {
 } from '@lib/domain/constants';
 import { PlayerSelectModal } from '../steps/PlayerSelectModal';
 import { NameEntryModal } from './NameEntryModal';
+import type { NewGameData, NewGameStep } from '@lib/domain/types';
 import { WizardNav } from './WizardNav';
 import { WizardStepForm } from './WizardStepForm';
+import { WizardSummary } from './WizardSummary';
 
 interface PlayerNameStepProps {
   stepNumber: number;
@@ -19,6 +21,7 @@ interface PlayerNameStepProps {
   placeholder: string;
   inputId: string;
   playerInputClassName: string;
+  stepClassName?: string;
   playerNameHistory: string[];
   onNext: (name: string) => void;
   onCancel: () => void;
@@ -31,6 +34,8 @@ interface PlayerNameStepProps {
   showMorePlayersModal?: boolean;
   prefillNameEntry?: boolean;
   onCreateTemporaryName?: (name: string) => void;
+  data?: NewGameData;
+  currentStep?: NewGameStep;
 }
 
 export function PlayerNameStep({
@@ -40,6 +45,7 @@ export function PlayerNameStep({
   placeholder,
   inputId,
   playerInputClassName,
+  stepClassName,
   playerNameHistory,
   onNext,
   onCancel,
@@ -52,6 +58,8 @@ export function PlayerNameStep({
   showMorePlayersModal = false,
   prefillNameEntry = true,
   onCreateTemporaryName,
+  data,
+  currentStep,
 }: PlayerNameStepProps) {
   const [value, setValue] = useState(initialValue);
   const [error, setError] = useState<string | null>(null);
@@ -122,7 +130,13 @@ export function PlayerNameStep({
       ariaLabel={ARIA_LABELS.PLAYER_INPUT(label)}
       title={title}
       currentStep={stepNumber}
+      stepClassName={stepClassName}
       onSubmit={handleSubmit}
+      summary={
+        data && currentStep ? (
+          <WizardSummary data={data} currentStep={currentStep} />
+        ) : undefined
+      }
       footer={
         <WizardNav
           onBack={onCancel}

src/lib/features/new-game/components/WizardStepForm.tsx

@@ -9,8 +9,10 @@ interface WizardStepFormProps {
   title: string;
   currentStep: number;
   onSubmit?: (e: Event) => void;
+  summary?: ComponentChildren;
   children: ComponentChildren;
   footer: ComponentChildren;
+  stepClassName?: string;
 }
 
 export function WizardStepForm({
@@ -18,19 +20,29 @@ export function WizardStepForm({
   title,
   currentStep,
   onSubmit,
+  summary,
   children,
   footer,
+  stepClassName,
 }: WizardStepFormProps) {
   return (
-    <form className={styles['new-game-form']} onSubmit={onSubmit} aria-label={ariaLabel} autoComplete="off">
-      <div className={styles['form-header']}>
-        <div className={styles['screen-title']}>{title}</div>
-        <ProgressIndicator currentStep={currentStep} style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_MEDIUM }} />
-      </div>
+    <div className={styles.wizardShell}>
+      <form
+        className={`${styles['new-game-form']} ${stepClassName ?? ''}`}
+        onSubmit={onSubmit}
+        aria-label={ariaLabel}
+        autoComplete="off"
+      >
+        <div className={styles['form-header']}>
+          <div className={styles['screen-title']}>{title}</div>
+          <ProgressIndicator currentStep={currentStep} style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_MEDIUM }} />
+          {summary}
+        </div>
 
-      <div className={styles['form-content']}>{children}</div>
+        <div className={styles['form-content']}>{children}</div>
 
-      <div className={styles['form-footer']}>{footer}</div>
-    </form>
+        <div className={styles['form-footer']}>{footer}</div>
+      </form>
+    </div>
   );
 }

src/lib/features/new-game/components/WizardSummary.tsx

@@ -0,0 +1,134 @@
+import { h } from 'preact';
+import type { NewGameData, NewGameStep } from '@lib/domain/types';
+import { GAME_TYPES, RACE_TO_INFINITY } from '@lib/domain/constants';
+import styles from '../NewGame.module.css';
+
+const STEP_ORDER: NewGameStep[] = [
+  'player1',
+  'player2',
+  'player3',
+  'gameType',
+  'raceTo',
+  'breakRule',
+  'breakOrder',
+];
+
+function stepIndex(step: NewGameStep): number {
+  if (!step) return -1;
+  return STEP_ORDER.indexOf(step);
+}
+
+function isPast(current: NewGameStep, target: NewGameStep): boolean {
+  return stepIndex(current) > stepIndex(target);
+}
+
+function getPlayerNames(data: NewGameData): string[] {
+  return [data.player1, data.player2, data.player3].filter(Boolean);
+}
+
+function getPriorPlayerSummary(data: NewGameData, currentStep: NewGameStep): string | null {
+  if (currentStep === 'player1') return null;
+
+  let names: string[] = [];
+  if (currentStep === 'player2') {
+    names = data.player1 ? [data.player1] : [];
+  } else if (currentStep === 'player3') {
+    names = [data.player1, data.player2].filter(Boolean);
+  } else if (isPast(currentStep, 'player3')) {
+    names = getPlayerNames(data);
+  }
+
+  return names.length > 0 ? names.join(' vs ') : null;
+}
+
+function getGameTypeLabel(gameType: NewGameData['gameType']): string | null {
+  if (!gameType) return null;
+  const match = GAME_TYPES.find((item) => item.value === gameType);
+  return match?.label ?? gameType;
+}
+
+function formatRaceTo(raceTo: string): string | null {
+  if (!raceTo) return null;
+  if (raceTo === RACE_TO_INFINITY || raceTo === 'Infinity') return 'Endlos';
+  return `Race to ${raceTo}`;
+}
+
+function formatBreakRule(rule: NewGameData['breakRule']): string | null {
+  if (rule === 'winnerbreak') return 'Winnerbreak';
+  if (rule === 'wechselbreak') return 'Wechselbreak';
+  return null;
+}
+
+function formatBreakOrder(data: NewGameData, breakFirst?: number): string | null {
+  const idx =
+    breakFirst ??
+    (typeof data.breakFirst === 'number' ? data.breakFirst : 0);
+  if (!idx) return null;
+
+  const name = getPlayerNames(data)[idx - 1];
+  return name ? `${name} breakt zuerst` : null;
+}
+
+interface SummaryItem {
+  label: string;
+  value: string;
+}
+
+interface WizardSummaryProps {
+  data: NewGameData;
+  currentStep: NewGameStep;
+  breakFirst?: number;
+}
+
+export function WizardSummary({ data, currentStep, breakFirst }: WizardSummaryProps) {
+  const items: SummaryItem[] = [];
+
+  const players = getPriorPlayerSummary(data, currentStep);
+  if (players) {
+    items.push({ label: 'Spieler', value: players });
+  }
+
+  if (isPast(currentStep, 'gameType')) {
+    const gameType = getGameTypeLabel(data.gameType);
+    if (gameType) items.push({ label: 'Spielart', value: gameType });
+  }
+
+  if (isPast(currentStep, 'raceTo')) {
+    const raceTo = formatRaceTo(data.raceTo);
+    if (raceTo) items.push({ label: 'Race to', value: raceTo });
+  }
+
+  if (isPast(currentStep, 'breakRule')) {
+    const breakRule = formatBreakRule(data.breakRule);
+    if (breakRule) items.push({ label: 'Break-Regel', value: breakRule });
+  }
+
+  if (currentStep === 'breakOrder') {
+    const breakOrder = formatBreakOrder(data, breakFirst);
+    if (breakOrder) items.push({ label: 'Break-Reihenfolge', value: breakOrder });
+  }
+
+  if (items.length === 0) {
+    if (currentStep === 'player1') {
+      return (
+        <div className={styles['wizard-summary']} aria-live="polite">
+          <p className={styles['wizard-summary-hint']}>Spieler und Einstellungen werden hier angezeigt.</p>
+        </div>
+      );
+    }
+    return null;
+  }
+
+  return (
+    <div className={styles['wizard-summary']} aria-label="Bisherige Auswahl" aria-live="polite">
+      <dl className={styles['wizard-summary-list']}>
+        {items.map((item) => (
+          <div key={item.label} className={styles['wizard-summary-row']}>
+            <dt className={styles['wizard-summary-label']}>{item.label}</dt>
+            <dd className={styles['wizard-summary-value']}>{item.value}</dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+}

src/lib/features/new-game/steps/BreakOrderStep.tsx

@@ -2,8 +2,10 @@ import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 import styles from '../NewGame.module.css';
 import type { BreakRule } from '@lib/domain/types';
+import type { NewGameData } from '@lib/domain/types';
 import { WizardNav } from '../components/WizardNav';
 import { WizardStepForm } from '../components/WizardStepForm';
+import { WizardSummary } from '../components/WizardSummary';
 
 interface BreakOrderStepProps {
   players: string[];
@@ -12,9 +14,10 @@ interface BreakOrderStepProps {
   onCancel: () => void;
   initialFirst?: number;
   initialSecond?: number;
+  data: NewGameData;
 }
 
-export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst = 1, initialSecond }: BreakOrderStepProps) => {
+export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst = 1, initialSecond, data }: BreakOrderStepProps) => {
   const playerCount = players.filter(Boolean).length;
   const [first, setFirst] = useState<number>(initialFirst);
   const [second, setSecond] = useState<number | undefined>(initialSecond);
@@ -60,7 +63,9 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
       ariaLabel="Break-Reihenfolge wählen"
       title="Wer hat den ersten Anstoss?"
       currentStep={7}
+      stepClassName={styles['step-breakOrder']}
       onSubmit={handleSubmit}
+      summary={<WizardSummary data={data} currentStep="breakOrder" breakFirst={first} />}
       footer={
         <WizardNav
           onBack={onCancel}
@@ -76,10 +81,9 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
             <button
               key={`first-${idx}`}
               type="button"
-              className={`${styles['quick-pick-btn']} ${first === (idx + 1) ? styles['selected'] : ''}`}
+              className={`${styles['quick-pick-btn']} ${styles['choice-btn']} ${first === (idx + 1) ? styles['selected'] : ''}`}
               onClick={() => handleFirst(idx + 1)}
               aria-label={`Zuerst: ${name}`}
-              style={{ minWidth: 160, minHeight: 64 }}
             >
               {name}
             </button>
@@ -94,10 +98,9 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
                 <button
                   key={`second-${idx}`}
                   type="button"
-                  className={`${styles['quick-pick-btn']} ${second === (idx + 1) ? styles['selected'] : ''}`}
+                  className={`${styles['quick-pick-btn']} ${styles['choice-btn']} ${second === (idx + 1) ? styles['selected'] : ''}`}
                   onClick={() => handleSecond(idx + 1)}
                   aria-label={`Zweites Break: ${name}`}
-                  style={{ minWidth: 160, minHeight: 64 }}
                 >
                   {name}
                 </button>

src/lib/features/new-game/steps/BreakRuleStep.tsx

@@ -2,16 +2,19 @@ import { h } from 'preact';
 import { useState } from 'preact/hooks';
 import styles from '../NewGame.module.css';
 import type { BreakRule } from '@lib/domain/types';
+import type { NewGameData } from '@lib/domain/types';
 import { WizardNav } from '../components/WizardNav';
 import { WizardStepForm } from '../components/WizardStepForm';
+import { WizardSummary } from '../components/WizardSummary';
 
 interface BreakRuleStepProps {
   onNext: (rule: BreakRule) => void;
   onCancel: () => void;
   initialValue?: BreakRule;
+  data: NewGameData;
 }
 
-export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }: BreakRuleStepProps) => {
+export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak', data }: BreakRuleStepProps) => {
   const [rule, setRule] = useState<BreakRule>(initialValue ?? 'winnerbreak');
   
   const handleSelect = (nextRule: BreakRule) => {
@@ -29,7 +32,9 @@ export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }
       ariaLabel="Break-Regel wählen"
       title="Break-Regel wählen"
       currentStep={6}
+      stepClassName={styles['step-breakRule']}
       onSubmit={handleSubmit}
+      summary={<WizardSummary data={data} currentStep="breakRule" />}
       footer={<WizardNav onBack={onCancel} />}
     >
         <div className={styles['quick-picks-row']}>
@@ -40,10 +45,9 @@ export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }
             <button
               key={opt.key}
               type="button"
-              className={`${styles['quick-pick-btn']} ${rule === (opt.key as BreakRule) ? styles['selected'] : ''}`}
+              className={`${styles['quick-pick-btn']} ${styles['choice-btn']} ${rule === (opt.key as BreakRule) ? styles['selected'] : ''}`}
               onClick={() => handleSelect(opt.key as BreakRule)}
               aria-label={`Break-Regel wählen: ${opt.label}`}
-              style={{ minWidth: 160, minHeight: 64 }}
             >
               {opt.label}
             </button>

src/lib/features/new-game/steps/GameTypeStep.tsx

@@ -2,16 +2,19 @@ import { h } from 'preact';
 import { useState } from 'preact/hooks';
 import styles from '../NewGame.module.css';
 import { GAME_TYPES } from '@lib/domain/constants';
+import type { NewGameData } from '@lib/domain/types';
 import { WizardNav } from '../components/WizardNav';
 import { WizardStepForm } from '../components/WizardStepForm';
+import { WizardSummary } from '../components/WizardSummary';
 
 interface GameTypeStepProps {
   onNext: (type: string) => void;
   onCancel: () => void;
   initialValue?: string;
+  data: NewGameData;
 }
 
-export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeStepProps) => {
+export const GameTypeStep = ({ onNext, onCancel, initialValue = '', data }: GameTypeStepProps) => {
   const [gameType, setGameType] = useState(initialValue);
 
   const handleSelect = (selectedType: string) => {
@@ -31,7 +34,9 @@ export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeSt
       ariaLabel="Spielart auswählen"
       title="Spielart auswählen"
       currentStep={4}
+      stepClassName={styles['step-gameType']}
       onSubmit={handleSubmit}
+      summary={<WizardSummary data={data} currentStep="gameType" />}
       footer={<WizardNav onBack={onCancel} nextDisabled={!gameType} />}
     >
         <div className={styles['game-type-selection']}>

src/lib/features/new-game/steps/PlayerSelectModal.tsx

@@ -8,15 +8,34 @@ interface PlayerSelectModalProps {
 }
 
 export const PlayerSelectModal = ({ players, onSelect, onClose }: PlayerSelectModalProps) => (
-  <div className={modalStyles.modalOverlay} onClick={onClose}>
+  <div
+    className={modalStyles.modalOverlay}
+    onClick={onClose}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="player-select-title"
+  >
     <div className={modalStyles.modalContent} onClick={e => e.stopPropagation()}>
       <div className={modalStyles.modalHeader}>
-        <h3>Alle Spieler</h3>
-        <button className={modalStyles.closeButton} onClick={onClose}>×</button>
+        <h3 id="player-select-title">Alle Spieler</h3>
+        <button
+          type="button"
+          className={modalStyles.closeButton}
+          onClick={onClose}
+          aria-label="Schließen"
+        >
+          ×
+        </button>
       </div>
       <div className={modalStyles.playerList}>
         {players.map(player => (
-          <button key={player} className={modalStyles.playerItem} onClick={() => onSelect(player)}>
+          <button
+            key={player}
+            type="button"
+            className={modalStyles.playerItem}
+            onClick={() => onSelect(player)}
+            aria-label={`Spieler wählen: ${player}`}
+          >
             {player}
           </button>
         ))}
@@ -24,5 +43,3 @@ export const PlayerSelectModal = ({ players, onSelect, onClose }: PlayerSelectMo
     </div>
   </div>
 );
-
-

src/lib/features/new-game/steps/RaceToStep.tsx

@@ -6,17 +6,20 @@ import {
   RACE_TO_DEFAULT,
   RACE_TO_INFINITY,
 } from '@lib/domain/constants';
+import type { NewGameData } from '@lib/domain/types';
 import { WizardNav } from '../components/WizardNav';
 import { WizardStepForm } from '../components/WizardStepForm';
+import { WizardSummary } from '../components/WizardSummary';
 
 interface RaceToStepProps {
   onNext: (raceTo: string | number) => void;
   onCancel: () => void;
   initialValue?: string | number;
   gameType?: string;
+  data: NewGameData;
 }
 
-export const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: RaceToStepProps) => {
+export const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType, data }: RaceToStepProps) => {
   const quickPicks = [...RACE_TO_QUICK_PICKS];
   const defaultValue = RACE_TO_DEFAULT;
   const [raceTo, setRaceTo] = useState<string | number>(
@@ -57,7 +60,9 @@ export const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: Ra
       ariaLabel="Race To auswählen"
       title="Race To auswählen"
       currentStep={5}
+      stepClassName={styles['step-raceTo']}
       onSubmit={handleSubmit}
+      summary={<WizardSummary data={data} currentStep="raceTo" />}
       footer={<WizardNav onBack={onCancel} nextDisabled={String(raceTo).trim() === ''} />}
     >
       <div className={styles['endlos-container']}>

src/lib/ui/Button.module.css

@@ -1,10 +1,10 @@
-/* Use CSS custom properties from global design system */
 .button {
   border: none;
   border-radius: var(--radius-md);
   cursor: pointer;
   font-weight: 600;
-  transition: var(--transition-base);
+  font-family: inherit;
+  transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast), opacity var(--transition-base);
   touch-action: manipulation;
   display: inline-flex;
   align-items: center;
@@ -12,25 +12,9 @@
   gap: var(--space-sm);
   text-decoration: none;
   user-select: none;
-  font-family: inherit;
-  position: relative;
-  overflow: hidden;
-}
-
-.button::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
-  transform: translateX(-100%);
-  transition: transform 0.3s ease;
-}
-
-.button:hover::before {
-  transform: translateX(100%);
+  -webkit-user-select: none;
+  width: 100%;
+  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
 .button:focus-visible {
@@ -38,53 +22,47 @@
   outline-offset: 2px;
 }
 
-.button:active {
-  transform: translateY(1px);
+.button:active:not(.disabled) {
+  transform: scale(0.97);
+  opacity: 0.92;
 }
 
 /* Variants */
 .primary {
-  background: var(--color-primary);
-  color: white;
-  box-shadow: var(--shadow-md);
+  background: linear-gradient(180deg, #ffb74d 0%, var(--color-primary) 100%);
+  color: #fff;
+  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255, 152, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
-.primary:hover:not(.disabled) {
+.primary:not(.disabled):active {
   background: var(--color-primary-hover);
-  box-shadow: var(--shadow-lg);
-  transform: translateY(-1px);
 }
 
 .secondary {
-  background: var(--color-secondary);
+  background: linear-gradient(180deg, #3a3a3a 0%, var(--color-secondary) 100%);
   color: var(--color-text);
-  box-shadow: var(--shadow-sm);
+  border: 2px solid var(--color-border);
 }
 
-.secondary:hover:not(.disabled) {
+.secondary:not(.disabled):active {
   background: var(--color-secondary-hover);
-  box-shadow: var(--shadow-md);
-  transform: translateY(-1px);
 }
 
 .danger {
-  background: var(--color-danger);
-  color: white;
-  box-shadow: var(--shadow-md);
+  background: linear-gradient(180deg, #ef5350 0%, var(--color-danger) 100%);
+  color: #fff;
 }
 
-.danger:hover:not(.disabled) {
-  background: #ef5350;
-  box-shadow: var(--shadow-lg);
-  transform: translateY(-1px);
+.danger:not(.disabled):active {
+  background: #d32f2f;
 }
 
-/* Sizes with improved touch targets for tablets */
+/* Sizes */
 .small {
   padding: var(--space-sm) var(--space-md);
   font-size: var(--font-size-sm);
   min-height: var(--touch-target-min);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
 }
 
 .medium {
@@ -96,39 +74,41 @@
 
 .large {
   padding: var(--space-lg) var(--space-xl);
-  font-size: var(--font-size-lg);
-  min-height: 56px;
+  font-size: var(--font-size-xl);
+  min-height: var(--touch-target-large);
   border-radius: var(--radius-lg);
+  font-weight: 700;
 }
 
-/* Tablet-specific size adjustments */
-@media (min-width: 768px) and (max-width: 1024px) {
+/* Tablet */
+@media (min-width: 768px) {
   .small {
     min-height: var(--touch-target-comfortable);
     padding: var(--space-md) var(--space-lg);
     font-size: var(--font-size-base);
   }
-  
+
   .medium {
-    min-height: var(--touch-target-comfortable);
+    min-height: var(--touch-target-large);
     padding: var(--space-lg) var(--space-xl);
     font-size: var(--font-size-lg);
   }
-  
+
   .large {
-    min-height: 64px;
+    min-height: 72px;
     padding: var(--space-xl) var(--space-xxl);
-    font-size: var(--font-size-xl);
+    font-size: var(--font-size-xxl);
   }
 }
 
 /* States */
 .disabled {
-  opacity: 0.5;
+  opacity: 0.45;
   cursor: not-allowed;
-  transform: none !important;
 }
 
-.disabled:hover::before {
-  transform: translateX(-100%);
-}
+@media (prefers-reduced-motion: reduce) {
+  .button:active:not(.disabled) {
+    transform: none;
+  }
+}

src/lib/ui/Button.tsx

@@ -8,6 +8,7 @@ export function Button({
   disabled = false, 
   children, 
   onClick,
+  className = '',
   'aria-label': ariaLabel,
   ...rest 
 }: ButtonProps) {
@@ -16,6 +17,7 @@ export function Button({
     styles[variant],
     styles[size],
     disabled && styles.disabled,
+    className,
   ].filter(Boolean).join(' ');
 
   return (

src/lib/ui/Card.module.css

@@ -1,21 +1,22 @@
 .card {
-  border-radius: var(--border-radius);
-  transition: var(--transition);
+  border-radius: var(--radius-lg);
+  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
+  background: linear-gradient(180deg, #2a2a2a 0%, var(--color-surface) 100%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
 .default {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--color-border);
 }
 
 .elevated {
-  background: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 
 .outlined {
   background: transparent;
-  border: 2px solid rgba(255, 255, 255, 0.2);
+  border: 2px solid var(--color-border);
 }
 
 .clickable {
@@ -23,11 +24,12 @@
   border: none;
   text-align: left;
   width: 100%;
+  font-family: inherit;
+  color: inherit;
 }
 
-.clickable:hover {
-  background: rgba(255, 255, 255, 0.1);
-  transform: translateY(-1px);
+.clickable:active {
+  transform: scale(0.99);
 }
 
 .clickable:focus-visible {
@@ -35,19 +37,24 @@
   outline-offset: 2px;
 }
 
-/* Padding variants */
 .padding-none {
   padding: 0;
 }
 
 .padding-small {
-  padding: 8px;
+  padding: var(--space-sm);
 }
 
 .padding-medium {
-  padding: 16px;
+  padding: var(--space-md);
 }
 
 .padding-large {
-  padding: 24px;
-}
+  padding: var(--space-lg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .clickable:active {
+    transform: none;
+  }
+}

src/lib/ui/Layout.module.css

@@ -9,9 +9,10 @@
 
 .content {
   flex: 1;
-  max-width: 1200px;
+  max-width: 1100px;
   margin: 0 auto;
   padding: var(--space-md);
+  padding-bottom: calc(var(--space-md) + var(--safe-area-bottom));
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -26,26 +27,34 @@
   flex-direction: column;
   overflow: hidden;
   min-height: 0;
+  animation: screenFadeIn var(--transition-slow) ease-out;
 }
 
-/* Tablet optimizations */
-@media (min-width: 768px) and (max-width: 1024px) {
+@keyframes screenFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .screen {
+    animation: none;
+  }
+}
+
+@media (min-width: 768px) {
   .content {
     padding: var(--space-lg) var(--space-xl);
-    max-width: 900px;
+    padding-bottom: calc(var(--space-lg) + var(--safe-area-bottom));
   }
 }
 
-/* Large tablet and small desktop */
-@media (min-width: 1025px) {
-  .content {
-    padding: var(--space-xl);
-  }
-}
-
-/* Mobile adjustments */
 @media (max-width: 767px) {
   .content {
     padding: var(--space-sm) var(--space-md);
+    padding-bottom: calc(var(--space-sm) + var(--safe-area-bottom));
   }
-}
+}

src/lib/ui/Modal.module.css

@@ -1,66 +1,132 @@
-/* Consolidated modal styles for all modals */
+/* Consolidated modal styles */
 .modal {
     display: none;
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.7);
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.8);
     z-index: 1000;
+    padding: var(--space-lg);
+    padding-top: calc(var(--space-lg) + var(--safe-area-top));
+    padding-bottom: calc(var(--space-lg) + var(--safe-area-bottom));
+    padding-left: calc(var(--space-lg) + var(--safe-area-left));
+    padding-right: calc(var(--space-lg) + var(--safe-area-right));
 }
+
 .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;
+    background-color: var(--color-surface);
+    padding: var(--space-xl);
+    border-radius: var(--radius-xl);
+    width: min(500px, 100%);
+    max-height: calc(var(--app-height) - var(--space-xl) * 2);
+    overflow-y: auto;
     position: relative;
+    border: 1px solid var(--color-border);
+    box-shadow: var(--shadow-lg);
 }
+
 .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: var(--space-lg);
+    gap: var(--space-md);
 }
+
+.modal-title {
+    font-size: var(--font-size-xl);
+    font-weight: 700;
+    color: var(--color-text);
+}
+
 .close-button {
-    font-size: 24px;
+    font-size: var(--font-size-xxl);
+    line-height: 1;
     cursor: pointer;
-    color: #888;
-    background: none;
-    border: none;
+    color: var(--color-text-muted);
+    background: var(--color-secondary);
+    border: 2px solid var(--color-border);
+    border-radius: var(--radius-md);
+    min-width: var(--touch-target-min);
+    min-height: var(--touch-target-min);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    touch-action: manipulation;
+    flex-shrink: 0;
 }
-.close-button:hover {
-    color: white;
+
+.close-button:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    color: var(--color-text);
 }
+
 .modal-body {
-    margin-bottom: 20px;
+    margin-bottom: var(--space-lg);
 }
+
+.modal-message {
+    font-size: var(--font-size-lg);
+    color: var(--color-text-secondary);
+    line-height: 1.5;
+}
+
 .modal-footer {
     display: flex;
-    justify-content: flex-end;
-    gap: 10px;
+    flex-direction: column;
+    justify-content: stretch;
+    gap: var(--space-md);
 }
+
+@media (min-width: 480px) {
+    .modal-footer {
+        flex-direction: row;
+        justify-content: flex-end;
+        flex-wrap: wrap;
+    }
+}
+
 .modal-button {
-    padding: 8px 16px;
+    min-height: var(--touch-target-large);
+    padding: var(--space-md) var(--space-xl);
+    font-size: var(--font-size-lg);
     border: none;
-    border-radius: 5px;
+    border-radius: var(--radius-md);
     cursor: pointer;
-    font-size: 16px;
+    font-size: var(--font-size-base);
+    font-weight: 600;
+    font-family: inherit;
+    touch-action: manipulation;
+    flex: 1;
+    min-width: 120px;
 }
+
+.modal-button:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
 .modal-button.cancel {
-    background-color: #444;
-    color: white;
+    background-color: var(--color-secondary);
+    color: var(--color-text);
+    border: 2px solid var(--color-border);
 }
+
 .modal-button.confirm {
-    background-color: #e74c3c;
-    color: white;
+    background-color: var(--color-danger);
+    color: #fff;
+}
+
+.modal-button.confirm:active {
+    background-color: #d32f2f;
+}
+
+.modal-button.cancel:active {
+    background-color: var(--color-secondary-hover);
 }
-.modal-button:hover {
-    opacity: 0.9;
-} 

src/lib/ui/Modal.tsx

@@ -19,14 +19,14 @@ const Modal = ({ open, title, message, onCancel, onConfirm }: ModalProps) => {
       <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>
+          <button type="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>
+          <button type="button" className={styles['modal-button'] + ' ' + styles['cancel']} onClick={onCancel} aria-label="Abbrechen">Abbrechen</button>
+          <button type="button" className={styles['modal-button'] + ' ' + styles['confirm']} onClick={onConfirm} aria-label="Löschen">Löschen</button>
         </div>
       </div>
     </div>

src/lib/ui/ValidationModal.tsx

@@ -17,13 +17,13 @@ const ValidationModal = ({ open, message, onClose }: ValidationModalProps) => {
       <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>
+          <button type="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>
+          <button type="button" className={styles['modal-button'] + ' ' + styles['cancel']} onClick={onClose} aria-label="OK">OK</button>
         </div>
       </div>
     </div>

src/pages/index.astro

@@ -1,6 +1,5 @@
 ---
 import "../styles/index.css";
-import BscScoreApp from "../components/BscScoreApp.astro";
 import App from "../components/App";
 ---
 
@@ -8,12 +7,9 @@ import App from "../components/App";
 <html lang="de">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
-  <title>BSC Score - Pool Scoring App</title>
-  <meta name="description" content="Professional pool/billiards scoring application for tournaments and casual games">
-  
-  <!-- Performance optimizations -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content">
+  <title>BSC Score – Live-Scoring am Billardtisch</title>
+  <meta name="description" content="Live-Scoring für 8-, 9- und 10-Ball am Billardtisch. Offline, schnell, ein Tipp pro Punkt.">
   
   <!-- PWA Meta tags -->
   <meta name="theme-color" content="#1a1a1a">
@@ -27,16 +23,19 @@ import App from "../components/App";
   <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">
   <link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png">
   <link rel="apple-touch-icon" href="/icon-192.png">
+  <style>
+    #app-root {
+      height: var(--app-height, 100dvh);
+      width: 100%;
+      overflow: hidden;
+    }
+  </style>
 </head>
 
 <body>
-  <BscScoreApp>
-    <!-- 
-      Using client:only for the main app since it's highly interactive
-      and benefits from full client-side rendering 
-    -->
-    <App client:only="preact" slot="app-content" />
-  </BscScoreApp>
+  <div id="app-root">
+    <App client:only="preact" />
+  </div>
   <script>
     if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
       window.addEventListener('load', () => {

src/styles/index.css

@@ -1,5 +1,7 @@
 /* Global resets and utility styles */
-* {
+*,
+*::before,
+*::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
@@ -10,10 +12,17 @@
 :root {
     --app-height: 100dvh;
     --keyboard-offset: 0px;
+
+    /* Safe area insets */
+    --safe-area-top: env(safe-area-inset-top, 0px);
+    --safe-area-right: env(safe-area-inset-right, 0px);
+    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+    --safe-area-left: env(safe-area-inset-left, 0px);
+
     /* Colors */
     --color-primary: #ff9800;
     --color-primary-hover: #ffa726;
-    --color-primary-light: rgba(255, 152, 0, 0.1);
+    --color-primary-light: rgba(255, 152, 0, 0.15);
     --color-secondary: #333;
     --color-secondary-hover: #444;
     --color-background: #1a1a1a;
@@ -26,88 +35,143 @@
     --color-success: #4caf50;
     --color-danger: #f44336;
     --color-warning: #ff9800;
-    
-    /* Spacing system - 8px base */
-    --space-xs: 0.25rem;  /* 4px */
-    --space-sm: 0.5rem;   /* 8px */
-    --space-md: 1rem;     /* 16px */
-    --space-lg: 1.5rem;   /* 24px */
-    --space-xl: 2rem;     /* 32px */
-    --space-xxl: 3rem;    /* 48px */
-    
-    /* Typography */
-    --font-size-xs: 0.75rem;   /* 12px */
-    --font-size-sm: 0.875rem;  /* 14px */
-    --font-size-base: 1rem;    /* 16px */
-    --font-size-lg: 1.125rem;  /* 18px */
-    --font-size-xl: 1.25rem;   /* 20px */
-    --font-size-xxl: 1.5rem;   /* 24px */
-    --font-size-xxxl: 2rem;    /* 32px */
-    
+
+    /* Player card colors (scoreboard) */
+    --color-player-1: #2e4631;
+    --color-player-2: #2a3b52;
+    --color-player-3: #333;
+
+    /* Spacing system — 8px base */
+    --space-xs: 0.25rem;
+    --space-sm: 0.5rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2rem;
+    --space-xxl: 3rem;
+
+    /* Typography — system font stack only (no webfonts) */
+    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-xxl: 1.5rem;
+    --font-size-xxxl: 2rem;
+
     /* Touch targets */
-    --touch-target-min: 44px;
-    --touch-target-comfortable: 48px;
-    
+    --touch-target-min: 48px;
+    --touch-target-comfortable: 56px;
+    --touch-target-large: 64px;
+
     /* Border radius */
     --radius-sm: 4px;
     --radius-md: 8px;
     --radius-lg: 12px;
     --radius-xl: 16px;
-    
+
     /* Shadows */
-    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
-    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.16);
-    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.24);
-    
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
+    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25);
+    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
+
     /* Transitions */
-    --transition-fast: 0.15s ease;
-    --transition-base: 0.2s ease;
-    --transition-slow: 0.3s ease;
+    --transition-fast: 0.1s ease;
+    --transition-base: 0.15s ease;
+    --transition-slow: 0.2s ease;
 }
 
-/* Tablet-specific design tokens */
-@media (min-width: 768px) and (max-width: 1024px) {
+/* Tablet landscape — primary target device */
+@media (min-width: 768px) {
     :root {
         --touch-target-min: 48px;
         --touch-target-comfortable: 56px;
-        --space-md: 1.25rem;  /* 20px */
-        --space-lg: 2rem;     /* 32px */
-        --space-xl: 2.5rem;   /* 40px */
-        --font-size-base: 1.125rem;  /* 18px */
-        --font-size-lg: 1.25rem;     /* 20px */
-        --font-size-xl: 1.5rem;      /* 24px */
-        --font-size-xxl: 1.75rem;    /* 28px */
-        --font-size-xxxl: 2.25rem;   /* 36px */
+        --touch-target-large: 64px;
+        --space-md: 1.25rem;
+        --space-lg: 2rem;
+        --space-xl: 2.5rem;
+        --font-size-base: 1.125rem;
+        --font-size-lg: 1.25rem;
+        --font-size-xl: 1.5rem;
+        --font-size-xxl: 1.75rem;
+        --font-size-xxxl: 2.25rem;
     }
 }
 
-html, body {
-    height: 100%;
-    min-height: 100%;
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+html,
+body,
+#app-root {
+    height: var(--app-height, 100dvh);
+    min-height: var(--app-height, 100dvh);
 }
 
 body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-family: var(--font-family);
     background-color: var(--color-background);
     color: var(--color-text);
     overscroll-behavior: none;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    min-height: var(--app-height);
+    padding-top: var(--safe-area-top);
+    padding-left: var(--safe-area-left);
+    padding-right: var(--safe-area-right);
+    overflow: hidden;
 }
 
-button, .btn, .button {
+#app-root {
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Interactive elements — touch-friendly */
+button,
+[role="button"],
+a,
+input,
+select,
+.btn,
+.button {
+    touch-action: manipulation;
+}
+
+button,
+.btn,
+.button {
     -webkit-user-select: none;
     user-select: none;
     -webkit-touch-callout: none;
 }
 
-/* Improved input styling for better tablet experience */
+/* Global focus-visible */
+:focus {
+    outline: none;
+}
+
+:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+/* Inputs — 16px minimum prevents iOS zoom-on-focus */
 input, select {
     min-height: var(--touch-target-comfortable);
     padding: var(--space-md);
-    font-size: var(--font-size-base);
+    font-size: max(16px, var(--font-size-base));
+    font-family: inherit;
     border: 2px solid var(--color-border);
     border-radius: var(--radius-md);
     background: var(--color-surface);
@@ -115,13 +179,12 @@ input, select {
     transition: border-color var(--transition-base);
 }
 
-input:focus, select:focus {
-    outline: none;
+input:focus-visible, select:focus-visible {
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 
-/* Enhanced button styling */
+/* Legacy .btn utility (used in GameDetail controls) */
 .btn {
     min-height: var(--touch-target-comfortable);
     padding: var(--space-md) var(--space-lg);
@@ -131,136 +194,52 @@ input:focus, select:focus {
     border-radius: var(--radius-md);
     font-size: var(--font-size-base);
     font-weight: 600;
+    font-family: inherit;
     cursor: pointer;
-    touch-action: manipulation;
-    transition: all var(--transition-base);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--space-sm);
     text-decoration: none;
-    user-select: none;
-}
-
-.btn:hover {
-    background: var(--color-secondary-hover);
-    transform: translateY(-1px);
-}
-
-.btn:active {
-    transform: translateY(0);
 }
 
 .btn-primary {
     background: var(--color-primary);
-    color: white;
+    color: #fff;
 }
 
 .btn--secondary {
-    background: #333;
-    color: #fff;
+    background: var(--color-secondary);
+    color: var(--color-text);
     border: 2px solid #555;
 }
 
-.btn--secondary:hover {
-    background: #444;
-    border-color: #666;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+.btn--finish {
+    background: transparent;
+    color: var(--color-text-secondary);
+    border: 2px solid var(--color-border);
 }
 
-.btn-primary:hover {
+.btn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+.btn:active:not(:disabled) {
+    opacity: 0.9;
+    transform: scale(0.98);
+}
+
+.btn-primary:active:not(:disabled) {
     background: var(--color-primary-hover);
 }
 
-/* Utility button for new game with better spacing */
-.new-game-button {
-    width: 100%;
-    background: var(--color-primary);
-    color: white;
-    border: none;
-    border-radius: var(--radius-lg);
-    font-size: var(--font-size-xxl);
-    font-weight: 700;
-    padding: var(--space-xl) var(--space-lg);
-    margin-bottom: var(--space-lg);
-    cursor: pointer;
-    transition: all var(--transition-base);
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: var(--shadow-lg);
-    letter-spacing: 0.5px;
-    gap: var(--space-md);
-    min-height: var(--touch-target-comfortable);
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
 }
 
-.new-game-button::before {
-    content: '+';
-    font-size: 2.2rem;
-    font-weight: 900;
-    display: inline-block;
-    line-height: 1;
-}
-
-.new-game-button:hover {
-    background: var(--color-primary-hover);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 40px rgba(255, 152, 0, 0.4);
-}
-
-.new-game-button:active {
-    transform: translateY(-1px);
-}
-
-/* Navigation buttons with improved spacing */
-.nav-buttons {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-md);
-    margin: var(--space-lg) 0 0 0;
-}
-
-/* Tablet-specific improvements */
-@media (min-width: 768px) and (max-width: 1024px) {
-    .nav-buttons {
-        flex-direction: row;
-        gap: var(--space-lg);
-    }
-    
-    .btn {
-        flex: 1;
-        min-height: var(--touch-target-comfortable);
-    }
-    
-    .new-game-button {
-        padding: var(--space-xxl) var(--space-xl);
-        font-size: var(--font-size-xxxl);
-    }
-}
-
-/* Enhanced modal styling */
-.modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.8);
-    backdrop-filter: blur(4px);
-    z-index: 9999;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: var(--space-lg);
-}
-
-.modal.show {
-    display: flex;
-}
-
-/* Screen reader only content */
+/* Screen reader only */
 .sr-only {
     position: absolute;
     width: 1px;
@@ -273,39 +252,20 @@ input:focus, select:focus {
     border: 0;
 }
 
-
-/* Skip link for keyboard navigation */
+/* Skip link */
 .skip-link {
     position: absolute;
     top: -40px;
     left: 6px;
     background: var(--color-primary);
-    color: white;
-    padding: 8px;
+    color: #fff;
+    padding: var(--space-sm) var(--space-md);
     text-decoration: none;
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     z-index: 10000;
+    font-weight: 600;
 }
 
-.skip-link:focus {
-    top: 6px;
+.skip-link:focus-visible {
+    top: calc(6px + var(--safe-area-top));
 }
-
-/* Responsive fullscreen toggle */
-@media screen and (max-width: 480px) {
-    .fullscreenToggle {
-        bottom: var(--space-md);
-        right: var(--space-md);
-        width: 40px;
-        height: 40px;
-    }
-}
-
-@media (min-width: 768px) and (max-width: 1024px) {
-    .fullscreenToggle {
-        bottom: var(--space-lg);
-        right: var(--space-lg);
-        width: 56px;
-        height: 56px;
-    }
-} 

test-results/.last-run.json

@@ -1,4 +1,7 @@
 {
-  "status": "passed",
-  "failedTests": []
+  "status": "failed",
+  "failedTests": [
+    "b5da854a7c119c37c9d5-8782df6f17e49724b9a2",
+    "1012373defdfca68178e-d28214002c7ecee79090"
+  ]
 }

tests/helpers/wizard.ts

@@ -0,0 +1,47 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+const PLAYER_INPUT_IDS: Record<string, string> = {
+  'Spieler 1': 'player1-input',
+  'Spieler 2': 'player2-input',
+  'Spieler 3 (optional)': 'player3-input',
+};
+
+/** Open name modal, fill input, confirm — advances wizard step. */
+export async function enterPlayerName(
+  page: Page,
+  label: string,
+  placeholder: string,
+  name: string,
+) {
+  const inputId = PLAYER_INPUT_IDS[label];
+  await page.getByRole('button', { name: `Name für ${label} eingeben` }).click();
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+  const input = inputId ? page.locator(`#${inputId}`) : dialog.getByRole('textbox');
+  await expect(input).toBeFocused();
+  await input.fill(name);
+  await dialog.getByRole('button', { name: 'Übernehmen' }).click();
+  await expect(dialog).toBeHidden();
+}
+
+export async function skipPlayer3(page: Page) {
+  await page.getByRole('button', { name: 'Überspringen' }).click();
+}
+
+export async function addPoint(page: Page, playerName: string, currentScore: number) {
+  await page
+    .getByRole('button', { name: `Punkt für ${playerName}. Aktueller Stand: ${currentScore}` })
+    .click();
+}
+
+export async function addPoints(
+  page: Page,
+  playerName: string,
+  count: number,
+  startScore = 0,
+) {
+  for (let i = 0; i < count; i++) {
+    await addPoint(page, playerName, startScore + i);
+  }
+}

tests/helpers/wow-screenshots.mjs

@@ -0,0 +1,99 @@
+/**
+ * Capture wow-brief verification screenshots across 4 viewports.
+ * Usage: PW_EXECUTABLE=... node tests/helpers/wow-screenshots.mjs
+ */
+import { chromium } from 'playwright';
+
+const BASE_URL = process.env.BASE_URL ?? 'http://localhost:3000';
+const executablePath = process.env.PW_EXECUTABLE;
+
+const viewports = [
+  { name: '1280x800', width: 1280, height: 800 },
+  { name: '1024x768', width: 1024, height: 768 },
+  { name: '844x390', width: 844, height: 390 },
+  { name: '390x844', width: 390, height: 844 },
+];
+
+async function dismissDevToolbar(page) {
+  await page.evaluate(() => {
+    document.querySelector('astro-dev-toolbar')?.remove();
+  });
+}
+
+async function clickButton(page, name) {
+  await dismissDevToolbar(page);
+  await page.getByRole('button', { name }).click({ force: true });
+}
+
+async function capture(page, path) {
+  await dismissDevToolbar(page);
+  await page.screenshot({ path, fullPage: false });
+  console.log(`saved ${path}`);
+}
+
+async function enterPlayerName(page, label, name, inputId) {
+  await clickButton(page, `Name für ${label} eingeben`);
+  const dialog = page.getByRole('dialog');
+  const input = dialog.locator(`#${inputId}`);
+  await input.waitFor({ state: 'visible' });
+  await input.click();
+  await input.pressSequentially(name, { delay: 15 });
+  await dialog.getByRole('button', { name: 'Übernehmen' }).click({ force: true });
+  await dialog.waitFor({ state: 'hidden', timeout: 10000 });
+}
+
+async function freshPage(page, vp) {
+  await page.setViewportSize({ width: vp.width, height: vp.height });
+  await page.goto(`${BASE_URL}/?t=${Date.now()}`, { waitUntil: 'domcontentloaded' });
+  await dismissDevToolbar(page);
+  await page.waitForTimeout(400);
+}
+
+async function runWizardToScoreboard(page) {
+  await clickButton(page, 'Neues Spiel starten');
+  await enterPlayerName(page, 'Spieler 1', 'Alice', 'player1-input');
+  await enterPlayerName(page, 'Spieler 2', 'Bob', 'player2-input');
+  await clickButton(page, 'Überspringen');
+  await clickButton(page, '9-Ball');
+  await clickButton(page, '3');
+  await clickButton(page, 'Break-Regel wählen: Winnerbreak');
+  await clickButton(page, 'Zuerst: Alice');
+}
+
+async function main() {
+  const browser = await chromium.launch({
+    headless: true,
+    ...(executablePath ? { executablePath } : {}),
+  });
+
+  const page = await browser.newPage();
+
+  for (const vp of viewports) {
+    await freshPage(page, vp);
+    await capture(page, `/tmp/wow-list-${vp.name}.png`);
+
+    await clickButton(page, 'Neues Spiel starten');
+    await page.waitForTimeout(400);
+    await capture(page, `/tmp/wow-wizard-${vp.name}.png`);
+
+    await freshPage(page, vp);
+    await runWizardToScoreboard(page);
+    await page.waitForTimeout(400);
+    await capture(page, `/tmp/wow-scoreboard-${vp.name}.png`);
+
+    for (let score = 0; score < 3; score++) {
+      await clickButton(page, `Punkt für Alice. Aktueller Stand: ${score}`);
+      await page.waitForTimeout(150);
+    }
+    await page.waitForTimeout(600);
+    await capture(page, `/tmp/wow-victory-${vp.name}.png`);
+  }
+
+  await browser.close();
+  console.log('Done — screenshots in /tmp/wow-*.png');
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

tests/recordings/2-10-ball-endlos-wechsel.ts

@@ -1,26 +1,22 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
+import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
 
 test('test', async ({ page }) => {
   await page.goto('http://localhost:3000/');
   await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Kim');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Leo');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Kim');
+  await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Leo');
+  await skipPlayer3(page);
   await page.getByRole('button', { name: '10-Ball' }).click();
   await page.getByRole('button', { name: 'Endlos' }).click();
   await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
   await page.getByRole('button', { name: 'Zuerst: Leo' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Leo' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Kim' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Leo' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Kim' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Leo' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Kim' }).click();
+  await addPoint(page, 'Leo', 0);
+  await addPoint(page, 'Kim', 0);
+  await addPoint(page, 'Leo', 1);
+  await addPoint(page, 'Kim', 1);
+  await addPoint(page, 'Leo', 2);
+  await addPoint(page, 'Kim', 2);
   await page.getByRole('button', { name: 'Spiel beenden' }).click();
   await page.getByRole('button', { name: 'Bestätigen' }).click();
 });
-

tests/recordings/2-10-ball-race3-wechsel.ts

@@ -1,24 +1,20 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
+import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
 
 test('test', async ({ page }) => {
   await page.goto('http://localhost:3000/');
   await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Charlie');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Diana');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Charlie');
+  await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Diana');
+  await skipPlayer3(page);
   await page.getByRole('button', { name: '10-Ball' }).click();
   await page.getByRole('button', { name: '3' }).click();
   await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
   await page.getByRole('button', { name: 'Zuerst: Diana' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Diana' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Charlie' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Diana' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Diana' }).click();
+  await addPoint(page, 'Diana', 0);
+  await addPoint(page, 'Charlie', 0);
+  await addPoint(page, 'Diana', 1);
+  await addPoint(page, 'Diana', 2);
   await page.getByRole('button', { name: 'Bestätigen' }).click();
   await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
 });
-

tests/recordings/2-8-ball-race5-wechsel.ts

@@ -1,29 +1,25 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
+import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
 
 test('test', async ({ page }) => {
   await page.goto('http://localhost:3000/');
   await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Wendy');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Xavier');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Wendy');
+  await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Xavier');
+  await skipPlayer3(page);
   await page.getByRole('button', { name: '8-Ball' }).click();
   await page.getByRole('button', { name: '5' }).click();
   await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
   await page.getByRole('button', { name: 'Zuerst: Xavier' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Xavier' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Wendy' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Xavier' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Wendy' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Xavier' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Wendy' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Xavier' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Wendy' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Xavier' }).click();
+  await addPoint(page, 'Xavier', 0);
+  await addPoint(page, 'Wendy', 0);
+  await addPoint(page, 'Xavier', 1);
+  await addPoint(page, 'Wendy', 1);
+  await addPoint(page, 'Xavier', 2);
+  await addPoint(page, 'Wendy', 2);
+  await addPoint(page, 'Xavier', 3);
+  await addPoint(page, 'Wendy', 3);
+  await addPoint(page, 'Xavier', 4);
   await page.getByRole('button', { name: 'Bestätigen' }).click();
   await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
 });
-

tests/recordings/2-8-ball-race9-winner.ts

@@ -1,31 +1,27 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
+import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
 
 test('test', async ({ page }) => {
   await page.goto('http://localhost:3000/');
   await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Mia');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Noah');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Mia');
+  await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Noah');
+  await skipPlayer3(page);
   await page.getByRole('button', { name: '8-Ball' }).click();
   await page.getByRole('button', { name: '9' }).click();
   await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
   await page.getByRole('button', { name: 'Zuerst: Mia' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Noah' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Noah' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
+  await addPoint(page, 'Mia', 0);
+  await addPoint(page, 'Noah', 0);
+  await addPoint(page, 'Mia', 1);
+  await addPoint(page, 'Mia', 2);
+  await addPoint(page, 'Noah', 1);
+  await addPoint(page, 'Mia', 3);
+  await addPoint(page, 'Mia', 4);
+  await addPoint(page, 'Mia', 5);
+  await addPoint(page, 'Mia', 6);
+  await addPoint(page, 'Mia', 7);
+  await addPoint(page, 'Mia', 8);
   await page.getByRole('button', { name: 'Bestätigen' }).click();
   await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
 });
-

tests/recordings/2-8-endlos-winner.ts

@@ -1,26 +1,23 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
+import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
 
 test('test', async ({ page }) => {
   await page.goto('http://localhost:3000/');
   await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Foo');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Bar');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Foo');
+  await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Bar');
+  await skipPlayer3(page);
   await page.getByRole('button', { name: '8-Ball' }).click();
   await page.getByRole('button', { name: 'Endlos' }).click();
   await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
   await page.getByRole('button', { name: 'Zuerst: Foo' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Bar' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Bar' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
+  await addPoint(page, 'Foo', 0);
+  await addPoint(page, 'Bar', 0);
+  await addPoint(page, 'Foo', 1);
+  await addPoint(page, 'Bar', 1);
+  await addPoint(page, 'Foo', 2);
+  await addPoint(page, 'Foo', 3);
+  await addPoint(page, 'Foo', 4);
   await page.getByRole('button', { name: 'Spiel beenden' }).click();
   await page.getByRole('button', { name: 'Bestätigen' }).click();
-});
+});

tests/recordings/2-9-ball-race1-wechsel.ts

@@ -1,21 +1,17 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
+import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
 
 test('test', async ({ page }) => {
   await page.goto('http://localhost:3000/');
   await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Rita');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Sam');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Rita');
+  await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Sam');
+  await skipPlayer3(page);
   await page.getByRole('button', { name: '9-Ball' }).click();
   await page.getByRole('button', { name: '1' }).click();
   await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
   await page.getByRole('button', { name: 'Zuerst: Sam' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Sam' }).click();
+  await addPoint(page, 'Sam', 0);
   await page.getByRole('button', { name: 'Bestätigen' }).click();
   await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
 });
-

tests/recordings/2-9-ball-race5-winner.ts

@@ -1,26 +1,22 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
+import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
 
 test('test', async ({ page }) => {
   await page.goto('http://localhost:3000/');
   await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Alice');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Bob');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Alice');
+  await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Bob');
+  await skipPlayer3(page);
   await page.getByRole('button', { name: '9-Ball' }).click();
   await page.getByRole('button', { name: '5' }).click();
   await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
   await page.getByRole('button', { name: 'Zuerst: Alice' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Alice' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Bob' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Alice' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Alice' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Alice' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Alice' }).click();
+  await addPoint(page, 'Alice', 0);
+  await addPoint(page, 'Bob', 0);
+  await addPoint(page, 'Alice', 1);
+  await addPoint(page, 'Alice', 2);
+  await addPoint(page, 'Alice', 3);
+  await addPoint(page, 'Alice', 4);
   await page.getByRole('button', { name: 'Bestätigen' }).click();
   await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
 });
-

tests/recordings/3-10-ball-race5-winner.ts

@@ -1,29 +1,23 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
+import { addPoint, enterPlayerName } from '../helpers/wizard';
 
 test('test', async ({ page }) => {
   await page.goto('http://localhost:3000/');
   await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Oscar');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Paula');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Quinn');
-  await page.getByRole('button', { name: 'Weiter' }).click();
+  await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Oscar');
+  await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Paula');
+  await enterPlayerName(page, 'Spieler 3 (optional)', 'Name Spieler 3 (optional)', 'Quinn');
   await page.getByRole('button', { name: '10-Ball' }).click();
   await page.getByRole('button', { name: '5' }).click();
   await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
   await page.getByRole('button', { name: 'Zuerst: Quinn' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Quinn' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Oscar' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Paula' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Quinn' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Quinn' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Quinn' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Quinn' }).click();
+  await addPoint(page, 'Quinn', 0);
+  await addPoint(page, 'Oscar', 0);
+  await addPoint(page, 'Paula', 0);
+  await addPoint(page, 'Quinn', 1);
+  await addPoint(page, 'Quinn', 2);
+  await addPoint(page, 'Quinn', 3);
+  await addPoint(page, 'Quinn', 4);
   await page.getByRole('button', { name: 'Bestätigen' }).click();
   await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
 });
-

tests/recordings/3-8-ball-endlos-winner.ts

@@ -1,29 +1,23 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
+import { addPoint, enterPlayerName } from '../helpers/wizard';
 
 test('test', async ({ page }) => {
   await page.goto('http://localhost:3000/');
   await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Eva');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Frank');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Grace');
-  await page.getByRole('button', { name: 'Weiter' }).click();
+  await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Eva');
+  await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Frank');
+  await enterPlayerName(page, 'Spieler 3 (optional)', 'Name Spieler 3 (optional)', 'Grace');
   await page.getByRole('button', { name: '8-Ball' }).click();
   await page.getByRole('button', { name: 'Endlos' }).click();
   await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
   await page.getByRole('button', { name: 'Zuerst: Eva' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Eva' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Frank' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Grace' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Eva' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Frank' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Grace' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Eva' }).click();
+  await addPoint(page, 'Eva', 0);
+  await addPoint(page, 'Frank', 0);
+  await addPoint(page, 'Grace', 0);
+  await addPoint(page, 'Eva', 1);
+  await addPoint(page, 'Frank', 1);
+  await addPoint(page, 'Grace', 1);
+  await addPoint(page, 'Eva', 2);
   await page.getByRole('button', { name: 'Spiel beenden' }).click();
   await page.getByRole('button', { name: 'Bestätigen' }).click();
 });
-

tests/recordings/3-8-ball-race3-wechsel.ts

@@ -1,28 +1,22 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
+import { addPoint, enterPlayerName } from '../helpers/wizard';
 
 test('test', async ({ page }) => {
   await page.goto('http://localhost:3000/');
   await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Tom');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Uma');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Victor');
-  await page.getByRole('button', { name: 'Weiter' }).click();
+  await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Tom');
+  await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Uma');
+  await enterPlayerName(page, 'Spieler 3 (optional)', 'Name Spieler 3 (optional)', 'Victor');
   await page.getByRole('button', { name: '8-Ball' }).click();
   await page.getByRole('button', { name: '3' }).click();
   await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
   await page.getByRole('button', { name: 'Zuerst: Tom' }).click();
   await page.getByRole('button', { name: 'Zweites Break: Uma' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Tom' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Uma' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Victor' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Tom' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Tom' }).click();
+  await addPoint(page, 'Tom', 0);
+  await addPoint(page, 'Uma', 0);
+  await addPoint(page, 'Victor', 0);
+  await addPoint(page, 'Tom', 1);
+  await addPoint(page, 'Tom', 2);
   await page.getByRole('button', { name: 'Bestätigen' }).click();
   await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
 });
-

tests/recordings/3-9-ball-race7-wechsel.ts

@@ -1,33 +1,27 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
+import { addPoint, enterPlayerName } from '../helpers/wizard';
 
 test('test', async ({ page }) => {
   await page.goto('http://localhost:3000/');
   await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Henry');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Iris');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Jack');
-  await page.getByRole('button', { name: 'Weiter' }).click();
+  await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Henry');
+  await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Iris');
+  await enterPlayerName(page, 'Spieler 3 (optional)', 'Name Spieler 3 (optional)', 'Jack');
   await page.getByRole('button', { name: '9-Ball' }).click();
   await page.getByRole('button', { name: '7' }).click();
   await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
   await page.getByRole('button', { name: 'Zuerst: Iris' }).click();
   await page.getByRole('button', { name: 'Zweites Break: Jack' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Henry' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Jack' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Henry' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
+  await addPoint(page, 'Iris', 0);
+  await addPoint(page, 'Henry', 0);
+  await addPoint(page, 'Jack', 0);
+  await addPoint(page, 'Iris', 1);
+  await addPoint(page, 'Henry', 1);
+  await addPoint(page, 'Iris', 2);
+  await addPoint(page, 'Iris', 3);
+  await addPoint(page, 'Iris', 4);
+  await addPoint(page, 'Iris', 5);
+  await addPoint(page, 'Iris', 6);
   await page.getByRole('button', { name: 'Bestätigen' }).click();
   await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
 });
-

tests/recordings/example-flow.ts

@@ -1,26 +1,23 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
+import { addPoint, enterPlayerName, skipPlayer3 } from '../helpers/wizard';
 
 test('test', async ({ page }) => {
   await page.goto('http://localhost:3000/');
   await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Foo');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
-  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Bar');
-  await page.getByRole('button', { name: 'Weiter' }).click();
-  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await enterPlayerName(page, 'Spieler 1', 'Name Spieler 1', 'Foo');
+  await enterPlayerName(page, 'Spieler 2', 'Name Spieler 2', 'Bar');
+  await skipPlayer3(page);
   await page.getByRole('button', { name: '8-Ball' }).click();
   await page.getByRole('button', { name: '6' }).click();
   await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
   await page.getByRole('button', { name: 'Zuerst: Foo' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Bar' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
-  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
+  await addPoint(page, 'Foo', 0);
+  await addPoint(page, 'Bar', 0);
+  await addPoint(page, 'Foo', 1);
+  await addPoint(page, 'Foo', 2);
+  await addPoint(page, 'Foo', 3);
+  await addPoint(page, 'Foo', 4);
+  await addPoint(page, 'Foo', 5);
   await page.getByRole('button', { name: 'Bestätigen' }).click();
   await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
-});
+});

tests/recordings/viewport-matrix-landscape-keyboard.ts

@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { skipPlayer3 } from '../helpers/wizard';
 
 const LANDSCAPE_VIEWPORTS = [
   { name: 'small-landscape', width: 1024, height: 600 },
@@ -13,36 +14,42 @@ for (const viewport of LANDSCAPE_VIEWPORTS) {
 
     await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
 
-    // Step 1: ensure keyboard-sized viewport still keeps controls usable.
-    await page.getByLabel('Name Spieler 1').fill('Alpha');
+    await page.getByRole('button', { name: 'Name für Spieler 1 eingeben' }).click();
     await page.setViewportSize({
       width: viewport.width,
       height: Math.max(360, viewport.height - Math.floor(viewport.height * 0.35)),
     });
-    const nextButton = page.getByRole('button', { name: 'Weiter' });
-    await nextButton.scrollIntoViewIfNeeded();
-    await expect(nextButton).toBeVisible();
-    await nextButton.click();
+    const player1Dialog = page.getByRole('dialog');
+    const player1Input = page.locator('#player1-input');
+    await expect(player1Input).toBeFocused();
+    await player1Input.fill('Alpha');
+    const confirmButton = player1Dialog.getByRole('button', { name: 'Übernehmen' });
+    await confirmButton.scrollIntoViewIfNeeded();
+    await expect(confirmButton).toBeVisible();
+    await confirmButton.click();
+    await expect(player1Dialog).toBeHidden();
 
-    // Step 2: keep reduced height and verify progression still works.
-    await page.getByLabel('Name Spieler 2').fill('Beta');
-    await page.getByRole('button', { name: 'Weiter' }).click();
-    await page.getByRole('button', { name: 'Überspringen' }).click();
+    await page.getByRole('button', { name: 'Name für Spieler 2 eingeben' }).click();
+    const player2Dialog = page.getByRole('dialog');
+    const player2Input = page.locator('#player2-input');
+    await expect(player2Input).toBeFocused();
+    await player2Input.fill('Beta');
+    await player2Dialog.getByRole('button', { name: 'Übernehmen' }).click();
+    await expect(player2Dialog).toBeHidden();
+    await skipPlayer3(page);
 
-    // Restore full landscape viewport for remaining wizard steps.
     await page.setViewportSize({ width: viewport.width, height: viewport.height });
 
     await page.getByRole('button', { name: '8-Ball' }).click();
-    await page.getByRole('button', { name: 'Weiter' }).click();
     await page.getByRole('button', { name: '5' }).click();
-    await page.getByRole('button', { name: 'Weiter' }).click();
     await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
-    await page.getByRole('button', { name: 'Weiter' }).click();
     await page.getByRole('button', { name: 'Zuerst: Alpha' }).click();
-    await page.getByRole('button', { name: 'Weiter' }).click();
 
-    await expect(page.getByRole('button', { name: /Aktueller Punktestand für Alpha/i })).toBeVisible();
-    await expect(page.getByRole('button', { name: /Aktueller Punktestand für Beta/i })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Punkt für Alpha. Aktueller Stand: 0' }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Punkt für Beta. Aktueller Stand: 0' }),
+    ).toBeVisible();
   });
 }
-