.page-list .list-container,
.page-list .level-container,
.page-list .meta-container {
    padding-block: 2rem;
}
 
.page-list .list-container {
    padding-inline: 1rem;
}
 
.page-list .meta-container {
    padding-right: 2rem;
}
 
.page-list .list {
    table-layout: auto;
}
 
.page-list .list .rank {
    text-align: end;
    padding-right: 1rem;
}
 
.page-list .list .level {
    width: 100%;
}
 
.page-list .list .level button {
    background-color: var(--color-background);
    color: var(--color-on-background);
    border: none;
    border-inline-start: 0.3rem solid transparent;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: start;
    word-break: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background-color 75ms ease-out;
}
 
.page-list .list .level.error button {
    color: var(--color-error);
    cursor: not-allowed;
    text-decoration: line-through;
}
 
.page-list .list .level button:hover {
    background-color: var(--color-background-hover);
    color: var(--color-on-background-hover);
}
 
.page-list .list .level.active button {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}
 
.page-list .level-container .level {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-inline: 2rem;
    max-width: 48rem;
}
 
.page-list .level-container .tier {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 2rem;
    max-width: 100%;
    text-align: center;
}
 
.page-list .level-container .level .level-authors {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-auto-rows: max-content;
    gap: 1rem;
}
 
.page-list .level-container .level .video {
    aspect-ratio: 16/9;
}
 
.page-list .level-container .level .stats {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    text-align: center;
    column-gap: 3rem;
}
 
.page-list .level-container .level .stats.stats-single {
    display: flex;
    justify-content: center;
}
 
.page-list .level-container .level .stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
 
.page-list .level-container .level .records-search-container {
    margin-top: -1rem;
}
 
.page-list .level-container .level .records-search-container .search {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
}
 
.page-list .level-container .level .records {
    display: flex;
    flex-direction: column;
}
 
.page-list .level-container .level .records .records-row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) 2rem 5.5rem 4.5rem 5.5rem;
    column-gap: 1rem;
    align-items: center;
    font-family: "Lexend Deca", sans-serif;
    font-size: 17.1428571429px;
    font-weight: 500;
}
 
.page-list .level-container .level .records .records-row.record {
    padding-block: 1rem;
    border-bottom: 1px solid var(--color-background-hover);
}
 
.page-list .level-container .level .records .records-row.record:last-child {
    border-bottom: none;
}
 
.page-list .level-container .level .records .records-row .percent,
.page-list .level-container .level .records .records-row .hz {
    text-align: end;
}
 
.page-list .level-container .level .records .records-row .proof {
    text-align: end;
    white-space: nowrap;
}
 
.page-list .level-container .level .records .records-row .user {
    min-width: 0;
}
 
.page-list .level-container .level .records .records-row .user .user-container {
    min-width: 0;
}
 
.page-list .level-container .level .records .records-row .user .type-label-lg {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
 
.page-list .level-container .level .records .records-row .user .flag {
    flex-shrink: 0;
}
 
@media only screen and (max-width: 640px) {
    .page-list .level-container .level .records .records-row {
        grid-template-columns: 3.25rem minmax(0, 1fr) 1.5rem 3.5rem 3.75rem 3.25rem;
        column-gap: 0.5rem;
        font-size: 14px;
    }
 
    .page-list .level-container .level .records .record-header {
        font-size: 0.62rem;
    }
 
    .page-list .level-container .level .records .records-row .user .flag {
        width: 1.4rem;
    }
}
 
.page-list .level-container .level .records .record-header {
    padding-block: 0.5rem 0.75rem;
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-on-background);
    opacity: 0.75;
    border-bottom: 1px solid var(--color-background-hover);
}
.page-list .meta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
 
.page-list .meta .errors {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
 
.page-list .meta .errors .error {
    padding: 1rem;
    background-color: var(--color-error);
    color: var(--color-on-error);
    border-radius: 0.5rem;
}
 
.page-list .meta .staff {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
 
.page-list .meta .staff-groups {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
 
.page-list .meta .staff-group-label {
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    font-weight: 600;
    color: #9a99a1;
}
 
.page-list .meta .staff li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
 
.page-list .meta .staff li img {
    height: 1.25rem;
}
 
.notice {
    border: 4px solid var(--color-primary);
    font: inherit;
    padding: 1.3rem;
    color: var(--color-on-background) !important;
    border-radius: 0.5rem;
    box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 102, 0.5);
    margin:5px;
    text-align:center;
}
 
.pack {
    border-radius: 25px;
    padding: 3px 10px; 
    text-align: center;
    display: inline-block;
    font-family: "Lexend Deca", sans-serif;
    width: fit-content;
    text-wrap: nowrap;
    background: rgba(89, 89, 89, 0.2);
}
 
.tier-info {
    text-align: end;
    justify-content: end;
    align-self: flex-end;
    text-wrap: nowrap;
    padding: 0rem;
}
 
.flag {
    width: 2.2rem;
    display: inline-block;
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    width: 20px;
    height: auto;
}
 
.user-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
 
/* Keeps a clan tag and the username right after it on the same line.
   Needed because .type-label-lg (used on the username link) adds ::before
   and ::after pseudo-elements with display:table for line-height control —
   that forces a block-level line break around the link, which otherwise
   pushes it onto its own line below an inline sibling like .clan-tag.
   Explicit flex here overrides that. */
.username-clip {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
}
 
/* .clan-tag uses font: inherit, which normally works fine — but here it
   inherits from .username-clip (its actual DOM parent), not from its
   sibling username link, which sets its own size via .type-label-lg.
   Since that size never cascades sideways to a sibling, the tag was
   falling back to the ambient body font-size instead of matching the
   username next to it. Matching .type-label-lg's font metrics directly
   (without its ::before/::after quirks — the tag doesn't need those)
   keeps both the same size. */
.username-clip .clan-tag {
    font-size: 17.1428571429px;
    font-weight: 500;
    line-height: 20px;
    /* .clan-tag has its own margin-right (clans.css) meant for contexts
       where it isn't already inside a flex row with a gap — here that
       would stack on top of .username-clip's gap and make the space
       wider than intended, so it's zeroed out and gap alone controls it. */
    margin-right: 0;
}
 
/* The username link itself carries .type-label-lg, whose ::before/::after
   (display:table, with negative margins tuned for normal inline/block
   flow) fight with the outer flex's align-items:center once the link is
   treated as a flex item — that's what was clipping/misaligning the text.
   Making the link itself an inline-flex container too routes its own
   pseudo-elements through flex layout instead, which is the same fix
   Leaderboard.js already uses for this exact class. */
.username-clip .type-label-lg {
    display: inline-flex;
    align-items: center;
}