// THE LOADING SCREEN — `LoadingScreenHud`. The map's lobby image, full bleed and darkened toward its foot; the name large over the
// lower third; a thin bar under it, filling.

.loading
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

// ⚠️ ON, IT TAKES THE CLICKS: nothing under it — the lobby's buttons — can be pressed through it
.loading.on
{
    pointer-events: all;
    background-color: rgba( 0, 0, 0, 1 );
}

.bg
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

// ⚠️ TWO FLAT LAYERS, NOT A GRADIENT — nothing here draws one yet: a veil over all of it, and a darker band behind the words
.shade
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba( 0, 0, 0, 0.3 );
}

.band
{
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 42%;
    background-color: rgba( 0, 0, 0, 0.5 );
}

.title
{
    position: absolute;
    left: 0px;
    bottom: 150px;
    width: 100%;
    justify-content: center;

    font-family: Inter;
    // ⚠️ TWICE THE SIZE IT WAS (2026-09-28): *"the title of the map should be 2x bigger"* — 76 to 152, and the spacing and the
    // shadow with it, so the name reads the same, only larger. "Ignis Aeternus" is about 1600 wide at this size, inside 1920.
    font-size: 152px;
    font-weight: 800;
    letter-spacing: 28px;
    color: rgba( 245, 240, 230, 0.97 );
    text-shadow: 0px 8px 36px rgba( 0, 0, 0, 0.95 );
    white-space: nowrap;
}

.foot
{
    position: absolute;
    left: 14%;
    width: 72%;
    bottom: 72px;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.label
{
    font-family: Inter;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 6px;
    color: rgba( 235, 230, 220, 0.7 );
}

.bar
{
    width: 100%;
    height: 8px;
    background-color: rgba( 0, 0, 0, 0.6 );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.fill
{
    height: 100%;
    background-color: rgba( 235, 200, 100, 0.95 );
}

// ═══ BASALT (`HudTheme`) — the name carved in ember, the bar a groove with a white light strip in it, as the HUD's round bar ════

$groove: rgba( 15, 12, 9, 0.95 );
$stone-lo: rgba( 17, 14, 11, 1 );
$groove-lip: rgba( 96, 86, 74, 1 );
$bone-dim: rgba( 160, 148, 130, 1 );
$ember: rgba( 222, 108, 46, 1 );
$ember-hot: rgba( 248, 150, 72, 1 );
$lite: rgba( 234, 246, 255, 1 );

.loading.theme-basalt
{
    .title
    {
        font-family: Cinzel;
        font-weight: 700;
        line-height: 0.898;            // Inter's line box — see `.round` in SurvivalHud.razor.scss
        letter-spacing: 32px;          // twice, with the size (above)
        color: $ember-hot;
        text-shadow: 0px 0px 52px rgba( 222, 108, 46, 0.85 );
    }

    .label
    {
        font-family: Cinzel;
        line-height: 0.898;
        color: $bone-dim;
    }

    .bar
    {
        background-color: $groove;
        border: 1px solid $stone-lo;
        border-right-color: $groove-lip;
        border-bottom-color: $groove-lip;
    }

    .fill { background-color: $lite; }
}