/* osu!idle: the game's near-black with osu!'s pink.
   All selectors stay under #site-osu-idle. */

#site-osu-idle::before {
    background:
        radial-gradient(80% 60% at 88% 18%, rgba(255, 102, 171, .10), transparent 62%),
        linear-gradient(180deg, var(--bg), #0f0d11 50%, var(--bg));
}

#site-osu-idle .id__skills { margin-top: 2rem; }

#site-osu-idle .id__skills-label {
    margin: 0 0 .7rem;
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--mute);
}

#site-osu-idle .id__skills ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

#site-osu-idle .id__skills li {
    padding: .3rem .7rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
    font-size: .8rem;
    font-weight: 700;
    color: var(--dim);
}

#site-osu-idle .id__caption {
    margin: 1rem .3rem 0;
    font-size: .82rem;
    color: var(--mute);
    max-width: 52ch;
}

/* The profile stacks taller once the skill rows lose their width, so the frame
   needs more room on narrow screens than it does on a desktop column. */
@media (max-width: 620px) {
    /* the profile stacks a little taller once it loses width */
    #site-osu-idle .frame__view { height: 635px; }
}