@import "theme";

Hud
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: $deadzone-y $deadzone-x;
    pointer-events: none;
    font-family: $display-font;
    flex-direction: column;
    justify-content: space-between;

    &.hidden
    {
        display: none;
    }

    .hud-countdown-overlay
    {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        z-index: 100;
    }

    .hud-finish-countdown
    {
        position: absolute;
        top: 190px;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        z-index: 90;

        .label
        {
            font-family: $header-font;
            font-size: 13px;
            font-weight: 700;
            color: $hud-text-muted;
            letter-spacing: 3px;
            text-transform: uppercase;
            text-shadow: $hud-shadow;
        }

        .time
        {
            font-family: $display-font;
            font-size: 34px;
            font-weight: 800;
            color: white;
            text-shadow: $hud-shadow;
        }

        &.urgent .time
        {
            color: $accent-pink;
        }
    }

    .hud-guide-arrow
    {
        // Sizes to the glyph; centred on the (left%,top%) anchor by the inline
        // translate(-50%,-50%) rotate(angle), rotating about its centre.
        position: absolute;
        align-items: center;
        justify-content: center;
        transform-origin: center;
        z-index: 70;

        .arrow-glyph
        {
            font-family: $display-font;
            font-size: 52px;
            color: $accent-yellow;
            text-shadow: $hud-shadow;
            transition: font-size 0.12s ease-out, color 0.12s ease-out;
        }

        // Off course / missed a checkpoint → red and a bit bigger.
        &.urgent .arrow-glyph
        {
            color: $accent-red;
            font-size: 74px;
        }
    }

    .hud-return-prompt
    {
        position: absolute;
        left: 0;
        bottom: 28%;
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        z-index: 90;
        transition: opacity 0.15s ease-out;

        &:intro { opacity: 0; }

        .return-glyph
        {
            width: 42px;
            height: 42px;
        }

        .label
        {
            font-family: $header-font;
            font-size: 26px;
            font-weight: 800;
            color: white;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-shadow: $hud-shadow;
        }
    }

    .hud-self-destruct
    {
        position: absolute;
        left: 0;
        bottom: 28%;
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        z-index: 90;

        .label
        {
            font-family: $header-font;
            font-size: 26px;
            font-weight: 800;
            color: $accent-red;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-shadow: $hud-shadow;
        }

        .sd-bar
        {
            width: 240px;
            height: 12px;
            border-radius: 6px;
            background-color: $pill-dark;
            border: 1px solid $pill-inner;
            overflow: hidden;
        }

        .sd-fill
        {
            height: 100%;
            background-color: $accent-red;
        }
    }

    .hud-spectating
    {
        position: absolute;
        left: 0;
        bottom: 20%;
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        z-index: 90;

        .spectating-label
        {
            font-family: $header-font;
            font-size: 18px;
            font-weight: 700;
            color: rgba( white, 0.6 );
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        .spectating-name
        {
            font-family: $header-font;
            font-size: 32px;
            font-weight: 800;
            color: white;
            text-shadow: $hud-shadow;
        }

        .spectating-hint
        {
            flex-direction: row;
            align-items: center;
            gap: 8px;
            margin-top: 4px;

            .spec-glyph
            {
                width: 32px;
                height: 32px;
            }

            .spec-hint-text
            {
                font-size: 14px;
                font-weight: 700;
                color: rgba( white, 0.5 );
                letter-spacing: 2px;
                text-transform: uppercase;
            }
        }
    }

    .hud-top
    {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: relative;

        .hud-top-center
        {
            flex-direction: row;
            align-items: center;
            gap: 10px;

            // Smoked-glass pills around the timer and lap counter, matching the standings.
            .timer-pill, .lap-pill
            {
                background-color: $pill-dark;
                border-radius: $pill-radius;
                backdrop-filter: blur( 4px );
                padding: 10px 18px;
                height: 64px;
                align-items: center;
            }

            .lap-pill LapCounter
            {
                align-items: flex-end;
            }
        }

        .hud-top-left
        {
            position: absolute;
            left: 0;
            top: 0;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
        }

        .hud-top-right
        {
            position: absolute;
            right: 0;
            top: 0;
            flex-direction: column;
            align-items: flex-end;
        }
    }

}