diff --git a/public/css/hud.css b/public/css/hud.css
index 3e1df36..1bd5257 100644
--- a/public/css/hud.css
+++ b/public/css/hud.css
@@ -13,9 +13,8 @@
   align-items: flex-end;
   justify-content: flex-end;
 
-  /* Breite und Höhe = schwarzer Bereich bis zur oberen linken Ecke der Worldmap */
-  width:  calc(50vw - 1018.5px);
-  height: calc(50vh - 509px);
+  /* Feste Breite statt viewport-Berechnung → kein Browser-Unterschied */
+  width: clamp(200px, 18vw, 280px);
 
   pointer-events: none;
 }
@@ -52,8 +51,8 @@
 
 #hud-avatar-wrap {
   position: relative;
-  width: clamp(62px, 5.5vw, 90px);
-  height: clamp(62px, 5.5vw, 90px);
+  width: clamp(52px, 4.5vw, 72px);
+  height: clamp(52px, 4.5vw, 72px);
   flex-shrink: 0;
 }
 
@@ -99,7 +98,7 @@
 
 #hud-name {
   font-family: "Cinzel", serif;
-  font-size: clamp(13px, 1.1vw, 18px);
+  font-size: clamp(11px, 0.9vw, 15px);
   font-weight: bold;
   color: #f0d9a6;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
@@ -226,8 +225,8 @@
 .hud-res-icon-stone,
 .hud-res-icon-gold,
 .hud-res-icon-iron {
-  width: 28px;
-  height: 28px;
+  width: 22px;
+  height: 22px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -240,8 +239,8 @@
 .hud-res-icon-stone img,
 .hud-res-icon-gold img,
 .hud-res-icon-iron img {
-  width: 28px;
-  height: 28px;
+  width: 22px;
+  height: 22px;
   object-fit: contain;
   filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
   display: block;
@@ -249,11 +248,11 @@
 
 .hud-res-value {
   font-family: "Cinzel", serif;
-  font-size: clamp(12px, 0.95vw, 16px);
+  font-size: clamp(10px, 0.8vw, 13px);
   font-weight: bold;
   color: #f0d9a6;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
-  min-width: 36px;
+  min-width: 28px;
 }
 
 /* Trennlinie */