Refractor 3D Dice

Added functionality to save and load dice state (d1, d2, special) using localStorage for better user experience. Adjusted component styles to improve layering, ensure proper z-index for elements, and enhance 3D dice rendering.

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,8 +40,45 @@ 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)):
     uid = get_session_user_id(req)
@@ -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}
 
-    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:
-        SheetState.game_id == g.id,
+        chip = (chip or "").strip().upper()
-        SheetState.owner_user_id == uid,
+        if chip == "":
-        SheetState.entry_id == entry_id
+            chip = None
-    ).first()
+        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,
+        )
+        .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,28 +1,21 @@
-// src/App.jsx
+// frontend/src/App.jsx
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { api } from "./api/client";
 import { cycleTag } from "./utils/cycleTag";
 import { getChipLS, setChipLS, clearChipLS } from "./utils/chipStorage";
 
-import { getWinnerLS, setWinnerLS, clearWinnerLS } from "./utils/winnerStorage";
-
 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 { applyTheme, loadThemeKey, saveThemeKey, DEFAULT_THEME_KEY } from "./styles/themes";
-
-import AdminPanel from "./components/AdminPanel";
 import LoginPage from "./components/LoginPage";
-import TopBar from "./components/TopBar";
-import PasswordModal from "./components/PasswordModal";
-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 ChipModal from "./components/ChipModal";
-import WinnerCard from "./components/WinnerCard";
+import DicePanel from "./components/Dice/DicePanel";
-import WinnerBadge from "./components/WinnerBadge";
+
+import "./AppLayout.css";
 
 export default function App() {
   useHpGlobalStyles();
@@ -33,46 +26,29 @@ export default function App() {
   const [loginPassword, setLoginPassword] = useState("");
   const [showPw, setShowPw] = useState(false);
 
-  // Game/Sheet state
+  // Game/Sheet state (minimal)
   const [games, setGames] = useState([]);
   const [gameId, setGameId] = useState(null);
   const [sheet, setSheet] = useState(null);
   const [pulseId, setPulseId] = useState(null);
 
-  // Winner (per game)
+  // Chip modal
-  const [winnerName, setWinnerName] = useState("");
-
-  // Modals
-  const [helpOpen, setHelpOpen] = useState(false);
-
   const [chipOpen, setChipOpen] = useState(false);
   const [chipEntry, setChipEntry] = useState(null);
 
-  const [userMenuOpen, setUserMenuOpen] = useState(false);
+  const aliveRef = useRef(true);
 
-  const [pwOpen, setPwOpen] = useState(false);
-  const [pw1, setPw1] = useState("");
-  const [pw2, setPw2] = useState("");
-  const [pwMsg, setPwMsg] = useState("");
-  const [pwSaving, setPwSaving] = useState(false);
-
-  // Theme
-  const [designOpen, setDesignOpen] = useState(false);
-  const [themeKey, setThemeKey] = useState(DEFAULT_THEME_KEY);
-
-  // ===== Data loaders =====
   const load = async () => {
     const m = await api("/auth/me");
     setMe(m);
 
-    // Theme pro User laden & anwenden
+    const tk = m?.theme_key || DEFAULT_THEME_KEY;
-    const tk = loadThemeKey(m?.email);
-    setThemeKey(tk);
     applyTheme(tk);
 
     const gs = await api("/games");
     setGames(gs);
 
+    // Auto-pick first game (kein UI dafür)
     if (gs[0] && !gameId) setGameId(gs[0].id);
   };
 
@@ -82,47 +58,57 @@ export default function App() {
     setSheet(sh);
   };
 
-  // ===== Effects =====
+  // initial load
-
-  // Dropdown outside click
-  useEffect(() => {
-    const onDown = (e) => {
-      const root = e.target?.closest?.("[data-user-menu]");
-      if (!root) setUserMenuOpen(false);
-    };
-    if (userMenuOpen) document.addEventListener("mousedown", onDown);
-    return () => document.removeEventListener("mousedown", onDown);
-  }, [userMenuOpen]);
-
-  // initial load (try session)
   useEffect(() => {
+    aliveRef.current = true;
     (async () => {
       try {
         await load();
       } catch {
-        // not logged in
+        // ignore
       }
     })();
+    return () => {
+      aliveRef.current = false;
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // load sheet + winner when game changes
+  // on game change
   useEffect(() => {
     (async () => {
       if (!gameId) return;
-
       try {
         await reloadSheet();
       } catch {
         // ignore
       }
-
-      // Sieger pro Game aus localStorage laden
-      setWinnerName(getWinnerLS(gameId));
     })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [gameId]);
 
+  // Live refresh (nur Sheet)
+  useEffect(() => {
+    if (!me || !gameId) return;
+
+    let alive = true;
+    const tick = async () => {
+      try {
+        await reloadSheet();
+      } catch {}
+    };
+
+    tick();
+    const id = setInterval(() => {
+      if (!alive) return;
+      tick();
+    }, 2500);
+
+    return () => {
+      alive = false;
+      clearInterval(id);
+    };
+  }, [me?.id, gameId]);
+
   // ===== Auth actions =====
   const doLogin = async () => {
     await api("/auth/login", {
@@ -132,96 +118,7 @@ export default function App() {
     await load();
   };
 
-  const doLogout = async () => {
+  // ===== Sheet actions (wie bisher) =====
-    await api("/auth/logout", { method: "POST" });
-    setMe(null);
-    setGames([]);
-    setGameId(null);
-    setSheet(null);
-    setWinnerName("");
-  };
-
-  // ===== Password change =====
-  const openPwModal = () => {
-    setPwMsg("");
-    setPw1("");
-    setPw2("");
-    setPwOpen(true);
-    setUserMenuOpen(false);
-  };
-
-  const closePwModal = () => {
-    setPwOpen(false);
-    setPwMsg("");
-    setPw1("");
-    setPw2("");
-  };
-
-  const savePassword = async () => {
-    setPwMsg("");
-
-    if (!pw1 || pw1.length < 8) return setPwMsg("❌ Passwort muss mindestens 8 Zeichen haben.");
-    if (pw1 !== pw2) return setPwMsg("❌ Passwörter stimmen nicht überein.");
-
-    setPwSaving(true);
-    try {
-      await api("/auth/password", {
-        method: "PATCH",
-        body: JSON.stringify({ password: pw1 }),
-      });
-      setPwMsg("✅ Passwort gespeichert.");
-      setTimeout(() => closePwModal(), 650);
-    } catch (e) {
-      setPwMsg("❌ Fehler: " + (e?.message || "unknown"));
-    } finally {
-      setPwSaving(false);
-    }
-  };
-
-  // ===== Theme actions =====
-  const openDesignModal = () => {
-    setDesignOpen(true);
-    setUserMenuOpen(false);
-  };
-
-  const selectTheme = (key) => {
-    setThemeKey(key);
-    applyTheme(key);
-    saveThemeKey(me?.email, key);
-  };
-
-  // ===== Game actions =====
-  const newGame = async () => {
-    const g = await api("/games", {
-      method: "POST",
-      body: JSON.stringify({ name: "Spiel " + new Date().toLocaleString() }),
-    });
-
-    const gs = await api("/games");
-    setGames(gs);
-    setGameId(g.id);
-
-    // Neues Spiel -> Sieger leer
-    clearWinnerLS(g.id);
-    setWinnerName("");
-  };
-
-  // ===== Winner actions =====
-  const saveWinner = () => {
-    if (!gameId) return;
-    const v = (winnerName || "").trim();
-
-    if (!v) {
-      clearWinnerLS(gameId);
-      setWinnerName("");
-      return;
-    }
-
-    setWinnerLS(gameId, v);
-    setWinnerName(v);
-  };
-
-  // ===== Sheet actions =====
   const cycleStatus = async (entry) => {
     let next = 0;
     if (entry.status === 0) next = 2;
@@ -252,7 +149,7 @@ export default function App() {
 
     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();
@@ -270,7 +167,7 @@ export default function App() {
     try {
       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();
@@ -292,7 +189,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();
@@ -302,11 +199,12 @@ 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);
+      const chip = entry.chip || getChipLS(gameId, entry.entry_id);
       return chip ? `s.${chip}` : "s";
     }
-    return t;
+    return t; // i oder m
   };
 
   // ===== Login page =====
@@ -332,84 +230,619 @@ export default function App() {
       ]
     : [];
 
+  /**
+   * ✅ Unified Placeholder system
+   * Variants:
+   * - "compact": small top / dice (low height)
+   * - "tile": normal cards (HUD, decks, etc.)
+   * - "panel": large container (Board)
+   */
+  const PlaceholderCard = ({
+    title,
+    subtitle = "(placeholder)",
+    variant = "tile",
+    icon = null,
+    children = null,
+    overflow = "hidden", // ✅ FIX: allow some tiles to not clip neighbors
+  }) => {
+    const v = variant;
+
+    const pad = v === "compact" ? 10 : v === "panel" ? 14 : 12;
+    const titleSize = v === "compact" ? 12.5 : v === "panel" ? 14.5 : 13;
+    const subSize = v === "compact" ? 11.5 : 12;
+    const dashHeight = v === "compact" ? 46 : v === "panel" ? null : 64;
+
+    const base = {
+      borderRadius: 18,
+      border: `1px solid ${stylesTokens.panelBorder}`,
+      background: stylesTokens.panelBg,
+      boxShadow: v === "panel" ? "0 20px 70px rgba(0,0,0,0.45)" : "0 12px 30px rgba(0,0,0,0.35)",
+      backdropFilter: "blur(10px)",
+      padding: pad,
+      overflow, // ✅ FIX: default hidden, but can be visible where needed
+      minWidth: 0,
+      position: "relative",
+    };
+
+    const headerRow = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 10,
+    };
+
+    const titleStyle = {
+      fontWeight: 900,
+      color: stylesTokens.textMain,
+      fontSize: titleSize,
+      letterSpacing: 0.2,
+      lineHeight: 1.15,
+    };
+
+    const subStyle = {
+      marginTop: 6,
+      color: stylesTokens.textDim,
+      fontSize: subSize,
+      opacity: 0.95,
+      lineHeight: 1.25,
+    };
+
+    const dashStyle = {
+      marginTop: v === "compact" ? 8 : 10,
+      height: dashHeight,
+      borderRadius: 14,
+      border: `1px dashed ${stylesTokens.panelBorder}`,
+      opacity: 0.75,
+    };
+
+    const glowLine =
+      v === "panel"
+        ? {
+            content: '""',
+            position: "absolute",
+            inset: 0,
+            background: `linear-gradient(90deg, transparent, ${stylesTokens.goldLine}, transparent)`,
+            opacity: 0.18,
+            pointerEvents: "none",
+          }
+        : null;
+
+    return (
+      <div style={base}>
+        {v === "panel" ? <div style={glowLine} /> : null}
+
+        <div
+          style={{
+            position: "relative",
+            height: v === "panel" ? "100%" : "auto",
+            display: v === "panel" ? "flex" : "block",
+            flexDirection: "column",
+            minHeight: 0,
+          }}
+        >
+          <div style={headerRow}>
+            <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
+              {icon ? <div style={{ opacity: 0.95 }}>{icon}</div> : null}
+              <div style={{ ...titleStyle, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                {title}
+              </div>
+            </div>
+          </div>
+
+          {subtitle ? <div style={subStyle}>{subtitle}</div> : null}
+
+          {/* Content area */}
+          {children ? (
+            <div style={{ marginTop: v === "compact" ? 8 : 10, minHeight: 0 }}>{children}</div>
+          ) : v === "panel" ? null : (
+            <div style={dashStyle} />
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  // Player rail placeholder (rechts vom Board, vor Notizen)
+  const players = [
+    {
+      id: "harry",
+      name: "Harry Potter",
+      img: "/players/harry.jpg",
+      color: "#7c4dff", // Lila
+      active: true,
+    },
+    {
+      id: "ginny",
+      name: "Ginny Weasley",
+      img: "/players/ginny.jpg",
+      color: "#3b82f6", // Blau
+    },
+    {
+      id: "hermione",
+      name: "Hermine Granger",
+      img: "/players/hermione.jpg",
+      color: "#ef4444", // Rot
+    },
+    {
+      id: "luna",
+      name: "Luna Lovegood",
+      img: "/players/luna.jpg",
+      color: "#e5e7eb", // Weiß
+    },
+    {
+      id: "neville",
+      name: "Neville Longbottom",
+      img: "/players/neville.jpg",
+      color: "#22c55e", // Grün
+    },
+    {
+      id: "ron",
+      name: "Ron Weasley",
+      img: "/players/ron.jpg",
+      color: "#facc15", // Gelb
+    },
+  ];
+
+  const PlayerIcon = ({ player }) => {
+    const size = player.active ? 56 : 40;
+
+    return (
+      <div
+        title={player.name}
+        style={{
+          width: size,
+          height: size,
+          borderRadius: "50%",
+          padding: 3,
+          background: player.color,
+          boxShadow: player.active
+            ? `0 0 0 2px ${player.color}, 0 0 22px ${player.color}`
+            : `0 0 0 1px ${player.color}, 0 8px 20px rgba(0,0,0,.35)`,
+          transition: "all 160ms ease",
+          opacity: player.active ? 1 : 0.75,
+        }}
+      >
+        <div
+          style={{
+            width: "100%",
+            height: "100%",
+            borderRadius: "50%",
+            overflow: "hidden",
+            background: "#000",
+          }}
+        >
+          <img
+            src={player.img}
+            alt={player.name}
+            draggable={false}
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              filter: player.active ? "none" : "grayscale(40%)",
+            }}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  const HogwartsPointsCard = ({ value = 0 }) => {
+    const GOLD = "#f2d27a";
+
+    return (
+      <div
+        style={{
+          height: "100%",
+          minHeight: 0,
+          minWidth: 0,
+          background: "transparent",
+          border: "none",
+          boxShadow: "none",
+          display: "grid",
+          alignItems: "center",
+          justifyItems: "stretch",
+          padding: 0,
+        }}
+      >
+        <div
+          style={{
+            height: 96,
+            width: "90%",
+            borderRadius: 16,
+            background: `
+              radial-gradient(140% 160% at 15% 10%, rgba(235,215,175,0.88), rgba(215,185,135,0.82) 55%, rgba(165,125,75,0.75)),
+              radial-gradient(120% 120% at 85% 85%, rgba(255,255,255,0.10), transparent 60%),
+              linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.26))
+            `,
+            boxShadow:
+              "inset 0 0 0 1px rgba(0,0,0,0.20), inset 0 18px 40px rgba(0,0,0,0.18), 0 16px 40px rgba(0,0,0,0.40)",
+            position: "relative",
+            overflow: "hidden",
+            display: "grid",
+            placeItems: "center",
+            padding: "14px 16px",
+          }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              inset: 0,
+              background: `
+                radial-gradient(circle at 22% 36%, rgba(90,60,25,0.14), transparent 42%),
+                radial-gradient(circle at 70% 30%, rgba(90,60,25,0.10), transparent 38%),
+                radial-gradient(circle at 58% 76%, rgba(255,255,255,0.08), transparent 46%)
+              `,
+              opacity: 0.65,
+              pointerEvents: "none",
+            }}
+          />
+
+          <div
+            style={{
+              position: "absolute",
+              inset: 10,
+              borderRadius: 12,
+              border: "1px solid rgba(202,162,74,0.40)",
+              boxShadow: "inset 0 0 0 1px rgba(242,210,122,0.14)",
+              pointerEvents: "none",
+            }}
+          />
+
+          <div style={{ display: "flex", alignItems: "baseline", gap: 10, position: "relative" }}>
+            <div
+              style={{
+                color: GOLD,
+                fontWeight: 900,
+                fontSize: 44,
+                letterSpacing: 0.6,
+                lineHeight: 1,
+                textShadow: "0 1px 0 rgba(0,0,0,0.38), 0 0 20px rgba(242,210,122,0.28)",
+              }}
+            >
+              {value}
+            </div>
+
+            <div
+              style={{
+                color: GOLD,
+                fontWeight: 900,
+                fontSize: 18,
+                letterSpacing: 1.4,
+                transform: "translateY(-6px)",
+                textShadow: "0 1px 0 rgba(0,0,0,0.32), 0 0 14px rgba(242,210,122,0.22)",
+                opacity: 0.95,
+              }}
+            >
+              HP
+            </div>
+          </div>
+
+          <div
+            style={{
+              position: "absolute",
+              bottom: 10,
+              right: 12,
+              color: "rgba(60,40,18,0.55)",
+              fontSize: 11,
+              fontWeight: 900,
+              letterSpacing: 1.6,
+              textTransform: "uppercase",
+              transform: "rotate(-6deg)",
+              border: "1px solid rgba(60,40,18,0.25)",
+              borderRadius: 999,
+              padding: "3px 8px",
+              background: "rgba(255,255,255,0.10)",
+            }}
+          >
+            SCORE
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const PlayerIdentityCard = ({
+    name = "Harry Potter",
+    houseLabel = "Gryffindor",
+    borderColor = "#7c4dff",
+    img = "/player_cards/harry.png",
+  }) => {
+    return (
+      <div
+        style={{
+          height: "100%",
+          minHeight: 0,
+          minWidth: 0,
+          display: "grid",
+          alignItems: "center",
+          overflow: "visible",
+          position: "relative", // ✅ FIX: enable clean stacking context
+          zIndex: 5, // ✅ FIX: sit above neighbors
+        }}
+      >
+        <div
+          style={{
+            height: "100%",
+            minHeight: 0,
+            minWidth: 0,
+            borderRadius: 18,
+            border: "none",
+            background: "transparent",
+            backdropFilter: "none",
+            boxShadow: "none",
+            padding: 12,
+            overflow: "visible",
+            position: "relative",
+            zIndex: 5, // ✅ FIX
+            display: "grid",
+            alignItems: "center",
+            justifyItems: "start",
+          }}
+        >
+          <div
+            style={{
+              width: "48%",
+              maxWidth: 220,
+              aspectRatio: "63 / 88",
+              borderRadius: 16,
+              border: `2px solid ${borderColor}`,
+              boxShadow: `0 18px 55px rgba(0,0,0,0.55), 0 0 26px rgba(124,77,255,0.22)`,
+              overflow: "hidden", // ✅ important: crop image to rounded corners
+              position: "relative",
+              background: "rgba(0,0,0,0.15)",
+              transform: "translateY(-10px) rotate(-0.6deg)",
+              transformOrigin: "center bottom",
+              transition: "transform 180ms ease, box-shadow 180ms ease",
+              cursor: "pointer",
+              marginLeft: 20,
+              zIndex: 50, // ✅ keep above other tiles
+            }}
+            onMouseMove={(e) => {
+              const rect = e.currentTarget.getBoundingClientRect();
+              const x = (e.clientX - rect.left) / rect.width;
+              const y = (e.clientY - rect.top) / rect.height;
+              const rx = (0.5 - y) * 6;
+              const ry = (x - 0.5) * 8;
+
+              e.currentTarget.style.transform = `translateY(-16px) rotate(-0.6deg) perspective(700px) rotateX(${rx}deg) rotateY(${ry}deg)`;
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.transform = "translateY(-10px) rotate(-0.6deg)";
+              e.currentTarget.style.boxShadow = `0 18px 55px rgba(0,0,0,0.55), 0 0 26px rgba(124,77,255,0.22)`;
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.transform = "translateY(-18px) rotate(-0.6deg)";
+              e.currentTarget.style.boxShadow = `0 26px 70px rgba(0,0,0,0.62), 0 0 34px ${borderColor}`;
+            }}
+          >
+            <img
+              src={img}
+              alt={name}
+              draggable={false}
+              style={{
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+                transform: "scale(1.02)",
+                filter: "contrast(1.02) saturate(1.06)",
+                display: "block",
+              }}
+            />
+
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                background:
+                  "linear-gradient(120deg, rgba(255,255,255,0.10) 0%, transparent 35%, transparent 70%, rgba(255,255,255,0.06) 100%)",
+                pointerEvents: "none",
+                opacity: 0.7,
+              }}
+            />
+
+            <div
+              style={{
+                position: "absolute",
+                left: 10,
+                right: 10,
+                bottom: 10,
+                borderRadius: 12,
+                background: "rgba(0,0,0,0.45)",
+                border: "1px solid rgba(255,255,255,0.10)",
+                backdropFilter: "blur(6px)",
+                padding: "10px 12px",
+                display: "grid",
+                gap: 4,
+              }}
+            >
+              <div
+                style={{
+                  color: stylesTokens.textMain,
+                  fontWeight: 900,
+                  fontSize: 14,
+                  letterSpacing: 0.2,
+                  lineHeight: 1.1,
+                  textShadow: "0 10px 30px rgba(0,0,0,0.55)",
+                }}
+              >
+                {name}
+              </div>
+
+              <div
+                style={{
+                  color: stylesTokens.textDim,
+                  fontSize: 11.5,
+                  opacity: 0.92,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                }}
+              >
+                <span
+                  style={{
+                    width: 8,
+                    height: 8,
+                    borderRadius: 999,
+                    background: borderColor,
+                    boxShadow: `0 0 16px ${borderColor}`,
+                    opacity: 0.9,
+                  }}
+                />
+                {houseLabel}
+              </div>
+            </div>
+
+            <div
+              style={{
+                position: "absolute",
+                top: 10,
+                right: 10,
+                fontSize: 10.5,
+                fontWeight: 900,
+                letterSpacing: 1.2,
+                padding: "4px 8px",
+                borderRadius: 999,
+                color: "rgba(255,255,255,0.75)",
+                border: "1px solid rgba(255,255,255,0.14)",
+                background: "rgba(0,0,0,0.28)",
+                backdropFilter: "blur(6px)",
+                textTransform: "uppercase",
+              }}
+            >
+              Identity
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div style={styles.page}>
       <div style={styles.bgFixed} aria-hidden="true">
         <div style={styles.bgMap} />
       </div>
 
-      <div style={styles.shell}>
+      <div className="appRoot">
-        <TopBar
+        {/* LEFT: Game Area */}
-          me={me}
+        <section className="leftPane">
-          userMenuOpen={userMenuOpen}
+          {/* Top: User + Settings adjacent */}
-          setUserMenuOpen={setUserMenuOpen}
+          <div className="topBarRow">
-          openPwModal={openPwModal}
+            <PlaceholderCard title="User Dropdown" variant="compact" />
-          openDesignModal={openDesignModal}
+            <PlaceholderCard title="Einstellungen" variant="compact" />
-          doLogout={doLogout}
+          </div>
-          newGame={newGame}
-        />
 
-        {me.role === "admin" && <AdminPanel />}
+          {/* Main: Tools | Board | Player Rail */}
+          <div className="mainRow">
+            {/* Left of board: Board decks */}
+            <div className="leftTools">
+              <div className="leftToolsRow">
+                <PlaceholderCard title="Hilfskarten (Deck)" variant="tile" />
+                <PlaceholderCard title="Dunkles Deck" variant="tile" />
+              </div>
+            </div>
 
-        <GamePickerCard
+            {/* Board: big */}
-          games={games}
+            <div className="boardWrap">
-          gameId={gameId}
+              <PlaceholderCard
-          setGameId={setGameId}
+                title="3D Board / Game View"
-          onOpenHelp={() => setHelpOpen(true)}
+                subtitle="Platzhalter – hier kommt später das Board + Figuren rein."
-        />
+                variant="panel"
+              >
+                <div
+                  style={{
+                    flex: 1,
+                    minHeight: 0,
+                    borderRadius: 18,
+                    border: `1px dashed ${stylesTokens.panelBorder}`,
+                    opacity: 0.35,
+                  }}
+                />
+              </PlaceholderCard>
 
-        <HelpModal open={helpOpen} onClose={() => setHelpOpen(false)} />
+              <div className="diceOverlay">
+                <DicePanel
+                  onRoll={({ d1, d2, special }) => {
+                    console.log("Rolled:", { d1, d2, special });
+                    // später: API call / game action
+                    // api(`/games/${gameId}/roll`, { method:"POST", body: JSON.stringify({ d1,d2,special }) })
+                  }}
+                />
+              </div>
+            </div>
 
-        {/* Sieger Badge: nur wenn gesetzt */}
+            {/* Right of board: player rail */}
-        <WinnerBadge winner={(winnerName || "").trim()} />
+            <div className="playerRail">
+              <div className="playerRailTitle">Spieler</div>
 
-        <div style={{ marginTop: 14, display: "grid", gap: 14 }}>
+              <div className="playerRailInner">
-          {sections.map((sec) => (
+                <div className="playerRailList">
-            <SheetSection
+                  {players.map((p) => (
-              key={sec.key}
+                    <PlayerIcon key={p.id} player={p} />
-              title={sec.title}
+                  ))}
-              entries={sec.entries}
+                </div>
-              pulseId={pulseId}
+              </div>
-              onCycleStatus={cycleStatus}
+            </div>
-              onToggleTag={toggleTag}
+          </div>
-              displayTag={displayTag}
+
+          {/* Bottom: Player HUD */}
+          <div className="playerHud">
+            <PlayerIdentityCard
+              name="Harry Potter"
+              houseLabel="Signature of Holder"
+              borderColor="#7c4dff"
+              img="/player_cards/harry.png"
             />
-          ))}
-        </div>
 
-        {/* Sieger ganz unten */}
+            <div className="playerHudMiddle">
-        <WinnerCard value={winnerName} setValue={setWinnerName} onSave={saveWinner} />
+              {/* ✅ FIX: these were clipping your hovering/overlapping player card */}
+              <PlaceholderCard title="Meine Geheimkarten" variant="tile" overflow="visible" />
+              <PlaceholderCard title="Meine Hilfkarte(n)" variant="tile" overflow="visible" />
+            </div>
 
-        <div style={{ height: 24 }} />
+            <HogwartsPointsCard value={60} />
+          </div>
+        </section>
+
+        {/* RIGHT: Notes Panel */}
+        <aside
+          className="notesPane"
+          style={{
+            borderRadius: 22,
+            border: `1px solid ${stylesTokens.panelBorder}`,
+            background: stylesTokens.panelBg,
+            boxShadow: "0 22px 90px rgba(0,0,0,0.55)",
+            backdropFilter: "blur(10px)",
+            padding: 12,
+          }}
+        >
+          <div>
+            <div style={{ fontWeight: 900, color: stylesTokens.textMain, fontSize: 14 }}>Notizen</div>
+            <div style={{ marginTop: 6, color: stylesTokens.textDim, fontSize: 12 }}>
+              Nur die 3 Tabellen (Verdächtige / Gegenstände / Orte).
+            </div>
+          </div>
+
+          <div className="notesScroll">
+            <div style={{ marginTop: 12, display: "grid", gap: 14 }}>
+              {sections.map((sec) => (
+                <SheetSection
+                  key={sec.key}
+                  title={sec.title}
+                  entries={sec.entries}
+                  pulseId={pulseId}
+                  onCycleStatus={cycleStatus}
+                  onToggleTag={toggleTag}
+                  displayTag={displayTag}
+                />
+              ))}
+            </div>
+          </div>
+        </aside>
       </div>
 
-      <PasswordModal
+      <ChipModal chipOpen={chipOpen} closeChipModalToDash={closeChipModalToDash} chooseChip={chooseChip} />
-        pwOpen={pwOpen}
-        closePwModal={closePwModal}
-        pw1={pw1}
-        setPw1={setPw1}
-        pw2={pw2}
-        setPw2={setPw2}
-        pwMsg={pwMsg}
-        pwSaving={pwSaving}
-        savePassword={savePassword}
-      />
-
-      <DesignModal
-        open={designOpen}
-        onClose={() => setDesignOpen(false)}
-        themeKey={themeKey}
-        onSelect={(k) => {
-          selectTheme(k);
-          setDesignOpen(false);
-        }}
-      />
-
-      <ChipModal
-        chipOpen={chipOpen}
-        closeChipModalToDash={closeChipModalToDash}
-        chooseChip={chooseChip}
-      />
     </div>
   );
 }

frontend/src/AppLayout.css

@@ -0,0 +1,379 @@
+/* frontend/src/AppLayout.css */
+html, body, #root {
+  height: 100%;
+}
+
+body {
+  overflow: hidden;
+}
+
+.appRoot {
+  height: 100vh;
+  display: grid;
+
+  /* Links: flexibel | Rechts: Notes clamp */
+  grid-template-columns: minmax(900px, 1fr) clamp(380px, 32vw, 520px);
+
+  gap: 14px;
+  padding: 14px;
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+/* LEFT COLUMN */
+.leftPane {
+  overflow: visible;
+  min-width: 0;
+  display: grid;
+
+  /* Top | Main | HUD */
+  grid-template-rows: 68px minmax(360px, 1fr) minmax(160px, 190px);
+
+  gap: 14px;
+}
+
+.topBarRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  min-width: 0;
+}
+
+/* MAIN: Tools | Board | PlayerRail */
+.mainRow {
+  min-height: 0;
+  overflow: visible;
+  display: grid;
+
+  /* Tools bewusst schmaler, Board bekommt Bühne */
+  grid-template-columns: 260px minmax(560px, 1fr) 92px;
+
+  gap: 14px;
+  min-width: 0;
+}
+
+/* Tools left of board */
+.leftTools {
+  min-width: 0;
+  overflow: hidden;
+  display: grid;
+  align-content: start;
+}
+
+.leftToolsRow {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 14px;
+  min-width: 0;
+}
+
+/* Board */
+.boardWrap {
+  min-height: 0;
+  overflow: hidden;
+  border-radius: 22px;
+  min-width: 0;
+  position: relative;
+}
+
+/* Dice overlay: under board slightly right */
+.diceOverlay {
+  position: absolute;
+  overflow: visible;
+  bottom: 14px;
+  right: 18px;
+  width: 220px;
+  pointer-events: auto;
+  opacity: 0.98;
+}
+
+/* Player rail: right of board, before notes (tight) */
+.playerRail {
+  min-height: 0;
+  border-radius: 22px;
+  border: 1px solid rgba(255,255,255,0.08);
+  background: rgba(0,0,0,0.18);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 16px 50px rgba(0,0,0,0.35);
+  padding: 10px 8px;
+
+  display: grid;
+  grid-template-rows: auto 1fr;
+  justify-items: center;
+  gap: 10px;
+
+  overflow: visible;
+}
+
+.playerRailInner {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  border-radius: 18px;
+  display: grid;
+  justify-items: center;
+}
+
+.playerRailTitle {
+  font-weight: 900;
+  font-size: 12px;
+  opacity: 0.9;
+}
+
+.playerRailList {
+  min-height: 0;
+  overflow: visible;
+  display: grid;
+  gap: 10px;
+  align-content: start;
+  justify-items: center;
+  padding-top: 4px;
+}
+
+/* HUD */
+.playerHud {
+  align-items: stretch;
+  overflow: visible;
+  display: grid;
+  grid-template-columns: 1.1fr 1.7fr 1.1fr;
+  gap: 14px;
+  min-width: 0;
+}
+
+.playerHudMiddle {
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: visible;
+  display: grid;
+
+  /* Geheimkarten groß, Hilfkarte etwas kleiner */
+  grid-template-columns: 1fr 0.78fr;
+
+  gap: 14px;
+}
+
+/* RIGHT COLUMN */
+.notesPane {
+  overflow: hidden;
+  min-width: 0;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.notesScroll {
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 4px;
+}
+
+.diceOverlay {
+  position: absolute;
+  bottom: 14px;
+  right: 18px;
+  width: 220px;
+  pointer-events: auto; /* ✅ damit Hover/Clicks für Würfel gehen */
+  opacity: 0.98;
+}
+
+/* ===== True 3D Cube Dice (transition-based roll) ===== */
+.die3d {
+  transform-style: preserve-3d;
+  will-change: transform;
+}
+
+.die3d:hover:not(:disabled) {
+  transform: translateY(-3px) rotateX(8deg) rotateY(-10deg);
+}
+
+.dieCubeWrap {
+  width: 44px;
+  height: 44px;
+  position: relative;
+  transform-style: preserve-3d;
+}
+
+.dieCube {
+  width: 44px;
+  height: 44px;
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+
+  /* absolute angles (numbers are set in JS) */
+  transform: rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));
+
+  /* default: snappy */
+  transition: transform 260ms cubic-bezier(0.22, 1.0, 0.25, 1);
+}
+
+.dieCube.rolling {
+  /* roll duration */
+  transition: transform 820ms cubic-bezier(0.18, 0.88, 0.22, 1);
+}
+
+/* Faces: remove hard borders / inner rings */
+.dieFace {
+  position: absolute;
+  inset: 0;
+  border-radius: 12px;
+  border: none; /* ✅ no face border */
+  background:
+    radial-gradient(120% 120% at 25% 18%, rgba(255,255,255,0.14), rgba(0,0,0,0.40) 60%, rgba(0,0,0,0.72));
+  box-shadow:
+    inset 0 0 0 1px rgba(255,255,255,0.05), /* very subtle */
+    inset 0 14px 24px rgba(255,255,255,0.04);
+  display: grid;
+  place-items: center;
+  backface-visibility: hidden;
+}
+
+/* face positions */
+.dieFace.front  { transform: rotateY(  0deg) translateZ(22px); }
+.dieFace.back   { transform: rotateY(180deg) translateZ(22px); }
+.dieFace.right  { transform: rotateY( 90deg) translateZ(22px); }
+.dieFace.left   { transform: rotateY(-90deg) translateZ(22px); }
+.dieFace.top    { transform: rotateX( 90deg) translateZ(22px); }
+.dieFace.bottom { transform: rotateX(-90deg) translateZ(22px); }
+
+/* pips */
+.pipGrid {
+  width: 70%;
+  height: 70%;
+  position: relative;
+}
+
+.pip {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: rgba(245,245,245,0.92);
+  box-shadow: 0 3px 10px rgba(0,0,0,0.35), inset 0 1px 2px rgba(0,0,0,0.20);
+}
+
+.specialIcon {
+  font-size: 20px;
+  line-height: 1;
+  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
+}
+
+/* Prevent clipping */
+.diceRow3d { overflow: visible; }
+
+.dieCube.snap {
+  transition: none !important;
+}
+
+/* one face */
+.dieFace {
+  position: absolute;
+  inset: 0;
+  border-radius: 12px;
+  border: 1px solid rgba(255,255,255,0.10);
+  background:
+    radial-gradient(120% 120% at 25% 18%, rgba(255,255,255,0.14), rgba(0,0,0,0.40) 60%, rgba(0,0,0,0.72));
+  box-shadow:
+    inset 0 0 0 1px rgba(255,255,255,0.06),
+    inset 0 12px 20px rgba(255,255,255,0.05);
+  display: grid;
+  place-items: center;
+  backface-visibility: hidden;
+}
+
+/* face positions */
+.dieFace.front  { transform: rotateY(  0deg) translateZ(22px); }
+.dieFace.back   { transform: rotateY(180deg) translateZ(22px); }
+.dieFace.right  { transform: rotateY( 90deg) translateZ(22px); }
+.dieFace.left   { transform: rotateY(-90deg) translateZ(22px); }
+.dieFace.top    { transform: rotateX( 90deg) translateZ(22px); }
+.dieFace.bottom { transform: rotateX(-90deg) translateZ(22px); }
+
+/* pips */
+.pipGrid {
+  width: 70%;
+  height: 70%;
+  position: relative;
+}
+
+.pip {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: rgba(245,245,245,0.92);
+  box-shadow: 0 3px 10px rgba(0,0,0,0.35), inset 0 1px 2px rgba(0,0,0,0.20);
+}
+
+/* special icon */
+.specialIcon {
+  font-size: 20px;
+  line-height: 1;
+  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
+}
+
+/* optional: subtle face ring tint via CSS var */
+.dieFace {
+  box-shadow:
+    inset 0 0 0 1px rgba(255,255,255,0.06),
+    inset 0 0 0 2px var(--ring, rgba(255,255,255,0.00)),
+    inset 0 12px 20px rgba(255,255,255,0.05);
+}
+
+/* Roll animation */
+@keyframes dieRoll {
+  0% {
+    transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+  }
+  25% {
+    transform: translateY(-6px) rotateX(220deg) rotateY(160deg) rotateZ(90deg);
+  }
+  55% {
+    transform: translateY(0px) rotateX(520deg) rotateY(460deg) rotateZ(240deg);
+  }
+  100% {
+    transform: translateY(-2px) rotateX(720deg) rotateY(720deg) rotateZ(360deg);
+  }
+}
+
+.die3dRolling {
+  animation: dieRoll 820ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
+}
+
+/* --- Responsive: shrink gracefully (no scroll outside notes) --- */
+@media (max-height: 860px) {
+  .leftPane {
+    grid-template-rows: 64px minmax(300px, 1fr) 150px;
+  }
+  .diceOverlay {
+    bottom: 10px;
+    right: 12px;
+    width: 200px;
+  }
+}
+
+@media (max-width: 1440px) {
+  .appRoot {
+    grid-template-columns: minmax(820px, 1fr) clamp(360px, 34vw, 480px);
+  }
+  .mainRow {
+    grid-template-columns: 240px minmax(520px, 1fr) 88px;
+  }
+}
+
+@media (max-width: 1280px) {
+  .appRoot {
+    grid-template-columns: 1fr clamp(340px, 36vw, 460px);
+  }
+  .mainRow {
+    grid-template-columns: 220px minmax(480px, 1fr) 84px;
+  }
+}
+
+@media (max-width: 1180px) {
+  /* ab hier wird’s eng: tools noch schmäler */
+  .mainRow {
+    grid-template-columns: 200px minmax(440px, 1fr) 82px;
+  }
+}

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,74 +87,118 @@ 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 &&
-        <div style={styles.modalOverlay} onMouseDown={closeModal}>
+        createPortal(
-          <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
+          <div style={styles.modalOverlay} onMouseDown={closeModal}>
-            <div style={styles.modalHeader}>
+            <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
-              <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>
+              <div style={styles.modalHeader}>
-                Neuen User anlegen
+                <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>
-              </div>
+                  Neuen User anlegen
-              <button onClick={closeModal} style={styles.modalCloseBtn} aria-label="Schließen">
+                </div>
-                ✕
+                <button onClick={closeModal} style={styles.modalCloseBtn} aria-label="Schließen">
-              </button>
+                  ✕
-            </div>
-
-            <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
-              <input
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                placeholder="Email"
-                style={styles.input}
-                autoFocus
-              />
-              <input
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="Initial Passwort"
-                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>
-              </select>
-
-              {msg && <div style={{ opacity: 0.9, color: stylesTokens.textMain }}>{msg}</div>}
-
-              <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 4 }}>
-                <button
-                  onClick={() => {
-                    resetForm();
-                    setMsg("");
-                  }}
-                  style={styles.secondaryBtn}
-                >
-                  Leeren
-                </button>
-                <button onClick={createUser} style={styles.primaryBtn}>
-                  User erstellen
                 </button>
               </div>
 
-              <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
+              <div
-                Tipp: Klick auf Item: Grün → Rot → Grau → Leer
+                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}
+                />
+
+                <input
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Initial Passwort"
+                  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>
+                </select>
+
+                {msg && <div style={{ opacity: 0.9, color: stylesTokens.textMain }}>{msg}</div>}
+
+                <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 4 }}>
+                  <button
+                    onClick={() => {
+                      resetForm();
+                      setMsg("");
+                    }}
+                    style={styles.secondaryBtn}
+                  >
+                    Leeren
+                  </button>
+                  <button onClick={createUser} style={styles.primaryBtn}>
+                    User erstellen
+                  </button>
+                </div>
+
+                <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
+                  Tipp: Name wird in TopBar & Siegeranzeige genutzt.
+                </div>
               </div>
             </div>
-          </div>
+          </div>,
-        </div>
+          document.body
-      )}
+        )
+      }
     </div>
   );
-}
+}

frontend/src/components/Dice/Dice3D.jsx

@@ -0,0 +1,147 @@
+// frontend/src/components/Dice/Dice3D.jsx
+import React from "react";
+
+export const cubeRotationForD6 = (value) => {
+  switch (value) {
+    case 1: return { rx: 0,   ry: 0 };
+    case 2: return { rx: -90, ry: 0 };
+    case 3: return { rx: 0,   ry: -90 };
+    case 4: return { rx: 0,   ry: 90 };
+    case 5: return { rx: 90,  ry: 0 };
+    case 6: return { rx: 0,   ry: 180 };
+    default: return { rx: 0,  ry: 0 };
+  }
+};
+
+export const PipFace = ({ value }) => {
+  const pos = (gx, gy) => ({ left: `${gx * 50}%`, top: `${gy * 50}%` });
+
+  const faces = {
+    1: [[1, 1]],
+    2: [[0, 0], [2, 2]],
+    3: [[0, 0], [1, 1], [2, 2]],
+    4: [[0, 0], [2, 0], [0, 2], [2, 2]],
+    5: [[0, 0], [2, 0], [1, 1], [0, 2], [2, 2]],
+    6: [[0, 0], [0, 1], [0, 2], [2, 0], [2, 1], [2, 2]],
+  };
+
+  const arr = faces[value] || faces[1];
+
+  return (
+    <div className="pipGrid">
+      {arr.map(([x, y], idx) => (
+        <div
+          key={idx}
+          className="pip"
+          style={{ ...pos(x, y), transform: "translate(-50%, -50%)" }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export const DieShell = ({ children, rolling = false, onClick }) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="die3d"
+      style={{
+        width: 64,
+        height: 64,
+        borderRadius: 18,
+        border: "none",
+        background: "transparent",
+        boxShadow: "none",
+        position: "relative",
+        overflow: "visible",
+        display: "grid",
+        placeItems: "center",
+        cursor: rolling ? "default" : "pointer",
+        transition: "transform 160ms ease",
+        padding: 0,
+        outline: "none",
+      }}
+      disabled={rolling}
+    >
+      <div style={{ position: "relative", zIndex: 2 }}>{children}</div>
+    </button>
+  );
+};
+
+export const DieD6 = ({ rolling, onClick, ax, ay, onDone, snap = false }) => {
+  return (
+    <DieShell rolling={rolling} onClick={onClick}>
+      <div className="dieCubeWrap">
+        <div
+          className={`dieCube ${rolling ? "rolling" : ""}`}
+          style={{ "--rx": ax, "--ry": ay }}
+          onTransitionEnd={(e) => {
+            if (e.propertyName !== "transform") return;
+            if (rolling) onDone?.();
+          }}
+        >
+          <div className="dieFace front"><PipFace value={1} /></div>
+          <div className="dieFace back"><PipFace value={6} /></div>
+          <div className="dieFace top"><PipFace value={2} /></div>
+          <div className="dieFace bottom"><PipFace value={5} /></div>
+          <div className="dieFace right"><PipFace value={3} /></div>
+          <div className="dieFace left"><PipFace value={4} /></div>
+        </div>
+      </div>
+    </DieShell>
+  );
+};
+
+export const HouseDie = ({ face, rolling, onClick, ax, ay, onDone, snap = false }) => {
+  const faces = {
+    gryffindor: { icon: "🦁", color: "#ef4444" },
+    slytherin: { icon: "🐍", color: "#22c55e" },
+    ravenclaw: { icon: "🦅", color: "#3b82f6" },
+    hufflepuff: { icon: "🦡", color: "#facc15" },
+    help: { icon: "🃏", color: "#f2d27a" },
+    dark: { icon: "🌙", color: "rgba(255,255,255,0.85)" },
+  };
+
+  const order = ["gryffindor", "slytherin", "ravenclaw", "hufflepuff", "help", "dark"];
+
+  return (
+    <DieShell rolling={rolling} onClick={onClick}>
+      <div className="dieCubeWrap">
+        <div
+          className={`dieCube ${rolling ? "rolling" : ""}`}
+          style={{ "--rx": ax, "--ry": ay }}
+          onTransitionEnd={(e) => {
+            if (e.propertyName !== "transform") return;
+            if (rolling) onDone?.();
+          }}
+        >
+          {order.map((key, i) => {
+            const item = faces[key];
+            const faceClass =
+              i === 0 ? "front" :
+              i === 1 ? "top" :
+              i === 2 ? "right" :
+              i === 3 ? "left" :
+              i === 4 ? "bottom" :
+              "back";
+
+            return (
+              <div key={key} className={`dieFace ${faceClass}`}>
+                <div
+                  className="specialIcon"
+                  style={{
+                    color: item.color,
+                    textShadow: `0 0 18px ${item.color}55, 0 10px 22px rgba(0,0,0,0.55)`,
+                  }}
+                >
+                  {item.icon}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </DieShell>
+  );
+};

frontend/src/components/Dice/DicePanel.jsx

@@ -0,0 +1,188 @@
+// frontend/src/components/Dice/DicePanel.jsx
+import React, { useEffect, useRef, useState } from "react";
+import { stylesTokens } from "../../styles/theme";
+import { cubeRotationForD6, DieD6, HouseDie } from "./Dice/Dice3D.jsx";
+
+export default function DicePanel({ onRoll }) {
+  const LS_KEY = "hp_cluedo_dice_v1";
+
+  const [d1, setD1] = useState(4);
+  const [d2, setD2] = useState(2);
+  const [special, setSpecial] = useState("gryffindor");
+
+  const [a1, setA1] = useState({ x: 0, y: 90 });
+  const [a2, setA2] = useState({ x: -90, y: 0 });
+  const [as, setAs] = useState({ x: 0, y: 0 });
+
+  const [rolling, setRolling] = useState(false);
+  const [snap, setSnap] = useState(false);
+
+  const specialFaces = ["gryffindor", "slytherin", "ravenclaw", "hufflepuff", "help", "dark"];
+  const order = ["gryffindor", "slytherin", "ravenclaw", "hufflepuff", "help", "dark"];
+  const randInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+  // roll bookkeeping
+  const pendingRef = useRef(null);
+  const rollIdRef = useRef(0);
+  const doneForRollRef = useRef({ d1: false, d2: false, s: false });
+
+  // restore last
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(LS_KEY);
+      if (!raw) return;
+      const parsed = JSON.parse(raw);
+
+      if (parsed?.d1) setD1(parsed.d1);
+      if (parsed?.d2) setD2(parsed.d2);
+      if (parsed?.special) setSpecial(parsed.special);
+
+      if (parsed?.d1) {
+        const r = cubeRotationForD6(parsed.d1);
+        setA1({ x: r.rx, y: r.ry });
+      }
+      if (parsed?.d2) {
+        const r = cubeRotationForD6(parsed.d2);
+        setA2({ x: r.rx, y: r.ry });
+      }
+      if (parsed?.special) {
+        const idx = Math.max(0, order.indexOf(parsed.special));
+        const r = cubeRotationForD6(idx + 1);
+        setAs({ x: r.rx, y: r.ry });
+      }
+    } catch {}
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(LS_KEY, JSON.stringify({ d1, d2, special }));
+    } catch {}
+  }, [d1, d2, special]);
+
+  const normalize360 = (n) => ((n % 360) + 360) % 360;
+
+  const rollTo = (currentAngles, targetBase) => {
+    const spinX = 720 + randInt(0, 2) * 360;
+    const spinY = 720 + randInt(0, 2) * 360;
+
+    const currX = normalize360(currentAngles.x);
+    const currY = normalize360(currentAngles.y);
+
+    const dx = targetBase.rx - currX;
+    const dy = targetBase.ry - currY;
+
+    return { x: currentAngles.x + spinX + dx, y: currentAngles.y + spinY + dy };
+  };
+
+  const rollAll = () => {
+    if (rolling) return;
+
+    const nd1 = randInt(1, 6);
+    const nd2 = randInt(1, 6);
+    const ns = specialFaces[randInt(0, specialFaces.length - 1)];
+
+    const r1 = cubeRotationForD6(nd1);
+    const r2 = cubeRotationForD6(nd2);
+    const rs = cubeRotationForD6(Math.max(0, order.indexOf(ns)) + 1);
+
+    pendingRef.current = { nd1, nd2, ns };
+
+    rollIdRef.current += 1;
+    doneForRollRef.current = { d1: false, d2: false, s: false };
+
+    setRolling(true);
+
+    setA1((cur) => rollTo(cur, r1));
+    setA2((cur) => rollTo(cur, r2));
+    setAs((cur) => rollTo(cur, rs));
+  };
+
+  const maybeCommit = () => {
+    const flags = doneForRollRef.current;
+    if (!flags.d1 || !flags.d2 || !flags.s) return;
+
+    const p = pendingRef.current;
+    if (!p) return;
+
+    // ✅ rolling beenden
+    setRolling(false);
+
+    // ✅ Ergebnis state setzen
+    setD1(p.nd1);
+    setD2(p.nd2);
+    setSpecial(p.ns);
+
+    // ✅ Winkel auf kleine Basis normalisieren (ohne Transition)
+    const r1 = cubeRotationForD6(p.nd1);
+    const r2 = cubeRotationForD6(p.nd2);
+    const rs = cubeRotationForD6(Math.max(0, order.indexOf(p.ns)) + 1);
+
+    setSnap(true);
+    setA1({ x: r1.rx, y: r1.ry });
+    setA2({ x: r2.rx, y: r2.ry });
+    setAs({ x: rs.rx, y: rs.ry });
+
+    // Snap nur 1 Frame aktiv lassen
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => setSnap(false));
+    });
+
+    pendingRef.current = null;
+
+    onRoll?.({ d1: p.nd1, d2: p.nd2, special: p.ns });
+  };
+  
+
+  const onDoneD1 = () => {
+    if (!rolling) return;
+    if (doneForRollRef.current.d1) return;
+    doneForRollRef.current.d1 = true;
+    maybeCommit();
+  };
+
+  const onDoneD2 = () => {
+    if (!rolling) return;
+    if (doneForRollRef.current.d2) return;
+    doneForRollRef.current.d2 = true;
+    maybeCommit();
+  };
+
+  const onDoneS = () => {
+    if (!rolling) return;
+    if (doneForRollRef.current.s) return;
+    doneForRollRef.current.s = true;
+    maybeCommit();
+  };
+
+  return (
+    <div style={{ pointerEvents: "auto" }}>
+      <div style={{ display: "grid", gap: 8 }}>
+        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
+          <div style={{ color: stylesTokens.textMain, fontWeight: 900, fontSize: 13 }}>Würfel</div>
+          <div style={{ color: stylesTokens.textDim, fontWeight: 900, fontSize: 11.5, letterSpacing: 0.7, opacity: 0.75 }}>
+            {rolling ? "ROLL…" : "READY"}
+          </div>
+        </div>
+
+        <div
+          className="diceRow3d"
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(3, 1fr)",
+            gap: 10,
+            alignItems: "center",
+            justifyItems: "center",
+            overflow: "visible",
+          }}
+        >
+          <DieD6 rolling={rolling} onClick={rollAll} ax={a1.x} ay={a1.y} onDone={onDoneD1} />
+          <DieD6 rolling={rolling} onClick={rollAll} ax={a2.x} ay={a2.y} onDone={onDoneD2} />
+          <HouseDie face={special} rolling={rolling} onClick={rollAll} ax={as.x} ay={as.y} onDone={onDoneS} />
+        </div>
+
+        <div style={{ color: stylesTokens.textDim, fontSize: 12, opacity: 0.95 }}>Klicken zum Rollen</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/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/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

@@ -8,19 +8,28 @@ export default function TopBar({
   setUserMenuOpen,
   openPwModal,
   openDesignModal,
+  openStatsModal,
   doLogout,
-  newGame,
+  onOpenNewGame,
 }) {
+  const displayName = me ? ((me.display_name || "").trim() || me.email) : "";
+
   return (
     <div style={styles.topBar}>
       <div>
         <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>Notizbogen</div>
-        <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>{me.email}</div>
+        <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
+          {displayName}
+        </div>
       </div>
 
       <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "nowrap" }} data-user-menu>
         <div style={{ position: "relative" }}>
-          <button onClick={() => setUserMenuOpen((v) => !v)} style={styles.userBtn} title="User Menü">
+          <button
+            onClick={() => setUserMenuOpen((v) => !v)}
+            style={styles.userBtn}
+            title="User Menü"
+          >
             <span style={{ fontSize: 16 }}>👤</span>
             <span>User</span>
             <span style={{ opacity: 0.7 }}>▾</span>
@@ -37,9 +46,21 @@ export default function TopBar({
                   borderBottom: "1px solid rgba(233,216,166,0.12)",
                 }}
               >
-                {me.email}
+                {me?.email || ""}
               </div>
 
+              <button
+                onClick={() => {
+                  setUserMenuOpen(false);
+                  openStatsModal?.();
+                }}
+                style={styles.userDropdownItem}
+              >
+                Statistik
+              </button>
+
+              <div style={styles.userDropdownDivider} />
+
               <button onClick={openPwModal} style={styles.userDropdownItem}>
                 Passwort setzen
               </button>
@@ -63,7 +84,7 @@ export default function TopBar({
           )}
         </div>
 
-        <button onClick={newGame} style={styles.primaryBtn}>
+        <button onClick={onOpenNewGame} style={styles.primaryBtn}>
           ✦ New Game
         </button>
       </div>

frontend/src/components/WinnerBadge.jsx

@@ -1,43 +1,47 @@
-// src/components/WinnerBadge.jsx
 import React from "react";
-import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
 
-export default function WinnerBadge({ winner }) {
+/**
-  const w = (winner || "").trim();
+ * Props:
-  if (!w) return null;
+ * - 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 }}>
+    <div
-      <div
+      style={{
-        style={{
+        marginTop: 14,
-          ...styles.card,
+        padding: "10px 12px",
-          padding: 12,
+        borderRadius: 16,
-          display: "flex",
+        border: `1px solid ${stylesTokens.panelBorder}`,
-          alignItems: "center",
+        background: stylesTokens.panelBg,
-          justifyContent: "space-between",
+        boxShadow: "0 12px 30px rgba(0,0,0,0.35)",
-          gap: 10,
+        backdropFilter: "blur(6px)",
-        }}
+        display: "flex",
-      >
+        alignItems: "center",
-        <div>
+        justifyContent: "space-between",
-          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>🏆 Sieger</div>
+        gap: 10,
-          <div style={{ marginTop: 2, color: stylesTokens.textMain, opacity: 0.95 }}>{w}</div>
+      }}
-        </div>
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+        <div style={{ fontSize: 18 }}>🏆</div>
 
-        <div
+        <div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>
-          style={{
+          Sieger:
-            padding: "8px 12px",
+          <span style={{ color: stylesTokens.textGold }}>{" "}{name}</span>
-            borderRadius: 999,
-            border: `1px solid ${stylesTokens.panelBorder}`,
-            background: stylesTokens.panelBg,
-            color: stylesTokens.textGold,
-            fontWeight: 1000,
-            whiteSpace: "nowrap",
-          }}
-        >
-          Gewonnen
         </div>
       </div>
+
+      <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
+        festgelegt
+      </div>
     </div>
   );
 }

frontend/src/components/WinnerCard.jsx

@@ -2,30 +2,44 @@ import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
 
-export default function WinnerCard({ value, setValue, onSave }) {
+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}>
-          <input
+          <select
-            value={value}
+            value={winnerUserId || ""}
-            onChange={(e) => setValue(e.target.value)}
+            onChange={(e) => setWinnerUserId(e.target.value || "")}
-            placeholder="Name des Siegers"
             style={{ ...styles.input, flex: 1 }}
-            onKeyDown={(e) => {
+          >
-              if (e.key === "Enter") onSave();
+            <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} title="Speichern">
+          <button onClick={onSave} style={styles.primaryBtn}>
             Speichern
           </button>
         </div>
 
-        <div style={{ padding: "0 12px 12px", fontSize: 12, color: stylesTokens.textDim }}>
+        <div style={{ padding: "0 12px 12px", fontSize: 12, color: stylesTokens.textDim, opacity: 0.9 }}>
-          Wird pro Spiel lokal gespeichert.
+          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

@@ -2,8 +2,6 @@ import { useEffect } from "react";
 import { stylesTokens } from "../theme";
 import { applyTheme } from "../themes";
 
-
-
 export function useHpGlobalStyles() {
   // Google Fonts
   useEffect(() => {
@@ -76,8 +74,7 @@ export function useHpGlobalStyles() {
         color: ${stylesTokens.textMain};
       }
       body {
-        overflow-x: hidden;
+        overflow: hidden;
-        -webkit-overflow-scrolling: touch;
       }
       #root { background: transparent; }
       * { -webkit-tap-highlight-color: transparent; }
@@ -89,4 +86,4 @@ export function useHpGlobalStyles() {
   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",
@@ -120,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: {
@@ -153,6 +155,8 @@ export const styles = {
 
   // Admin
   adminWrap: {
+    position: "relative",
+    zIndex: 1,
     marginTop: 14,
     padding: 12,
     borderRadius: 16,
@@ -184,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",
@@ -471,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/themes.js

@@ -65,7 +65,7 @@ export const THEMES = {
       rowOkText: "#ffd2a8",
       rowOkBorder: "rgba(255,184,107,0.55)",
 
-      rowMaybeBg: "rgba(140, 140, 140, 0.12)",
+      rowMaybeBg: "rgba(140, 140, 140, 0.04)",
       rowMaybeText: "rgba(255,210,170,0.85)",
       rowMaybeBorder: "rgba(255,184,107,0.22)",
 
@@ -103,11 +103,11 @@ export const THEMES = {
       rowOkText: "rgba(190,255,220,0.92)",
       rowOkBorder: "rgba(124,255,182,0.55)",
 
-      rowMaybeBg: "rgba(120, 255, 190, 0.10)",
+      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.06)",
+      rowEmptyBg: "rgba(255,255,255,0.04)",
       rowEmptyText: "rgba(175,240,210,0.75)",
       rowEmptyBorder: "rgba(0,0,0,0)",
 
@@ -141,7 +141,7 @@ export const THEMES = {
       rowOkText: "rgba(210,230,255,0.92)",
       rowOkBorder: "rgba(143,182,255,0.55)",
 
-      rowMaybeBg: "rgba(140, 180, 255, 0.10)",
+      rowMaybeBg: "rgba(140, 180, 255, 0.04)",
       rowMaybeText: "rgba(180,205,255,0.85)",
       rowMaybeBorder: "rgba(143,182,255,0.22)",
 
@@ -179,7 +179,7 @@ export const THEMES = {
       rowOkText: "rgba(255,240,190,0.92)",
       rowOkBorder: "rgba(255,226,122,0.55)",
 
-      rowMaybeBg: "rgba(255, 226, 122, 0.10)",
+      rowMaybeBg: "rgba(255, 226, 122, 0.04)",
       rowMaybeText: "rgba(255,240,180,0.85)",
       rowMaybeBorder: "rgba(255,226,122,0.22)",
 
@@ -195,6 +195,32 @@ export const THEMES = {
 
 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;
@@ -202,6 +228,10 @@ export function applyTheme(themeKey) {
   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) {

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,
       }
     })
   ]