/* =========================================================
   PAGE LIST
   DARK / COMPACT / SCREENSHOT STYLE
   ========================================================= */

.page-list {
    color: #ffffff;
}


/* =========================================================
   MAIN 3-COLUMN LAYOUT
   ========================================================= */

.page-list {
    display: grid;

    grid-template-columns:
        minmax(330px, 460px)
        minmax(500px, 1fr)
        minmax(300px, 440px);

    gap: 8px;

    width: 100%;

    box-sizing: border-box;
}


/* =========================================================
   LEFT LIST
   ========================================================= */

.page-list .list-container {
    min-width: 0;

    padding: 0.75rem 0.45rem;

    background: rgba(12, 13, 16, 0.58);

    border: 1px solid rgba(255, 255, 255, 0.025);

    border-radius: 10px;

    box-sizing: border-box;
}


/* List */

.page-list .list {
    width: 100%;

    table-layout: fixed;

    border-collapse: separate;

    border-spacing: 0 2px;
}


/* Rows */

.page-list .list tr {
    height: 25px;
}


/* Rank */

.page-list .list .rank {
    width: 42px;

    padding: 0 7px 0 0;

    text-align: right;

    color: rgba(255, 255, 255, 0.72);

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;
}


/* Level */

.page-list .list .level {
    width: 100%;

    padding: 0;
}


/* List button */

.page-list .list .level button {
    display: flex;

    align-items: center;

    width: 100%;

    height: 25px;

    padding: 0 9px;

    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.025);

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.025);

    border-radius: 4px;

    font-size: 12px;

    font-weight: 500;

    line-height: 23px;

    text-align: left;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    cursor: pointer;

    box-shadow: none;

    transition:
        background-color 0.12s ease,
        border-color 0.12s ease;
}


/* Hover */

.page-list .list .level button:hover {
    background: rgba(255, 255, 255, 0.055);

    border-color: rgba(255, 255, 255, 0.06);

    color: #ffffff;
}


/* Selected */

.page-list .list .level.active button {
    background: #ff7800;

    border-color: #ff7800;

    color: #ffffff;

    font-weight: 600;
}


/* =========================================================
   CENTER LEVEL CONTAINER
   ========================================================= */

.page-list .level-container {
    min-width: 0;

    padding: 0.75rem 0.5rem;

    box-sizing: border-box;
}


/* Actual level */

.page-list .level-container .level {
    display: flex;

    flex-direction: column;

    width: 100%;

    max-width: none;

    min-width: 0;

    padding: 0;

    gap: 0.45rem;

    box-sizing: border-box;

    color: #ffffff;

    background: transparent;

    border: 0;

    border-radius: 0;
}


/* =========================================================
   LEVEL TITLE
   ========================================================= */

.page-list .level-container .level h1,
.page-list .level-container .level h2 {
    margin: 0;

    padding: 0 0 5px;

    color: #ffffff;

    font-size: 1.15rem;

    font-weight: 600;

    line-height: 1.2;

    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.page-list .level-container .level > p {
    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 0.68rem;

    line-height: 1.4;
}


/* =========================================================
   VIDEO
   ========================================================= */

.page-list .level-container .level .video {
    width: 100%;

    aspect-ratio: 16 / 9;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background: #08090b;

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 6px;

    box-shadow: none;
}

.page-list .level-container .level .video iframe,
.page-list .level-container .level .video video {
    display: block;

    width: 100%;

    height: 100%;

    border: 0;
}


/* =========================================================
   TAGS
   ========================================================= */

.page-list .level-container .level .tags {
    display: flex;

    flex-wrap: wrap;

    gap: 4px;

    margin: 0;
}

.page-list .level-container .level .tags > * {
    padding: 2px 6px;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.045);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 4px;

    font-size: 0.62rem;

    line-height: 14px;
}


/* =========================================================
   STATS
   ========================================================= */

.page-list .level-container .level .stats {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    width: 100%;

    margin: 0;

    padding: 0;

    background: transparent;

    border: 0;

    gap: 0;
}

.page-list .level-container .level .stats li {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 50px;

    padding: 5px;

    background: transparent;

    border: 0;

    border-right: 1px solid rgba(255, 255, 255, 0.13);

    border-bottom: 1px solid rgba(255, 255, 255, 0.13);

    border-radius: 0;

    gap: 2px;
}

.page-list .level-container .level .stats li:nth-child(even) {
    border-right: 0;
}

.page-list .level-container .level .stats li:hover {
    transform: none;

    background: rgba(255, 255, 255, 0.02);
}


/* Stat labels */

.page-list .level-container .level .stats li label,
.page-list .level-container .level .stats li .label {
    color: #ff7800;

    font-size: 0.54rem;

    font-weight: 600;

    text-transform: uppercase;
}


/* Stat values */

.page-list .level-container .level .stats li strong,
.page-list .level-container .level .stats li .value {
    color: #ffffff;

    font-size: 0.9rem;

    font-weight: 500;
}


/* =========================================================
   AUTHORS
   ========================================================= */

.page-list .level-container .level .level-authors {
    display: grid;

    grid-template-columns: max-content 1fr;

    grid-auto-rows: max-content;

    gap: 4px 8px;

    margin: 0;

    padding: 5px 7px;

    background: transparent;

    border: 0;

    border-radius: 0;
}

.page-list .level-container .level .level-authors > * {
    color: rgba(255, 255, 255, 0.55);

    font-size: 0.62rem;
}


/* =========================================================
   RIGHT META / RECORDS
   ========================================================= */

.page-list .meta-container {
    min-width: 0;

    padding: 0.75rem 0.55rem;

    box-sizing: border-box;

    background: rgba(12, 13, 16, 0.58);

    border: 1px solid rgba(255, 255, 255, 0.025);

    border-radius: 10px;
}


/* Meta */

.page-list .meta {
    display: flex;

    flex-direction: column;

    gap: 0.55rem;

    width: 100%;

    color: #ffffff;
}


/* =========================================================
   RECORDS TITLE
   ========================================================= */

.page-list .meta .records-title,
.page-list .meta h2,
.page-list .meta h3 {
    color: #ffffff;

    margin: 0;

    padding-bottom: 5px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.25);

    font-size: 1.05rem;
}


/* =========================================================
   RECORDS
   ========================================================= */

.page-list .meta .records,
.page-list .level-container .level .records {
    width: 100%;

    table-layout: fixed;

    border-collapse: separate;

    border-spacing: 0 2px;

    color: #ffffff;

    font-size: 0.7rem;
}


/* Record row */

.page-list .meta .records tr,
.page-list .level-container .level .records tr {
    transition: background-color 0.12s ease;
}


/* Record hover */

.page-list .meta .records tr:hover,
.page-list .level-container .level .records tr:hover {
    background: rgba(255, 255, 255, 0.035);
}


/* Record cells */

.page-list .meta .records td,
.page-list .level-container .level .records td {
    padding-top: 4px;

    padding-bottom: 4px;

    color: rgba(255, 255, 255, 0.78);
}


/* User */

.page-list .meta .records .user,
.page-list .level-container .level .records .user {
    width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* Percentage */

.page-list .meta .records .percent,
.page-list .level-container .level .records .percent {
    text-align: right;

    color: #ffffff;

    font-variant-numeric: tabular-nums;
}


/* Hz */

.page-list .meta .records .hz,
.page-list .level-container .level .records .hz {
    text-align: right;

    color: rgba(255, 255, 255, 0.55);

    font-variant-numeric: tabular-nums;
}


/* Links */

.page-list .meta .records a,
.page-list .level-container .level .records a {
    color: #ffffff;

    text-decoration: none;
}

.page-list .meta .records a:hover,
.page-list .level-container .level .records a:hover {
    color: #ff7800;

    text-decoration: none;
}


/* =========================================================
   META INFORMATION
   ========================================================= */

.page-list .meta .errors {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.page-list .meta .errors .error {
    padding: 5px 7px;

    color: var(--color-error);

    background: rgba(255, 70, 70, 0.05);

    border: 1px solid rgba(255, 70, 70, 0.1);

    border-radius: 4px;

    font-size: 0.68rem;
}


/* =========================================================
   EDITORS
   ========================================================= */

.page-list .meta .editors {
    display: flex;

    flex-direction: column;

    gap: 1px;
}

.page-list .meta .editors li {
    display: flex;

    align-items: center;

    gap: 4px;

    padding: 3px 4px;

    color: rgba(255, 255, 255, 0.7);

    border-radius: 3px;
}

.page-list .meta .editors li:hover {
    background: rgba(255, 255, 255, 0.035);

    transform: none;
}

.page-list .meta .editors li img {
    width: 14px;

    height: 14px;

    object-fit: contain;

    border-radius: 3px;
}

.page-list .meta .editors li a {
    color: rgba(255, 255, 255, 0.75);

    text-decoration: none;
}

.page-list .meta .editors li a:hover {
    color: #ffffff;
}


/* =========================================================
   PACK
   ========================================================= */

.page-list .level-pack-panel {
    width: 100%;

    padding: 0.7rem;

    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid color-mix(
        in srgb,
        var(--pack-color) 22%,
        transparent
    );

    border-left: 3px solid var(--pack-color);

    border-radius: 5px;
}

.page-list .level-pack-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.5rem;

    margin-bottom: 0.5rem;
}

.page-list .level-pack-title {
    display: flex;

    align-items: center;

    gap: 0.4rem;

    min-width: 0;
}

.page-list .level-pack-title h3 {
    margin: 0;

    color: #ffffff;

    font-size: 0.85rem;
}

.page-list .level-pack-progress {
    flex-shrink: 0;

    color: rgba(255, 255, 255, 0.5);

    font-size: 0.65rem;
}

.page-list .level-pack-levels {
    display: flex;

    flex-direction: column;

    gap: 1px;
}

.page-list .level-pack-level {
    display: flex;

    align-items: center;

    gap: 0.4rem;

    padding: 4px;

    color: rgba(255, 255, 255, 0.8);

    border-radius: 3px;
}

.page-list .level-pack-level:hover {
    background: rgba(255, 255, 255, 0.035);

    transform: none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .page-list {
        grid-template-columns:
            300px
            minmax(450px, 1fr);
    }

    .page-list .meta-container {
        grid-column: 2;
    }
}


@media (max-width: 800px) {

    .page-list {
        display: flex;

        flex-direction: column;
    }

    .page-list .list-container,
    .page-list .level-container,
    .page-list .meta-container {
        width: 100%;
    }

    .page-list .meta-container {
        grid-column: auto;
    }
}