@import "./globals.css";
/* H U D  */
.panel {
    /* border: 1px solid white; */
    /* background-color: rgba( 0.0, 0.0, 0.0, 0.67 ); */
    /* border-left: 115px solid var(--theme); */
    box-sizing: border-box;
    display: block;
    opacity: 0.0;
    height: 2.75rem;
    /* width: fit-content; */
    letter-spacing: -0.4rem;
    /* width: 110px; */
    width: 25%;
    padding: 0.0rem 0.0rem 0.0rem 0.0rem;
    /* overflow: hidden; */
    position: relative;
    user-select: none;
    pointer-events: none;
    /* transform-origin: right center; */
    /* transition: opacity 200ms ease-in-out; */
    .font-hud {
        padding: 0.2rem 0rem;
    }
    .font-numbers {
        padding: 1rem 0rem 0rem 0rem;
    }
}
#HUD {
    /* border: 1px solid red; */
    display: flex;
    flex-wrap: wrap;
    /* font-size: 1.0rem; */
    height: auto;
    /* left: calc( ( 100dvw - var(--gutter)) * 0.5 - 1rem); */
    right: calc( ( 100dvw - var(--gutter)) * 0.5 );
    line-height: 0px;
    position: absolute;
    /* top: calc( var(--belt) + 69px ); */
    top: var(--options);
    user-select: none;
    pointer-events: none;
    row-gap: 20px;
    /* width: fit-content; */
    width: clamp( 460px, 460px, 320px );
    margin: 0;
    /* opacity: 0.5; */
    transition: opacity 200ms ease-out;
    transform-origin: center right;
    transform: scale( 1.0 ) translate( 0.0, -50% );
    
    z-index: 3;
}
#HUD .break-item{
    flex-basis: 100%;
}
#HUD * {
    pointer-events: none;
}
#HUD.collapsed .panel:nth-child(n + 5) {
    opacity: 0.0;
    display: none;
}

#FTG {
    /* border: 1px solid green; */
    display: flex;
    flex-wrap: wrap;
    height: auto;
    position: absolute;
    right:  calc( (100dvw - var(--gutter)) * 0.5 - 25px );
    line-height: 0px;
    top: calc( var(--options) + 69px );
    /* top: var(--options); */
    user-select: none;
    /* width: fit-content; */
    width: clamp( 460px, 460px, 320px );
    margin: 0;
    /* opacity: 0.5; */
    transition: opacity 200ms ease-out;
    transform-origin: center right;
    transform: scale( 1.0 ) translate( 0.0, -75.0% );
    z-index: 3;
}
#FTG * {
    pointer-events: none;
}
#ftg-container{
    /* border: 1px solid white; */
    opacity: 0.67;
    /* margin: 25px; */
    height: 2.75rem;
    width: 79%;
}
#ftg-ms{
    /* border: 1px solid white; */
    /* align-self: flex-end; */
    margin: -2px 5px;
    height: 2.75rem;
    width: 5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
@media (max-width: 800px) {
    #HUD{
        transform: scale( 0.85 ) translate( 0.0, -50% );
    }
    #FTG{
        transform: scale( 0.85 ) translate( 0.0, -50% );
    }
}
@media (max-width: 500px) {
    #HUD{
        transform: scale( 0.75 ) translate( 0.0, -50% );
    }
    #FTG{
        transform: scale( 0.75 ) translate( 0.0, -50% );
    }
}
@media (max-width: 1280px) {

    /* Move HUD to bottom-center */
    #HUD {
        left: 50%;
        right: auto;
        bottom: 24px;
        top: auto;
        width: clamp( 460px, 460px, 320px );
        /* margin-left: 15px; */
        transform-origin: center center;
        transform: translateX(-50%) scale(80%);
    }

    /* Hide frametime graph entirely */
    #FTG {
        display: none;
    }
}