Merge pull request 'dev' (#6) from dev into main

Reviewed-on: #6

backend/app/main.py

@@ -1,9 +1,14 @@
 import os
+import random
+import string
+
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
+from sqlalchemy import text
 from sqlalchemy.orm import Session
+
 from .db import Base, engine, SessionLocal
-from .models import User, Entry, Category, Role
+from .models import User, Entry, Category, Role, Game, GameMember
 from .security import hash_password
 from .routes.auth import router as auth_router
 from .routes.admin import router as admin_router
@@ -14,7 +19,10 @@ app = FastAPI(title="Cluedo Sheet")
 # Intern: Frontend läuft auf :8081
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["http://localhost:8081", "http://127.0.0.1:8081"],
+    allow_origins=[
+        "http://localhost:8081",
+        "http://127.0.0.1:8081",
+    ],
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
@@ -24,14 +32,240 @@ app.include_router(auth_router)
 app.include_router(admin_router)
 app.include_router(games_router)
 
+
+def _rand_join_code(n: int = 6) -> str:
+    # digits only (kahoot style)
+    return "".join(random.choice(string.digits) for _ in range(n))
+
+
+def _has_column(db: Session, table: str, col: str) -> bool:
+    """
+Postgres + SQLite friendly check without spamming Postgres logs.
+- SQLite: PRAGMA table_info
+- Postgres: information_schema
+    """
+    dialect = None
+    try:
+        dialect = db.get_bind().dialect.name  # "postgresql" | "sqlite" | ...
+    except Exception:
+        dialect = None
+
+    if dialect == "sqlite":
+        try:
+            rows = db.execute(text(f"PRAGMA table_info({table})")).all()
+            return any(r[1] == col for r in rows)
+        except Exception:
+            db.rollback()
+            return False
+
+    # default: Postgres (or others) via information_schema
+    try:
+        rows = db.execute(
+            text(
+                """
+SELECT 1
+FROM information_schema.columns
+WHERE table_name = :t AND column_name = :c
+LIMIT 1
+                """
+            ),
+            {"t": table, "c": col},
+        ).all()
+        return len(rows) > 0
+    except Exception:
+        db.rollback()
+        return False
+        
+
+
+def _auto_migrate(db: Session):
+    """
+Very small, pragmatic auto-migration (no alembic).
+- creates missing tables via create_all
+- adds missing columns via ALTER TABLE (best effort)
+- supports old schema (join_code/chip_code) and new schema (code/chip)
+"""
+
+    # --- users.display_name ---
+    if not _has_column(db, "users", "display_name"):
+        try:
+            db.execute(text("ALTER TABLE users ADD COLUMN display_name VARCHAR DEFAULT ''"))
+            db.commit()
+        except Exception:
+            db.rollback()
+
+    # --- users.theme_key ---
+    if not _has_column(db, "users", "theme_key"):
+        try:
+            db.execute(text("ALTER TABLE users ADD COLUMN theme_key VARCHAR DEFAULT 'default'"))
+            db.commit()
+        except Exception:
+            db.rollback()
+
+    # --- games: code / join_code + winner_user_id + host_user_id (optional) ---
+    # We support both column names:
+    # old: join_code
+    # new: code
+    has_join_code = _has_column(db, "games", "join_code")
+    has_code = _has_column(db, "games", "code")
+
+    # If neither exists, create "code" (new preferred)
+    if not has_join_code and not has_code:
+        try:
+            db.execute(text("ALTER TABLE games ADD COLUMN code VARCHAR"))
+            db.commit()
+            has_code = True
+        except Exception:
+            db.rollback()
+
+    # If only join_code exists but your code now expects "code",
+    # add "code" too and later mirror values.
+    if has_join_code and not has_code:
+        try:
+            db.execute(text("ALTER TABLE games ADD COLUMN code VARCHAR"))
+            db.commit()
+            has_code = True
+        except Exception:
+            db.rollback()
+
+    # winner_user_id
+    if not _has_column(db, "games", "winner_user_id"):
+        try:
+            db.execute(text("ALTER TABLE games ADD COLUMN winner_user_id VARCHAR"))
+            db.commit()
+        except Exception:
+            db.rollback()
+
+    # host_user_id (nice to have for "only host can set winner")
+    if not _has_column(db, "games", "host_user_id"):
+        try:
+            db.execute(text("ALTER TABLE games ADD COLUMN host_user_id VARCHAR"))
+            db.commit()
+        except Exception:
+            db.rollback()
+
+    # --- sheet_state chip / chip_code ---
+    has_chip_code = _has_column(db, "sheet_state", "chip_code")
+    has_chip = _has_column(db, "sheet_state", "chip")
+
+    if not has_chip_code and not has_chip:
+        # prefer "chip"
+        try:
+            db.execute(text("ALTER TABLE sheet_state ADD COLUMN chip VARCHAR"))
+            db.commit()
+            has_chip = True
+        except Exception:
+            db.rollback()
+
+    # if old chip_code exists but new expects chip -> add chip and mirror later
+    if has_chip_code and not has_chip:
+        try:
+            db.execute(text("ALTER TABLE sheet_state ADD COLUMN chip VARCHAR"))
+            db.commit()
+            has_chip = True
+        except Exception:
+            db.rollback()
+
+    # --- indexes for game code ---
+    # We create unique index for the column(s) that exist.
+    try:
+        if has_join_code:
+            db.execute(text("CREATE UNIQUE INDEX IF NOT EXISTS ix_games_join_code ON games (join_code)"))
+        if has_code:
+            db.execute(text("CREATE UNIQUE INDEX IF NOT EXISTS ix_games_code ON games (code)"))
+        db.commit()
+    except Exception:
+        db.rollback()
+
+    # --- backfill code values ---
+    # 1) if join_code exists and code exists, ensure code mirrors join_code where missing
+    if has_join_code and has_code:
+        try:
+            db.execute(text("UPDATE games SET code = join_code WHERE (code IS NULL OR code = '') AND join_code IS NOT NULL AND join_code <> ''"))
+            db.commit()
+        except Exception:
+            db.rollback()
+
+    # 2) generate missing codes in whichever column we have
+    # Prefer writing into "code" (new), but also keep join_code in sync if present.
+    code_col = "code" if has_code else "join_code" if has_join_code else None
+    if code_col:
+        try:
+            missing = db.execute(
+                text(f"SELECT id FROM games WHERE {code_col} IS NULL OR {code_col} = ''")
+            ).all()
+        except Exception:
+            db.rollback()
+            missing = []
+
+        if missing:
+            try:
+                used_rows = db.execute(text(f"SELECT {code_col} FROM games WHERE {code_col} IS NOT NULL")).all()
+                used = set([r[0] for r in used_rows if r and r[0]])
+            except Exception:
+                db.rollback()
+                used = set()
+
+            for (gid,) in missing:
+                code = _rand_join_code()
+                while code in used:
+                    code = _rand_join_code()
+                used.add(code)
+
+                try:
+                    # write into main col
+                    db.execute(text(f"UPDATE games SET {code_col} = :c WHERE id = :id"), {"c": code, "id": gid})
+                    # keep both in sync if both exist
+                    if has_join_code and code_col == "code":
+                        db.execute(text("UPDATE games SET join_code = :c WHERE id = :id AND (join_code IS NULL OR join_code = '')"), {"c": code, "id": gid})
+                    if has_code and code_col == "join_code":
+                        db.execute(text("UPDATE games SET code = :c WHERE id = :id AND (code IS NULL OR code = '')"), {"c": code, "id": gid})
+                    db.commit()
+                except Exception:
+                    db.rollback()
+
+    # --- backfill host_user_id: default to owner_user_id ---
+    try:
+        if _has_column(db, "games", "host_user_id"):
+            db.execute(text("UPDATE games SET host_user_id = host_user_id WHERE host_user_id IS NULL OR host_user_id = ''"))
+            db.commit()
+    except Exception:
+        db.rollback()
+
+    # --- backfill membership: ensure owner is member ---
+    # uses ORM; only relies on existing table GameMember (create_all already ran)
+    try:
+        all_games = db.query(Game).all()
+        for g in all_games:
+            host_id = getattr(g, "host_user_id", None)
+            if not host_id:
+                continue
+            exists = (
+                db.query(GameMember)
+                .filter(GameMember.game_id == g.id, GameMember.user_id == host_id)
+                .first()
+            )
+            if not exists:
+                db.add(GameMember(game_id=g.id, user_id=host_id))
+        db.commit()
+    except Exception:
+        db.rollback()
+
+    # --- mirror chip_code -> chip if both exist and chip empty ---
+    if has_chip_code and has_chip:
+        try:
+            db.execute(text("UPDATE sheet_state SET chip = chip_code WHERE (chip IS NULL OR chip = '') AND chip_code IS NOT NULL AND chip_code <> ''"))
+            db.commit()
+        except Exception:
+            db.rollback()
+
+
 def seed_entries(db: Session):
-    # Du kannst hier deine HP-Edition Einträge reinschreiben.
-    # (Für rein private Nutzung ok – öffentlich würde ich’s generisch machen.)
     if db.query(Entry).count() > 0:
         return
-    suspects = ["Draco Malfoy","Crabbe & Goyle","Lucius Malfoy","Dolores Umbridge","Peter Pettigrew","Bellatrix Lestrange"]
+    suspects = ["Draco Malfoy", "Crabbe & Goyle", "Lucius Malfoy", "Dolores Umbridge", "Peter Pettigrew", "Bellatrix Lestrange"]
-    items = ["Schlaftrunk","Verschwindekabinett","Portschlüssel","Impedimenta","Petrificus Totalus","Alraune"]
+    items = ["Schlaftrunk", "Verschwindekabinett", "Portschlüssel", "Impedimenta", "Petrificus Totalus", "Alraune"]
-    locations = ["Große Halle","Krankenflügel","Raum der Wünsche","Klassenzimmer für Zaubertränke","Pokalszimmer","Klassenzimmer für Wahrsagen","Eulerei","Bibliothek","Verteidigung gegen die dunklen Künste"]
+    locations = ["Große Halle", "Krankenflügel", "Raum der Wünsche", "Klassenzimmer für Zaubertränke", "Pokalszimmer", "Klassenzimmer für Wahrsagen", "Eulerei", "Bibliothek", "Verteidigung gegen die dunklen Künste"]
 
     for s in suspects:
         db.add(Entry(category=Category.suspect.value, label=s))
@@ -41,19 +275,32 @@ def seed_entries(db: Session):
         db.add(Entry(category=Category.location.value, label=l))
     db.commit()
 
+
 def ensure_admin(db: Session):
     admin_email = os.environ.get("ADMIN_EMAIL", "admin@local").lower().strip()
     admin_pw = os.environ.get("ADMIN_PASSWORD", "ChangeMeNow123!")
     u = db.query(User).filter(User.email == admin_email).first()
     if not u:
-        db.add(User(email=admin_email, password_hash=hash_password(admin_pw), role=Role.admin.value))
+        db.add(
+            User(
+                email=admin_email,
+                password_hash=hash_password(admin_pw),
+                role=Role.admin.value,
+                theme_key="default",
+                display_name="Admin",
+            )
+        )
         db.commit()
 
+
 @app.on_event("startup")
 def on_startup():
+    # create new tables
     Base.metadata.create_all(bind=engine)
+
     db = SessionLocal()
     try:
+        _auto_migrate(db)
         ensure_admin(db)
         seed_entries(db)
     finally:

backend/app/models.py

@@ -1,19 +1,31 @@
+# backend/app/models.py
 import enum
 import uuid
-from sqlalchemy import String, Boolean, DateTime, ForeignKey, Integer, SmallInteger, UniqueConstraint
+from sqlalchemy import (
-from sqlalchemy.orm import Mapped, mapped_column, relationship
+    String,
+    Boolean,
+    DateTime,
+    ForeignKey,
+    Integer,
+    SmallInteger,
+    UniqueConstraint,
+)
+from sqlalchemy.orm import Mapped, mapped_column
 from sqlalchemy.sql import func
 from .db import Base
 
+
 class Role(str, enum.Enum):
     admin = "admin"
     user = "user"
 
+
 class Category(str, enum.Enum):
     suspect = "suspect"
     item = "item"
     location = "location"
 
+
 class User(Base):
     __tablename__ = "users"
     id: Mapped[str] = mapped_column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
@@ -23,29 +35,55 @@ class User(Base):
     disabled: Mapped[bool] = mapped_column(Boolean, default=False)
     created_at: Mapped[str] = mapped_column(DateTime(timezone=True), server_default=func.now())
 
+    theme_key: Mapped[str] = mapped_column(String, default="default")
+
+    # NEW: schöner Name für UI (TopBar / WinnerBadge)
+    display_name: Mapped[str] = mapped_column(String, default="")
+
+
 class Game(Base):
     __tablename__ = "games"
     id: Mapped[str] = mapped_column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
-    owner_user_id: Mapped[str] = mapped_column(String, ForeignKey("users.id"), index=True)
+
+    host_user_id: Mapped[str] = mapped_column(String, ForeignKey("users.id"), index=True)
+
     name: Mapped[str] = mapped_column(String)
     seed: Mapped[int] = mapped_column(Integer)
     created_at: Mapped[str] = mapped_column(DateTime(timezone=True), server_default=func.now())
 
+    code: Mapped[str] = mapped_column(String, unique=True, index=True)
+
+    winner_user_id: Mapped[str | None] = mapped_column(String, ForeignKey("users.id"), nullable=True)
+
+
+class GameMember(Base):
+    __tablename__ = "game_members"
+    __table_args__ = (UniqueConstraint("game_id", "user_id", name="uq_game_member"),)
+
+    id: Mapped[str] = mapped_column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+    game_id: Mapped[str] = mapped_column(String, ForeignKey("games.id"), index=True)
+    user_id: Mapped[str] = mapped_column(String, ForeignKey("users.id"), index=True)
+    joined_at: Mapped[str] = mapped_column(DateTime(timezone=True), server_default=func.now())
+
+
 class Entry(Base):
     __tablename__ = "entries"
     id: Mapped[str] = mapped_column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
     category: Mapped[str] = mapped_column(String, index=True)
     label: Mapped[str] = mapped_column(String)
 
+
 class SheetState(Base):
     __tablename__ = "sheet_state"
-    __table_args__ = (
+    __table_args__ = (UniqueConstraint("game_id", "owner_user_id", "entry_id", name="uq_sheet"),)
-        UniqueConstraint("game_id", "owner_user_id", "entry_id", name="uq_sheet"),
+
-    )
     id: Mapped[str] = mapped_column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
     game_id: Mapped[str] = mapped_column(String, ForeignKey("games.id"), index=True)
     owner_user_id: Mapped[str] = mapped_column(String, ForeignKey("users.id"), index=True)
     entry_id: Mapped[str] = mapped_column(String, ForeignKey("entries.id"), index=True)
-    status: Mapped[int] = mapped_column(SmallInteger, default=0)  # 0 unknown, 1 crossed, 2 confirmed
+
-    note_tag: Mapped[str | None] = mapped_column(String, nullable=True)  # null | 'i' | 'm' | 's'
+    status: Mapped[int] = mapped_column(SmallInteger, default=0)
+    note_tag: Mapped[str | None] = mapped_column(String, nullable=True)
+
+    chip: Mapped[str | None] = mapped_column(String, nullable=True)
     

backend/app/routes/admin.py

@@ -19,21 +19,53 @@ def require_admin(req: Request, db: Session) -> User:
 def list_users(req: Request, db: Session = Depends(get_db)):
     require_admin(req, db)
     users = db.query(User).order_by(User.created_at.desc()).all()
-    return [{"id": u.id, "email": u.email, "role": u.role, "disabled": u.disabled} for u in users]
+    return [
+        {
+            "id": u.id,
+            "email": u.email,
+            "display_name": u.display_name,
+            "role": u.role,
+            "disabled": u.disabled,
+        }
+        for u in users
+    ]
 
 @router.post("/users")
 def create_user(req: Request, data: dict, db: Session = Depends(get_db)):
     require_admin(req, db)
     email = (data.get("email") or "").lower().strip()
     password = data.get("password") or ""
+    display_name = (data.get("display_name") or "").strip()
+
     if not email or not password:
         raise HTTPException(400, "email/password required")
     if db.query(User).filter(User.email == email).first():
         raise HTTPException(409, "email exists")
+
     role = data.get("role") or Role.user.value
     if role not in (Role.admin.value, Role.user.value):
         raise HTTPException(400, "invalid role")
-    u = User(email=email, password_hash=hash_password(password), role=role)
+
+    u = User(email=email, password_hash=hash_password(password), role=role, display_name=display_name)
     db.add(u); db.commit()
     return {"ok": True, "id": u.id}
     
+@router.delete("/users/{user_id}")
+def delete_user(req: Request, user_id: str, db: Session = Depends(get_db)):
+    admin = require_admin(req, db)
+
+    if admin.id == user_id:
+        raise HTTPException(400, "cannot delete yourself")
+
+    u = db.query(User).filter(User.id == user_id).first()
+    if not u:
+        raise HTTPException(404, "not found")
+
+    if u.role == Role.admin.value:
+        raise HTTPException(400, "cannot delete admin user")
+
+    # soft delete
+    u.disabled = True
+    db.add(u)
+    db.commit()
+    return {"ok": True}

backend/app/routes/auth.py

@@ -2,10 +2,18 @@ from fastapi import APIRouter, Depends, HTTPException, Request, Response
 from sqlalchemy.orm import Session
 from ..db import get_db
 from ..models import User
-from ..security import verify_password, make_session_value, set_session, clear_session, get_session_user_id, hash_password
+from ..security import (
+    verify_password,
+    make_session_value,
+    set_session,
+    clear_session,
+    get_session_user_id,
+    hash_password,
+)
 
 router = APIRouter(prefix="/auth", tags=["auth"])
 
+
 @router.post("/login")
 def login(data: dict, resp: Response, db: Session = Depends(get_db)):
     email = (data.get("email") or "").lower().strip()
@@ -13,14 +21,17 @@ def login(data: dict, resp: Response, db: Session = Depends(get_db)):
     user = db.query(User).filter(User.email == email, User.disabled == False).first()
     if not user or not verify_password(password, user.password_hash):
         raise HTTPException(status_code=401, detail="invalid credentials")
+
     set_session(resp, make_session_value(user.id))
-    return {"ok": True, "role": user.role, "email": user.email}
+    return {"ok": True, "role": user.role, "email": user.email, "theme_key": user.theme_key}
+
 
 @router.post("/logout")
 def logout(resp: Response):
     clear_session(resp)
     return {"ok": True}
 
+
 @router.get("/me")
 def me(req: Request, db: Session = Depends(get_db)):
     uid = get_session_user_id(req)
@@ -29,7 +40,44 @@ def me(req: Request, db: Session = Depends(get_db)):
     user = db.query(User).filter(User.id == uid).first()
     if not user:
         raise HTTPException(status_code=401, detail="not logged in")
-    return {"id": user.id, "email": user.email, "role": user.role}
+    return {"id": user.id, "email": user.email, "role": user.role, "display_name": user.display_name, "theme_key": user.theme_key}
+    
+
+@router.get("/me/stats")
+def my_stats(req: Request, db: Session = Depends(get_db)):
+    uid = get_session_user_id(req)
+    if not uid:
+        raise HTTPException(status_code=401, detail="not logged in")
+
+    # "played" = games where user is member AND winner is set (finished games)
+    from sqlalchemy import func
+    from ..models import Game, GameMember
+
+    played = (
+        db.query(func.count(Game.id))
+        .join(GameMember, GameMember.game_id == Game.id)
+        .filter(GameMember.user_id == uid, Game.winner_user_id != None)
+        .scalar()
+        or 0
+    )
+
+    wins = (
+        db.query(func.count(Game.id))
+        .join(GameMember, GameMember.game_id == Game.id)
+        .filter(GameMember.user_id == uid, Game.winner_user_id == uid)
+        .scalar()
+        or 0
+    )
+
+    losses = max(int(played) - int(wins), 0)
+    winrate = (float(wins) / float(played) * 100.0) if played else 0.0
+
+    return {
+        "played": int(played),
+        "wins": int(wins),
+        "losses": int(losses),
+        "winrate": round(winrate, 1),
+    }
 
 @router.patch("/password")
 def set_password(data: dict, req: Request, db: Session = Depends(get_db)):
@@ -48,5 +96,26 @@ def set_password(data: dict, req: Request, db: Session = Depends(get_db)):
     user.password_hash = hash_password(password)
     db.add(user)
     db.commit()
-
     return {"ok": True}
+
+
+@router.patch("/theme")
+def set_theme(data: dict, req: Request, db: Session = Depends(get_db)):
+    uid = get_session_user_id(req)
+    if not uid:
+        raise HTTPException(status_code=401, detail="not logged in")
+
+    theme_key = (data.get("theme_key") or "").strip()
+    if not theme_key:
+        raise HTTPException(status_code=400, detail="theme_key required")
+
+    user = db.query(User).filter(User.id == uid, User.disabled == False).first()
+    if not user:
+        raise HTTPException(status_code=401, detail="not logged in")
+
+    user.theme_key = theme_key
+    db.add(user)
+    db.commit()
+
+    return {"ok": True, "theme_key": user.theme_key}
+    

backend/app/routes/games.py

@@ -2,45 +2,204 @@ import hashlib, random
 from fastapi import APIRouter, Depends, HTTPException, Request
 from sqlalchemy.orm import Session
 from ..db import get_db
-from ..models import Game, Entry, SheetState, Category
+from ..models import Game, Entry, SheetState, Category, GameMember, User, Role
 from ..security import get_session_user_id
 
 router = APIRouter(prefix="/games", tags=["games"])
 
+
 def require_user(req: Request, db: Session):
     uid = get_session_user_id(req)
     if not uid:
         raise HTTPException(status_code=401, detail="not logged in")
     return uid
 
+
 def stable_order(seed: int, user_id: str, entry_id: str) -> str:
     s = f"{seed}:{user_id}:{entry_id}".encode()
     return hashlib.sha256(s).hexdigest()
 
+
+CODE_ALPHABET = "23456789ABCDEFGHJKMNPQRSTUVWXYZ"
+
+
+def gen_code(n=6) -> str:
+    return "".join(random.choice(CODE_ALPHABET) for _ in range(n))
+
+
+def ensure_member(db: Session, game_id: str, user_id: str):
+    ex = db.query(GameMember).filter(GameMember.game_id == game_id, GameMember.user_id == user_id).first()
+    if ex:
+        return
+    db.add(GameMember(game_id=game_id, user_id=user_id))
+    db.commit()
+
+
+def require_game_member(db: Session, game_id: str, user_id: str) -> Game:
+    g = db.query(Game).filter(Game.id == game_id).first()
+    if not g:
+        raise HTTPException(404, "game not found")
+
+    mem = db.query(GameMember).filter(GameMember.game_id == game_id, GameMember.user_id == user_id).first()
+    if not mem:
+        raise HTTPException(403, "not a member of this game")
+    return g
+
+
 @router.post("")
 def create_game(req: Request, data: dict, db: Session = Depends(get_db)):
     uid = require_user(req, db)
+
     name = data.get("name") or "Neues Spiel"
     seed = random.randint(1, 2_000_000_000)
-    g = Game(owner_user_id=uid, name=name, seed=seed)
+
-    db.add(g); db.commit()
+    # unique code
-    return {"id": g.id, "name": g.name}
+    code = gen_code()
+    while db.query(Game).filter(Game.code == code).first():
+        code = gen_code()
+
+    g = Game(host_user_id=uid, name=name, seed=seed, code=code, winner_user_id=None)
+    db.add(g)
+    db.commit()
+
+    # creator joins automatically
+    ensure_member(db, g.id, uid)
+
+    return {"id": g.id, "name": g.name, "code": g.code, "host_user_id": g.host_user_id}
+
+
+@router.post("/join")
+def join_game(req: Request, data: dict, db: Session = Depends(get_db)):
+    uid = require_user(req, db)
+    code = (data.get("code") or "").strip().upper()
+    if not code:
+        raise HTTPException(400, "code required")
+
+    g = db.query(Game).filter(Game.code == code).first()
+    if not g:
+        raise HTTPException(404, "game not found")
+
+    ensure_member(db, g.id, uid)
+    return {"ok": True, "id": g.id, "name": g.name, "code": g.code, "host_user_id": g.host_user_id}
+
 
 @router.get("")
 def list_games(req: Request, db: Session = Depends(get_db)):
     uid = require_user(req, db)
-    games = db.query(Game).filter(Game.owner_user_id == uid).order_by(Game.created_at.desc()).all()
+
-    return [{"id": g.id, "name": g.name, "seed": g.seed} for g in games]
+    # list games where user is member
+    q = (
+        db.query(Game)
+        .join(GameMember, GameMember.game_id == Game.id)
+        .filter(GameMember.user_id == uid)
+        .order_by(Game.created_at.desc())
+    )
+    games = q.all()
+
+    # winner email (optional)
+    out = []
+    for g in games:
+        winner_email = None
+        if g.winner_user_id:
+            wu = db.query(User).filter(User.id == g.winner_user_id).first()
+            winner_email = wu.email if wu else None
+        out.append(
+            {
+                "id": g.id,
+                "name": g.name,
+                "seed": g.seed,
+                "code": g.code,
+                "host_user_id": g.host_user_id,
+                "winner_user_id": g.winner_user_id,
+                "winner_email": winner_email,
+            }
+        )
+    return out
+
+
+@router.get("/{game_id}")
+def get_game_meta(req: Request, game_id: str, db: Session = Depends(get_db)):
+    uid = require_user(req, db)
+    g = require_game_member(db, game_id, uid)
+
+    winner_email = None
+    winner_display_name = None
+
+    if g.winner_user_id:
+        wu = db.query(User).filter(User.id == g.winner_user_id).first()
+        if wu:
+            winner_email = wu.email
+            winner_display_name = wu.display_name
+
+    return {
+        "id": g.id,
+        "name": g.name,
+        "code": g.code,
+        "host_user_id": g.host_user_id,
+        "winner_user_id": g.winner_user_id,
+        "winner_email": winner_email,
+        "winner_display_name": winner_display_name,
+    }
+
+
+@router.get("/{game_id}/members")
+def list_members(req: Request, game_id: str, db: Session = Depends(get_db)):
+    uid = require_user(req, db)
+    _g = require_game_member(db, game_id, uid)
+
+    # return only "user" role (admin excluded)
+    members = (
+        db.query(User)
+        .join(GameMember, GameMember.user_id == User.id)
+        .filter(GameMember.game_id == game_id, User.role == Role.user.value, User.disabled == False)
+        .order_by(User.email.asc())
+        .all()
+    )
+    return [{"id": u.id, "email": u.email, "display_name": u.display_name} for u in members]
+
+
+@router.patch("/{game_id}/winner")
+def set_winner(req: Request, game_id: str, data: dict, db: Session = Depends(get_db)):
+    uid = require_user(req, db)
+    g = require_game_member(db, game_id, uid)
+
+    # only host can set winner
+    if g.host_user_id != uid:
+        raise HTTPException(403, "only host can set winner")
+
+    winner_user_id = data.get("winner_user_id")
+    if winner_user_id is None:
+        g.winner_user_id = None
+        db.add(g)
+        db.commit()
+        return {"ok": True, "winner_user_id": None}
+
+    # must be a member AND role=user
+    member = db.query(GameMember).filter(GameMember.game_id == game_id, GameMember.user_id == winner_user_id).first()
+    if not member:
+        raise HTTPException(400, "winner must be a member of the game")
+
+    u = db.query(User).filter(User.id == winner_user_id).first()
+    if not u or u.role != Role.user.value or u.disabled:
+        raise HTTPException(400, "invalid winner")
+
+    g.winner_user_id = winner_user_id
+    db.add(g)
+    db.commit()
+    return {"ok": True, "winner_user_id": g.winner_user_id}
+
 
 @router.get("/{game_id}/sheet")
 def get_sheet(req: Request, game_id: str, db: Session = Depends(get_db)):
     uid = require_user(req, db)
-    g = db.query(Game).filter(Game.id == game_id, Game.owner_user_id == uid).first()
+    g = require_game_member(db, game_id, uid)
-    if not g:
-        raise HTTPException(404, "game not found")
 
     entries = db.query(Entry).all()
-    states = db.query(SheetState).filter(SheetState.game_id == g.id, SheetState.owner_user_id == uid).all()
+    states = (
+        db.query(SheetState)
+        .filter(SheetState.game_id == g.id, SheetState.owner_user_id == uid)
+        .all()
+    )
     state_map = {st.entry_id: st for st in states}
 
     out = {"suspect": [], "item": [], "location": []}
@@ -51,11 +210,11 @@ def get_sheet(req: Request, game_id: str, db: Session = Depends(get_db)):
             "label": e.label,
             "status": st.status if st else 0,
             "note_tag": st.note_tag if st else None,
+            "chip": st.chip if st else None,  # NEW
             "order": stable_order(g.seed, uid, e.id),
         }
         out[e.category].append(item)
 
-    # sort within category
     for k in out:
         out[k].sort(key=lambda x: x["order"])
         for i in out[k]:
@@ -63,29 +222,41 @@ def get_sheet(req: Request, game_id: str, db: Session = Depends(get_db)):
 
     return out
 
+
 @router.patch("/{game_id}/sheet/{entry_id}")
 def patch_sheet(req: Request, game_id: str, entry_id: str, data: dict, db: Session = Depends(get_db)):
     uid = require_user(req, db)
-    g = db.query(Game).filter(Game.id == game_id, Game.owner_user_id == uid).first()
+    g = require_game_member(db, game_id, uid)
-    if not g:
-        raise HTTPException(404, "game not found")
 
     status = data.get("status")
     note_tag = data.get("note_tag")
+    chip = data.get("chip")
 
     if note_tag not in (None, "i", "m", "s"):
         raise HTTPException(400, "invalid note_tag")
     if status is not None and status not in (0, 1, 2, 3):
         raise HTTPException(400, "invalid status")
 
-    st = db.query(SheetState).filter(
+    if chip is not None:
+        chip = (chip or "").strip().upper()
+        if chip == "":
+            chip = None
+        if chip is not None:
+            if len(chip) > 8:
+                raise HTTPException(400, "invalid chip")
+
+    st = (
+        db.query(SheetState)
+        .filter(
             SheetState.game_id == g.id,
             SheetState.owner_user_id == uid,
-        SheetState.entry_id == entry_id
+            SheetState.entry_id == entry_id,
-    ).first()
+        )
+        .first()
+    )
 
     if not st:
-        st = SheetState(game_id=g.id, owner_user_id=uid, entry_id=entry_id, status=0, note_tag=None)
+        st = SheetState(game_id=g.id, owner_user_id=uid, entry_id=entry_id, status=0, note_tag=None, chip=None)
         db.add(st)
 
     if status is not None:
@@ -93,6 +264,17 @@ def patch_sheet(req: Request, game_id: str, entry_id: str, data: dict, db: Sessi
     if "note_tag" in data:
         st.note_tag = note_tag
 
+        # wenn note_tag zurück auf null -> chip auch löschen
+        if note_tag is None:
+            st.chip = None
+
+    # chip nur speichern wenn note_tag "s" ist (ansonsten löschen wir es)
+    if "chip" in data:
+        if st.note_tag == "s":
+            st.chip = chip
+        else:
+            st.chip = None
+
     db.commit()
     return {"ok": True}
     

frontend/index.html

@@ -3,12 +3,180 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#000000" />
     <title>Cluedo Sheet</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <!-- Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet">    
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap"
+      rel="stylesheet"
+    />
+
+    <style>
+      html,
+      body {
+        margin: 0;
+        height: 100%;
+        background: radial-gradient(
+          ellipse at top,
+          rgba(30, 30, 30, 0.95),
+          #000
+        );
+      }
+
+      /* Splash Overlay */
+      #app-splash {
+        position: fixed;
+        inset: 0;
+        z-index: 2147483647;
+        display: grid;
+        place-items: center;
+        background: radial-gradient(
+          ellipse at top,
+          rgba(30, 30, 30, 0.95),
+          #000
+        );
+        overflow: hidden;
+        opacity: 1;
+        transition: opacity 260ms ease;
+      }
+
+      #app-splash.hide {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      /* gold animated lines */
+      #app-splash::before,
+      #app-splash::after {
+        content: "";
+        position: absolute;
+        inset: -40%;
+        background:
+          linear-gradient(
+            90deg,
+            transparent,
+            rgba(233, 216, 166, 0.18),
+            transparent
+          );
+        transform: rotate(12deg);
+        animation: goldSweep 1.6s linear infinite;
+        opacity: 0.55;
+        filter: blur(0.2px);
+        pointer-events: none;
+      }
+
+      #app-splash::after {
+        transform: rotate(-12deg);
+        animation-duration: 2.2s;
+        opacity: 0.35;
+      }
+
+      @keyframes goldSweep {
+        0% { transform: translateX(-25%) rotate(12deg); }
+        100% { transform: translateX(25%) rotate(12deg); }
+      }
+
+      /* glassy card */
+      .splash-card {
+        position: relative;
+        width: min(520px, 90vw);
+        border-radius: 22px;
+        padding: 18px 16px;
+        background: rgba(20, 20, 22, 0.55);
+        border: 1px solid rgba(233, 216, 166, 0.16);
+        box-shadow: 0 18px 70px rgba(0,0,0,0.55);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        text-align: center;
+        overflow: hidden;
+      }
+
+      .splash-card::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(233,216,166,0.16), transparent);
+        opacity: 0.45;
+        pointer-events: none;
+      }
+
+      .splash-title {
+        position: relative;
+        font-family: "Cinzel Decorative", serif;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        color: rgba(245, 239, 220, 0.92);
+        font-size: 18px;
+        line-height: 1.25;
+      }
+
+      .splash-sub {
+        position: relative;
+        margin-top: 6px;
+        font-family: "IM Fell English", serif;
+        font-style: italic;
+        color: rgba(233, 216, 166, 0.78);
+        font-size: 13px;
+      }
+
+      /* Loader */
+      .loader {
+        position: relative;
+        margin: 14px auto 0;
+        width: 28px;
+        height: 28px;
+        border-radius: 999px;
+        border: 2px solid rgba(233, 216, 166, 0.18);
+        border-top-color: rgba(233, 216, 166, 0.92);
+        animation: spin 0.85s linear infinite;
+      }
+
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+
+      /* tiny spark at bottom */
+      .spark {
+        position: relative;
+        margin: 14px auto 0;
+        width: 160px;
+        height: 2px;
+        border-radius: 999px;
+        background: linear-gradient(90deg, transparent, rgba(233,216,166,0.65), transparent);
+        opacity: 0.6;
+        filter: blur(0.2px);
+        animation: pulse 1.4s ease-in-out infinite;
+      }
+
+      @keyframes pulse {
+        0%, 100% { opacity: 0.35; transform: scaleX(0.92); }
+        50% { opacity: 0.85; transform: scaleX(1.02); }
+      }
+    </style>
+
+    <!-- Theme-Key sofort setzen -->
+    <script>
+      try {
+        const k = localStorage.getItem("hpTheme:guest") || "default";
+        document.documentElement.setAttribute("data-theme", k);
+      } catch {}
+    </script>
   </head>
+
   <body>
+    <div id="app-splash" aria-hidden="true">
+      <div class="splash-card">
+        <div class="splash-title">Zauber-Detektiv Notizbogen</div>
+        <div class="splash-sub">Magie wird vorbereitet…</div>
+        <div class="loader" aria-label="Laden"></div>
+        <div class="spark"></div>
+      </div>
+    </div>
+
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>

frontend/package.json

@@ -9,7 +9,8 @@
     },
     "dependencies": {
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "canvas-confetti": "^1.9.3"
     },
     "devDependencies": {
         "@vitejs/plugin-react": "^4.3.1",

frontend/src/App.jsx

@@ -1,11 +1,15 @@
-// src/App.jsx
+import React, { useEffect, useRef, useState } from "react";
-import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import WinnerCelebration from "./components/WinnerCelebration";
 
 import { api } from "./api/client";
 import { cycleTag } from "./utils/cycleTag";
 import { getChipLS, setChipLS, clearChipLS } from "./utils/chipStorage";
+
 import { useHpGlobalStyles } from "./styles/hooks/useHpGlobalStyles";
 import { styles } from "./styles/styles";
+import { applyTheme, DEFAULT_THEME_KEY } from "./styles/themes";
+import { stylesTokens } from "./styles/theme";
 
 import AdminPanel from "./components/AdminPanel";
 import LoginPage from "./components/LoginPage";
@@ -15,6 +19,11 @@ import ChipModal from "./components/ChipModal";
 import HelpModal from "./components/HelpModal";
 import GamePickerCard from "./components/GamePickerCard";
 import SheetSection from "./components/SheetSection";
+import DesignModal from "./components/DesignModal";
+import WinnerCard from "./components/WinnerCard";
+import WinnerBadge from "./components/WinnerBadge";
+import NewGameModal from "./components/NewGameModal";
+import StatsModal from "./components/StatsModal";
 
 export default function App() {
   useHpGlobalStyles();
@@ -31,12 +40,17 @@ export default function App() {
   const [sheet, setSheet] = useState(null);
   const [pulseId, setPulseId] = useState(null);
 
+  // Game meta
+  const [gameMeta, setGameMeta] = useState(null); // {code, host_user_id, winner_email, winner_user_id}
+  const [members, setMembers] = useState([]);
+
+  // Winner selection (host only)
+  const [winnerUserId, setWinnerUserId] = useState("");
+
   // Modals
   const [helpOpen, setHelpOpen] = useState(false);
-
   const [chipOpen, setChipOpen] = useState(false);
   const [chipEntry, setChipEntry] = useState(null);
-
   const [userMenuOpen, setUserMenuOpen] = useState(false);
 
   const [pwOpen, setPwOpen] = useState(false);
@@ -45,11 +59,59 @@ export default function App() {
   const [pwMsg, setPwMsg] = useState("");
   const [pwSaving, setPwSaving] = useState(false);
 
-  // ===== Data loaders =====
+  // Theme
+  const [designOpen, setDesignOpen] = useState(false);
+  const [themeKey, setThemeKey] = useState(DEFAULT_THEME_KEY);
+
+  // New Game Modal
+  const [newGameOpen, setNewGameOpen] = useState(false);
+
+  // ===== Stats Modal =====
+  const [statsOpen, setStatsOpen] = useState(false);
+  const [stats, setStats] = useState(null);
+  const [statsLoading, setStatsLoading] = useState(false);
+  const [statsError, setStatsError] = useState("");
+
+  // ===== Join Snack (bottom toast) =====
+  const [snack, setSnack] = useState("");
+  const snackTimerRef = useRef(null);
+
+  // track members to detect joins
+  const lastMemberIdsRef = useRef(new Set());
+  const membersBaselineRef = useRef(false);
+
+  // ===== Winner Celebration =====
+  const [celebrateOpen, setCelebrateOpen] = useState(false);
+  const [celebrateName, setCelebrateName] = useState("");
+
+  // baseline per game: beim ersten Meta-Load NICHT feiern
+  const winnerBaselineRef = useRef(false);
+  const lastWinnerIdRef = useRef(null);
+
+  const showSnack = (msg) => {
+    setSnack(msg);
+    if (snackTimerRef.current) clearTimeout(snackTimerRef.current);
+    snackTimerRef.current = setTimeout(() => setSnack(""), 1800);
+  };
+
+  const vibrate = (pattern) => {
+    try {
+      if (typeof navigator !== "undefined" && "vibrate" in navigator) {
+        navigator.vibrate(pattern);
+      }
+    } catch {
+      // ignore
+    }
+  };
+
   const load = async () => {
     const m = await api("/auth/me");
     setMe(m);
 
+    const tk = m?.theme_key || DEFAULT_THEME_KEY;
+    setThemeKey(tk);
+    applyTheme(tk);
+
     const gs = await api("/games");
     setGames(gs);
 
@@ -62,7 +124,49 @@ export default function App() {
     setSheet(sh);
   };
 
-  // ===== Effects =====
+  const loadGameMeta = async () => {
+    if (!gameId) return;
+
+    const meta = await api(`/games/${gameId}`);
+    setGameMeta(meta);
+    setWinnerUserId(meta?.winner_user_id || "");
+
+    const mem = await api(`/games/${gameId}/members`);
+    setMembers(mem);
+
+    // ✅ detect new members (join notifications for everyone)
+    try {
+      const prev = lastMemberIdsRef.current;
+      const nowIds = new Set((mem || []).map((m) => String(m.id)));
+
+      if (!membersBaselineRef.current) {
+        // first load for this game -> set baseline, no notification
+        membersBaselineRef.current = true;
+        lastMemberIdsRef.current = nowIds;
+        return;
+      }
+
+      const added = (mem || []).filter((m) => !prev.has(String(m.id)));
+
+      if (added.length > 0) {
+        const names = added
+          .map((m) => ((m.display_name || "").trim() || (m.email || "").trim() || "Jemand"))
+          .slice(0, 3);
+
+        const msg =
+          added.length === 1
+            ? `✨ ${names[0]} ist beigetreten`
+            : `✨ ${names.join(", ")} ${added.length > 3 ? `(+${added.length - 3}) ` : ""}sind beigetreten`;
+
+        showSnack(msg);
+        vibrate(25); // dezent & kurz
+      }
+
+      lastMemberIdsRef.current = nowIds;
+    } catch {
+      // ignore snack errors
+    }
+  };
 
   // Dropdown outside click
   useEffect(() => {
@@ -74,31 +178,97 @@ export default function App() {
     return () => document.removeEventListener("mousedown", onDown);
   }, [userMenuOpen]);
 
-  // initial load (try session)
+  // initial load
   useEffect(() => {
     (async () => {
       try {
         await load();
-      } catch {
+      } catch {}
-        // not logged in
-      }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // load sheet when game changes
+  // on game change
   useEffect(() => {
+    // reset join detection baseline when switching games
+    membersBaselineRef.current = false;
+    lastMemberIdsRef.current = new Set();
+
+    // reset winner celebration baseline when switching games
+    winnerBaselineRef.current = false;
+    lastWinnerIdRef.current = null;
+    setCelebrateOpen(false);
+    setCelebrateName("");
+
     (async () => {
       if (!gameId) return;
       try {
         await reloadSheet();
-      } catch {
+        await loadGameMeta();
-        // ignore
+      } catch {}
-      }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [gameId]);
 
+  // ✅ Live refresh (Members/Meta) – damit neue Joiner ohne Reload sichtbar sind
+  // Für 5–6 Spieler reicht 2.5s völlig, ist "live genug" und schont Backend.
+  useEffect(() => {
+    if (!me || !gameId) return;
+
+    let alive = true;
+
+    const tick = async () => {
+      try {
+        await loadGameMeta(); // refresh members + winner meta
+      } catch {
+        // ignore
+      }
+    };
+
+    // sofort einmal ziehen
+    tick();
+
+    const id = setInterval(() => {
+      if (!alive) return;
+      tick();
+    }, 2500);
+
+    return () => {
+      alive = false;
+      clearInterval(id);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [me?.id, gameId]);
+
+  useEffect(() => {
+    // wid kann auch "" sein (kein Sieger)
+    const wid = gameMeta?.winner_user_id ? String(gameMeta.winner_user_id) : "";
+
+    // Baseline beim ersten Meta-Load setzen – egal ob Winner existiert oder nicht
+    if (!winnerBaselineRef.current) {
+      winnerBaselineRef.current = true;
+      lastWinnerIdRef.current = wid; // kann "" sein
+      return;
+    }
+
+    // Nur reagieren, wenn sich wid ändert
+    if (lastWinnerIdRef.current !== wid) {
+      lastWinnerIdRef.current = wid;
+
+      // wenn wid leer wird (reset), nicht feiern
+      if (!wid) return;
+
+      const name =
+        (gameMeta?.winner_display_name || "").trim() ||
+        (gameMeta?.winner_email || "").trim() ||
+        "Jemand";
+
+      setCelebrateName(name);
+      setCelebrateOpen(true);
+    }
+  }, [gameMeta?.winner_user_id, gameMeta?.winner_display_name, gameMeta?.winner_email]);
+
+
   // ===== Auth actions =====
   const doLogin = async () => {
     await api("/auth/login", {
@@ -114,9 +284,18 @@ export default function App() {
     setGames([]);
     setGameId(null);
     setSheet(null);
+    setGameMeta(null);
+    setMembers([]);
+    setWinnerUserId("");
+
+    // reset winner celebration on logout
+    winnerBaselineRef.current = false;
+    lastWinnerIdRef.current = null;
+    setCelebrateOpen(false);
+    setCelebrateName("");
   };
 
-  // ===== Password change =====
+  // ===== Password =====
   const openPwModal = () => {
     setPwMsg("");
     setPw1("");
@@ -153,15 +332,110 @@ export default function App() {
     }
   };
 
-  // ===== Game actions =====
+  // ===== Theme =====
-  const newGame = async () => {
+  const openDesignModal = () => {
+    setDesignOpen(true);
+    setUserMenuOpen(false);
+  };
+
+  const selectTheme = async (key) => {
+    setThemeKey(key);
+    applyTheme(key);
+
+    // ✅ sofort für nächsten Start merken (verhindert Flash)
+    try {
+      localStorage.setItem(`hpTheme:${(me?.email || "guest").toLowerCase()}`, key);
+      localStorage.setItem("hpTheme:guest", key); // fallback, falls noch nicht eingeloggt
+    } catch {
+      // ignore
+    }
+
+    try {
+      await api("/auth/theme", {
+        method: "PATCH",
+        body: JSON.stringify({ theme_key: key }),
+      });
+    } catch {
+      // theme locally already applied; ignore backend error
+    }
+  };
+  
+
+  // ===== Stats (always fresh on open) =====
+  const openStatsModal = async () => {
+    setUserMenuOpen(false);
+    setStatsOpen(true);
+    setStatsError("");
+    setStatsLoading(true);
+
+    try {
+      const s = await api("/auth/me/stats");
+      setStats(s);
+    } catch (e) {
+      setStats(null);
+      setStatsError("❌ Fehler: " + (e?.message || "unknown"));
+    } finally {
+      setStatsLoading(false);
+    }
+  };
+
+  const closeStatsModal = () => {
+    setStatsOpen(false);
+    setStatsError("");
+  };
+
+  // ===== New game flow =====
+  const createGame = async () => {
+    // ✅ alten Game-State komplett loswerden, damit nix am alten Spiel "hängen bleibt"
+    setSheet(null);
+    setGameMeta(null);
+    setMembers([]);
+    setWinnerUserId("");
+    setPulseId(null);
+
+    // auch Chip-Modal-State resetten
+    setChipOpen(false);
+    setChipEntry(null);
+
+    // reset winner celebration baseline for the new game
+    winnerBaselineRef.current = false;
+    lastWinnerIdRef.current = null;
+    setCelebrateOpen(false);
+    setCelebrateName("");
+
     const g = await api("/games", {
       method: "POST",
       body: JSON.stringify({ name: "Spiel " + new Date().toLocaleString() }),
     });
+
     const gs = await api("/games");
     setGames(gs);
+
+    // ✅ auf neues Game wechseln (triggert reloadSheet/loadGameMeta via effect)
     setGameId(g.id);
+
+    return g; // includes code
+  };
+
+  const joinGame = async (code) => {
+    const res = await api("/games/join", {
+      method: "POST",
+      body: JSON.stringify({ code }),
+    });
+
+    const gs = await api("/games");
+    setGames(gs);
+    setGameId(res.id);
+  };
+
+  // ===== Winner =====
+  const saveWinner = async () => {
+    if (!gameId) return;
+    await api(`/games/${gameId}/winner`, {
+      method: "PATCH",
+      body: JSON.stringify({ winner_user_id: winnerUserId || null }),
+    });
+    await loadGameMeta();
   };
 
   // ===== Sheet actions =====
@@ -185,19 +459,17 @@ export default function App() {
   const toggleTag = async (entry) => {
     const next = cycleTag(entry.note_tag);
 
-    // going to "s" -> open chip modal, don't write backend yet
     if (next === "s") {
       setChipEntry(entry);
       setChipOpen(true);
       return;
     }
 
-    // s -> — : clear local chip
     if (next === null) clearChipLS(gameId, entry.entry_id);
 
     await api(`/games/${gameId}/sheet/${entry.entry_id}`, {
       method: "PATCH",
-      body: JSON.stringify({ note_tag: next }),
+      body: JSON.stringify({ note_tag: next, chip: null }),
     });
 
     await reloadSheet();
@@ -210,14 +482,12 @@ export default function App() {
     setChipOpen(false);
     setChipEntry(null);
 
-    // frontend-only save
     setChipLS(gameId, entry.entry_id, chip);
 
     try {
-      // backend only gets "s"
       await api(`/games/${gameId}/sheet/${entry.entry_id}`, {
         method: "PATCH",
-        body: JSON.stringify({ note_tag: "s" }),
+        body: JSON.stringify({ note_tag: "s", chip }),
       });
     } finally {
       await reloadSheet();
@@ -239,7 +509,7 @@ export default function App() {
     try {
       await api(`/games/${gameId}/sheet/${entry.entry_id}`, {
         method: "PATCH",
-        body: JSON.stringify({ note_tag: null }),
+        body: JSON.stringify({ note_tag: null, chip: null }),
       });
     } finally {
       await reloadSheet();
@@ -249,10 +519,13 @@ export default function App() {
   const displayTag = (entry) => {
     const t = entry.note_tag;
     if (!t) return "—";
+
     if (t === "s") {
-      const chip = getChipLS(gameId, entry.entry_id);
+      // Prefer backend chip, fallback localStorage
+      const chip = entry.chip || getChipLS(gameId, entry.entry_id);
       return chip ? `s.${chip}` : "s";
     }
+
     return t; // i oder m
   };
 
@@ -279,8 +552,17 @@ export default function App() {
       ]
     : [];
 
+  const isHost = !!(me?.id && gameMeta?.host_user_id && me.id === gameMeta.host_user_id);
+
   return (
     <div style={styles.page}>
+      {/* Winner Celebration Overlay */}
+      <WinnerCelebration
+        open={celebrateOpen}
+        winnerName={celebrateName}
+        onClose={() => setCelebrateOpen(false)}
+      />
+
       <div style={styles.bgFixed} aria-hidden="true">
         <div style={styles.bgMap} />
       </div>
@@ -291,8 +573,10 @@ export default function App() {
           userMenuOpen={userMenuOpen}
           setUserMenuOpen={setUserMenuOpen}
           openPwModal={openPwModal}
+          openDesignModal={openDesignModal}
+          openStatsModal={openStatsModal}
           doLogout={doLogout}
-          newGame={newGame}
+          onOpenNewGame={() => setNewGameOpen(true)}
         />
 
         {me.role === "admin" && <AdminPanel />}
@@ -302,6 +586,17 @@ export default function App() {
           gameId={gameId}
           setGameId={setGameId}
           onOpenHelp={() => setHelpOpen(true)}
+          members={members}
+          me={me}
+          hostUserId={gameMeta?.host_user_id || ""}
+        />
+
+        {/* Sieger Badge: zwischen Spiel und Verdächtigte Person */}
+        <WinnerBadge
+          winner={{
+            display_name: gameMeta?.winner_display_name || "",
+            email: gameMeta?.winner_email || "",
+          }}
         />
 
         <HelpModal open={helpOpen} onClose={() => setHelpOpen(false)} />
@@ -320,6 +615,15 @@ export default function App() {
           ))}
         </div>
 
+        {/* Host-only Winner Auswahl */}
+        <WinnerCard
+          isHost={isHost}
+          members={members}
+          winnerUserId={winnerUserId}
+          setWinnerUserId={setWinnerUserId}
+          onSave={saveWinner}
+        />
+
         <div style={{ height: 24 }} />
       </div>
 
@@ -335,11 +639,70 @@ export default function App() {
         savePassword={savePassword}
       />
 
+      <DesignModal
+        open={designOpen}
+        onClose={() => setDesignOpen(false)}
+        themeKey={themeKey}
+        onSelect={(k) => {
+          selectTheme(k);
+          setDesignOpen(false);
+        }}
+      />
+
+      <NewGameModal
+        open={newGameOpen}
+        onClose={() => setNewGameOpen(false)}
+        onCreate={createGame}
+        onJoin={joinGame}
+        currentCode={gameMeta?.code || ""}
+        gameFinished={!!gameMeta?.winner_user_id}
+        hasGame={!!gameId}
+        currentMembers={members}
+      />
+
       <ChipModal
         chipOpen={chipOpen}
         closeChipModalToDash={closeChipModalToDash}
         chooseChip={chooseChip}
       />
+
+      <StatsModal
+        open={statsOpen}
+        onClose={closeStatsModal}
+        me={me}
+        stats={stats}
+        loading={statsLoading}
+        error={statsError}
+      />
+
+      {/* Bottom snack for joins */}
+      {snack &&
+        createPortal(
+          <div
+            style={{
+              position: "fixed",
+              left: "50%",
+              bottom: 14,
+              transform: "translateX(-50%)",
+              maxWidth: "92vw",
+              padding: "10px 12px",
+              borderRadius: 14,
+              border: `1px solid ${stylesTokens.panelBorder}`,
+              background: stylesTokens.panelBg,
+              color: stylesTokens.textMain,
+              boxShadow: "0 12px 30px rgba(0,0,0,0.35)",
+              backdropFilter: "blur(6px)",
+              fontWeight: 900,
+              fontSize: 13,
+              textAlign: "center",
+              zIndex: 2147483647,
+              pointerEvents: "none",
+            }}
+          >
+            {snack}
+          </div>,
+          document.body
+        )}
     </div>
   );
 }

frontend/src/components/AdminPanel.jsx

@@ -2,16 +2,29 @@ import React, { useEffect, useState } from "react";
 import { api } from "../api/client";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
+import { createPortal } from "react-dom";
 
 export default function AdminPanel() {
   const [users, setUsers] = useState([]);
 
   const [open, setOpen] = useState(false);
+  const [displayName, setDisplayName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [role, setRole] = useState("user");
   const [msg, setMsg] = useState("");
 
+  useEffect(() => {
+    if (!open) return;
+
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
   const loadUsers = async () => {
     const u = await api("/admin/users");
     setUsers(u);
@@ -22,6 +35,7 @@ export default function AdminPanel() {
   }, []);
 
   const resetForm = () => {
+    setDisplayName("");
     setEmail("");
     setPassword("");
     setRole("user");
@@ -32,7 +46,7 @@ export default function AdminPanel() {
     try {
       await api("/admin/users", {
         method: "POST",
-        body: JSON.stringify({ email, password, role }),
+        body: JSON.stringify({ display_name: displayName, email, password, role }),
       });
       setMsg("✅ User erstellt.");
       await loadUsers();
@@ -43,6 +57,16 @@ export default function AdminPanel() {
     }
   };
 
+  const deleteUser = async (u) => {
+    if (!window.confirm(`User wirklich löschen (deaktivieren)?\n\n${u.display_name || u.email}`)) return;
+    try {
+      await api(`/admin/users/${u.id}`, { method: "DELETE" });
+      await loadUsers();
+    } catch (e) {
+      alert("Fehler: " + (e?.message || "unknown"));
+    }
+  };
+
   const closeModal = () => {
     setOpen(false);
     setMsg("");
@@ -63,19 +87,45 @@ export default function AdminPanel() {
 
       <div style={{ marginTop: 8, display: "grid", gap: 8 }}>
         {users.map((u) => (
-          <div key={u.id} style={styles.userRow}>
+          <div
-            <div style={{ color: stylesTokens.textMain }}>{u.email}</div>
+            key={u.id}
+            style={{
+              ...styles.userRow,
+              gridTemplateColumns: "1fr 1fr 80px 90px 92px",
+              alignItems: "center",
+            }}
+          >
+            <div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>
+              {u.display_name || "—"}
+            </div>
+            <div style={{ color: stylesTokens.textDim, fontSize: 13 }}>{u.email}</div>
             <div style={{ textAlign: "center", fontWeight: 900, color: stylesTokens.textGold }}>
               {u.role}
             </div>
             <div style={{ textAlign: "center", opacity: 0.85, color: stylesTokens.textMain }}>
               {u.disabled ? "disabled" : "active"}
             </div>
+
+            <button
+              onClick={() => deleteUser(u)}
+              style={{
+                ...styles.secondaryBtn,
+                padding: "8px 10px",
+                borderRadius: 12,
+                color: "#ffb3b3",
+                opacity: u.role === "admin" ? 0.4 : 1,
+                pointerEvents: u.role === "admin" ? "none" : "auto",
+              }}
+              title={u.role === "admin" ? "Admin kann nicht gelöscht werden" : "User löschen (deaktivieren)"}
+            >
+              Löschen
+            </button>
           </div>
         ))}
       </div>
 
-      {open && (
+      {open &&
+        createPortal(
           <div style={styles.modalOverlay} onMouseDown={closeModal}>
             <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
               <div style={styles.modalHeader}>
@@ -87,14 +137,29 @@ export default function AdminPanel() {
                 </button>
               </div>
 
-            <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
+              <div
+                style={{
+                  marginTop: 12,
+                  display: "grid",
+                  gap: 8,
+                  justifyItems: "center",   // <<< zentriert alles
+                }}
+              >
+                <input
+                  value={displayName}
+                  onChange={(e) => setDisplayName(e.target.value)}
+                  placeholder="Name (z.B. Sascha)"
+                  style={styles.input}
+                  autoFocus
+                />
+
                 <input
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   placeholder="Email"
                   style={styles.input}
-                autoFocus
                 />
+
                 <input
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
@@ -102,6 +167,7 @@ export default function AdminPanel() {
                   type="password"
                   style={styles.input}
                 />
+
                 <select value={role} onChange={(e) => setRole(e.target.value)} style={styles.input}>
                   <option value="user">user</option>
                   <option value="admin">admin</option>
@@ -125,12 +191,14 @@ export default function AdminPanel() {
                 </div>
 
                 <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
-                Tipp: Klick auf Item: Grün → Rot → Grau → Leer
+                  Tipp: Name wird in TopBar & Siegeranzeige genutzt.
                 </div>
               </div>
             </div>
-        </div>
+          </div>,
-      )}
+          document.body
+        )
+      }
     </div>
   );
 }

frontend/src/components/DesignModal.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
+import { THEMES } from "../styles/themes";
+
+export default function DesignModal({ open, onClose, themeKey, onSelect }) {
+  if (!open) return null;
+
+  const themeEntries = Object.entries(THEMES);
+
+  return (
+    <div style={styles.modalOverlay} onMouseDown={onClose}>
+      <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
+        <div style={styles.modalHeader}>
+          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Design ändern</div>
+          <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
+            ✕
+          </button>
+        </div>
+
+        <div style={{ marginTop: 12, color: stylesTokens.textMain, opacity: 0.92 }}>
+          Wähle dein Theme:
+        </div>
+
+        <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
+          {themeEntries.map(([key, t]) => {
+            const active = key === themeKey;
+
+            return (
+              <button
+                key={key}
+                onClick={() => onSelect(key)}
+                style={{
+                  ...styles.secondaryBtn,
+                  textAlign: "left",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  border: active
+                    ? `1px solid rgba(233,216,166,0.40)`
+                    : `1px solid rgba(233,216,166,0.18)`,
+                }}
+              >
+                <span style={{ fontWeight: 1000 }}>{t.label}</span>
+                <span style={{ opacity: 0.75 }}>{active ? "✓ aktiv" : ""}</span>
+              </button>
+            );
+          })}
+        </div>
+
+        <div style={{ marginTop: 12, fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
+          Hinweis: Das Design wird pro User gespeichert (Email).
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/GamePickerCard.jsx

@@ -1,13 +1,47 @@
-// src/components/GamePickerCard.jsx
 import React from "react";
 import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
 
 export default function GamePickerCard({
   games,
   gameId,
   setGameId,
   onOpenHelp,
+  members = [],
+  me,
+  hostUserId,
 }) {
+  const cur = games.find((x) => x.id === gameId);
+
+  const renderMemberName = (m) => {
+    const base = ((m.display_name || "").trim() || (m.email || "").trim() || "—");
+    const isMe = !!(me?.id && String(me.id) === String(m.id));
+    const isHost = !!(hostUserId && String(hostUserId) === String(m.id));
+
+    const suffix = `${isHost ? " " : ""}${isMe ? " (du)" : ""}`;
+    return base + suffix;
+  };
+
+  const pillStyle = (isHost, isMe) => ({
+    padding: "7px 10px",
+    borderRadius: 999,
+    border: `1px solid ${
+      isHost ? "rgba(233,216,166,0.35)" : "rgba(233,216,166,0.16)"
+    }`,
+    background: isHost
+      ? "linear-gradient(180deg, rgba(233,216,166,0.14), rgba(10,10,12,0.35))"
+      : "rgba(10,10,12,0.30)",
+    color: stylesTokens.textMain,
+    fontSize: 13,
+    fontWeight: 950,
+    boxShadow: isHost ? "0 8px 18px rgba(0,0,0,0.25)" : "none",
+    opacity: isMe ? 1 : 0.95,
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    whiteSpace: "nowrap",
+  });
+
   return (
     <div style={{ marginTop: 14 }}>
       <div style={styles.card}>
@@ -21,7 +55,7 @@ export default function GamePickerCard({
           >
             {games.map((g) => (
               <option key={g.id} value={g.id}>
-                {g.name}
+                {g.name} {g.code ? `• ${g.code}` : ""}
               </option>
             ))}
           </select>
@@ -30,6 +64,78 @@ export default function GamePickerCard({
             Hilfe
           </button>
         </div>
+
+        {/* Code Zeile */}
+        {cur?.code && (
+          <div
+            style={{
+              padding: "0 12px 10px",
+              fontSize: 12,
+              color: stylesTokens.textDim,
+              opacity: 0.92,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 10,
+            }}
+          >
+            <div>
+              Code: <b style={{ color: stylesTokens.textGold }}>{cur.code}</b>
+            </div>
+          </div>
+        )}
+
+        {/* Spieler */}
+        {members?.length > 0 && (
+          <div style={{ padding: "0 12px 12px" }}>
+            <div
+              style={{
+                fontSize: 12,
+                opacity: 0.85,
+                color: stylesTokens.textDim,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 10,
+              }}
+            >
+              <div>Spieler</div>
+              <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>
+                {members.length}
+              </div>
+            </div>
+
+            <div
+              style={{
+                marginTop: 8,
+                padding: 10,
+                borderRadius: 16,
+                border: `1px solid rgba(233,216,166,0.10)`,
+                background: "rgba(10,10,12,0.18)",
+                display: "flex",
+                flexWrap: "wrap",
+                gap: 8,
+              }}
+            >
+              {members.map((m) => {
+                const isMe = !!(me?.id && String(me.id) === String(m.id));
+                const isHost = !!(hostUserId && String(hostUserId) === String(m.id));
+                const label = renderMemberName(m);
+
+                return (
+                  <div key={m.id} style={pillStyle(isHost, isMe)} title={label}>
+                    {isHost && <span style={{ color: stylesTokens.textGold }}>👑</span>}
+                    <span>{label.replace(" 👑", "")}</span>
+                  </div>
+                );
+              })}
+            </div>
+
+            <div style={{ marginTop: 6, fontSize: 11, opacity: 0.7, color: stylesTokens.textDim }}>
+              👑 = Host
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

frontend/src/components/HelpModal.jsx

@@ -17,9 +17,34 @@ export default function HelpModal({ open, onClose }) {
         </div>
 
         <div style={styles.helpBody}>
-          <div style={styles.helpSectionTitle}>1) Namen anklicken (Status)</div>
+          {/* ===== 0) Spiele & Navigation ===== */}
+          <div style={styles.helpSectionTitle}>0) Spiele auswählen / Neues Spiel</div>
           <div style={styles.helpText}>
-            Tippe auf einen Namen, um den Status zu wechseln. Reihenfolge:
+            Oben im Bereich <b>Spiel</b> kannst du zwischen bestehenden Spielen wechseln oder ein neues
+            Spiel erstellen:
+          </div>
+
+          <div style={styles.helpList}>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>▼</span>
+              <div>
+                <b>Spiel-Auswahl</b> (Dropdown neben dem Hilfe-Button) = vorhandene / alte Spiele öffnen
+              </div>
+            </div>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>✦</span>
+              <div>
+                <b>„Neues Spiel“</b> = erstellt ein neues Spiel und öffnet es automatisch
+              </div>
+            </div>
+          </div>
+
+          <div style={styles.helpDivider} />
+
+          {/* ===== 1) Status per Tippen ===== */}
+          <div style={styles.helpSectionTitle}>1) Namen antippen (Status)</div>
+          <div style={styles.helpText}>
+            Tippe auf einen Namen, um den Status zu ändern. Reihenfolge:
           </div>
 
           <div style={styles.helpList}>
@@ -79,14 +104,15 @@ export default function HelpModal({ open, onClose }) {
                 –
               </span>
               <div>
-                <b>Leer</b> = unknown / noch nicht bewertet
+                <b>Leer</b> = noch nicht bewertet
               </div>
             </div>
           </div>
 
           <div style={styles.helpDivider} />
 
-          <div style={styles.helpSectionTitle}>2) i / m / s Button (Notiz)</div>
+          {/* ===== 2) i / m / s Notizen ===== */}
+          <div style={styles.helpSectionTitle}>2) i / m / s Button (Notizen)</div>
           <div style={styles.helpText}>
             Rechts pro Zeile gibt es einen Button, der durch diese Werte rotiert:
           </div>
@@ -95,21 +121,21 @@ export default function HelpModal({ open, onClose }) {
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>i</span>
               <div>
-                <b>i</b> = „Ich habe diese Geheimkarte“
+                <b>i</b> = „Ich habe diese Karte“
               </div>
             </div>
 
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>m</span>
               <div>
-                <b>m</b> = „Geheimkarte aus dem mittleren Deck“
+                <b>m</b> = „Karte aus dem mittleren Deck“
               </div>
             </div>
 
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>s</span>
               <div>
-                <b>s</b> = „Ein anderer Spieler hat diese Karte“ (Chip Auswahl)
+                <b>s</b> = „Ein anderer Spieler hat die Karte“ → danach Chip auswählen (z.B. <b>s.AL</b>)
               </div>
             </div>
 
@@ -123,9 +149,38 @@ export default function HelpModal({ open, onClose }) {
 
           <div style={styles.helpDivider} />
 
+          {/* ===== 3) User-Menü ===== */}
+          <div style={styles.helpSectionTitle}>3) User-Menü (Passwort / Logout)</div>
           <div style={styles.helpText}>
-            Tipp: Jeder Spieler sieht nur seine eigenen Notizen – andere Spieler können nicht in
+            Oben rechts im <b>User</b>-Menü findest du persönliche Einstellungen:
-            deinen Zettel schauen.
+          </div>
+
+          <div style={styles.helpList}>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>👤</span>
+              <div>
+                <b>User</b> öffnen = zeigt die aktuell verwendete Email-Adresse
+              </div>
+            </div>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>🔒</span>
+              <div>
+                <b>Passwort setzen</b> = eigenes Passwort ändern
+              </div>
+            </div>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>⎋</span>
+              <div>
+                <b>Logout</b> = ausloggen
+              </div>
+            </div>
+          </div>
+
+          <div style={styles.helpDivider} />
+
+          <div style={styles.helpText}>
+            Tipp: Jeder Spieler sieht nur seine eigenen Notizen – andere Spieler können nicht in deinen
+            Zettel schauen.
           </div>
         </div>
       </div>

frontend/src/components/JoinGameModal.jsx

@@ -0,0 +1,74 @@
+// src/components/JoinGameModal.jsx
+import React, { useEffect, useState } from "react";
+import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
+
+export default function JoinGameModal({ open, onClose, onJoin }) {
+  const [code, setCode] = useState("");
+  const [msg, setMsg] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setCode("");
+    setMsg("");
+    setBusy(false);
+  }, [open]);
+
+  if (!open) return null;
+
+  const doJoin = async () => {
+    const c = (code || "").trim();
+    if (!c) return setMsg("❌ Bitte Code eingeben.");
+    setBusy(true);
+    setMsg("");
+    try {
+      await onJoin(c);
+    } catch (e) {
+      setMsg("❌ Fehler: " + (e?.message || "unknown"));
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div style={styles.modalOverlay} onMouseDown={onClose}>
+      <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
+        <div style={styles.modalHeader}>
+          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Spiel beitreten</div>
+          <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
+            ✕
+          </button>
+        </div>
+
+        <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
+          <input
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            placeholder="z.B. 123456"
+            style={styles.input}
+            inputMode="numeric"
+            autoFocus
+            onKeyDown={(e) => {
+              if (e.key === "Enter") doJoin();
+            }}
+          />
+
+          {msg && <div style={{ opacity: 0.92, color: stylesTokens.textMain }}>{msg}</div>}
+
+          <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 4 }}>
+            <button onClick={onClose} style={styles.secondaryBtn} disabled={busy}>
+              Abbrechen
+            </button>
+            <button onClick={doJoin} style={styles.primaryBtn} disabled={busy}>
+              {busy ? "Beitreten..." : "Beitreten"}
+            </button>
+          </div>
+
+          <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
+            Tipp: Der Spiel-Code steht beim Host unter dem Spiel-Dropdown.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ModalPortal.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { styles } from "../styles/styles";
+
+export default function ModalPortal({ open, onClose, children }) {
+  useEffect(() => {
+    if (!open) return;
+
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onClose?.();
+    };
+
+    // Scroll der Seite sperren
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div
+      style={styles.modalOverlay}
+      onMouseDown={(e) => {
+        // Klick außerhalb schließt
+        if (e.target === e.currentTarget) onClose?.();
+      }}
+    >
+      <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+}

frontend/src/components/NewGameModal.jsx

@@ -0,0 +1,265 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
+
+export default function NewGameModal({
+  open,
+  onClose,
+  onCreate,
+  onJoin,
+
+  // ✅ neu:
+  currentCode = "",
+  gameFinished = false,
+  hasGame = false,
+}) {
+  // modes: running | choice | create | join
+  const [mode, setMode] = useState("choice");
+  const [joinCode, setJoinCode] = useState("");
+  const [err, setErr] = useState("");
+  const [created, setCreated] = useState(null); // { code }
+  const [toast, setToast] = useState("");
+
+  const canJoin = useMemo(() => joinCode.trim().length >= 4, [joinCode]);
+
+  // ✅ wichtig: beim Öffnen entscheidet der Modus anhand "läuft vs beendet"
+  useEffect(() => {
+    if (!open) return;
+
+    setErr("");
+    setToast("");
+    setJoinCode("");
+    setCreated(null);
+
+    // Wenn ein Spiel läuft (und nicht finished) -> nur Code anzeigen
+    if (hasGame && !gameFinished) {
+      setMode("running");
+    } else {
+      setMode("choice");
+    }
+  }, [open, hasGame, gameFinished]);
+
+  if (!open) return null;
+
+  const showToast = (msg) => {
+    setToast(msg);
+    setTimeout(() => setToast(""), 1100);
+  };
+
+  const doCreate = async () => {
+    setErr("");
+    try {
+      const res = await onCreate();
+      setCreated({ code: res.code });
+      setMode("create");
+    } catch (e) {
+      setErr("❌ Fehler: " + (e?.message || "unknown"));
+    }
+  };
+
+  const doJoin = async () => {
+    setErr("");
+    try {
+      await onJoin(joinCode.trim().toUpperCase());
+      onClose();
+    } catch (e) {
+      setErr("❌ Fehler: " + (e?.message || "unknown"));
+    }
+  };
+
+  const copyText = async (text, okMsg = "✅ Code kopiert") => {
+    try {
+      await navigator.clipboard.writeText(text || "");
+      showToast(okMsg);
+    } catch {
+      showToast("❌ Copy nicht möglich");
+    }
+  };
+
+  const codeToShow =
+    (created?.code || "").trim() ||
+    (currentCode || "").trim();
+
+  return (
+    <div style={styles.modalOverlay} onMouseDown={onClose}>
+      <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
+        <div style={styles.modalHeader}>
+          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>
+            Spiel
+          </div>
+          <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
+            ✕
+          </button>
+        </div>
+
+        {/* Toast */}
+        {toast && (
+          <div
+            style={{
+              marginTop: 10,
+              padding: "10px 12px",
+              borderRadius: 12,
+              border: `1px solid ${stylesTokens.panelBorder}`,
+              background: stylesTokens.panelBg,
+              color: stylesTokens.textMain,
+              fontWeight: 900,
+              textAlign: "center",
+              animation: "fadeIn 120ms ease-out",
+            }}
+          >
+            {toast}
+          </div>
+        )}
+
+        <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
+          {/* ✅ RUNNING: Nur Code anzeigen, keine Choice */}
+          {mode === "running" && (
+            <>
+              <div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>
+                Das Spiel läuft noch. Hier ist der <b>Join-Code</b>:
+              </div>
+
+              <div
+                style={{
+                  display: "grid",
+                  gap: 8,
+                  padding: 12,
+                  borderRadius: 16,
+                  border: `1px solid ${stylesTokens.panelBorder}`,
+                  background: stylesTokens.panelBg,
+                  textAlign: "center",
+                }}
+              >
+                <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
+                  Spiel-Code
+                </div>
+
+                <div
+                  style={{
+                    fontSize: 28,
+                    fontWeight: 1100,
+                    letterSpacing: 2,
+                    color: stylesTokens.textGold,
+                    fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
+                  }}
+                >
+                  {codeToShow || "—"}
+                </div>
+
+                <button
+                  onClick={() => copyText(codeToShow)}
+                  style={styles.primaryBtn}
+                  disabled={!codeToShow}
+                  title={!codeToShow ? "Kein Code verfügbar" : "Code kopieren"}
+                >
+                  ⧉ Code kopieren
+                </button>
+              </div>
+
+              <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
+                Sobald ein Sieger gesetzt wurde, kannst du hier ein neues Spiel erstellen oder beitreten.
+              </div>
+
+              <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+                <button onClick={onClose} style={styles.primaryBtn}>
+                  Fertig
+                </button>
+              </div>
+            </>
+          )}
+
+
+          {/* ✅ CHOICE: nur wenn Spiel beendet oder kein Spiel selected */}
+          {mode === "choice" && (
+            <>
+              <div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>
+                Willst du ein Spiel <b>erstellen</b> oder einem Spiel <b>beitreten</b>?
+              </div>
+
+              <button onClick={doCreate} style={styles.primaryBtn}>
+                ✦ Spiel erstellen
+              </button>
+
+              <button onClick={() => setMode("join")} style={styles.secondaryBtn}>
+                ⎆ Spiel beitreten
+              </button>
+            </>
+          )}
+
+          {mode === "join" && (
+            <>
+              <div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>
+                Gib den <b>Code</b> ein:
+              </div>
+
+              <input
+                value={joinCode}
+                onChange={(e) => setJoinCode(e.target.value.toUpperCase())}
+                placeholder="z.B. 8K3MZQ"
+                style={styles.input}
+                autoFocus
+              />
+
+              <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+                <button onClick={() => setMode("choice")} style={styles.secondaryBtn}>
+                  Zurück
+                </button>
+                <button onClick={doJoin} style={styles.primaryBtn} disabled={!canJoin}>
+                  Beitreten
+                </button>
+              </div>
+            </>
+          )}
+
+          {mode === "create" && created && (
+            <>
+              <div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>
+                Dein Spiel wurde erstellt. Dieser Code bleibt auch bei „Alte Spiele“ sichtbar:
+              </div>
+
+              <div
+                style={{
+                  display: "grid",
+                  gap: 8,
+                  padding: 12,
+                  borderRadius: 16,
+                  border: `1px solid ${stylesTokens.panelBorder}`,
+                  background: stylesTokens.panelBg,
+                  textAlign: "center",
+                }}
+              >
+                <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
+                  Spiel-Code
+                </div>
+
+                <div
+                  style={{
+                    fontSize: 28,
+                    fontWeight: 1100,
+                    letterSpacing: 2,
+                    color: stylesTokens.textGold,
+                    fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
+                  }}
+                >
+                  {created.code}
+                </div>
+
+                <button onClick={() => copyText(created?.code || "")} style={styles.primaryBtn}>
+                  ⧉ Code kopieren
+                </button>
+              </div>
+
+              <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+                <button onClick={onClose} style={styles.primaryBtn}>
+                  Fertig
+                </button>
+              </div>
+            </>
+          )}
+
+          {err && <div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>{err}</div>}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/SheetSection.jsx

@@ -3,15 +3,6 @@ import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
 
-/**
- * props:
- * - title: string
- * - entries: array
- * - pulseId: number | null
- * - onCycleStatus(entry): fn
- * - onToggleTag(entry): fn
- * - displayTag(entry): string
- */
 export default function SheetSection({
   title,
   entries,
@@ -20,18 +11,18 @@ export default function SheetSection({
   onToggleTag,
   displayTag,
 }) {
-  // --- helpers (lokal, weil sie rein UI sind) ---
   const getRowBg = (status) => {
-    if (status === 1) return "rgba(255, 35, 35, 0.16)";
+    if (status === 1) return stylesTokens.rowNoBg;
-    if (status === 2) return "rgba(0, 190, 80, 0.16)";
+    if (status === 2) return stylesTokens.rowOkBg;
-    if (status === 3) return "rgba(140, 140, 140, 0.12)";
+    if (status === 3) return stylesTokens.rowMaybeBg;
-    return "rgba(255,255,255,0.06)";
+    if (status === 0) return stylesTokens.rowEmptyBg;
+    return stylesTokens.rowDefaultBg;
   };
 
   const getNameColor = (status) => {
-    if (status === 1) return "#ffb3b3";
+    if (status === 1) return stylesTokens.rowNoText;
-    if (status === 2) return "#baf3c9";
+    if (status === 2) return stylesTokens.rowOkText;
-    if (status === 3) return "rgba(233,216,166,0.78)";
+    if (status === 3) return stylesTokens.rowMaybeText;
     return stylesTokens.textMain;
   };
 
@@ -43,11 +34,17 @@ export default function SheetSection({
   };
 
   const getStatusBadge = (status) => {
-    if (status === 2) return { color: "#baf3c9", background: "rgba(0,190,80,0.18)" };
+    if (status === 2) return { color: stylesTokens.badgeOkText, background: stylesTokens.badgeOkBg };
-    if (status === 1) return { color: "#ffb3b3", background: "rgba(255,35,35,0.18)" };
+    if (status === 1) return { color: stylesTokens.badgeNoText, background: stylesTokens.badgeNoBg };
-    if (status === 3)
+    if (status === 3) return { color: stylesTokens.badgeMaybeText, background: stylesTokens.badgeMaybeBg };
-      return { color: "rgba(233,216,166,0.85)", background: "rgba(140,140,140,0.14)" };
+    return { color: stylesTokens.badgeEmptyText, background: stylesTokens.badgeEmptyBg };
-    return { color: "rgba(233,216,166,0.75)", background: "rgba(255,255,255,0.08)" };
+  };
+
+  const getBorderLeft = (status) => {
+    if (status === 2) return `4px solid ${stylesTokens.rowOkBorder}`;
+    if (status === 1) return `4px solid ${stylesTokens.rowNoBorder}`;
+    if (status === 3) return `4px solid ${stylesTokens.rowMaybeBorder}`;
+    return `4px solid ${stylesTokens.rowEmptyBorder}`;
   };
 
   return (
@@ -56,7 +53,6 @@ export default function SheetSection({
 
       <div style={{ display: "grid" }}>
         {entries.map((e) => {
-          // UI "rot" wenn note_tag i/m/s (Backend s wird als s.XX angezeigt)
           const isIorMorS = e.note_tag === "i" || e.note_tag === "m" || e.note_tag === "s";
           const effectiveStatus = e.status === 0 && isIorMorS ? 1 : e.status;
 
@@ -70,14 +66,7 @@ export default function SheetSection({
                 ...styles.row,
                 background: getRowBg(effectiveStatus),
                 animation: pulseId === e.entry_id ? "rowPulse 220ms ease-out" : "none",
-                borderLeft:
+                borderLeft: getBorderLeft(effectiveStatus),
-                  effectiveStatus === 2
-                    ? "4px solid rgba(0,190,80,0.55)"
-                    : effectiveStatus === 1
-                    ? "4px solid rgba(255,35,35,0.55)"
-                    : effectiveStatus === 3
-                    ? "4px solid rgba(233,216,166,0.22)"
-                    : "4px solid rgba(0,0,0,0)",
               }}
             >
               <div

frontend/src/components/StatsModal.jsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
+
+function Tile({ label, value, sub }) {
+  return (
+    <div
+      style={{
+        borderRadius: 16,
+        border: `1px solid rgba(233,216,166,0.16)`,
+        background: "rgba(10,10,12,0.55)",
+        padding: 12,
+        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
+      }}
+    >
+      <div
+        style={{
+          fontSize: 11,
+          opacity: 0.8,
+          color: stylesTokens.textDim,
+          letterSpacing: 0.6,
+          textTransform: "uppercase",
+        }}
+      >
+        {label}
+      </div>
+
+      <div
+        style={{
+          marginTop: 6,
+          fontWeight: 1000,
+          fontSize: 26,
+          lineHeight: "30px",
+          color: stylesTokens.textGold,
+        }}
+      >
+        {value}
+      </div>
+
+      {sub ? (
+        <div style={{ marginTop: 2, fontSize: 12, opacity: 0.85, color: stylesTokens.textDim }}>
+          {sub}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default function StatsModal({ open, onClose, me, stats, loading, error }) {
+  if (!open) return null;
+
+  const displayName = me ? ((me.display_name || "").trim() || me.email) : "";
+
+  return createPortal(
+    <div style={styles.modalOverlay} onMouseDown={onClose}>
+      <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
+        <div style={styles.modalHeader}>
+          <div>
+            <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Statistik</div>
+            <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
+              {displayName}
+            </div>
+          </div>
+
+          <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
+            ✕
+          </button>
+        </div>
+
+        <div style={{ marginTop: 12 }}>
+          {loading ? (
+            <div style={{ padding: 10, color: stylesTokens.textDim, opacity: 0.9 }}>
+              Lade Statistik…
+            </div>
+          ) : error ? (
+            <div style={{ padding: 10, color: "#ffb3b3" }}>{error}</div>
+          ) : (
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: 10,
+              }}
+            >
+              <Tile label="Gespielte Spiele" value={stats?.played ?? 0} />
+              <Tile label="Siege" value={stats?.wins ?? 0} />
+              <Tile label="Verluste" value={stats?.losses ?? 0} />
+              <Tile label="Siegerate" value={`${stats?.winrate ?? 0}%`} sub="nur beendete Spiele" />
+            </div>
+          )}
+        </div>
+
+        <div style={{ marginTop: 12, fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
+          Hinweis: „Gespielt“ zählt nur Spiele mit gesetztem Sieger.
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}

frontend/src/components/TopBar.jsx

@@ -7,38 +7,23 @@ export default function TopBar({
   userMenuOpen,
   setUserMenuOpen,
   openPwModal,
+  openDesignModal,
+  openStatsModal,
   doLogout,
-  newGame,
+  onOpenNewGame,
 }) {
+  const displayName = me ? ((me.display_name || "").trim() || me.email) : "";
+
   return (
     <div style={styles.topBar}>
-      {/* LINKS: nur Rolle */}
       <div>
-        <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>
+        <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>Notizbogen</div>
-          Notizbogen
+        <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
-        </div>
+          {displayName}
-        <div
-          style={{
-            fontSize: 12,
-            opacity: 0.8,
-            color: stylesTokens.textDim,
-          }}
-        >
-          {me.email}
         </div>
       </div>
 
-      {/* RECHTS: Account + Neues Spiel */}
+      <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "nowrap" }} data-user-menu>
-      <div
-        style={{
-          display: "flex",
-          gap: 8,
-          alignItems: "center",
-          flexWrap: "nowrap",
-        }}
-        data-user-menu
-      >
-        {/* Account Dropdown */}
         <div style={{ position: "relative" }}>
           <button
             onClick={() => setUserMenuOpen((v) => !v)}
@@ -52,7 +37,6 @@ export default function TopBar({
 
           {userMenuOpen && (
             <div style={styles.userDropdown}>
-              {/* Email Info */}
               <div
                 style={{
                   padding: "10px 12px",
@@ -62,14 +46,29 @@ export default function TopBar({
                   borderBottom: "1px solid rgba(233,216,166,0.12)",
                 }}
               >
-                {me.email}
+                {me?.email || ""}
               </div>
 
-              {/* Actions */}
+              <button
+                onClick={() => {
+                  setUserMenuOpen(false);
+                  openStatsModal?.();
+                }}
+                style={styles.userDropdownItem}
+              >
+                Statistik
+              </button>
+
+              <div style={styles.userDropdownDivider} />
+
               <button onClick={openPwModal} style={styles.userDropdownItem}>
                 Passwort setzen
               </button>
 
+              <button onClick={openDesignModal} style={styles.userDropdownItem}>
+                Design ändern
+              </button>
+
               <div style={styles.userDropdownDivider} />
 
               <button
@@ -77,10 +76,7 @@ export default function TopBar({
                   setUserMenuOpen(false);
                   doLogout();
                 }}
-                style={{
+                style={{ ...styles.userDropdownItem, color: "#ffb3b3" }}
-                  ...styles.userDropdownItem,
-                  color: "#ffb3b3",
-                }}
               >
                 Logout
               </button>
@@ -88,8 +84,7 @@ export default function TopBar({
           )}
         </div>
 
-        {/* Neues Spiel Button */}
+        <button onClick={onOpenNewGame} style={styles.primaryBtn}>
-        <button onClick={newGame} style={styles.primaryBtn}>
           ✦ New Game
         </button>
       </div>

frontend/src/components/WinnerBadge.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { stylesTokens } from "../styles/theme";
+
+/**
+ * Props:
+ * - winner: { display_name?: string, email?: string } | null
+ * - winnerEmail: string | null (legacy fallback)
+ */
+export default function WinnerBadge({ winner, winnerEmail }) {
+  const name =
+    (winner?.display_name || "").trim() ||
+    (winner?.email || "").trim() ||
+    (winnerEmail || "").trim();
+
+  if (!name) return null;
+
+  return (
+    <div
+      style={{
+        marginTop: 14,
+        padding: "10px 12px",
+        borderRadius: 16,
+        border: `1px solid ${stylesTokens.panelBorder}`,
+        background: stylesTokens.panelBg,
+        boxShadow: "0 12px 30px rgba(0,0,0,0.35)",
+        backdropFilter: "blur(6px)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 10,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+        <div style={{ fontSize: 18 }}>🏆</div>
+
+        <div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>
+          Sieger:
+          <span style={{ color: stylesTokens.textGold }}>{" "}{name}</span>
+        </div>
+      </div>
+
+      <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
+        festgelegt
+      </div>
+    </div>
+  );
+}

frontend/src/components/WinnerCard.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
+
+export default function WinnerCard({
+  isHost,
+  members,
+  winnerUserId,
+  setWinnerUserId,
+  onSave,
+}) {
+  if (!isHost) return null;
+
+  return (
+    <div style={{ marginTop: 14 }}>
+      <div style={styles.card}>
+        <div style={styles.sectionHeader}>Sieger</div>
+
+        <div style={styles.cardBody}>
+          <select
+            value={winnerUserId || ""}
+            onChange={(e) => setWinnerUserId(e.target.value || "")}
+            style={{ ...styles.input, flex: 1 }}
+          >
+            <option value="">— kein Sieger —</option>
+            {members.map((m) => {
+              const dn = ((m.display_name || "").trim() || (m.email || "").trim());
+              return (
+                <option key={m.id} value={m.id}>
+                  {dn}
+                </option>
+              );
+            })}
+          </select>
+
+          <button onClick={onSave} style={styles.primaryBtn}>
+            Speichern
+          </button>
+        </div>
+
+        <div style={{ padding: "0 12px 12px", fontSize: 12, color: stylesTokens.textDim, opacity: 0.9 }}>
+          Nur der Host (Spiel-Ersteller) kann den Sieger setzen.
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/WinnerCelebration.jsx

@@ -0,0 +1,182 @@
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
+import confetti from "canvas-confetti";
+import { stylesTokens } from "../styles/theme";
+
+export default function WinnerCelebration({ open, winnerName, onClose }) {
+  useEffect(() => {
+    if (!open) return;
+
+    // Scroll lock
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    const reduceMotion =
+      window.matchMedia &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    if (!reduceMotion) {
+      const end = Date.now() + 4500;
+
+      // WICHTIG: über dem Overlay rendern
+      const TOP_Z = 2147483647;
+
+      // hellere Farben damit’s auch auf dark overlay knallt
+      const bright = ["#ffffff", "#ffd166", "#06d6a0", "#4cc9f0", "#f72585"];
+
+      // 2 große Bursts
+      confetti({
+        particleCount: 170,
+        spread: 95,
+        startVelocity: 42,
+        origin: { x: 0.12, y: 0.62 },
+        zIndex: TOP_Z,
+        colors: bright,
+      });
+      confetti({
+        particleCount: 170,
+        spread: 95,
+        startVelocity: 42,
+        origin: { x: 0.88, y: 0.62 },
+        zIndex: TOP_Z,
+        colors: bright,
+      });
+
+      // “Rain” über die Zeit
+      (function frame() {
+        confetti({
+          particleCount: 8,
+          spread: 75,
+          startVelocity: 34,
+          origin: { x: Math.random(), y: Math.random() * 0.18 },
+          scalar: 1.05,
+          zIndex: TOP_Z,
+          colors: bright,
+        });
+        if (Date.now() < end) requestAnimationFrame(frame);
+      })();
+    }
+
+    const t = setTimeout(() => onClose?.(), 5500);
+
+    return () => {
+      clearTimeout(t);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && onClose?.();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const node = (
+    <div
+      role="dialog"
+      aria-modal="true"
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 2147483646,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        // weniger dunkel -> Confetti wirkt heller
+        background: "rgba(0,0,0,0.42)",
+        backdropFilter: "blur(10px)",
+        WebkitBackdropFilter: "blur(10px)",
+        padding: 14,
+      }}
+      onMouseDown={onClose}
+    >
+      <div
+        onMouseDown={(e) => e.stopPropagation()}
+        style={{
+          // kleiner + mobile friendly
+          width: "min(420px, 90vw)",
+          borderRadius: 18,
+          padding: "14px 14px",
+          border: `1px solid ${stylesTokens.panelBorder}`,
+          background: stylesTokens.panelBg,
+          boxShadow: "0 18px 70px rgba(0,0,0,0.55)",
+          backdropFilter: "blur(10px)",
+          WebkitBackdropFilter: "blur(10px)",
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {/* dezente “Gold Line” */}
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            background: `linear-gradient(90deg, transparent, ${stylesTokens.goldLine}, transparent)`,
+            opacity: 0.32,
+            pointerEvents: "none",
+          }}
+        />
+
+        {/* shine */}
+        <div
+          style={{
+            position: "absolute",
+            top: -70,
+            right: -120,
+            width: 240,
+            height: 200,
+            background: `radial-gradient(circle at 30% 30%, ${stylesTokens.goldLine}, transparent 60%)`,
+            opacity: 0.12,
+            transform: "rotate(12deg)",
+            pointerEvents: "none",
+          }}
+        />
+
+        <div style={{ position: "relative", display: "grid", gap: 8 }}>
+          <div style={{ fontSize: 30, lineHeight: 1 }}>🏆</div>
+
+          <div
+            style={{
+              fontSize: 16,
+              fontWeight: 900,
+              color: stylesTokens.textMain,
+              lineHeight: 1.25,
+            }}
+          >
+            Spieler{" "}
+            <span style={{ color: stylesTokens.textGold }}>
+              {winnerName || "Unbekannt"}
+            </span>{" "}
+            hat die richtige Lösung!
+          </div>
+
+          <div style={{ color: stylesTokens.textDim, opacity: 0.95, fontSize: 13 }}>
+            Fall gelöst. Respekt. ✨
+          </div>
+
+          <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 6 }}>
+            <button
+              onClick={onClose}
+              style={{
+                padding: "9px 11px",
+                borderRadius: 12,
+                border: `1px solid ${stylesTokens.panelBorder}`,
+                background: "rgba(255,255,255,0.06)",
+                color: stylesTokens.textMain,
+                fontWeight: 900,
+                cursor: "pointer",
+              }}
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(node, document.body);
+}

frontend/src/main.jsx

@@ -1,7 +1,51 @@
 import React from "react";
-import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
+import { applyTheme, DEFAULT_THEME_KEY } from "./styles/themes";
 import { registerSW } from "virtual:pwa-register";
 
-createRoot(document.getElementById("root")).render(<App />);
+async function bootstrap() {
-registerSW({ immediate: true });
+  // Theme sofort setzen
+  try {
+    const key = localStorage.getItem("hpTheme:guest") || DEFAULT_THEME_KEY;
+    applyTheme(key);
+  } catch {
+    applyTheme(DEFAULT_THEME_KEY);
+  }
+
+  // Fonts abwarten (verhindert Layout-Sprung)
+  try {
+    if (document.fonts?.ready) {
+      await document.fonts.ready;
+    }
+  } catch {}
+
+  // App rendern
+  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
+
+  // Splash mind. 3 Sekunden anzeigen (3000ms)
+  const MIN_SPLASH_MS = 3000;
+  const tStart = performance.now();
+
+  const hideSplash = () => {
+    const splash = document.getElementById("app-splash");
+    if (!splash) return;
+    splash.classList.add("hide");
+    setTimeout(() => splash.remove(), 320);
+  };
+
+  const elapsed = performance.now() - tStart;
+  const remaining = Math.max(0, MIN_SPLASH_MS - elapsed);
+  setTimeout(hideSplash, remaining);
+
+  // Service Worker ohne Auto-Reload-Flash
+  registerSW({
+    immediate: true,
+    onNeedRefresh() {
+      console.info("Neue Version verfügbar");
+      // optional: später Toast "Update verfügbar"
+    },
+  });
+}
+
+bootstrap();

frontend/src/styles/hooks/useHpGlobalStyles.js

@@ -1,5 +1,8 @@
 import { useEffect } from "react";
 import { stylesTokens } from "../theme";
+import { applyTheme } from "../themes";
+
+
 
 export function useHpGlobalStyles() {
   // Google Fonts
@@ -81,4 +84,9 @@ export function useHpGlobalStyles() {
     `;
     document.head.appendChild(style);
   }, []);
+
+  // Ensure a theme is applied once (fallback)
+  useEffect(() => {
+    applyTheme("default");
+  }, []);
 }

frontend/src/styles/styles.js

@@ -16,6 +16,8 @@ export const styles = {
   },
 
   topBar: {
+    position: "relative",
+    zIndex: 50,
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
@@ -49,8 +51,11 @@ export const styles = {
     fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
     letterSpacing: 1.0,
     color: stylesTokens.textGold,
-    background: "linear-gradient(180deg, rgba(32,32,36,0.92), rgba(14,14,16,0.92))",
+
-    borderBottom: `1px solid ${stylesTokens.goldLine}`,
+    // WICHTIG: Header-Farben aus Theme-Tokens, nicht hart codiert
+    background: `linear-gradient(180deg, ${stylesTokens.headerBgTop}, ${stylesTokens.headerBgBottom})`,
+    borderBottom: `1px solid ${stylesTokens.headerBorder}`,
+
     textTransform: "uppercase",
     textShadow: "0 1px 0 rgba(0,0,0,0.6)",
   },
@@ -117,13 +122,13 @@ export const styles = {
 
   input: {
     width: "100%",
-    padding: 10,
+    padding: "10px 12px",
-    borderRadius: 12,
+    borderRadius: 14,
     border: `1px solid rgba(233,216,166,0.18)`,
     background: "rgba(10,10,12,0.55)",
     color: stylesTokens.textMain,
     outline: "none",
-    fontSize: 16,
+    fontSize: 15,
   },
 
   primaryBtn: {
@@ -150,6 +155,8 @@ export const styles = {
 
   // Admin
   adminWrap: {
+    position: "relative",
+    zIndex: 1,
     marginTop: 14,
     padding: 12,
     borderRadius: 16,
@@ -181,26 +188,28 @@ export const styles = {
   // Modal
   modalOverlay: {
     position: "fixed",
-    inset: 0,
+    inset: 0,                  // statt top/left/right/bottom
-    background: "rgba(0,0,0,0.65)",
+    width: "100%",             // ✅ NICHT 100vw
+    height: "100%",            // ✅ NICHT 100vh
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    padding: 16,
+    padding: "calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))",
-    zIndex: 9999,
+    boxSizing: "border-box",   // wichtig bei padding
-    animation: "fadeIn 160ms ease-out",
+    zIndex: 2147483647,
+    background: "rgba(0,0,0,0.72)",
+    overflowY: "auto",
   },
+
   modalCard: {
-    width: "100%",
+    width: "min(560px, 100%)",
-    maxWidth: 560,
     borderRadius: 18,
     border: `1px solid rgba(233,216,166,0.18)`,
-    background: "linear-gradient(180deg, rgba(20,20,24,0.92), rgba(12,12,14,0.86))",
+    background: "rgba(12,12,14,0.96)",
     boxShadow: "0 18px 55px rgba(0,0,0,0.70)",
     padding: 14,
-    backdropFilter: "blur(6px)",
+    maxHeight: "calc(100vh - 32px)",
-    animation: "popIn 160ms ease-out",
+    overflow: "auto",
-    color: stylesTokens.textMain,
   },
   modalHeader: {
     display: "flex",
@@ -418,7 +427,7 @@ export const styles = {
   bgMap: {
     position: "absolute",
     inset: 0,
-    backgroundImage: 'url("/bg/marauders-map-blur.jpg")',
+    backgroundImage: stylesTokens.bgImage,
     backgroundSize: "cover",
     backgroundPosition: "center",
     backgroundRepeat: "no-repeat",
@@ -468,7 +477,7 @@ export const styles = {
     background: "linear-gradient(180deg, rgba(20,20,24,0.96), rgba(12,12,14,0.92))",
     boxShadow: "0 18px 55px rgba(0,0,0,0.70)",
     overflow: "hidden",
-    zIndex: 10000,
+    zIndex: 99999,
     backdropFilter: "blur(8px)",
   },
 

frontend/src/styles/theme.js

@@ -1,11 +1,36 @@
 export const stylesTokens = {
-    pageBg: "#0b0b0c",
+  pageBg: "var(--hp-pageBg)",
-    panelBg: "rgba(20, 20, 22, 0.55)",
+  panelBg: "var(--hp-panelBg)",
-    panelBorder: "rgba(233, 216, 166, 0.14)",
+  panelBorder: "var(--hp-panelBorder)",
 
-    textMain: "rgba(245, 239, 220, 0.92)",
+  textMain: "var(--hp-textMain)",
-    textDim: "rgba(233, 216, 166, 0.70)",
+  textDim: "var(--hp-textDim)",
-    textGold: "#e9d8a6",
+  textGold: "var(--hp-textGold)",
 
-    goldLine: "rgba(233, 216, 166, 0.18)",
+  goldLine: "var(--hp-goldLine)",
-  };  
+
+  // Header
+  headerBgTop: "var(--hp-headerBgTop)",
+  headerBgBottom: "var(--hp-headerBgBottom)",
+  headerBorder: "var(--hp-headerBorder)",
+
+  // Rows
+  rowNoBg: "var(--hp-rowNoBg)",
+  rowNoText: "var(--hp-rowNoText)",
+  rowNoBorder: "var(--hp-rowNoBorder)",
+
+  rowOkBg: "var(--hp-rowOkBg)",
+  rowOkText: "var(--hp-rowOkText)",
+  rowOkBorder: "var(--hp-rowOkBorder)",
+
+  rowMaybeBg: "var(--hp-rowMaybeBg)",
+  rowMaybeText: "var(--hp-rowMaybeText)",
+  rowMaybeBorder: "var(--hp-rowMaybeBorder)",
+
+  rowEmptyBg: "var(--hp-rowEmptyBg)",
+  rowEmptyText: "var(--hp-rowEmptyText)",
+  rowEmptyBorder: "var(--hp-rowEmptyBorder)",
+
+  // Background
+  bgImage: "var(--hp-bgImage)",
+};

frontend/src/styles/themes.js

@@ -0,0 +1,253 @@
+// frontend/src/styles/themes.js
+export const THEMES = {
+  default: {
+    label: "Standard",
+    tokens: {
+      pageBg: "#0b0b0c",
+      panelBg: "rgba(20, 20, 22, 0.55)",
+      panelBorder: "rgba(233, 216, 166, 0.14)",
+
+      textMain: "rgba(245, 239, 220, 0.92)",
+      textDim: "rgba(233, 216, 166, 0.70)",
+      textGold: "#e9d8a6",
+
+      goldLine: "rgba(233, 216, 166, 0.18)",
+
+      // Section header (wie TopBar, aber leicht “tiefer”)
+      headerBgTop: "rgba(32,32,36,0.92)",
+      headerBgBottom: "rgba(14,14,16,0.92)",
+      headerBorder: "rgba(233, 216, 166, 0.18)",
+
+      // Row colors (fix falsch bleibt rot in ALLEN themes)
+      rowNoBg: "rgba(255, 35, 35, 0.16)",
+      rowNoText: "#ffb3b3",
+      rowNoBorder: "rgba(255,35,35,0.55)",
+
+      rowOkBg: "rgba(0, 190, 80, 0.16)",
+      rowOkText: "#baf3c9",
+      rowOkBorder: "rgba(0,190,80,0.55)",
+
+      rowMaybeBg: "rgba(140, 140, 140, 0.12)",
+      rowMaybeText: "rgba(233,216,166,0.85)",
+      rowMaybeBorder: "rgba(233,216,166,0.22)",
+
+      rowEmptyBg: "rgba(255,255,255,0.06)",
+      rowEmptyText: "rgba(233,216,166,0.75)",
+      rowEmptyBorder: "rgba(0,0,0,0)",
+
+      // Background
+      bgImage: "url('/bg/marauders-map-blur.jpg')",
+    },
+  },
+
+  gryffindor: {
+    label: "Gryffindor",
+    tokens: {
+      pageBg: "#0b0b0c",
+      panelBg: "rgba(20, 14, 14, 0.58)",
+      panelBorder: "rgba(255, 190, 120, 0.16)",
+
+      textMain: "rgba(245, 239, 220, 0.92)",
+      textDim: "rgba(255, 210, 170, 0.70)",
+      textGold: "#ffb86b",
+
+      goldLine: "rgba(255, 184, 107, 0.18)",
+
+      headerBgTop: "rgba(42,18,18,0.92)",
+      headerBgBottom: "rgba(18,10,10,0.92)",
+      headerBorder: "rgba(255, 184, 107, 0.22)",
+
+      rowNoBg: "rgba(255, 35, 35, 0.16)",
+      rowNoText: "#ffb3b3",
+      rowNoBorder: "rgba(255,35,35,0.55)",
+
+      rowOkBg: "rgba(255, 184, 107, 0.16)",
+      rowOkText: "#ffd2a8",
+      rowOkBorder: "rgba(255,184,107,0.55)",
+
+      rowMaybeBg: "rgba(140, 140, 140, 0.04)",
+      rowMaybeText: "rgba(255,210,170,0.85)",
+      rowMaybeBorder: "rgba(255,184,107,0.22)",
+
+      rowEmptyBg: "rgba(255,255,255,0.06)",
+      rowEmptyText: "rgba(255,210,170,0.75)",
+      rowEmptyBorder: "rgba(0,0,0,0)",
+
+      // Background
+      bgImage: "url('/bg/gryffindor.png')",
+    },
+  },
+
+  slytherin: {
+    label: "Slytherin",
+    tokens: {
+      pageBg: "#070a09",
+      panelBg: "rgba(12, 20, 16, 0.58)",
+      panelBorder: "rgba(120, 255, 190, 0.12)",
+
+      textMain: "rgba(235, 245, 240, 0.92)",
+      textDim: "rgba(175, 240, 210, 0.70)",
+      textGold: "#7CFFB6",
+
+      goldLine: "rgba(124, 255, 182, 0.18)",
+
+      headerBgTop: "rgba(14,28,22,0.92)",
+      headerBgBottom: "rgba(10,14,12,0.92)",
+      headerBorder: "rgba(124, 255, 182, 0.22)",
+
+      rowNoBg: "rgba(255, 35, 35, 0.16)",
+      rowNoText: "#ffb3b3",
+      rowNoBorder: "rgba(255,35,35,0.55)",
+
+      rowOkBg: "rgba(124, 255, 182, 0.16)",
+      rowOkText: "rgba(190,255,220,0.92)",
+      rowOkBorder: "rgba(124,255,182,0.55)",
+
+      rowMaybeBg: "rgba(120, 255, 190, 0.02)",
+      rowMaybeText: "rgba(175,240,210,0.85)",
+      rowMaybeBorder: "rgba(120,255,190,0.22)",
+
+      rowEmptyBg: "rgba(255,255,255,0.04)",
+      rowEmptyText: "rgba(175,240,210,0.75)",
+      rowEmptyBorder: "rgba(0,0,0,0)",
+
+      // Background
+      bgImage: "url('/bg/slytherin.png')",
+    },
+  },
+
+  ravenclaw: {
+    label: "Ravenclaw",
+    tokens: {
+      pageBg: "#07080c",
+      panelBg: "rgba(14, 16, 24, 0.60)",
+      panelBorder: "rgba(140, 180, 255, 0.14)",
+
+      textMain: "rgba(235, 240, 250, 0.92)",
+      textDim: "rgba(180, 205, 255, 0.72)",
+      textGold: "#8FB6FF",
+
+      goldLine: "rgba(143, 182, 255, 0.18)",
+
+      headerBgTop: "rgba(18,22,40,0.92)",
+      headerBgBottom: "rgba(10,12,20,0.92)",
+      headerBorder: "rgba(143, 182, 255, 0.22)",
+
+      rowNoBg: "rgba(255, 35, 35, 0.16)",
+      rowNoText: "#ffb3b3",
+      rowNoBorder: "rgba(255,35,35,0.55)",
+
+      rowOkBg: "rgba(143, 182, 255, 0.16)",
+      rowOkText: "rgba(210,230,255,0.92)",
+      rowOkBorder: "rgba(143,182,255,0.55)",
+
+      rowMaybeBg: "rgba(140, 180, 255, 0.04)",
+      rowMaybeText: "rgba(180,205,255,0.85)",
+      rowMaybeBorder: "rgba(143,182,255,0.22)",
+
+      rowEmptyBg: "rgba(255,255,255,0.06)",
+      rowEmptyText: "rgba(180,205,255,0.78)",
+      rowEmptyBorder: "rgba(0,0,0,0)",
+
+      // Background
+      bgImage: "url('/bg/ravenclaw.png')",
+    },
+  },
+
+  hufflepuff: {
+    label: "Hufflepuff",
+    tokens: {
+      pageBg: "#0b0b0c",
+      panelBg: "rgba(18, 18, 14, 0.60)",
+      panelBorder: "rgba(255, 230, 120, 0.16)",
+
+      textMain: "rgba(245, 239, 220, 0.92)",
+      textDim: "rgba(255, 240, 180, 0.70)",
+      textGold: "#FFE27A",
+
+      goldLine: "rgba(255, 226, 122, 0.18)",
+
+      headerBgTop: "rgba(34,30,14,0.92)",
+      headerBgBottom: "rgba(16,14,8,0.92)",
+      headerBorder: "rgba(255, 226, 122, 0.22)",
+
+      rowNoBg: "rgba(255, 35, 35, 0.16)",
+      rowNoText: "#ffb3b3",
+      rowNoBorder: "rgba(255,35,35,0.55)",
+
+      rowOkBg: "rgba(255, 226, 122, 0.16)",
+      rowOkText: "rgba(255,240,190,0.92)",
+      rowOkBorder: "rgba(255,226,122,0.55)",
+
+      rowMaybeBg: "rgba(255, 226, 122, 0.04)",
+      rowMaybeText: "rgba(255,240,180,0.85)",
+      rowMaybeBorder: "rgba(255,226,122,0.22)",
+
+      rowEmptyBg: "rgba(255,255,255,0.06)",
+      rowEmptyText: "rgba(255,240,180,0.78)",
+      rowEmptyBorder: "rgba(0,0,0,0)",
+
+      // Background
+      bgImage: "url('/bg/hufflepuff.png')",
+    },
+  },
+};
+
+export const DEFAULT_THEME_KEY = "default";
+
+export function setThemeColorMeta(color) {
+  try {
+    const safe = typeof color === "string" ? color.trim() : "";
+    if (!safe) return;
+
+    // only allow solid colors (hex, rgb, hsl); ignore urls/gradients/rgba overlays
+    const looksSolid =
+      safe.startsWith("#") ||
+      safe.startsWith("rgb(") ||
+      safe.startsWith("hsl(") ||
+      safe.startsWith("oklch(");
+
+    if (!looksSolid) return;
+
+    let meta = document.querySelector('meta[name="theme-color"]');
+    if (!meta) {
+      meta = document.createElement("meta");
+      meta.setAttribute("name", "theme-color");
+      document.head.appendChild(meta);
+    }
+    meta.setAttribute("content", safe);
+  } catch {
+    // ignore
+  }
+}
+
+export function applyTheme(themeKey) {
+  const t = THEMES[themeKey] || THEMES[DEFAULT_THEME_KEY];
+  const root = document.documentElement;
+
+  for (const [k, v] of Object.entries(t.tokens)) {
+    root.style.setProperty(`--hp-${k}`, v);
+  }
+
+  // ✅ PWA/Android Statusbar dynamisch an Theme anpassen
+  // Nimmt (falls vorhanden) statusBarColor, sonst pageBg
+  setThemeColorMeta(t.tokens.statusBarColor || t.tokens.pageBg || "#000000");
+}
+
+export function themeStorageKey(email) {
+  return `hpTheme:${(email || "guest").toLowerCase()}`;
+}
+
+export function loadThemeKey(email) {
+  try {
+    return localStorage.getItem(themeStorageKey(email)) || DEFAULT_THEME_KEY;
+  } catch {
+    return DEFAULT_THEME_KEY;
+  }
+}
+
+export function saveThemeKey(email, key) {
+  try {
+    localStorage.setItem(themeStorageKey(email), key);
+  } catch {}
+}

frontend/src/utils/winnerStorage.js

@@ -0,0 +1,28 @@
+// frontend/src/utils/winnerStorage.js
+
+function winnerKey(gameId) {
+  return `winner:${gameId}`;
+}
+
+export function getWinnerLS(gameId) {
+  if (!gameId) return "";
+  try {
+    return localStorage.getItem(winnerKey(gameId)) || "";
+  } catch {
+    return "";
+  }
+}
+
+export function setWinnerLS(gameId, name) {
+  if (!gameId) return;
+  try {
+    localStorage.setItem(winnerKey(gameId), (name || "").trim());
+  } catch {}
+}
+
+export function clearWinnerLS(gameId) {
+  if (!gameId) return;
+  try {
+    localStorage.removeItem(winnerKey(gameId));
+  } catch {}
+}

frontend/vite.config.js

@@ -20,7 +20,7 @@ export default defineConfig({
         scope: "/",
         display: "standalone",
         background_color: "#1c140d",
-        theme_color: "#caa45a",
+        theme_color: "#000000",
         icons: [
           { src: "/icons/icon-512.png", sizes: "512x512", type: "image/png" }
         ]
@@ -28,6 +28,9 @@ export default defineConfig({
       workbox: {
         // Caching-Default: die App-Shell wird offline verfügbar
         globPatterns: ["**/*.{js,css,html,ico,png,jpg,jpeg,svg,webp}"],
+        cleanupOutdatedCaches: true,
+        skipWaiting: true,
+        clientsClaim: true,
       }
     })
   ]