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>
+    <!-- Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet">    
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap"
      rel="stylesheet"
    />
    <style>
      html,
      body {
        margin: 0;
        height: 100%;
        background: radial-gradient(
          ellipse at top,
          rgba(30, 30, 30, 0.95),
          #000
        );
      }
      /* Splash Overlay */
      #app-splash {
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        display: grid;
        place-items: center;
        background: radial-gradient(
          ellipse at top,
          rgba(30, 30, 30, 0.95),
          #000
        );
        overflow: hidden;
        opacity: 1;
        transition: opacity 260ms ease;
      }
      #app-splash.hide {
        opacity: 0;
        pointer-events: none;
      }
      /* gold animated lines */
      #app-splash::before,
      #app-splash::after {
        content: "";
        position: absolute;
        inset: -40%;
        background:
          linear-gradient(
            90deg,
            transparent,
            rgba(233, 216, 166, 0.18),
            transparent
          );
        transform: rotate(12deg);
        animation: goldSweep 1.6s linear infinite;
        opacity: 0.55;
        filter: blur(0.2px);
        pointer-events: none;
      }
      #app-splash::after {
        transform: rotate(-12deg);
        animation-duration: 2.2s;
        opacity: 0.35;
      }
      @keyframes goldSweep {
        0% { transform: translateX(-25%) rotate(12deg); }
        100% { transform: translateX(25%) rotate(12deg); }
      }
      /* glassy card */
      .splash-card {
        position: relative;
        width: min(520px, 90vw);
        border-radius: 22px;
        padding: 18px 16px;
        background: rgba(20, 20, 22, 0.55);
        border: 1px solid rgba(233, 216, 166, 0.16);
        box-shadow: 0 18px 70px rgba(0,0,0,0.55);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        text-align: center;
        overflow: hidden;
      }
      .splash-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(233,216,166,0.16), transparent);
        opacity: 0.45;
        pointer-events: none;
      }
      .splash-title {
        position: relative;
        font-family: "Cinzel Decorative", serif;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: rgba(245, 239, 220, 0.92);
        font-size: 18px;
        line-height: 1.25;
      }
      .splash-sub {
        position: relative;
        margin-top: 6px;
        font-family: "IM Fell English", serif;
        font-style: italic;
        color: rgba(233, 216, 166, 0.78);
        font-size: 13px;
      }
      /* Loader */
      .loader {
        position: relative;
        margin: 14px auto 0;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        border: 2px solid rgba(233, 216, 166, 0.18);
        border-top-color: rgba(233, 216, 166, 0.92);
        animation: spin 0.85s linear infinite;
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      /* tiny spark at bottom */
      .spark {
        position: relative;
        margin: 14px auto 0;
        width: 160px;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, rgba(233,216,166,0.65), transparent);
        opacity: 0.6;
        filter: blur(0.2px);
        animation: pulse 1.4s ease-in-out infinite;
      }
      @keyframes pulse {
        0%, 100% { opacity: 0.35; transform: scaleX(0.92); }
        50% { opacity: 0.85; transform: scaleX(1.02); }
      }
    </style>
    <!-- Theme-Key sofort setzen -->
    <script>
      try {
        const k = localStorage.getItem("hpTheme:guest") || "default";
        document.documentElement.setAttribute("data-theme", k);
      } catch {}
    </script>
  </head>
  <body>
    <div id="app-splash" aria-hidden="true">
      <div class="splash-card">
        <div class="splash-title">Zauber-Detektiv Notizbogen</div>
        <div class="splash-sub">Magie wird vorbereitet…</div>
        <div class="loader" aria-label="Laden"></div>
        <div class="spark"></div>
      </div>
    </div>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
--- 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 ChipModal from "./components/ChipModal";
-import WinnerCard from "./components/WinnerCard";
+import DicePanel from "./components/Dice/DicePanel";
-import WinnerBadge from "./components/WinnerBadge";
+
-import NewGameModal from "./components/NewGameModal";
+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
+  // Chip modal
  const [gameMeta, setGameMeta] = useState(null); // {code, host_user_id, winner_email, winner_user_id}
  const [members, setMembers] = useState([]);
  // Winner selection (host only)
  const [winnerUserId, setWinnerUserId] = useState("");
  // Modals
  const [helpOpen, setHelpOpen] = useState(false);
  const [chipOpen, setChipOpen] = useState(false);
  const [chipEntry, setChipEntry] = useState(null);
  const [userMenuOpen, setUserMenuOpen] = useState(false);
-  const [pwOpen, setPwOpen] = useState(false);
+  const aliveRef = useRef(true);
  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 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 () => {
+  // ===== Sheet actions (wie bisher) =====
    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 =====
  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}>
+      <div className="appRoot">
-        <TopBar
+        {/* LEFT: Game Area */}
-          me={me}
+        <section className="leftPane">
-          userMenuOpen={userMenuOpen}
+          {/* Top: User + Settings adjacent */}
-          setUserMenuOpen={setUserMenuOpen}
+          <div className="topBarRow">
-          openPwModal={openPwModal}
+            <PlaceholderCard title="User Dropdown" variant="compact" />
-          openDesignModal={openDesignModal}
+            <PlaceholderCard title="Einstellungen" variant="compact" />
-          doLogout={doLogout}
+          </div>
          onOpenNewGame={() => setNewGameOpen(true)}
        />
-        {me.role === "admin" && <AdminPanel />}
+          {/* Main: Tools | Board | Player Rail */}
          <div className="mainRow">
            {/* Left of board: Board decks */}
            <div className="leftTools">
              <div className="leftToolsRow">
                <PlaceholderCard title="Hilfskarten (Deck)" variant="tile" />
                <PlaceholderCard title="Dunkles Deck" variant="tile" />
              </div>
            </div>
-        <GamePickerCard
+            {/* Board: big */}
-          games={games}
+            <div className="boardWrap">
-          gameId={gameId}
+              <PlaceholderCard
-          setGameId={setGameId}
+                title="3D Board / Game View"
-          onOpenHelp={() => setHelpOpen(true)}
+                subtitle="Platzhalter – hier kommt später das Board + Figuren rein."
-        />
+                variant="panel"
              >
                <div
                  style={{
                    flex: 1,
                    minHeight: 0,
                    borderRadius: 18,
                    border: `1px dashed ${stylesTokens.panelBorder}`,
                    opacity: 0.35,
                  }}
                />
              </PlaceholderCard>
-        {/* Sieger Badge: zwischen Spiel und Verdächtigte Person */}
+              <div className="diceOverlay">
-        <WinnerBadge winnerEmail={gameMeta?.winner_email || ""} />
+                <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 }}>
+              <div className="playerRailInner">
-          {sections.map((sec) => (
+                <div className="playerRailList">
-            <SheetSection
+                  {players.map((p) => (
-              key={sec.key}
+                    <PlayerIcon key={p.id} player={p} />
-              title={sec.title}
+                  ))}
-              entries={sec.entries}
+                </div>
-              pulseId={pulseId}
+              </div>
-              onCycleStatus={cycleStatus}
+            </div>
-              onToggleTag={toggleTag}
+          </div>
-              displayTag={displayTag}
+
          {/* Bottom: Player HUD */}
          <div className="playerHud">
            <PlayerIdentityCard
              name="Harry Potter"
              houseLabel="Signature of Holder"
              borderColor="#7c4dff"
              img="/player_cards/harry.png"
            />
          ))}
        </div>
-        {/* Host-only Winner Auswahl */}
+            <div className="playerHudMiddle">
-        <WinnerCard
+              {/* ✅ FIX: these were clipping your hovering/overlapping player card */}
-          isHost={isHost}
+              <PlaceholderCard title="Meine Geheimkarten" variant="tile" overflow="visible" />
-          members={members}
+              <PlaceholderCard title="Meine Hilfkarte(n)" variant="tile" overflow="visible" />
-          winnerUserId={winnerUserId}
+            </div>
          setWinnerUserId={setWinnerUserId}
          onSave={saveWinner}
        />
-        <div style={{ height: 24 }} />
+            <HogwartsPointsCard value={60} />
          </div>
        </section>
        {/* RIGHT: Notes Panel */}
        <aside
          className="notesPane"
          style={{
            borderRadius: 22,
            border: `1px solid ${stylesTokens.panelBorder}`,
            background: stylesTokens.panelBg,
            boxShadow: "0 22px 90px rgba(0,0,0,0.55)",
            backdropFilter: "blur(10px)",
            padding: 12,
          }}
        >
          <div>
            <div style={{ fontWeight: 900, color: stylesTokens.textMain, fontSize: 14 }}>Notizen</div>
            <div style={{ marginTop: 6, color: stylesTokens.textDim, fontSize: 12 }}>
              Nur die 3 Tabellen (Verdächtige / Gegenstände / Orte).
            </div>
          </div>
          <div className="notesScroll">
            <div style={{ marginTop: 12, display: "grid", gap: 14 }}>
              {sections.map((sec) => (
                <SheetSection
                  key={sec.key}
                  title={sec.title}
                  entries={sec.entries}
                  pulseId={pulseId}
                  onCycleStatus={cycleStatus}
                  onToggleTag={toggleTag}
                  displayTag={displayTag}
                />
              ))}
            </div>
          </div>
        </aside>
      </div>
-      <PasswordModal
+      <ChipModal chipOpen={chipOpen} closeChipModalToDash={closeChipModalToDash} chooseChip={chooseChip} />
        pwOpen={pwOpen}
        closePwModal={closePwModal}
        pw1={pw1}
        setPw1={setPw1}
        pw2={pw2}
        setPw2={setPw2}
        pwMsg={pwMsg}
        pwSaving={pwSaving}
        savePassword={savePassword}
      />
      <DesignModal
        open={designOpen}
        onClose={() => setDesignOpen(false)}
        themeKey={themeKey}
        onSelect={(k) => {
          selectTheme(k);
          setDesignOpen(false);
        }}
      />
      <NewGameModal
        open={newGameOpen}
        onClose={() => setNewGameOpen(false)}
        onCreate={createGame}
        onJoin={joinGame}
      />
      <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 && (
+      {open &&
-        <div style={styles.modalOverlay} onMouseDown={closeModal}>
+        createPortal(
-          <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
+          <div style={styles.modalOverlay} onMouseDown={closeModal}>
-            <div style={styles.modalHeader}>
+            <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
-              <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>
+              <div style={styles.modalHeader}>
-                Neuen User anlegen
+                <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>
-              </div>
+                  Neuen User anlegen
-              <button onClick={closeModal} style={styles.modalCloseBtn} aria-label="Schließen">
+                </div>
-                ✕
+                <button onClick={closeModal} style={styles.modalCloseBtn} aria-label="Schließen">
-              </button>
+                  ✕
            </div>
            <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
              <input
                value={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 }}>
+              <div
-                Tipp: Name wird in TopBar & Siegeranzeige genutzt.
+                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) */}
+        {/* Code Zeile */}
-        {(() => {
+        {cur?.code && (
-          const cur = games.find((x) => x.id === gameId);
+          <div
-          if (!cur?.code) return null;
+            style={{
-          return (
+              padding: "0 12px 10px",
-            <div style={{ padding: "0 12px 12px", fontSize: 12, color: stylesTokens.textDim, opacity: 0.9 }}>
+              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 || "");
+      await navigator.clipboard.writeText(text || "");
-      showToast("✅ Code kopiert");
+      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
+  const displayName = me ? ((me.display_name || "").trim() || me.email) : "";
    ? ((me.display_name || "").trim() || me.email)
    : "";
  return (
    <div style={styles.topBar}>
      <div>
-        <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>
+        <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>Notizbogen</div>
          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 (legacy fallback)
 * - winnerEmail: string | null
 */
 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 }}>
-          <div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>
+          Sieger:
-            Sieger:
+          <span style={{ color: stylesTokens.textGold }}>{" "}{name}</span>
            <span style={{ color: stylesTokens.textGold }}>{" "}{name}</span>
          </div>
          {showEmail && (
            <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
              {winner.email}
            </div>
          )}
        </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) => (
+            {members.map((m) => {
-              <option key={m.id} value={m.id}>
+              const dn = ((m.display_name || "").trim() || (m.email || "").trim());
-                {m.email}
+              return (
-              </option>
+                <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 />);
+async function bootstrap() {
-registerSW({ immediate: true });
+  // Theme sofort setzen
-const updateSW = registerSW({
+  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
+      console.info("Neue Version verfügbar");
-      window.location.reload();
+      // 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;
+        overflow: hidden;
        -webkit-overflow-scrolling: touch;
      }
      #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,
+    padding: "10px 12px",
-    borderRadius: 12,
+    borderRadius: 14,
    border: `1px solid rgba(233,216,166,0.18)`,
    background: "rgba(10,10,12,0.55)",
    color: stylesTokens.textMain,
    outline: "none",
-    fontSize: 16,
+    fontSize: 15,
  },
  primaryBtn: {
@@ -188,26 +188,28 @@ export const styles = {
  // Modal
  modalOverlay: {
    position: "fixed",
-    inset: 0,
+    inset: 0,                  // statt top/left/right/bottom
-    background: "rgba(0,0,0,0.65)",
+    width: "100%",             // ✅ NICHT 100vw
    height: "100%",            // ✅ NICHT 100vh
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
-    padding: 16,
+    padding: "calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))",
-    zIndex: 9999,
+    boxSizing: "border-box",   // wichtig bei padding
-    animation: "fadeIn 160ms ease-out",
+    zIndex: 2147483647,
    background: "rgba(0,0,0,0.72)",
    overflowY: "auto",
  },
  modalCard: {
-    width: "100%",
+    width: "min(560px, 100%)",
    maxWidth: 560,
    borderRadius: 18,
    border: `1px solid rgba(233,216,166,0.18)`,
-    background: "linear-gradient(180deg, rgba(20,20,24,0.92), rgba(12,12,14,0.86))",
+    background: "rgba(12,12,14,0.96)",
    boxShadow: "0 18px 55px rgba(0,0,0,0.70)",
    padding: 14,
-    backdropFilter: "blur(6px)",
+    maxHeight: "calc(100vh - 32px)",
-    animation: "popIn 160ms ease-out",
+    overflow: "auto",
    color: stylesTokens.textMain,
  },
  modalHeader: {
    display: "flex",
--- 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" }
        ]