Aide CSS - Niveau simple, demande très précise

Bonjour à tous.

Je suis actuellement entrain de créer un serveur de jeu vidéo basé sur GTA 5 (un jeu mondialement connu). Ayant quelques compétences en LUA je n'ai pas réellement de soucis pour toucher à tout ce qui concerne la jeu en lui même.

Néanmoins, je suis très très peu expérimenté en CSS/HTML et c'est pour cela que j'ai besoin de vôtre aide.

Mon serveur de jeu, comporte un "HUD"

#HUD = sigle composé des trois lettres H, U et D, peut faire référence à : Head up display, ou affichage tête haute en français, Le HUD, dans un jeu vidéo, est une méthode par laquelle l'information est relayée graphiquement au joueur.#

Celui ci ce présente d'une manière qui ne me plaît pas du tout. Il est actuellement présenté de cette manière :

. INFO 1 / 2000$
. INFO 2 / 2000$
. INFO 3 / 2000$

J'aimerais qu'il se présente sous forme de LIGNE en haut de l'écran avec un shadow box noire (transparente en fond) ! J'ai beau essayé tout ce que je peux, je n'y parviens pas.

Je sollicite donc votre aide pour pouvoir y arriver.
Mon code actuel est :

'
#hud {
position : absolute;
font-family: 'Pricedown';
font-size : 25px;
color : pink;
padding : 1px;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;

text-align: center;
right : 50%;
left : 50%;
width: 15em;
border: 1px solid #333;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
'

En espérant que quelqu'un puisse me trouver une solution. Je peux vous envoyer des aides screen shots et plus d'informations en messages privées pour vous guider un peu plus.

Merci à tous pour vôtre lecture/aide et temps.