// POWERUP TIMERS
//
// A centred row above the bottom edge, under the pickup banner.

.pw-timers
{
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;

    // ⚠️ CENTRED BY THE ROOT, the way DownedHud does it — its `.bleed` is absolutely
    // positioned with only a `bottom` and centres because the root sets these. That
    // is the pattern in this project that is known to work; the powerup banner cost
    // two attempts by trying to centre the child itself.
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-family: Inter;
}

.row
{
    position: absolute;

    // ⚠️ BELOW the pickup banner (15%), so a powerup collected while another is
    // running does not print its name over the timers.
    bottom: 6%;

    flex-direction: row;
    align-items: center;
    gap: 22px;
}

.slot
{
    flex-direction: column;
    align-items: center;
    gap: 2px;

    .icon
    {
        width: 46px;
        height: 46px;

        // ⚠️ The BO1 icons are white-on-transparent, so they need no tint — but they
        // DO need dimming, because at full white they outshine the health bar.
        opacity: 0.9;
    }

    .time
    {
        font-size: 22px;
        font-weight: 700;
        color: rgba( 255, 255, 255, 0.9 );
        text-shadow: 0px 2px 5px rgba( 0, 0, 0, 0.9 );

        // ⚠️ Tabular so the row does not jitter as digits change width — a countdown
        // going 10 → 9 shifts every icon beside it otherwise.
        font-variant-numeric: tabular-nums;
    }

    // ⛔ THE LAST FIVE SECONDS GO RED AND PULSE. The whole point of a countdown is
    // knowing when to push and when to back off; a number quietly reaching zero
    // gives you no moment to react to.
    &.ending
    {
        .icon, .time
        {
            color: rgba( 255, 90, 70, 1 );
        }

        animation: pw-ending 0.5s infinite;
        animation-timing-function: ease-in-out;
    }
}

@keyframes pw-ending
{
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
}

// ═══ BASALT (`HudTheme`) — the map's face, Cinzel on the powerup timers ═══
//
// *"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.
.pw-timers.theme-basalt
{
    font-family: Cinzel;
    line-height: 0.898;
}