This commit is contained in:
cay 2026-04-10 09:14:30 +01:00
parent a5e2e6c638
commit 23dfccda04

View File

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