/* Preserve portrait proportions inside the existing circular profile frame. */
.king-profile-avatar img {
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

@media only screen and (max-width: 600px) {
    /* Follow the page width instead of the legacy 390px cap / viewport width. */
    .king-profile-top {
        box-sizing: border-box;
        width: calc(100% - 24px);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .king-profile-top ~ #primary.profile-content-area,
    .king-profile-top ~ #primary.content-area.user-profile,
    .king-profile-top ~ #primary #king-pagination-02,
    .king-profile-top ~ #primary #king-pagination-02 .site-main {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .king-profile-top ~ #primary.profile-content-area,
    .king-profile-top ~ #primary.content-area.user-profile {
        width: calc(100% - 24px);
        margin-left: auto;
        margin-right: auto;
    }

    .king-profile-top ~ #primary .splot-profile-filters.king-3rd-nav {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Static light blooms for profiles without a configured cover image. */
.king-profile-top.splot-profile--glow {
    background: #101019;
    box-shadow: inset 0 0 0 1px rgba(196, 162, 248, .16);
}
.king-profile-top.splot-profile--glow > .profile-cover {
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 38% 12%, rgba(135, 67, 209, .48), transparent 58%),
        radial-gradient(ellipse at 95% 5%, rgba(28, 133, 167, .32), transparent 52%),
        radial-gradient(ellipse at 0% 55%, rgba(86, 57, 150, .18), transparent 55%),
        #101019;
}
.king-profile-top.splot-profile--glow > .profile-cover::before {
    background: none;
    pointer-events: none;
}
.king-profile-top.splot-profile--has-cover > .profile-cover {
    border-radius: inherit;
}
.king-profile-top.splot-profile--has-cover > .profile-cover::before {
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(8, 8, 17, .28), rgba(8, 8, 17, .58));
    pointer-events: none;
}
.king-profile-top .profile-stats,
.king-profile-top .king-profile-badges {
    background: rgba(12, 12, 22, .72);
}
.king-profile-top .splot-profile-nav.king-profile-links {
    background: #11111b;
    box-shadow: inset 0 1px 0 rgba(196, 162, 248, .12);
}
.king-profile-top .profile-stats-num { color: #bcb8ca; }
.king-profile-top .king-profile-info { color: #f4f0fa; }
.king-profile-top .king-profile-avatar img {
    border-color: rgba(204, 178, 247, .38);
}