/* Reset */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Cache tout ce que GMod injecte (texte addons etc.) */
body * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Autorise uniquement notre UI */
body, .my-ui, .my-ui * {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body {
  background: url("background.png") no-repeat center center fixed;
  background-size: cover;
}

/* POSITION DE LA BARRE (à ajuster pour la placer pile sous ton logo) */
.nl-progress{
  position: absolute;
  left: 50%;
  bottom: 3.5%;              /* <- bouge ça si tu veux plus haut/bas */
  transform: translateX(-50%);
  width: min(980px, 78vw); /* proportion proche de ta capture */
}

/* Track = cadre noir arrondi + contour clair */
.nl-progress__track{
  height: 28px;            /* épaisseur totale proche screenshot */
  padding: 4px;            /* épaisseur du “bord” interne */
  border-radius: 18px;
  background: rgba(0,0,0,.62);
  border: 2px solid rgba(255,255,255,.35);
  box-shadow:
    0 12px 30px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(0,0,0,.35);
  overflow: hidden;
}

/* Fill = remplissage feu */
.nl-progress__fill{
  width: 0%;
  height: 100%;
  border-radius: 14px;
  position: relative;

  /* Base orange “feu” */
  background: linear-gradient(90deg,
    #ffcf3a 0%,
    #ff9b12 22%,
    #ff6a00 45%,
    #ff3b00 70%,
    #ffd86a 100%
  );

  /* Glow + profondeur */
  box-shadow:
    0 0 18px rgba(255,140,0,.95),
    inset 0 0 10px rgba(255,255,255,.22);

  transition: width .22s ease;
}

/* Texture animée (comme la “lave”/reflets qui bougent) */
.nl-progress__fill::before{
  content:"";
  position:absolute;
  inset:-20% -40%;
  border-radius: 18px;

  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,.22), rgba(255,255,255,0) 45%),
    radial-gradient(circle at 60% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.18) 0px,
      rgba(255,255,255,.18) 10px,
      rgba(0,0,0,0) 10px,
      rgba(0,0,0,0) 22px
    );

  mix-blend-mode: overlay;
  opacity: .65;
  animation: nl-move 1.15s linear infinite;
}

/* Highlight en haut (liseré lumineux) */
.nl-progress__fill::after{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:45%;
  border-radius: 18px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.40),
    rgba(255,255,255,0)
  );
  opacity: .55;
}

@keyframes nl-move{
  from { transform: translateX(-6%); }
  to   { transform: translateX(6%); }
}