TankGameHUD {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-weight: bold;
    font-family: Poppins;

    .local-player-hud,
    .players-list {
        background-color: rgba(0, 0, 0, 0.6);
        padding: 10px 15px;
        border-radius: 10px;
        width: 500px;
    }

    .input-info {
        position: absolute;
        bottom: 20px;
        right: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 10px 15px;
        border-radius: 10px;
        width: 300px;

        .text {
            font-size: 20px;
            text-shadow: 1px 1px 2px black;
            flex: 1; /* Ensures name takes only needed space */
            text-align: left;
        }
    }

    .local-player-hud {
        position: absolute;
        bottom: 20px;
        left: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .name {
            font-size: 30px;
            text-shadow: 1px 1px 2px black;
            flex: 1; /* Ensures name takes only needed space */
            text-align: left;
        }

        .health-container {
            display: flex;
            justify-content: flex-end;
            min-width: 240px; /* Fixed width for hearts */
            margin-left: 20px; /* Space between name and hearts */

            .heart {
                width: 50px;
                height: 50px;
                background-size: cover;
                margin: 0 3px;

                &.full {
                    background-image: url( textures/ui/heart_full.png );
                }

                &.empty {
                    background-image: url( textures/ui/heart_empty.png );
                }
            }
        }
    }

    .players-list {
        position: absolute;
        top: 10px;
        left: 20px;
        display: flex;
        flex-direction: column;
        gap: 5px; /* Space between player entries */

        .player-entry {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px;
            border-radius: 5px;
            background-color: rgba(50, 50, 50, 0.8); /* Subtle background for each player */

            .name {
                font-size: 24px;
                text-shadow: 1px 1px 1px black;
                flex: 1;
                text-align: left;
            }

            .small-health-container {
                display: flex;
                justify-content: flex-end;
                min-width: 100px;
                margin-left: 20px;

                .small-heart {
                    width: 30px;
                    height: 30px;
                    background-size: cover;
                    margin: 0 2px;

                    &.full {
                        background-image: url( textures/ui/heart_full.png );
                    }

                    &.empty {
                        background-image: url( textures/ui/heart_empty.png );
                    }
                }
            }
        }
    }
}