// The floating "+50". See PointsPopupHud.razor for why this is its own panel.
//
// ⚠️ ANCHORED TO THE SCREEN, NOT TO THE POINTS BLOCK. It is a separate panel now,
// so it cannot be positioned relative to `.points` — these offsets have to match
// where SurvivalHud puts the counter:
//
//     .right   { right: 40px; bottom: 48px; gap: 62px; }
//     .points  { portrait 52px + gap 10px + value min-width 160px }
//
// Right edge of the popups therefore sits at 40 + 160 + 10 = 210px from the
// screen's right, which is the portrait's right edge — so a number starts over
// the icon and slides left off it.
//
// ⚠️ THE VERTICAL IS AN ESTIMATE and the one value most likely to need nudging:
// it depends on the height of the weapon/round row below it, which is content
// driven. `nz_points_pos` moves this live rather than by recompiling.

.point-pops
{
    position: absolute;
    right: 200px;
    bottom: 175px;

    width: 220px;
    height: 56px;

    // Never eat a click — this floats over the HUD's right-hand column.
    pointer-events: none;

    .pop
    {
        position: absolute;
        right: 0px;
        top: 50%;
        margin-top: -20px;

        white-space: nowrap;
        font-size: 32px;
        font-weight: 700;
        text-shadow: 0px 2px 5px rgba( 0, 0, 0, 0.9 );

        // ⚠️ MUST MATCH PointsPopups.Life. C# deletes the element when its age
        // passes Life; if this is longer the number is cut off mid-flight, and
        // if shorter it sits invisible holding a MaxVisible slot.
        animation-duration: 0.45s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;

        // Gold under 100, green at 100+, red for a spend — the colours ARE the
        // information, so a headshot reads differently from a body shot.
        &.gold  { color: rgba( 255, 200,  0, 1 ); }
        &.big   { color: rgba( 100, 255, 70, 1 ); }
        &.spend { color: rgba( 255,   0,  0, 1 ); }

        // Five drift lanes, scattering simultaneous popups so they do not draw
        // on top of each other — what the original's random `diry` was for.
        &.d0 { animation-name: nz-point-pop-a; }
        &.d1 { animation-name: nz-point-pop-b; }
        &.d2 { animation-name: nz-point-pop-c; }
        &.d3 { animation-name: nz-point-pop-d; }
        &.d4 { animation-name: nz-point-pop-e; }
    }
}

// Horizontal travel and fade are identical in all five — only the vertical
// differs, matching the original's random -25..25.
@keyframes nz-point-pop-a
{
    0%   { opacity: 1; transform: translateX( 0px )   translateY( 0px ); }
    100% { opacity: 0; transform: translateX( -55px ) translateY( -25px ); }
}

@keyframes nz-point-pop-b
{
    0%   { opacity: 1; transform: translateX( 0px )   translateY( 0px ); }
    100% { opacity: 0; transform: translateX( -55px ) translateY( -12px ); }
}

@keyframes nz-point-pop-c
{
    0%   { opacity: 1; transform: translateX( 0px )   translateY( 0px ); }
    100% { opacity: 0; transform: translateX( -55px ) translateY( 0px ); }
}

@keyframes nz-point-pop-d
{
    0%   { opacity: 1; transform: translateX( 0px )   translateY( 0px ); }
    100% { opacity: 0; transform: translateX( -55px ) translateY( 12px ); }
}

@keyframes nz-point-pop-e
{
    0%   { opacity: 1; transform: translateX( 0px )   translateY( 0px ); }
    100% { opacity: 0; transform: translateX( -55px ) translateY( 25px ); }
}

// ═══ BASALT (`HudTheme`) — the map's face, Cinzel on the points ═══
//
// *"i want the font for this map to affect … all hud messages that appear on screen"* (2026-09-27). The class is put on from `OnUpdate` (`HudTheme.Wear`), because this
// tree is built once and a class in its razor would keep the theme it was built under.
// ⛔ 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.
.point-pops.theme-basalt
{
    font-family: Cinzel;
    line-height: 0.898;
}