.page-list .list-container,
.page-list .level-container,
.page-list .meta-container {
    padding-block: 2rem;
}
.page-list .list-container {
    padding-inline: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.page-list .list-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 0.75rem;
    background: var(--color-background);
    color: var(--color-on-background);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.page-list .list-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(103, 190, 217, 0.35);
}
.page-list .list-empty {
    padding: 1rem;
    opacity: 0.7;
}
.page-list .featured {
    color: #ffc93c;
    text-shadow: 0 0 2px rgba(255, 201, 60, 0.7), 0 0 6px rgba(255, 177, 0, 0.4);
}
main.dark .page-list .featured {
    color: #ffd873;
    text-shadow: 0 0 2px rgba(255, 216, 115, 0.7), 0 0 7px rgba(255, 177, 0, 0.45);
}
.page-list .epic {
    color: #a855f7;
    text-shadow: 0 0 2px rgba(168, 85, 247, 0.7), 0 0 6px rgba(147, 51, 234, 0.4);
}
main.dark .page-list .epic {
    color: #c894fb;
    text-shadow: 0 0 2px rgba(200, 148, 251, 0.7), 0 0 7px rgba(147, 51, 234, 0.45);
}
.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 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color-background);
    color: var(--color-on-background);
    border: none;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    text-align: start;
    word-break: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background-color 120ms ease, transform 120ms ease;
}
.page-list .list .level button:active {
    transform: scale(0.98);
}
.page-list .list .level button .difficulty-face {
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    object-fit: contain;
}
.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-right: 2rem;
    max-width: 48rem;
}
.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: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    text-align: center;
    gap: 1.5rem;
    margin: 0;
    padding: 1.25rem 1rem;
    list-style: none;
    background-color: var(--color-background-hover);
    border-radius: 0.75rem;
}
.page-list .level-container .level .stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.page-list .level-container .level .stats .device-icon {
    height: 1.5rem;
    vertical-align: middle;
}
.page-list .level-container .level .stats .tier {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.page-list .level-container .level .stats .tier-icon {
    height: 1.75rem;
    width: auto;
}
.page-list .level-container .level .records {
    table-layout: fixed;
}
.page-list .level-container .level .records tr td:not(:last-child) {
    padding-right: 1rem;
}
.page-list .level-container .level .records .percent,
.page-list .level-container .level .records .user,
.page-list .level-container .level .records .device,
.page-list .level-container .level .records .hz {
    padding-block: 0.875rem;
}
.page-list .level-container .level .records tr.record {
    border-bottom: 1px solid rgba(127, 127, 127, 0.2);
    transition: background-color 120ms ease;
}
.page-list .level-container .level .records tr.record:hover {
    background-color: var(--color-background-hover);
}
.page-list .level-container .level .records .device {
    width: 1.5rem;
    text-align: center;
}
.page-list .level-container .level .records .device img {
    height: 1.25rem;
    vertical-align: middle;
    opacity: 0.75;
}
.page-list .level-container .level .records .user {
    width: 100%;
}
.page-list .level-container .level .records .percent,
.page-list .level-container .level .records .hz {
    text-align: end;
}
.page-list .meta-container .og {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background-color: var(--color-background-hover);
}
.page-list .meta-container .og p {
    opacity: 0.85;
}
.page-list .meta-container .og a:hover,
.page-list .level-container .level .records a:hover {
    text-decoration: underline;
}
.page-list .meta {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.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 .editors {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.page-list .meta .editors li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.page-list .meta .editors li img {
    height: 1.25rem;
}
.page-list .meta .editors li a:hover {
    text-decoration: underline;
}

/* Red-pink gradient theme for the list page */
.page-list {
    --list-red: #e11d48;
    --list-pink: #ff4d8d;
    --list-gradient: linear-gradient(135deg, var(--list-red) 0%, var(--list-pink) 100%);
    --list-tint: rgba(255, 77, 141, 0.12);
    background: linear-gradient(170deg, #ffffff 0%, #fff1f6 55%, #ffe3ee 100%);
}
.page-list.dark {
    --list-tint: rgba(255, 77, 141, 0.18);
    background: linear-gradient(170deg, #1c1b1f 0%, #2a1120 60%, #3a1230 100%);
}
.page-list .list-search input:focus {
    border-color: var(--list-pink);
    box-shadow: 0 0 0 3px rgba(255, 77, 141, 0.35);
}
.page-list .list .rank p {
    background: var(--list-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}
.page-list .list .level:not(.active) button:hover {
    background: var(--list-tint);
}
.page-list .list .level.active button {
    background: var(--list-gradient);
    color: white;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
}
.page-list .list {
    border-collapse: separate;
    border-spacing: 0 0.75rem;
}
.page-list .list .level button {
    outline: none;
}
.page-list .list .level button:focus-visible {
    outline: 2px solid var(--list-pink);
    outline-offset: 2px;
}
.page-list .level-container .level h1:not(.featured):not(.epic) {
    background: var(--list-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* The gradient only paints inside the box, so leave room above and below for accents and descenders */
    padding: 0.2em 0 0.3em;
    margin: -0.2em 0 -0.3em;
}
.page-list .level-container .level .stats {
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.12), rgba(255, 77, 141, 0.2));
    border: 1px solid rgba(255, 77, 141, 0.3);
}
.page-list .meta-container .og {
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.14), rgba(255, 77, 141, 0.14));
    border-left: 4px solid var(--list-red);
}