:root {
    --color-background: white;
    --color-on-background: black;

    --color-background-hover: #f5f5f5;
    --color-on-background-hover: black;

    --color-primary: #ff6a00;
    --color-primary-hover: #ff7a1a;
    --color-primary-light: rgba(255, 106, 0, 0.10);
    --color-on-primary: #17181c;

    --color-error: #de0000;
    --color-on-error: white;

    --color-border: #e5e7eb;
    --color-border-hover: #d5d8dd;

    --color-surface: #ffffff;
    --color-surface-hover: #fafafa;

    --color-discord: #5865f2;
}


/* =========================================================
   BASE
   ========================================================= */

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;

    background: #ffffff;
    color: #17181c;

    font-family:
        "Lexend Deca",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* =========================================================
   HEADER
   ========================================================= */

header,
main {
    background-color: #ffffff;
    color: #17181c;

    display: grid;

    grid-template-columns:
        minmax(16rem, 1fr)
        minmax(16rem, 2fr)
        minmax(16rem, 1fr);

    column-gap: 2rem;
}

header {
    display: flex;

    padding-inline: calc(25vw - 10rem);

    height: 4rem;

    background: #ffffff !important;

    color: #17181c !important;

    border-bottom:
        1px solid #e5e7eb;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.06);

    position: relative;

    z-index: 10;
}

@media screen and (min-width: 1366px) {
    header {
        display: grid;

        padding-inline: 0;
    }
}

header .logo {
    justify-self: end;

    align-self: center;

    display: flex;

    align-items: center;

    gap: 0.75rem;
}

header .nav {
    flex: 1;

    display: flex;

    align-items: center;
}


/* =========================================================
   HEADER LINKS
   ========================================================= */

header a {
    color: #33363c !important;

    text-decoration: none;

    font-weight: 600;

    opacity: 0.9;

    transition:
        color 0.15s ease,
        opacity 0.15s ease;
}

header a:hover {
    color: #ff6a00 !important;

    opacity: 1;

    text-decoration: none;
}


/* =========================================================
   MAIN
   ========================================================= */

main {
    height: 0;

    flex: 1;

    display: grid;

    grid-template-rows:
        minmax(0, 1fr);

    column-gap: 2rem;

    background: #ffffff !important;
}

main > div {
    overflow-y: auto;

    min-width: 0;
}


/* =========================================================
   SPINNER
   ========================================================= */

.spinner {
    display: flex;

    align-items: center;

    justify-content: center;

    grid-column: span 3;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

input[type="checkbox"] {
    height: 1.25rem;

    width: 1.25rem;

    cursor: pointer;

    margin: 0;

    accent-color: #ff6a00;
}


/* =========================================================
   GENERAL CARDS
   ========================================================= */

.card,
.panel,
.section,
.rules,
.guidelines,
.requirements {
    background: #ffffff;

    color: #17181c;

    border:
        1px solid #e5e7eb;

    border-radius:
        14px;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.045);

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease;
}

.card:hover,
.panel:hover,
.section:hover,
.rules:hover,
.guidelines:hover,
.requirements:hover {
    border-color:
        #d9dce1;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.07);
}


/* =========================================================
   LEVEL LIST
   ========================================================= */

.page-list .list-container {
    padding-inline: 1rem;

    padding-block:
        1rem;
}

.page-list .list {
    table-layout: auto;

    border-collapse:
        separate;

    border-spacing:
        0 0.25rem;
}


/* =========================================================
   LEVEL RANK
   ========================================================= */

.page-list .list .rank {
    text-align: end;

    padding-right:
        0.55rem;

    width:
        3rem;
}

.page-list .list .rank p {
    margin:
        0;

    color:
        #9a9da3 !important;

    font-size:
        0.68rem;

    font-weight:
        600;
}


/* =========================================================
   LEVEL CELL
   ========================================================= */

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


/* =========================================================
   LEVEL BUTTON
   ========================================================= */

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

    box-sizing:
        border-box;

    display:
        flex;

    align-items:
        center;

    min-height:
        2.35rem;

    padding:
        0.45rem 0.7rem;

    background:
        #f3f4f6 !important;

    color:
        #363940 !important;

    border:
        1px solid #e5e7eb;

    border-radius:
        8px;

    text-align:
        start;

    word-break:
        normal;

    overflow-wrap:
        anywhere;

    cursor:
        pointer;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.025);

    transition:
        background 140ms ease,
        border-color 140ms ease,
        color 140ms ease,
        transform 140ms ease,
        box-shadow 140ms ease;
}


/* =========================================================
   LEVEL NAME
   ========================================================= */

.page-list .list .level button .type-label-lg {
    color:
        inherit !important;

    font-size:
        0.74rem;

    font-weight:
        650;

    line-height:
        1.3;
}


/* =========================================================
   LEVEL HOVER
   ========================================================= */

.page-list .list .level button:hover {
    background:
        #eceef1 !important;

    color:
        #17181c !important;

    border-color:
        #d9dce1;

    transform:
        translateX(2px);

    box-shadow:
        0 3px 9px rgba(0, 0, 0, 0.055);
}


/* =========================================================
   ACTIVE LEVEL
   ========================================================= */

.page-list .list .level.active button {
    background:
        #e7e9ed !important;

    color:
        #17181c !important;

    border-color:
        #d2d5da;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.07);

    transform:
        translateX(2px);
}

.page-list .list .level.active button .type-label-lg {
    color:
        #17181c !important;
}


/* =========================================================
   ERROR LEVEL
   ========================================================= */

.page-list .list .level.error button {
    background:
        #f4f4f5 !important;

    color:
        #c0c2c6 !important;

    border-color:
        #e5e5e7;

    cursor:
        not-allowed;

    text-decoration:
        line-through;

    box-shadow:
        none;
}

.page-list .list .level.error button .type-label-lg {
    color:
        #c0c2c6 !important;
}


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

.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;
}


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

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

    justify-content:
        space-evenly;

    text-align:
        center;

    gap:
        2rem;
}

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

    flex-direction:
        column;

    align-items:
        center;

    gap:
        1rem;
}


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

.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 .hz {
    padding-block:
        1rem;
}

.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;
}


/* =========================================================
   LINKS IN LEVEL
   ========================================================= */

.page-list .meta-container .og a:hover,
.page-list .level-container .level .records a:hover {
    text-decoration:
        underline;
}


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

.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:
        var(--color-error);

    color:
        var(--color-on-error);

    border-radius:
        0.5rem;
}


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

.page-list .meta .editors-box {
    box-sizing:
        border-box;

    width:
        100%;

    margin:
        0;

    padding:
        1.25rem;

    background:
        #f3f4f6;

    color:
        #24262b;

    border:
        1px solid #dfe1e5;

    border-radius:
        14px;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.055);

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

.page-list .meta .editors-box:hover {
    border-color:
        #d3d6db;

    box-shadow:
        0 9px 24px rgba(0, 0, 0, 0.07);
}


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

.page-list .meta .editors-box__header {
    margin:
        0 0 1rem 0;

    padding-bottom:
        0.85rem;

    border-bottom:
        1px solid #dfe1e5;
}

.page-list .meta .editors-box__header h3 {
    margin:
        0;

    padding:
        0;

    color:
        #17181c !important;

    font-size:
        1.05rem;

    font-weight:
        750;

    letter-spacing:
        -0.02em;
}


/* =========================================================
   EDITOR LIST
   ========================================================= */

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

    flex-direction:
        column;

    gap:
        0.5rem;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


/* =========================================================
   EDITOR ITEM
   ========================================================= */

.page-list .meta .editors li {
    box-sizing:
        border-box;

    display:
        flex;

    align-items:
        center;

    gap:
        0.65rem;

    padding:
        0.65rem 0.75rem;

    margin:
        0;

    background:
        #ffffff;

    border:
        1px solid #e2e4e8;

    border-radius:
        9px;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.025);

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.page-list .meta .editors li:hover {
    background:
        #fffaf6;

    border-color:
        rgba(255, 106, 0, 0.28);

    transform:
        translateX(2px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.045);
}


/* =========================================================
   EDITOR ICON
   ========================================================= */

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

    height:
        22px;

    flex-shrink:
        0;
}


/* =========================================================
   EDITOR NAME
   ========================================================= */

.page-list .meta .editors li a,
.page-list .meta .editors li p {
    margin:
        0;

    font-size:
        0.75rem;

    line-height:
        1.4;
}


/* =========================================================
   GUIDELINES / REQUIREMENTS BOX
   ========================================================= */

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

    box-sizing:
        border-box;

    margin-top:
        0;

    padding:
        1.25rem;

    background:
        #f3f4f6;

    color:
        #24262b;

    border:
        1px solid #dfe1e5;

    border-radius:
        14px;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.055);

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

.page-list .requirements-box:hover {
    border-color:
        #d3d6db;

    box-shadow:
        0 9px 24px rgba(0, 0, 0, 0.07);
}


/* =========================================================
   GUIDELINES TITLE
   ========================================================= */

.page-list .requirements-box h3 {
    margin:
        0 0 1rem 0;

    padding-bottom:
        0.85rem;

    color:
        #17181c !important;

    font-size:
        1.05rem;

    font-weight:
        750;

    letter-spacing:
        -0.02em;

    border-bottom:
        1px solid #dfe1e5;
}


/* =========================================================
   INDIVIDUAL GUIDELINES
   ========================================================= */

.page-list .requirements-box p {
    position:
        relative;

    margin:
        0 0 0.6rem 0;

    padding:
        0.75rem 0.85rem 0.75rem 2.4rem;

    background:
        #ffffff !important;

    color:
        #5f636b !important;

    border:
        1px solid #e2e4e8;

    border-radius:
        9px;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.025);

    font-size:
        0.75rem;

    line-height:
        1.55;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.page-list .requirements-box p:last-child {
    margin-bottom:
        0;
}


/* =========================================================
   GUIDELINE CHECK ICON
   ========================================================= */

.page-list .requirements-box p::before {
    content:
        "✓";

    position:
        absolute;

    left:
        0.8rem;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        20px;

    height:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        6px;

    background:
        #fff0e3;

    color:
        #ff6a00;

    font-size:
        0.65rem;

    font-weight:
        800;
}


/* =========================================================
   GUIDELINE HOVER
   ========================================================= */

.page-list .requirements-box p:hover {
    background:
        #fffaf6 !important;

    border-color:
        rgba(255, 106, 0, 0.28);

    transform:
        translateX(2px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.045);
}


/* =========================================================
   DISCORD
   ========================================================= */

.discord,
.discord-link,
.discord-button,
.discord-icon,
.fa-discord,
[class*="discord"] {
    color:
        #5865f2 !important;
}

.discord-button {
    background:
        rgba(88, 101, 242, 0.10) !important;

    border:
        1px solid rgba(88, 101, 242, 0.22) !important;

    border-radius:
        9px;

    color:
        #5865f2 !important;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.discord-button:hover {
    background:
        rgba(88, 101, 242, 0.17) !important;

    border-color:
        rgba(88, 101, 242, 0.40) !important;

    color:
        #5865f2 !important;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav {
    display:
        flex;

    column-gap:
        2rem;
}

.nav .nav__tab {
    padding-top:
        4px;

    border-bottom:
        4px solid transparent;

    display:
        flex;

    align-items:
        center;

    padding-inline:
        0.5rem;

    transition:
        border-color 100ms ease;
}

.nav .nav__tab.router-link-active {
    border-color:
        var(--color-on-primary);
}

.nav .nav__tab:hover {
    border-color:
        var(--color-on-primary);
}

.nav .nav__actions {
    flex:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;
}

.nav .nav__actions .nav__icon {
    height:
        3rem;

    width:
        3rem;

    border:
        none;

    background-color:
        transparent;

    border-radius:
        50%;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transition:
        background-color 100ms ease;
}

.nav .nav__actions .nav__icon:hover {
    background-color:
        rgba(255, 255, 255, 0.2);
}

.nav .nav__actions .nav__icon img {
    height:
        1.5rem;
}

.nav .nav__actions .nav__cta {
    margin-left:
        1rem;

    padding:
        1rem;

    background-color:
        var(--color-on-primary);

    color:
        var(--color-primary);

    border-radius:
        0.5rem;

    box-shadow:
        0 1px 0.5rem 0 rgba(0, 0, 102, 0.5);

    transition:
        transform 100ms ease;
}

.nav .nav__actions .nav__cta:hover:not(:active) {
    transform:
        translateY(-2px);
}


/* =========================================================
   EDITOR
   ========================================================= */

.editor,
.editor-container,
.guidelines-editor,
.rules-editor {
    background:
        #ffffff !important;

    color:
        #17181c !important;

    border:
        1px solid #e5e7eb;

    border-radius:
        14px;

    overflow:
        hidden;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.045);

    margin-bottom:
        1rem;
}

.editor-header,
.editor-title,
.guidelines-header,
.rules-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        58px;

    padding:
        0 1.25rem;

    background:
        #fafafa !important;

    color:
        #17181c !important;

    border-bottom:
        1px solid #e5e7eb;
}

.editor-body,
.editor-content,
.guidelines-content,
.rules-content {
    padding:
        1.25rem;

    background:
        #ffffff !important;

    color:
        #17181c !important;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.toolbar,
.editor-toolbar {
    display:
        flex;

    align-items:
        center;

    gap:
        0.35rem;

    padding:
        0.55rem 0.7rem;

    margin-bottom:
        0.85rem;

    background:
        #f7f7f8 !important;

    border:
        1px solid #e3e5e8;

    border-radius:
        8px;
}

.toolbar button,
.editor-toolbar button {
    width:
        32px;

    height:
        32px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        transparent !important;

    color:
        #666b74 !important;

    border:
        0;

    border-radius:
        7px;

    box-shadow:
        none;
}

.toolbar button:hover,
.editor-toolbar button:hover {
    background:
        #fff0e3 !important;

    color:
        #ff6a00 !important;

    transform:
        none;

    box-shadow:
        none;
}


/* =========================================================
   TEXT EDITOR
   ========================================================= */

[contenteditable="true"] {
    min-height:
        160px;

    padding:
        1rem;

    background:
        #ffffff !important;

    color:
        #17181c !important;

    border:
        1px solid #dfe2e6;

    border-radius:
        8px;

    outline:
        none;

    line-height:
        1.6;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

[contenteditable="true"]:focus {
    border-color:
        #ff6a00;

    box-shadow:
        0 0 0 3px
        rgba(255, 106, 0, 0.10);
}


/* =========================================================
   INPUTS
   ========================================================= */

input,
textarea,
select {
    box-sizing:
        border-box;

    background:
        #ffffff !important;

    color:
        #17181c !important;

    border:
        1px solid #dfe2e6;

    border-radius:
        8px;

    padding:
        0.65rem 0.75rem;

    font-family:
        inherit;

    outline:
        none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

input:hover,
textarea:hover,
select:hover {
    border-color:
        #cfd3d8;
}

input:focus,
textarea:focus,
select:focus {
    border-color:
        #ff6a00;

    box-shadow:
        0 0 0 3px
        rgba(255, 106, 0, 0.10);
}


/* =========================================================
   BUTTONS
   ========================================================= */

button {
    border:
        0;

    border-radius:
        8px;

    padding:
        0.6rem 1rem;

    background:
        linear-gradient(
            135deg,
            #ff7415,
            #ff5d00
        ) !important;

    color:
        #ffffff !important;

    font-family:
        inherit;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 3px 9px
        rgba(255, 106, 0, 0.16);

    transition:
        background 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

button:hover {
    background:
        linear-gradient(
            135deg,
            #ff7a1a,
            #e95700
        ) !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(255, 106, 0, 0.18);
}

button:active {
    transform:
        translateY(0);
}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

button.secondary,
.secondary-button {
    background:
        #ffffff !important;

    color:
        #44474e !important;

    border:
        1px solid #dfe2e6;

    box-shadow:
        none;
}

button.secondary:hover,
.secondary-button:hover {
    background:
        #fff8f2 !important;

    color:
        #ff6a00 !important;

    border-color:
        #ff6a00;

    box-shadow:
        none;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    color:
        #ff6500;

    text-decoration:
        none;

    font-weight:
        600;

    transition:
        color 0.15s ease;
}

a:hover {
    color:
        #e95700;

    text-decoration:
        underline;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        #17181c !important;

    letter-spacing:
        -0.02em;
}

p {
    color:
        #666b74 !important;

    line-height:
        1.6;
}


/* =========================================================
   INFO BOX
   ========================================================= */

.info-box {
    padding:
        1rem 1.1rem;

    margin-bottom:
        1rem;

    background:
        rgba(255, 106, 0, 0.07);

    border:
        1px solid
        rgba(255, 106, 0, 0.20);

    border-radius:
        12px;

    color:
        #b94f00;
}


/* =========================================================
   BADGES
   ========================================================= */

.badge {
    display:
        inline-flex;

    align-items:
        center;

    padding:
        0.3rem 0.65rem;

    border-radius:
        999px;

    background:
        rgba(255, 106, 0, 0.08);

    border:
        1px solid
        rgba(255, 106, 0, 0.18);

    color:
        #ff6500;

    font-size:
        0.7rem;

    font-weight:
        700;
}


/* =========================================================
   DIVIDERS
   ========================================================= */

hr {
    border:
        0;

    border-top:
        1px solid #e5e7eb;

    margin:
        1.25rem 0;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width:
        8px;

    height:
        8px;
}

::-webkit-scrollbar-track {
    background:
        transparent;
}

::-webkit-scrollbar-thumb {
    background:
        #d5d8dd;

    border-radius:
        999px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        #bfc3c9;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 900px) {

    header,
    main {
        grid-template-columns:
            1fr;
    }

    main {
        height:
            auto;

        padding:
            1rem;
    }

    main > div {
        overflow:
            visible;
    }

    header {
        min-height:
            4rem;

        padding:
            0 1rem;
    }

    .requirements-box {
        margin-top:
            1rem;
    }
}


@media screen and (max-width: 600px) {

    .page-list .list {
        border-spacing:
            0 0.2rem;
    }

    .page-list .list .rank {
        padding-right:
            0.4rem;

        width:
            2.5rem;
    }

    .page-list .list .rank p {
        font-size:
            0.62rem;
    }

    .page-list .list .level button {
        min-height:
            2.15rem;

        padding:
            0.4rem 0.6rem;

        border-radius:
            7px;
    }

    .page-list .list .level button .type-label-lg {
        font-size:
            0.7rem;
    }

    .page-list .meta .editors-box {
        padding:
            0.85rem;
    }

    .page-list .requirements-box {
        padding:
            0.85rem;
    }

    .page-list .requirements-box h3 {
        font-size:
            1rem;
    }

    .page-list .requirements-box p {
        padding:
            0.7rem 0.7rem 0.7rem 2.25rem;
    }
}