.world-archives {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.world-archives-head,
.world-archives .world-section-head {
    position: relative !important;
}


/* =========================================================
   FLÈCHES
========================================================= */

.cdv-archive-controls {
    position: absolute;
    z-index: 60;

    right: clamp(24px, 6vw, 110px);
    bottom: 14px;

    display: flex;
    align-items: center;
    gap: 10px;
}

.cdv-archive-arrow {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid
        rgba(139, 114, 255, .34);

    border-radius: 14px;

    color: #f8f7ff;
    cursor: pointer;

    background:
        linear-gradient(
            145deg,
            rgba(110, 83, 255, .25),
            rgba(59, 189, 255, .10)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .10),

        0 14px 36px
        rgba(0, 0, 0, .26);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        opacity .22s ease;
}

.cdv-archive-arrow::before {
    content: "";

    width: 10px;
    height: 10px;

    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.cdv-archive-arrow.previous::before {
    transform: rotate(-135deg);
}

.cdv-archive-arrow.next::before {
    transform: rotate(45deg);
}

.cdv-archive-arrow:hover:not(:disabled) {
    transform:
        translateY(-2px)
        scale(1.04);

    border-color:
        rgba(103, 215, 255, .68);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .13),

        0 0 30px
        rgba(89, 139, 255, .28);
}

.cdv-archive-arrow:active:not(:disabled) {
    transform: scale(.96);
}

.cdv-archive-arrow:disabled {
    opacity: .20;
    cursor: default;
}


/* =========================================================
   RAIL HORIZONTAL
========================================================= */

.world-archive-track {
    position: relative !important;

    width: 100% !important;
    max-width: 100vw !important;

    display: flex !important;
    flex-wrap: nowrap !important;

    gap: 18px !important;

    padding:
        0
        clamp(20px, 4vw, 72px)
        26px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory;

    scroll-padding-inline:
        clamp(20px, 4vw, 72px);

    scrollbar-width: none;

    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;

    cursor: grab;

    -webkit-overflow-scrolling: touch;
}

.world-archive-track::-webkit-scrollbar {
    display: none;
}

.world-archive-track.cdv-dragging {
    cursor: grabbing;
    user-select: none;

    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
}

.world-archive-track .world-custom-card {
    flex:
        0 0
        min(
            520px,
            calc(100vw - 44px)
        ) !important;

    min-width:
        min(
            520px,
            calc(100vw - 44px)
        ) !important;

    scroll-snap-align: start;
}


/* =========================================================
   PROGRESSION
========================================================= */

.cdv-archive-progress {
    width: min(380px, calc(100% - 48px));
    height: 2px;

    margin: 8px auto 0;

    overflow: hidden;
    border-radius: 999px;

    background:
        rgba(255, 255, 255, .07);
}

.cdv-archive-progress-fill {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #8d72ff,
            #68d9ff
        );

    box-shadow:
        0 0 18px
        rgba(104, 217, 255, .50);

    transition: width .16s linear;
}


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

@media (max-width: 760px) {
    .cdv-archive-controls {
        position: relative;

        right: auto;
        bottom: auto;

        justify-content: flex-end;

        margin: 18px 18px 0;
    }

    .cdv-archive-arrow {
        width: 42px;
        height: 42px;

        border-radius: 12px;
    }

    .world-archive-track {
        gap: 12px !important;

        padding-left: 16px !important;
        padding-right: 16px !important;

        scroll-padding-inline: 16px;
    }

    .world-archive-track .world-custom-card {
        flex-basis:
            calc(100vw - 32px) !important;

        min-width:
            calc(100vw - 32px) !important;
    }
}