.citizen-avatar {
    --citizen-avatar-size: 40px;
    position: relative;
    flex-shrink: 0;
    display: block;
    width: var(--citizen-avatar-size);
    height: var(--citizen-avatar-size);
}

.citizen-avatar--18 { --citizen-avatar-size: 18px; }
.citizen-avatar--22 { --citizen-avatar-size: 22px; }
.citizen-avatar--28 { --citizen-avatar-size: 28px; }
.citizen-avatar--32 { --citizen-avatar-size: 32px; }
.citizen-avatar--36 { --citizen-avatar-size: 36px; }
.citizen-avatar--40 { --citizen-avatar-size: 40px; }
.citizen-avatar--44 { --citizen-avatar-size: 44px; }
.citizen-avatar--52 { --citizen-avatar-size: 52px; }
.citizen-avatar--72 { --citizen-avatar-size: 72px; }
.citizen-avatar--84 { --citizen-avatar-size: 84px; }
.citizen-avatar--profile { --citizen-avatar-size: 90px; }

@media (min-width: 700px) {
    .citizen-avatar--profile { --citizen-avatar-size: 120px; }
}

.citizen-avatar__content {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 0;
    background: linear-gradient(160deg, #2a3558, #18203a);
    display: grid;
    place-items: center;
    z-index: 1;
}

.citizen-avatar--framed .citizen-avatar__content {
    /* Circular hole in Frame_new2.webp — keep square footprint, round clip to fit frame. */
    inset: 12%;
    border-radius: 50%;
}

.citizen-avatar--framed .citizen-avatar__img,
.citizen-avatar--framed .citizen-avatar__initial,
.citizen-avatar--framed .citizen-avatar__emoji,
.citizen-avatar--framed .citizen-avatar__text {
    border-radius: 50%;
}

.citizen-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    border-radius: 0;
}

.citizen-avatar__initial,
.citizen-avatar__emoji,
.citizen-avatar__text {
    font-weight: 800;
    color: #f3d287;
    line-height: 1;
    user-select: none;
}

.citizen-avatar__initial {
    font-size: calc(var(--citizen-avatar-size) * 0.42);
}

.citizen-avatar__text {
    font-size: calc(var(--citizen-avatar-size) * 0.34);
    letter-spacing: 0.04em;
}

.citizen-avatar__emoji {
    font-size: calc(var(--citizen-avatar-size) * 0.48);
}

.citizen-avatar__frame {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.citizen-avatar--framed.citizen-avatar--profile .citizen-avatar__frame {
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
}

.citizen-avatar.citizen-avatar--fill {
    width: 100%;
    height: 100%;
}

.citizen-avatar.citizen-avatar--block {
    display: block;
    width: 100%;
    height: 100%;
}