/*
============================================================
Motmaître — ARCHIVES
============================================================
*/


.archives-modal[hidden] {
    display:
        none;
}


.archives-modal {
    position:
        fixed;

    z-index:
        8050;

    inset:
        0;

    display:
        flex;

    padding:
        24px;

    align-items:
        center;

    justify-content:
        center;
}


.archives-modal-backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            20,
            20,
            20,
            0.40
        );

    backdrop-filter:
        blur(
            4px
        );

    animation:
        archives-backdrop-in
        0.20s
        ease-out
        both;
}


.archives-dialog {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    width:
        min(
            560px,
            100%
        );

    max-height:
        min(
            680px,
            calc(
                100vh
                - 48px
            )
        );

    overflow:
        hidden;

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

    border-radius:
        20px;

    background:
        #ffffff;

    box-shadow:
        0
        30px
        90px
        rgba(
            0,
            0,
            0,
            0.24
        );

    flex-direction:
        column;

    animation:
        archives-dialog-in
        0.32s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


.archives-dialog-handle {
    display:
        none;
}


.archives-dialog-header {
    display:
        flex;

    padding:
        24px
        24px
        18px;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;
}


.archives-kicker {
    margin-bottom:
        3px;

    color:
        #999;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.archives-title {
    margin:
        0;

    color:
        #202020;

    font-size:
        22px;

    letter-spacing:
        -0.035em;
}


.archives-count {
    margin:
        5px
        0
        0;

    color:
        #999;

    font-size:
        11px;
}


.archives-close-button {
    display:
        inline-flex;

    width:
        38px;

    height:
        38px;

    flex:
        0 0 auto;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        #f2f2ef;

    color:
        #555;

    font:
        inherit;

    font-size:
        25px;

    line-height:
        1;

    align-items:
        center;

    justify-content:
        center;

    cursor:
        pointer;
}


.archives-scroll {
    overflow-y:
        auto;

    padding:
        0
        14px
        18px;

    overscroll-behavior:
        contain;
}


.archives-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.archive-item {
    display:
        flex;

    width:
        100%;

    padding:
        14px
        15px;

    border:
        1px solid
        transparent;

    border-radius:
        13px;

    background:
        #f6f6f3;

    color:
        #222;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    text-align:
        left;

    cursor:
        pointer;

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


.archive-item:hover {
    border-color:
        rgba(
            0,
            0,
            0,
            0.08
        );

    background:
        #efefeb;

    transform:
        translateY(
            -1px
        );
}


.archive-item-main {
    display:
        flex;

    min-width:
        0;

    flex-direction:
        column;
}


.archive-item-number {
    font-size:
        13px;

    font-weight:
        800;
}


.archive-item-date {
    margin-top:
        3px;

    overflow:
        hidden;

    color:
        #8c8c88;

    font-size:
        11px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.archive-item-state {
    display:
        inline-flex;

    flex:
        0 0 auto;

    color:
        #888;

    align-items:
        center;

    gap:
        6px;

    font-size:
        11px;

    font-weight:
        750;
}


.archive-item.is-completed
.archive-item-state {
    color:
        #287b4d;
}


.archive-state-icon {
    display:
        inline-flex;

    width:
        21px;

    height:
        21px;

    border-radius:
        50%;

    background:
        #dff3e7;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        12px;
}


.archive-state-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #ff9b45;
}


.archive-item-arrow {
    font-size:
        17px;
}


.archives-state {
    padding:
        38px
        18px;

    color:
        #999;

    font-size:
        12px;

    line-height:
        1.55;

    text-align:
        center;
}


.archives-empty-icon {
    display:
        block;

    margin-bottom:
        9px;

    font-size:
        28px;
}


.archives-error {
    color:
        #a54242;
}


body.archives-modal-open {
    overflow:
        hidden;
}


@keyframes archives-backdrop-in {

    from {
        opacity:
            0;
    }

    to {
        opacity:
            1;
    }
}


@keyframes archives-dialog-in {

    from {
        opacity:
            0;

        transform:
            translateY(
                10px
            )
            scale(
                0.97
            );
    }

    to {
        opacity:
            1;

        transform:
            translateY(
                0
            )
            scale(
                1
            );
    }
}


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

@media (
    max-width: 600px
) {

    .archives-modal {
        padding:
            0;

        align-items:
            flex-end;
    }


    .archives-dialog {
        width:
            100%;

        max-height:
            84vh;

        border:
            0;

        border-radius:
            22px
            22px
            0
            0;

        animation:
            archives-sheet-in
            0.34s
            cubic-bezier(
                0.22,
                1,
                0.36,
                1
            )
            both;
    }


    .archives-dialog-handle {
        display:
            block;

        width:
            38px;

        height:
            4px;

        margin:
            10px
            auto
            0;

        border-radius:
            999px;

        background:
            #d8d8d4;
    }


    .archives-dialog-header {
        padding:
            15px
            17px
            15px;
    }


    .archives-scroll {
        padding:
            0
            10px
            calc(
                16px
                +
                env(
                    safe-area-inset-bottom
                )
            );
    }


    .archive-item {
        padding:
            14px;
    }
}


@keyframes archives-sheet-in {

    from {
        transform:
            translateY(
                100%
            );
    }

    to {
        transform:
            translateY(
                0
            );
    }
}


@media (
    prefers-reduced-motion:
        reduce
) {

    .archives-modal-backdrop,
    .archives-dialog {
        animation:
            none;
    }
}


/* ==========================================================
   ACTIVE ARCHIVE GAME
   ========================================================== */

.archive-mode-bar[hidden] {
    display:
        none;
}


.archive-mode-bar {
    display:
        flex;

    width:
        100%;

    margin-bottom:
        16px;

    padding:
        13px
        14px;

    border:
        1px solid
        rgba(
            226,
            112,
            38,
            0.18
        );

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                244,
                229,
                0.96
            ),
            rgba(
                255,
                250,
                242,
                0.96
            )
        );

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    box-sizing:
        border-box;
}


.archive-mode-content {
    display:
        flex;

    min-width:
        0;

    flex-direction:
        column;
}


.archive-mode-eyebrow {
    margin-bottom:
        2px;

    color:
        #c3682b;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        0.12em;
}


.archive-mode-title {
    color:
        #25211e;

    font-size:
        13px;

    font-weight:
        850;
}


.archive-mode-date {
    margin-top:
        2px;

    color:
        #8d8076;

    font-size:
        10px;
}


.archive-return-button {
    flex:
        0 0 auto;

    min-height:
        36px;

    padding:
        0
        13px;

    border:
        0;

    border-radius:
        10px;

    background:
        #25211e;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform
        0.15s ease,
        background
        0.15s ease;
}


.archive-return-button:hover {
    background:
        #111111;

    transform:
        translateY(
            -1px
        );
}


.archive-return-button:active {
    transform:
        scale(
            0.97
        );
}


@media (
    max-width: 600px
) {

    .archive-mode-bar {
        padding:
            12px;
    }


    .archive-return-button {
        padding:
            0
            11px;

        font-size:
            9px;
    }
}

/* ==========================================================
   ARCHIVES V14 — LOADING SKELETONS
   ========================================================== */

.archives-loading[hidden],
.archive-transition-skeleton[hidden] {
    display:
        none;
}


.archives-loading {
    display:
        grid;

    gap:
        8px;

    padding:
        2px
        0
        4px;
}


.archives-loading-row {
    display:
        flex;

    min-height:
        66px;

    padding:
        14px
        15px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.035
        );

    border-radius:
        13px;

    background:
        #f6f6f3;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;
}


.archives-loading-main,
.archives-loading-state,
.archive-skeleton-block {
    display:
        block;

    border-radius:
        999px;

    background:
        linear-gradient(
            100deg,
            #ecece8 20%,
            #f7f7f4 38%,
            #ecece8 56%
        );

    background-size:
        220%
        100%;

    animation:
        motlambda-archive-shimmer
        1.25s
        ease-in-out
        infinite;
}


.archives-loading-main {
    width:
        min(
            230px,
            58%
        );

    height:
        24px;
}


.archives-loading-state {
    width:
        82px;

    height:
        24px;
}


.archive-transition-skeleton {
    width:
        100%;

    padding:
        28px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.05
        );

    border-radius:
        18px;

    background:
        #ffffff;

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

    box-sizing:
        border-box;

    animation:
        motlambda-archive-skeleton-in
        0.18s
        ease-out
        both;
}


.archive-transition-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        10px;

    margin-bottom:
        28px;
}


.archive-skeleton-stat {
    height:
        58px;

    border-radius:
        12px;
}


.archive-skeleton-label {
    width:
        94px;

    height:
        10px;

    margin-bottom:
        9px;
}


.archive-transition-input {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        98px;

    gap:
        9px;
}


.archive-skeleton-field,
.archive-skeleton-button {
    height:
        46px;

    border-radius:
        11px;
}


.archive-skeleton-message {
    width:
        44%;

    height:
        9px;

    margin-top:
        14px;
}


.archive-transition-result {
    display:
        grid;

    grid-template-columns:
        130px
        minmax(
            0,
            1fr
        );

    gap:
        18px;

    margin-top:
        28px;

    padding:
        18px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.04
        );

    border-radius:
        14px;

    background:
        #fafaf7;

    align-items:
        center;
}


.archive-skeleton-word {
    height:
        22px;
}


.archive-skeleton-meter {
    height:
        30px;
}


body.archive-game-loading .game-panel,
body.archive-game-loading .victory-section,
body.archive-game-loading .latest-section,
body.archive-game-loading .results,
body.archive-game-loading .game-actions,
body.archive-game-loading .alpha-note,
body.archive-game-loading .archive-mode-bar {
    display:
        none
        !important;
}


@keyframes motlambda-archive-shimmer {

    0% {
        background-position:
            100%
            0;
    }


    100% {
        background-position:
            -120%
            0;
    }
}


@keyframes motlambda-archive-skeleton-in {

    from {
        opacity:
            0;

        transform:
            translateY(
                4px
            );
    }


    to {
        opacity:
            1;

        transform:
            translateY(
                0
            );
    }
}


/* ==========================================================
   ARCHIVES V14 — PROGRESS STATES
   ========================================================== */

.archive-item.is-completed {
    border-color:
        rgba(
            40,
            123,
            77,
            0.14
        );

    background:
        #f3faf6;
}


.archive-item.is-started {
    border-color:
        rgba(
            226,
            112,
            38,
            0.14
        );

    background:
        #fff8f1;
}


.archive-item-state {
    min-width:
        92px;

    justify-content:
        flex-end;
}


.archive-state-copy {
    display:
        flex;

    min-width:
        0;

    flex-direction:
        column;

    align-items:
        flex-start;

    line-height:
        1.08;
}


.archive-state-copy strong {
    color:
        inherit;

    font-size:
        11px;

    font-weight:
        800;
}


.archive-state-copy small {
    margin-top:
        3px;

    color:
        #aaa59f;

    font-size:
        9px;

    font-weight:
        650;

    white-space:
        nowrap;
}


.archive-item.is-completed
.archive-state-copy small {
    color:
        #76a78c;
}


.archive-item.is-started
.archive-item-state {
    color:
        #b7662e;
}


.archive-item.is-started
.archive-state-copy small {
    color:
        #bc8a67;
}


@media (
    max-width:
        600px
) {

    .archive-transition-skeleton {
        padding:
            20px
            16px;

        border-radius:
            16px;
    }


    .archive-transition-grid {
        gap:
            7px;

        margin-bottom:
            22px;
    }


    .archive-skeleton-stat {
        height:
            52px;
    }


    .archive-transition-input {
        grid-template-columns:
            minmax(
                0,
                1fr
            )
            84px;
    }


    .archive-transition-result {
        grid-template-columns:
            96px
            minmax(
                0,
                1fr
            );

        gap:
            12px;

        padding:
            14px;
    }


    .archive-item-state {
        min-width:
            84px;
    }
}


@media (
    prefers-reduced-motion:
        reduce
) {

    .archives-loading-main,
    .archives-loading-state,
    .archive-skeleton-block,
    .archive-transition-skeleton {
        animation:
            none;
    }
}