Refractor 3D Dice

3d dice
Persist dice state with localStorage and improve rendering layering.
2026-02-08 11:47:32 +01:00 · 2026-02-08 11:39:25 +01:00 · 2026-02-08 11:11:50 +01:00 · 2026-02-08 11:02:43 +01:00 · 2026-02-07 19:01:37 +01:00 · 2026-02-07 18:56:20 +01:00
29 changed files with 2300 additions and 386 deletions
--- a/backend/app/routes/auth.py
+++ b/backend/app/routes/auth.py
@@ -40,9 +40,44 @@ def me(req: Request, db: Session = Depends(get_db)):
    user = db.query(User).filter(User.id == uid).first()
    if not user:
        raise HTTPException(status_code=401, detail="not logged in")
-    return {"id": user.id, "email": user.email, "role": user.role, "display_name": user.display_name}
+    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)):
--- a/backend/app/routes/games.py
+++ b/backend/app/routes/games.py
@@ -123,9 +123,13 @@ def get_game_meta(req: Request, game_id: str, db: Session = Depends(get_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()
-        winner_email = wu.email if wu else None
+        if wu:
+            winner_email = wu.email
+            winner_display_name = wu.display_name

    return {
        "id": g.id,
@@ -134,6 +138,7 @@ def get_game_meta(req: Request, game_id: str, db: Session = Depends(get_db)):
        "host_user_id": g.host_user_id,
        "winner_user_id": g.winner_user_id,
        "winner_email": winner_email,
+        "winner_display_name": winner_display_name,
    }


@@ -150,7 +155,7 @@ def list_members(req: Request, game_id: str, db: Session = Depends(get_db)):
        .order_by(User.email.asc())
        .all()
    )
-    return [{"id": u.id, "email": u.email} for u in members]
+    return [{"id": u.id, "email": u.email, "display_name": u.display_name} for u in members]


@router.patch("/{game_id}/winner")
--- a/frontend/index.html
+++ b/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>
-    <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet">    
+
+    <!-- Fonts -->
+    <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>
--- a/frontend/package.json
+++ b/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",
--- a/frontend/public/player_cards/harry.png
+++ b/frontend/public/player_cards/harry.png
--- a/frontend/public/players/ginny.jpg
+++ b/frontend/public/players/ginny.jpg
--- a/frontend/public/players/harry.jpg
+++ b/frontend/public/players/harry.jpg
--- a/frontend/public/players/hermione.jpg
+++ b/frontend/public/players/hermione.jpg
--- a/frontend/public/players/luna.jpg
+++ b/frontend/public/players/luna.jpg
--- a/frontend/public/players/neville.jpg
+++ b/frontend/public/players/neville.jpg
--- a/frontend/public/players/ron.jpg
+++ b/frontend/public/players/ron.jpg
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+// frontend/src/App.jsx
+import React, { useEffect, useRef, useState } from "react";

 import { api } from "./api/client";
 import { cycleTag } from "./utils/cycleTag";
@@ -7,19 +8,14 @@ import { getChipLS, setChipLS, clearChipLS } from "./utils/chipStorage";
 import { useHpGlobalStyles } from "./styles/hooks/useHpGlobalStyles";
 import { styles } from "./styles/styles";
 import { applyTheme, DEFAULT_THEME_KEY } from "./styles/themes";
+import { stylesTokens } from "./styles/theme";

-import AdminPanel from "./components/AdminPanel";
 import LoginPage from "./components/LoginPage";
-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 WinnerCard from "./components/WinnerCard";
-import WinnerBadge from "./components/WinnerBadge";
-import NewGameModal from "./components/NewGameModal";
+import ChipModal from "./components/ChipModal";
+import DicePanel from "./components/Dice/DicePanel";
+
+import "./AppLayout.css";

 export default function App() {
  useHpGlobalStyles();
@@ -30,49 +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);

-  // Game meta
-  const [gameMeta, setGameMeta] = useState(null); // {code, host_user_id, winner_email, winner_user_id}
-  const [members, setMembers] = useState([]);
-
-  // Winner selection (host only)
-  const [winnerUserId, setWinnerUserId] = useState("");
-
-  // Modals
-  const [helpOpen, setHelpOpen] = useState(false);
+  // Chip modal
  const [chipOpen, setChipOpen] = useState(false);
  const [chipEntry, setChipEntry] = useState(null);
-  const [userMenuOpen, setUserMenuOpen] = useState(false);

-  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);
-
-  // New Game Modal
-  const [newGameOpen, setNewGameOpen] = useState(false);
+  const aliveRef = useRef(true);

  const load = async () => {
    const m = await api("/auth/me");
    setMe(m);

    const tk = m?.theme_key || DEFAULT_THEME_KEY;
-    setThemeKey(tk);
    applyTheme(tk);

    const gs = await api("/games");
    setGames(gs);

+    // Auto-pick first game (kein UI dafür)
    if (gs[0] && !gameId) setGameId(gs[0].id);
  };

@@ -82,33 +58,19 @@ export default function App() {
    setSheet(sh);
  };

-  const loadGameMeta = async () => {
-    if (!gameId) return;
-    const meta = await api(`/games/${gameId}`);
-    setGameMeta(meta);
-    setWinnerUserId(meta?.winner_user_id || "");
-
-    const mem = await api(`/games/${gameId}/members`);
-    setMembers(mem);
-  };
-
-  // 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
  useEffect(() => {
+    aliveRef.current = true;
    (async () => {
      try {
        await load();
-      } catch {}
+      } catch {
+        // ignore
+      }
    })();
+    return () => {
+      aliveRef.current = false;
+    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

@@ -118,12 +80,35 @@ export default function App() {
      if (!gameId) return;
      try {
        await reloadSheet();
-        await loadGameMeta();
-      } catch {}
+      } catch {
+        // ignore
+      }
    })();
-    // 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", {
@@ -133,111 +118,7 @@ export default function App() {
    await load();
  };

-  const doLogout = async () => {
-    await api("/auth/logout", { method: "POST" });
-    setMe(null);
-    setGames([]);
-    setGameId(null);
-    setSheet(null);
-    setGameMeta(null);
-    setMembers([]);
-    setWinnerUserId("");
-  };
-
-  // ===== Password =====
-  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 =====
-  const openDesignModal = () => {
-    setDesignOpen(true);
-    setUserMenuOpen(false);
-  };
-
-  const selectTheme = async (key) => {
-    setThemeKey(key);
-    applyTheme(key);
-
-    try {
-      await api("/auth/theme", {
-        method: "PATCH",
-        body: JSON.stringify({ theme_key: key }),
-      });
-    } catch {
-      // theme locally already applied; ignore backend error
-    }
-  };
-
-  // ===== New game flow =====
-  const createGame = 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);
-
-    // meta/members will load via gameId effect
-    return g; // includes code
-  };
-
-  const joinGame = async (code) => {
-    const res = await api("/games/join", {
-      method: "POST",
-      body: JSON.stringify({ code }),
-    });
-
-    const gs = await api("/games");
-    setGames(gs);
-    setGameId(res.id);
-  };
-
-  // ===== Winner =====
-  const saveWinner = async () => {
-    if (!gameId) return;
-    await api(`/games/${gameId}/winner`, {
-      method: "PATCH",
-      body: JSON.stringify({ winner_user_id: winnerUserId || null }),
-    });
-    await loadGameMeta();
-  };
-
-  // ===== Sheet actions =====
+  // ===== Sheet actions (wie bisher) =====
  const cycleStatus = async (entry) => {
    let next = 0;
    if (entry.status === 0) next = 2;
@@ -320,11 +201,9 @@ export default function App() {
    if (!t) return "—";

    if (t === "s") {
-      // Prefer backend chip, fallback localStorage
      const chip = entry.chip || getChipLS(gameId, entry.entry_id);
      return chip ? `s.${chip}` : "s";
    }
-
    return t; // i oder m
  };

@@ -351,7 +230,493 @@ export default function App() {
      ]
    : [];

-  const isHost = !!(me?.id && gameMeta?.host_user_id && me.id === gameMeta.host_user_id);
+  /**
+   * ✅ 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}>
@@ -359,91 +724,125 @@ export default function App() {
        <div style={styles.bgMap} />
      </div>

-      <div style={styles.shell}>
-        <TopBar
-          me={me}
-          userMenuOpen={userMenuOpen}
-          setUserMenuOpen={setUserMenuOpen}
-          openPwModal={openPwModal}
-          openDesignModal={openDesignModal}
-          doLogout={doLogout}
-          onOpenNewGame={() => setNewGameOpen(true)}
-        />
+      <div className="appRoot">
+        {/* LEFT: Game Area */}
+        <section className="leftPane">
+          {/* Top: User + Settings adjacent */}
+          <div className="topBarRow">
+            <PlaceholderCard title="User Dropdown" variant="compact" />
+            <PlaceholderCard title="Einstellungen" variant="compact" />
+          </div>

-        {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
-          games={games}
-          gameId={gameId}
-          setGameId={setGameId}
-          onOpenHelp={() => setHelpOpen(true)}
-        />
+            {/* Board: big */}
+            <div className="boardWrap">
+              <PlaceholderCard
+                title="3D Board / Game View"
+                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>

-        {/* Sieger Badge: zwischen Spiel und Verdächtigte Person */}
-        <WinnerBadge winnerEmail={gameMeta?.winner_email || ""} />
+              <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>

-        <HelpModal open={helpOpen} onClose={() => setHelpOpen(false)} />
+            {/* Right of board: player rail */}
+            <div className="playerRail">
+              <div className="playerRailTitle">Spieler</div>

-        <div style={{ marginTop: 14, 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 className="playerRailInner">
+                <div className="playerRailList">
+                  {players.map((p) => (
+                    <PlayerIcon key={p.id} player={p} />
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom: Player HUD */}
+          <div className="playerHud">
+            <PlayerIdentityCard
+              name="Harry Potter"
+              houseLabel="Signature of Holder"
+              borderColor="#7c4dff"
+              img="/player_cards/harry.png"
            />
-          ))}
-        </div>

-        {/* Host-only Winner Auswahl */}
-        <WinnerCard
-          isHost={isHost}
-          members={members}
-          winnerUserId={winnerUserId}
-          setWinnerUserId={setWinnerUserId}
-          onSave={saveWinner}
-        />
+            <div className="playerHudMiddle">
+              {/* ✅ 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
-        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);
-        }}
-      />
-
-      <NewGameModal
-        open={newGameOpen}
-        onClose={() => setNewGameOpen(false)}
-        onCreate={createGame}
-        onJoin={joinGame}
-      />
-
-      <ChipModal
-        chipOpen={chipOpen}
-        closeChipModalToDash={closeChipModalToDash}
-        chooseChip={chooseChip}
-      />
+      <ChipModal chipOpen={chipOpen} closeChipModalToDash={closeChipModalToDash} chooseChip={chooseChip} />
    </div>
  );
 }
--- a/frontend/src/AppLayout.css
+++ b/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;
+  }
+}
--- a/frontend/src/components/AdminPanel.jsx
+++ b/frontend/src/components/AdminPanel.jsx
@@ -2,6 +2,7 @@ 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([]);
@@ -13,6 +14,17 @@ export default function AdminPanel() {
  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);
@@ -112,71 +124,81 @@ export default function AdminPanel() {
        ))}
      </div>

-      {open && (
-        <div style={styles.modalOverlay} onMouseDown={closeModal}>
-          <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
-            <div style={styles.modalHeader}>
-              <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>
-                Neuen User anlegen
-              </div>
-              <button onClick={closeModal} style={styles.modalCloseBtn} aria-label="Schließen">
-                ✕
-              </button>
-            </div>
-
-            <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
-              <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
+      {open &&
+        createPortal(
+          <div style={styles.modalOverlay} onMouseDown={closeModal}>
+            <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
+              <div style={styles.modalHeader}>
+                <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>
+                  Neuen User anlegen
+                </div>
+                <button onClick={closeModal} style={styles.modalCloseBtn} aria-label="Schließen">
+                  ✕
                </button>
              </div>

-              <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
-                Tipp: Name wird in TopBar & Siegeranzeige genutzt.
+              <div
+                style={{
+                  marginTop: 12,
+                  display: "grid",
+                  gap: 8,
+                  justifyItems: "center",   // <<< zentriert alles
+                }}
+              >
+                <input
+                  value={displayName}
+                  onChange={(e) => setDisplayName(e.target.value)}
+                  placeholder="Name (z.B. Sascha)"
+                  style={styles.input}
+                  autoFocus
+                />
+
+                <input
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="Email"
+                  style={styles.input}
+                />
+
+                <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>
  );
 }
--- a/frontend/src/components/Dice/Dice3D.jsx
+++ b/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>
+  );
+};
--- a/frontend/src/components/Dice/DicePanel.jsx
+++ b/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>
+  );
+}
--- a/frontend/src/components/GamePickerCard.jsx
+++ b/frontend/src/components/GamePickerCard.jsx
@@ -2,7 +2,46 @@ import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";

-export default function GamePickerCard({ games, gameId, setGameId, onOpenHelp }) {
+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}>
@@ -26,16 +65,77 @@ export default function GamePickerCard({ games, gameId, setGameId, onOpenHelp })
          </button>
        </div>

-        {/* kleine Code Zeile unter dem Picker (optional nice) */}
-        {(() => {
-          const cur = games.find((x) => x.id === gameId);
-          if (!cur?.code) return null;
-          return (
-            <div style={{ padding: "0 12px 12px", fontSize: 12, color: stylesTokens.textDim, opacity: 0.9 }}>
+        {/* 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>
  );
--- a/frontend/src/components/ModalPortal.jsx
+++ b/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
+  );
+}
--- a/frontend/src/components/NewGameModal.jsx
+++ b/frontend/src/components/NewGameModal.jsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";

@@ -7,8 +7,14 @@ export default function NewGameModal({
  onClose,
  onCreate,
  onJoin,
+
+  // ✅ neu:
+  currentCode = "",
+  gameFinished = false,
+  hasGame = false,
 }) {
-  const [mode, setMode] = useState("choice"); // choice | create | join
+  // modes: running | choice | create | join
+  const [mode, setMode] = useState("choice");
  const [joinCode, setJoinCode] = useState("");
  const [err, setErr] = useState("");
  const [created, setCreated] = useState(null); // { code }
@@ -16,6 +22,23 @@ export default function NewGameModal({

  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) => {
@@ -44,15 +67,19 @@ export default function NewGameModal({
    }
  };

-  const copyCode = async () => {
+  const copyText = async (text, okMsg = "✅ Code kopiert") => {
    try {
-      await navigator.clipboard.writeText(created?.code || "");
-      showToast("✅ Code kopiert");
+      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()}>
@@ -85,6 +112,64 @@ export default function NewGameModal({
        )}

        <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 }}>
@@ -159,7 +244,7 @@ export default function NewGameModal({
                  {created.code}
                </div>

-                <button onClick={copyCode} style={styles.primaryBtn}>
+                <button onClick={() => copyText(created?.code || "")} style={styles.primaryBtn}>
                  ⧉ Code kopieren
                </button>
              </div>
--- a/frontend/src/components/StatsModal.jsx
+++ b/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
+  );
+}
--- a/frontend/src/components/TopBar.jsx
+++ b/frontend/src/components/TopBar.jsx
@@ -8,19 +8,16 @@ export default function TopBar({
  setUserMenuOpen,
  openPwModal,
  openDesignModal,
+  openStatsModal,
  doLogout,
  onOpenNewGame,
 }) {
-  const displayName = me
-    ? ((me.display_name || "").trim() || me.email)
-    : "";
+  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={{ fontWeight: 900, color: stylesTokens.textGold }}>Notizbogen</div>
        <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
          {displayName}
        </div>
@@ -52,6 +49,18 @@ export default function TopBar({
                {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>
--- a/frontend/src/components/WinnerBadge.jsx
+++ b/frontend/src/components/WinnerBadge.jsx
@@ -4,8 +4,7 @@ import { stylesTokens } from "../styles/theme";
 /**
 * Props:
 * - winner: { display_name?: string, email?: string } | null
- *   (oder als Fallback:)
- * - winnerEmail: string | null
+ * - winnerEmail: string | null (legacy fallback)
 */
 export default function WinnerBadge({ winner, winnerEmail }) {
  const name =
@@ -15,13 +14,6 @@ export default function WinnerBadge({ winner, winnerEmail }) {

  if (!name) return null;

-  // Optional: wenn display_name vorhanden ist, Email klein anzeigen
-  const showEmail =
-    winner &&
-    (winner?.email || "").trim() &&
-    (winner?.display_name || "").trim() &&
-    winner.email.trim().toLowerCase() !== winner.display_name.trim().toLowerCase();
-
  return (
    <div
      style={{
@@ -41,17 +33,9 @@ export default function WinnerBadge({ winner, winnerEmail }) {
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{ fontSize: 18 }}>🏆</div>

-        <div style={{ display: "grid", gap: 2 }}>
-          <div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>
-            Sieger:
-            <span style={{ color: stylesTokens.textGold }}>{" "}{name}</span>
-          </div>
-
-          {showEmail && (
-            <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
-              {winner.email}
-            </div>
-          )}
+        <div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>
+          Sieger:
+          <span style={{ color: stylesTokens.textGold }}>{" "}{name}</span>
        </div>
      </div>

--- a/frontend/src/components/WinnerCard.jsx
+++ b/frontend/src/components/WinnerCard.jsx
@@ -23,11 +23,14 @@ export default function WinnerCard({
            style={{ ...styles.input, flex: 1 }}
          >
            <option value="">— kein Sieger —</option>
-            {members.map((m) => (
-              <option key={m.id} value={m.id}>
-                {m.email}
-              </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}>
--- a/frontend/src/components/WinnerCelebration.jsx
+++ b/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);
+}
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,14 +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 />);
-registerSW({ immediate: true });
-const updateSW = registerSW({
+async function bootstrap() {
+  // 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() {
-      updateSW(true); // sofort neue Version aktivieren
-      window.location.reload();
+      console.info("Neue Version verfügbar");
+      // optional: später Toast "Update verfügbar"
    },
  });
+}
+
+bootstrap();
--- a/frontend/src/styles/hooks/useHpGlobalStyles.js
+++ b/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;
-        -webkit-overflow-scrolling: touch;
+        overflow: hidden;
      }
      #root { background: transparent; }
      * { -webkit-tap-highlight-color: transparent; }
--- a/frontend/src/styles/styles.js
+++ b/frontend/src/styles/styles.js
@@ -122,13 +122,13 @@ export const styles = {

  input: {
    width: "100%",
-    padding: 10,
-    borderRadius: 12,
+    padding: "10px 12px",
+    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: {
@@ -188,26 +188,28 @@ export const styles = {
  // Modal
  modalOverlay: {
    position: "fixed",
-    inset: 0,
-    background: "rgba(0,0,0,0.65)",
+    inset: 0,                  // statt top/left/right/bottom
+    width: "100%",             // ✅ NICHT 100vw
+    height: "100%",            // ✅ NICHT 100vh
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
-    padding: 16,
-    zIndex: 9999,
-    animation: "fadeIn 160ms ease-out",
+    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))",
+    boxSizing: "border-box",   // wichtig bei padding
+    zIndex: 2147483647,
+    background: "rgba(0,0,0,0.72)",
+    overflowY: "auto",
  },
+
  modalCard: {
-    width: "100%",
-    maxWidth: 560,
+    width: "min(560px, 100%)",
    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)",
-    animation: "popIn 160ms ease-out",
-    color: stylesTokens.textMain,
+    maxHeight: "calc(100vh - 32px)",
+    overflow: "auto",
  },
  modalHeader: {
    display: "flex",
--- a/frontend/src/styles/themes.js
+++ b/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) {
--- a/frontend/vite.config.js
+++ b/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" }
        ]