Refactor HUD styling for cleaner and simpler design.

Simplified the background, padding, and shadow styles while adjusting dimensions for a more refined appearance. These changes improve maintainability and provide a sleeker visual presentation.

frontend/src/App.jsx

@@ -427,42 +427,38 @@ export default function App() {
   const GOLD = "#f2d27a";
 
   return (
-      // SLOT: gleiche "Card"-Geometrie wie deine Placeholders (Spacing/Radius)
     <div
       style={{
         height: "100%",
         minHeight: 0,
         minWidth: 0,
-          borderRadius: 18,
-          border: `1px solid ${stylesTokens.panelBorder}`,
-          background: "rgba(0,0,0,0.10)",
-          backdropFilter: "blur(8px)",
-          boxShadow: "0 12px 30px rgba(0,0,0,0.30)",
-          padding: 12,
-          overflow: "visible",   // ✅ statt hidden
+        background: "transparent",
+        border: "none",
+        boxShadow: "none",
         display: "grid",
-          placeItems: "stretch",
+        alignItems: "center",     // ✅ dünnes Paper in der HUD-Zelle schön mittig
+        justifyItems: "stretch",
+        padding: 0,
       }}
     >
-        {/* PAPER inset: füllt den Slot, aber mit eigenen Rundungen */}
+      {/* Dünnes Pergament */}
       <div
         style={{
+          height: 88,             // ✅ "dünn" (kannst du 80–96 spielen)
           width: "100%",
-            height: "100%",
-            minHeight: 0,
-            borderRadius: 16,               // ✅ klare Rundung sichtbar
+          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 20px 45px rgba(0,0,0,0.24), 0 16px 40px rgba(0,0,0,0.35)",
+            "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: "16px 16px",
+          padding: "14px 16px",
         }}
       >
         {/* Papier-Flecken */}
@@ -484,8 +480,8 @@ export default function App() {
         <div
           style={{
             position: "absolute",
-              inset: 12,
-              borderRadius: 14,
+            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",
@@ -493,23 +489,15 @@ export default function App() {
         />
 
         {/* Wert */}
-          <div
-            style={{
-              display: "flex",
-              alignItems: "baseline",
-              gap: 10,
-              position: "relative",
-            }}
-          >
+        <div style={{ display: "flex", alignItems: "baseline", gap: 10, position: "relative" }}>
           <div
             style={{
               color: GOLD,
               fontWeight: 900,
-                fontSize: 52,
+              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)",
+              textShadow: "0 1px 0 rgba(0,0,0,0.38), 0 0 20px rgba(242,210,122,0.28)",
             }}
           >
             {value}
@@ -519,11 +507,10 @@ export default function App() {
             style={{
               color: GOLD,
               fontWeight: 900,
-                fontSize: 19,
+              fontSize: 18,
               letterSpacing: 1.4,
-                transform: "translateY(-7px)",
-                textShadow:
-                  "0 1px 0 rgba(0,0,0,0.32), 0 0 14px rgba(242,210,122,0.22)",
+              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,
             }}
           >
@@ -535,8 +522,8 @@ export default function App() {
         <div
           style={{
             position: "absolute",
-              bottom: 14,
-              right: 14,
+            bottom: 10,
+            right: 12,
             color: "rgba(60,40,18,0.55)",
             fontSize: 11,
             fontWeight: 900,
@@ -554,13 +541,7 @@ export default function App() {
       </div>
     </div>
   );
-  };
-  
-
-
-
-
-  
+};
 
   return (
     <div style={styles.page}>