#premium-hud {

    position: fixed;

    left: 50%;
    bottom: 24px;

    transform: translateX(-50%);

    z-index: 99999;

    pointer-events:none;

    font-family:
        Inter,
        system-ui,
        sans-serif;

}



#premium-hud .hud-row {

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:center;

    flex-wrap:nowrap;


    gap:12px;


    padding:

        10px 18px;


    border-radius:30px;


    background:

        rgba(15,20,35,.82);


    backdrop-filter:

        blur(25px);


    border:

        1px solid
        rgba(255,255,255,.25);


    box-shadow:

        0 20px 70px
        rgba(0,0,0,.7),

        inset 0 1px 0
        rgba(255,255,255,.3);

}



#premium-hud .hud-group {

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:center;


    gap:8px;


    padding:

        6px 12px;


    border-radius:16px;


    background:

        rgba(255,255,255,.08);


    color:white;


    white-space:nowrap;

}



#premium-hud .hud-divider {

    width:1px;

    height:28px;

    background:

        rgba(255,255,255,.25);

}



#premium-hud b {

    color:white;

    font-size:15px;

}



#premium-hud .hud-button {

    pointer-events:auto;


    width:38px;

    height:38px;


    border-radius:50%;


    border:

        1px solid
        rgba(255,255,255,.3);


    background:

        rgba(255,255,255,.15);


    color:white;

    font-size:18px;


    cursor:pointer;

}



#premium-hud .level {

    flex-direction:column;

    gap:4px;

}



#premium-hud .level-line {

    display:flex;

    flex-direction:row;

    align-items:center;

    gap:8px;

}



#premium-hud .xp-bar {

    width:120px;

    height:5px;

    border-radius:5px;

    overflow:hidden;

    background:

        rgba(255,255,255,.15);

}



#premium-hud #hud-xp {

    height:100%;

    width:30%;

    background:

        linear-gradient(
            90deg,
            #4ddcff,
            #ffd76a
        );

}


@media(max-width:700px){

#premium-hud {

    width:95%;

}


#premium-hud .hud-row {

    gap:5px;

    padding:8px;

}


#premium-hud b {

    font-size:12px;

}

}