// ROUND BAR
//
// Top centre: this round's zombies killed of how many, as a bar that fills, with the count under it. Smaller than basalt's
// boss bar, which takes this place while its fight is on and hides this one; the same gold border, a blood-red fill.

root
{
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;          // never eat clicks
}

.round
{
    position: absolute;
    top: 3%;

    // ⛔ SPANNED AND CENTRED AS A FLEX CONTAINER, NOT BY THE PARENT — an absolutely positioned panel ignores its parent's
    // `justify-content` (the powerup banner's note), so the width is explicit and the children are centred inside it.
    left: 38%;
    width: 24%;
    flex-direction: column;
    align-items: center;
}

.bar
{
    position: relative;
    width: 100%;
    height: 10px;
    background-color: rgba( 12, 6, 6, 0.75 );
    border: 2px solid rgba( 235, 200, 100, 0.7 );
}

.fill
{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    background-color: rgba( 175, 28, 28, 1 );
}

.count
{
    font-family: Inter;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba( 255, 240, 220, 0.9 );
    text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.9 );
    margin-top: 4px;
}

// ═══ BASALT (`HudTheme`) — a groove cut in the stone, filled with a white light strip: the modern accent ══════════════════════
//
// ⚠️ THE SAME 2px BORDER AND 10px HEIGHT, only the colours change. The count is centred, so its wider spacing moves nothing.

$stone: rgba( 46, 42, 37, 0.9 );
$stone-hi: rgba( 92, 83, 72, 1 );
$stone-lo: rgba( 17, 14, 11, 1 );
$groove: rgba( 15, 12, 9, 0.95 );
$groove-lip: rgba( 96, 86, 74, 1 );
$bone: rgba( 228, 217, 195, 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 );

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

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

.theme-basalt .count
{
    color: $bone;
    letter-spacing: 4px;

    // the map's face, on Inter's line box so the bar keeps its height (see `.round` in SurvivalHud.razor.scss)
    font-family: Cinzel;
    line-height: 0.898;
}