ui/powerupbannerhud.razor.scss
// POWERUP BANNER
//
// Centre screen, above the crosshair. The original draws powerup text in its own
// "nz.powerup" font at a size that dominates — it is meant to be read without
// looking away from what you are shooting.

root
{
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;          // never eat clicks
    justify-content: center;
    align-items: center;
}

.banner
{
    position: absolute;

    // ⛔ SPANNED AND TEXT-CENTRED, NOT CENTRED BY THE PARENT. `root` sets
    // `justify-content: center`, but an ABSOLUTELY POSITIONED child is taken out of
    // the flex flow and ignores it — the banner rendered hard against the LEFT edge
    // while the parent looked like it was centring everything. Stretching it edge to
    // edge and centring the TEXT is what actually holds it in the middle.
    left: 0px;

    // ⛔ AN EXPLICIT WIDTH. `left: 0 / right: 0` does NOT stretch an absolutely
    // positioned panel here the way it would in a browser — the box stayed
    // zero-width, so `text-align: center` was centring inside nothing and the text
    // rendered from the left edge. This is the second attempt at centring this
    // banner; the first assumed the parent's `justify-content` applied, the second
    // assumed opposing offsets implied a width. Neither is true in this layout.
    width: 100%;

    // ⚠️ And centre it as a FLEX CONTAINER as well as with `text-align`, so the
    // result does not depend on which of the two this system honours for a text
    // panel.
    align-items: center;
    justify-content: center;

    // ⚠️ BOTTOM CENTRE. The corners are taken — health and stamina bottom-left,
    // points, round and ammo bottom-right — and the middle of that strip is the one
    // piece of screen furniture nothing else claims.
    bottom: 15%;

    font-family: Inter;

    // ⚠️ Sized to be READ, not to dominate. At 68 it was a title card over the
    // gameplay; this is an announcement you take in while still shooting.
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 4px;

    // The CoD gold, matching the points and the PaP trim rather than inventing a
    // third accent.
    color: rgba( 235, 200, 100, 1 );

    // ⛔ A HARD SHADOW, NOT A GLOW. This sits over gameplay at any brightness — a
    // soft glow disappears against a bright wall, while an offset black shadow keeps
    // the letterforms readable on snow and in a dark corner alike.
    text-shadow: 0px 3px 8px rgba( 0, 0, 0, 1 );

    text-align: center;
    white-space: nowrap;
}

// ═══ BASALT (`HudTheme`) — the map's face, Cinzel on the powerup banner ═══
//
// *"i want the font for this map to affect … all hud messages that appear on screen"* (2026-09-27). The root wears the theme's class; the rules name it and each box
// here that sets Inter itself.
// ⛔ ON INTER'S LINE BOX, so no row grows taller: 0.898 of Cinzel's own line, which is Inter's 1.211 of the size. See
// `.round` in SurvivalHud.razor.scss for why it is not 1.211. It is wider on mixed-case text, which it sets in small capitals. Cinzel-Bold is the one face shipped,
// so every weight draws bold.
.theme-basalt,
.theme-basalt .banner
{
    font-family: Cinzel;
    line-height: 0.898;
}