@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: "Roboto", sans-serif;
overflow: hidden;
background: transparent;
}
.ui {
position: fixed;
bottom: 45px;
right: 35px;
display: none;
opacity: 0;
transition: opacity 0.3s ease-out;
}
.ui.show {
display: block;
opacity: 1;
}
/* Container principal avec design biseauté */
.hud-container {
background: linear-gradient(135deg, rgba(45, 45, 45, 0.95), rgba(35, 35, 35, 0.95));
border: 2px solid rgba(70, 70, 70, 0.8);
clip-path: polygon(15px 0%, 100% 0%, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0% 100%, 0% 15px);
padding: 0;
min-width: 350px;
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
position: relative;
}
/* Weapon Container */
.weapon-container {
display: none;
opacity: 0;
transition: opacity 0.25s ease-out;
}
.weapon-container.show {
display: block;
opacity: 1;
}
.weapon-info {
background: rgba(50, 50, 50, 0.9);
padding: 12px 20px;
display: flex;
align-items: center;
gap: 15px;
border-bottom: 1px solid rgba(70, 70, 70, 0.6);
}
.weapon-image {
width: 80px;
height: 35px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.weapon-image img {
max-width: 75px;
max-height: 32px;
filter: brightness(1.2) contrast(1.1);
object-fit: contain;
}
.weapon-ammo {
margin-left: auto;
color: white;
font-family: "Roboto", sans-serif;
font-size: 18px;
font-weight: 700;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.weapon-ammo .current-ammo {
color: #ffffff;
}
.weapon-ammo .max-ammo {
color: #cccccc;
}
/* Bars Container */
.bars-container {
display: flex;
flex-direction: column;
margin: 0;
padding: 15px 20px;
gap: 8px;
}
.armor-bar, .health-bar {
width: 100%;
margin: 0;
padding: 0;
opacity: 1;
transition: opacity 0.25s ease-out;
}
.armor-bar.hide {
opacity: 0;
}
.bar-container {
background: rgba(25, 25, 25, 0.9);
border: 1px solid rgba(80, 80, 80, 0.6);
clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
padding: 8px 12px;
display: flex;
align-items: center;
gap: 12px;
min-width: 310px;
position: relative;
}
.bar-fill {
flex: 1;
height: 20px;
background: rgba(15, 15, 15, 0.9);
border: 1px solid rgba(60, 60, 60, 0.5);
clip-path: polygon(8px 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%, 0% 8px);
overflow: hidden;
position: relative;
}
#armor-level {
height: 100%;
background: linear-gradient(90deg, #0066ff, #0080ff, #00aaff);
transition: width 0.5s ease-out;
width: 0%;
position: relative;
clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
}
#health-level {
height: 100%;
background: linear-gradient(90deg, #ff4444, #ff6666, #ff8888);
transition: width 0.5s ease-out;
width: 0%;
position: relative;
clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
}
.bar-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bar-icon svg {
width: 20px;
height: 20px;
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
}
/* Low health pulse effect */
.health-bar.low-health #health-level {
animation: pulse 1s infinite;
}
@keyframes pulse {
0%, 100% {
filter: brightness(1);
}
50% {
filter: brightness(1.3);
}
}
/* Quand pas d'arme */
.hud-container.no-weapon {
clip-path: polygon(15px 0%, 100% 0%, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0% 100%, 0% 15px);
}
