MissionResultHud {
    position: absolute;
    width: 100%;
    height: 100%;
    font-family: Poppins;

    // The whole HUD must never eat clicks - the vendor and job board menus
    // sit under it and need to stay clickable.
    pointer-events: none;

    // Objective banner: top-centre, out of the way of the crosshair.
    .objective {
        position: absolute;
        top: 48px;
        left: 0px;
        width: 100%;
        text-align: center;
        font-size: 28px;
        font-weight: bold;
        text-transform: uppercase;
        color: white;
        text-shadow: 0px 0px 12px rgba( black, 0.9 );
        display: none;

        &.show {
            display: flex;
            justify-content: center;
        }

        // Blue, not red - red is MISSION FAILED on this same HUD.
        &.escape {
            color: #4fc3f7;
        }

        &.extracted {
            color: #7ed957;
        }

        &.eliminated {
            color: #e53935;
        }

        // Amber rather than red: you've not failed, you're just not
        // making progress.
        &.stalled {
            color: #ffb300;
        }
    }

    // Full-screen box that does the centring. The Label inside can't
    // centre itself - flex properties on a Label lay out its child
    // panels, and its text isn't one.
    .resultWrapper {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        display: none;

        &.show {
            display: flex;
        }
    }

    // Win/lose text: dead centre, much larger.
    .result {
        font-size: 96px;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
        text-shadow: 0px 0px 20px rgba( black, 0.8 );

        &.won {
            color: #4caf50;
        }

        &.lost {
            color: #e53935;
        }
    }
}