// EASTER EGG STEP BANNER — `EggStepBannerHud`. "Step VII complete", a light strip, the step's name; upper middle, on every
// screen. The opacity is inline, as it fades.

.egg-banner-hud
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;          // never eat clicks
}

// ⛔ SPANNED, WITH AN EXPLICIT WIDTH, AND CENTRED AS A FLEX COLUMN. The powerup banner paid for this twice
// (PowerupBannerHud.razor.scss): a parent's `justify-content` does not reach an absolutely positioned box, and opposing offsets
// do not give it a width.
.card
{
    position: absolute;
    left: 0px;
    width: 100%;

    // ⚠️ BETWEEN THE BOSS BAR (top 4%) AND BASALT'S ROUND CARVING (a 150 px numeral from 26%, `RoundCarveHud`): a step done as
    // a round turns must not stand on the numeral.
    top: 11%;

    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.kicker
{
    font-family: Inter;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba( 225, 230, 236, 0.92 );
    text-shadow: 0px 2px 8px rgba( 0, 0, 0, 1 );
}

// ⚠️ THE ONE LIGHT STRIP, between the two lines — basalt's "thin white light strips as the only modern thing" (HudTheme).
.strip
{
    width: 380px;
    height: 2px;
    margin-top: 10px;
    margin-bottom: 12px;
    background-color: rgba( 255, 255, 255, 0.85 );
    box-shadow: 0px 0px 10px rgba( 255, 255, 255, 0.55 );
}

.name
{
    font-family: Inter;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: 5px;
    text-transform: uppercase;
    white-space: nowrap;

    // The CoD gold, the powerup banner's and the points'.
    color: rgba( 235, 200, 100, 1 );

    // ⛔ A HARD SHADOW, NOT A GLOW — the powerup banner's reason: it has to read over a bright wall and a dark corner alike.
    text-shadow: 0px 3px 8px rgba( 0, 0, 0, 1 );
}

// ═══ BASALT (`HudTheme`) — Cinzel in ember-lit ivory, the opening card's face ═══
//
// ⛔ `line-height: 0.898` IS INTER'S LINE BOX IN CINZEL'S TERMS (INSTRUCTIONS §38): without it every Cinzel line stands a third
// taller than the same line in the ordinary HUD.
.theme-basalt .kicker,
.theme-basalt .name
{
    font-family: Cinzel;
    line-height: 0.898;
    text-shadow: 0px 1px 12px rgba( 110, 38, 10, 0.95 );
}

.theme-basalt .kicker
{
    color: rgba( 232, 196, 160, 0.92 );
}

.theme-basalt .name
{
    color: rgba( 246, 226, 196, 0.97 );
}