// THE PLAYER TAGS — `PlayerTagsHud`. A teammate's name and distance over their head, through walls; at the screen's edge,
// with a pointer, when they are off it.
//
// ⚠️ POSITION IS WRITTEN FROM CODE EVERY FRAME (the anchor is a world point); this sheet carries appearance only.

.player-tags
{
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tag
{
    position: absolute;

    // ⚠️ ON SCREEN THE TAG STANDS ON ITS POINT: centred across it and lifted clear, as `ReviveHud`'s marker is
    transform: translateX(-50%) translateY(-100%);

    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

// At an edge it is centred ON its spot, so it stays inside the margin on every side
.tag.edge
{
    transform: translateX(-50%) translateY(-50%);
}

.tag .name
{
    font-family: Inter;
    font-weight: bold;
    font-size: 17px;
    white-space: nowrap;
    color: rgba(150, 215, 255, 0.97);

    // Hard shadow, not an outline: drawn over snow, blood and muzzle flash, thin type disappears into all three
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.9);
}

.tag .dist
{
    margin-top: 1px;
    font-family: Inter;
    font-weight: bold;
    font-size: 12px;
    color: rgba(230, 236, 242, 0.78);
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.9);
}

// ⚠️ A DIAMOND, NOT A GLYPH — a square turned 45°, shown only at an edge, on the side facing the teammate
.tag .pointer
{
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: rgba(150, 215, 255, 0.97);
    border: 1px solid rgba(0, 0, 0, 0.8);
    transform: rotate(45deg);
    opacity: 0;
}

.tag.edge .pointer { opacity: 1; }
.tag.edge-left .pointer   { left: -16px; top: 12px; }
.tag.edge-right .pointer  { right: -16px; top: 12px; }
.tag.edge-top .pointer    { top: -16px; left: 45%; }
.tag.edge-bottom .pointer { bottom: -16px; left: 45%; }

// A downed teammate: red, the one colour that means "go to them" (the revive badge's own red)
.tag.down .name { color: rgba(255, 112, 100, 0.98); }
.tag.down .pointer { background-color: rgba(255, 112, 100, 0.98); }

// ═══ BASALT (`HudTheme`) — the map's face: Cinzel, bone for the name, ember for the pointer ════════════════════════════
//
// ⛔ ON INTER'S LINE BOX, so no row grows taller: 0.898 of Cinzel's own line (see `.round` in SurvivalHud.razor.scss)
.player-tags.theme-basalt .tag .name,
.player-tags.theme-basalt .tag .dist
{
    font-family: Cinzel;
    line-height: 0.898;
}

.player-tags.theme-basalt .tag .name { color: rgba(236, 226, 206, 0.98); }
.player-tags.theme-basalt .tag .pointer { background-color: rgba(248, 150, 72, 1); }
.player-tags.theme-basalt .tag.down .name { color: rgba(255, 112, 100, 0.98); }
.player-tags.theme-basalt .tag.down .pointer { background-color: rgba(255, 112, 100, 0.98); }