/*
     * ============================================================
     * KEDAIPABZ MOBILE NAV
     * ============================================================
     */

    .kp-mobile-dock {

        --kp-dock-x:
            0px;

        --kp-dock-width:
            0px;

        position:
            fixed;

        z-index:
            9990;

        left:
            14px;

        right:
            14px;

        bottom:
            max(
                8px,
                env(
                    safe-area-inset-bottom
                )
            );

        display:
            none;

        min-height:
            62px;

        padding:
            5px;

        border:
            1px solid
            rgba(
                168,
                85,
                247,
                .18
            );

        border-radius:
            21px;

        background:
            linear-gradient(
                180deg,
                rgba(
                    17,
                    10,
                    24,
                    .94
                ),
                rgba(
                    8,
                    5,
                    12,
                    .96
                )
            );

        box-shadow:
            0 18px 46px
            rgba(
                0,
                0,
                0,
                .50
            ),
            0 0 28px
            rgba(
                124,
                58,
                237,
                .075
            ),
            inset 0 1px 0
            rgba(
                255,
                255,
                255,
                .045
            );

        backdrop-filter:
            blur(
                22px
            )
            saturate(
                1.35
            );

        -webkit-backdrop-filter:
            blur(
                22px
            )
            saturate(
                1.35
            );

        isolation:
            isolate;

    }


    /*
     * ============================================================
     * BACKGROUND EFFECTS
     * ============================================================
     */

    .kp-mobile-dock::before {

        content:
            "";

        position:
            absolute;

        z-index:
            -2;

        inset:
            0;

        overflow:
            hidden;

        border-radius:
            inherit;

        pointer-events:
            none;

        background:
            radial-gradient(
                circle at 50% -35%,
                rgba(
                    168,
                    85,
                    247,
                    .18
                ),
                transparent 47%
            ),
            linear-gradient(
                180deg,
                rgba(
                    255,
                    255,
                    255,
                    .02
                ),
                transparent 50%
            );

    }


    .kp-mobile-dock::after {

        content:
            "";

        position:
            absolute;

        z-index:
            -1;

        left:
            18%;

        right:
            18%;

        bottom:
            -15px;

        height:
            28px;

        border-radius:
            50%;

        background:
            rgba(
                124,
                58,
                237,
                .14
            );

        filter:
            blur(
                22px
            );

        pointer-events:
            none;

    }


    /*
     * ============================================================
     * ACTIVE SLIDING SURFACE
     * ============================================================
     */

    .kp-mobile-dock-active {

        position:
            absolute;

        z-index:
            0;

        top:
            5px;

        bottom:
            5px;

        left:
            0;

        width:
            var(
                --kp-dock-width
            );

        transform:
            translate3d(
                var(
                    --kp-dock-x
                ),
                0,
                0
            );

        overflow:
            hidden;

        border:
            1px solid
            rgba(
                216,
                180,
                254,
                .26
            );

        border-radius:
            16px;

        background:
            radial-gradient(
                circle at 50% -15%,
                rgba(
                    216,
                    180,
                    254,
                    .15
                ),
                transparent 57%
            ),
            linear-gradient(
                145deg,
                rgba(
                    147,
                    51,
                    234,
                    .28
                ),
                rgba(
                    109,
                    40,
                    217,
                    .11
                )
            );

        box-shadow:
            inset 0 1px 0
            rgba(
                255,
                255,
                255,
                .06
            ),
            inset 0 0 24px
            rgba(
                139,
                92,
                246,
                .07
            ),
            0 8px 20px
            rgba(
                0,
                0,
                0,
                .22
            ),
            0 0 18px
            rgba(
                124,
                58,
                237,
                .08
            );

        opacity:
            0;

        pointer-events:
            none;

        transition:
            width .38s
            cubic-bezier(
                .22,
                .78,
                .22,
                1
            ),
            transform .38s
            cubic-bezier(
                .22,
                .78,
                .22,
                1
            ),
            opacity .18s ease;

    }


    .kp-mobile-dock.is-ready
    .kp-mobile-dock-active {

        opacity:
            1;

    }


    .kp-mobile-dock-active::before {

        content:
            "";

        position:
            absolute;

        width:
            38px;

        height:
            38px;

        top:
            -16px;

        left:
            50%;

        transform:
            translateX(
                -50%
            );

        border-radius:
            50%;

        background:
            rgba(
                192,
                132,
                252,
                .26
            );

        filter:
            blur(
                15px
            );

        animation:
            kpDockGlow
            3.2s
            ease-in-out
            infinite;

    }


    .kp-mobile-dock-active::after {

        content:
            "";

        position:
            absolute;

        left:
            29%;

        right:
            29%;

        bottom:
            2px;

        height:
            1px;

        border-radius:
            999px;

        background:
            linear-gradient(
                90deg,
                transparent,
                #d8b4fe,
                transparent
            );

        box-shadow:
            0 0 7px
            rgba(
                216,
                180,
                254,
                .40
            );

    }


    @keyframes kpDockGlow {

        0%,
        100% {

            opacity:
                .40;

            transform:
                translateX(
                    -50%
                )
                scale(
                    .88
                );

        }

        50% {

            opacity:
                .90;

            transform:
                translateX(
                    -50%
                )
                scale(
                    1.10
                );

        }

    }


    /*
     * ============================================================
     * ITEMS
     * ============================================================
     */

    .kp-mobile-dock-items {

        position:
            relative;

        z-index:
            2;

        display:
            grid;

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

        width:
            100%;

        min-height:
            52px;

    }


    .kp-mobile-dock-item {

        position:
            relative;

        min-width:
            0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            3px;

        padding:
            4px 2px;

        border:
            0;

        border-radius:
            16px;

        color:
            #776e80;

        background:
            transparent;

        text-decoration:
            none;

        -webkit-tap-highlight-color:
            transparent;

        user-select:
            none;

        transition:
            color .20s ease,
            transform .15s ease;

    }


    .kp-mobile-dock-item:active {

        transform:
            scale(
                .93
            );

    }


    .kp-mobile-dock-item.active {

        color:
            #ffffff;

    }


    /*
     * ============================================================
     * ICON SURFACE
     * ============================================================
     */

    .kp-mobile-dock-icon {

        position:
            relative;

        width:
            27px;

        height:
            27px;

        display:
            grid;

        place-items:
            center;

        border:
            1px solid
            transparent;

        border-radius:
            9px;

        color:
            inherit;

        background:
            transparent;

        font-size:
            14px;

        transform:
            translateY(
                0
            );

        transition:
            transform .30s
            cubic-bezier(
                .2,
                .85,
                .2,
                1
            ),
            color .20s ease,
            background .20s ease,
            border-color .20s ease,
            box-shadow .20s ease;

    }


    .kp-mobile-dock-item.active
    .kp-mobile-dock-icon {

        color:
            #ead7ff;

        border-color:
            rgba(
                216,
                180,
                254,
                .09
            );

        background:
            rgba(
                255,
                255,
                255,
                .03
            );

        box-shadow:
            0 0 14px
            rgba(
                168,
                85,
                247,
                .08
            );

        transform:
            translateY(
                -1px
            )
            scale(
                1.05
            );

    }


    .kp-mobile-dock.is-ready
    .kp-mobile-dock-item.active
    .kp-mobile-dock-icon {

        animation:
            kpDockIconEnter
            .40s
            cubic-bezier(
                .2,
                .85,
                .2,
                1
            );

    }


    @keyframes kpDockIconEnter {

        0% {

            transform:
                translateY(
                    2px
                )
                scale(
                    .76
                );

        }

        52% {

            transform:
                translateY(
                    -3px
                )
                scale(
                    1.12
                );

        }

        100% {

            transform:
                translateY(
                    -1px
                )
                scale(
                    1.05
                );

        }

    }


    /*
     * ============================================================
     * WALLET
     * ============================================================
     */

    .kp-mobile-dock-wallet::after {

        content:
            "";

        position:
            absolute;

        top:
            1px;

        right:
            1px;

        width:
            5px;

        height:
            5px;

        border:
            1px solid
            #0a0610;

        border-radius:
            50%;

        background:
            #c084fc;

        box-shadow:
            0 0 7px
            rgba(
                192,
                132,
                252,
                .68
            );

    }


    .kp-mobile-dock-item.active
    .kp-mobile-dock-wallet::after {

        background:
            #ead7ff;

        animation:
            kpDockWalletDot
            1.8s
            ease-in-out
            infinite;

    }


    @keyframes kpDockWalletDot {

        0%,
        100% {

            box-shadow:
                0 0 3px
                rgba(
                    192,
                    132,
                    252,
                    .40
                );

        }

        50% {

            box-shadow:
                0 0 10px
                rgba(
                    216,
                    180,
                    254,
                    .90
                );

        }

    }


    /*
     * ============================================================
     * WHEEL OF DAWN
     * ============================================================
     */

    .kp-mobile-dock-wod {

        overflow:
            visible;

        color:
            #d8b4fe;

        border-color:
            rgba(
                192,
                132,
                252,
                .09
            );

        background:
            radial-gradient(
                circle,
                rgba(
                    168,
                    85,
                    247,
                    .10
                ),
                transparent 70%
            );

        box-shadow:
            0 0 12px
            rgba(
                168,
                85,
                247,
                .05
            );

    }


    .kp-mobile-dock-wod::before {

        content:
            "";

        position:
            absolute;

        inset:
            3px;

        border:
            1px solid
            rgba(
                192,
                132,
                252,
                .18
            );

        border-radius:
            50%;

        opacity:
            .60;

        pointer-events:
            none;

        animation:
            kpWodRingPulse
            2.4s
            ease-in-out
            infinite;

    }


    .kp-mobile-dock-wod::after {

        content:
            "";

        position:
            absolute;

        z-index:
            4;

        width:
            4px;

        height:
            4px;

        top:
            1px;

        right:
            1px;

        border:
            1px solid
            #0a0610;

        border-radius:
            50%;

        background:
            #facc15;

        box-shadow:
            0 0 7px
            rgba(
                250,
                204,
                21,
                .82
            );

        pointer-events:
            none;

        animation:
            kpWodStarPulse
            1.6s
            ease-in-out
            infinite;

    }


    .kp-mobile-dock-wod i {

        position:
            relative;

        z-index:
            3;

        transform-origin:
            center;

        animation:
            kpWodIdleSpin
            7s
            linear
            infinite;

        filter:
            drop-shadow(
                0 0 4px
                rgba(
                    192,
                    132,
                    252,
                    .35
                )
            );

    }


    .kp-mobile-dock-item.active
    .kp-mobile-dock-wod {

        color:
            #ffffff;

        border-color:
            rgba(
                216,
                180,
                254,
                .34
            );

        background:
            radial-gradient(
                circle,
                rgba(
                    192,
                    132,
                    252,
                    .22
                ),
                rgba(
                    124,
                    58,
                    237,
                    .07
                )
            );

        box-shadow:
            0 0 17px
            rgba(
                168,
                85,
                247,
                .24
            );

    }


    .kp-mobile-dock-item.active
    .kp-mobile-dock-wod::before {

        border-color:
            rgba(
                216,
                180,
                254,
                .42
            );

        animation:
            kpWodActiveRing
            1.4s
            ease-in-out
            infinite;

    }


    .kp-mobile-dock-item.active
    .kp-mobile-dock-wod::after {

        background:
            #fde047;

        box-shadow:
            0 0 9px
            rgba(
                250,
                204,
                21,
                .95
            );

    }


    .kp-mobile-dock-item.active
    .kp-mobile-dock-wod i {

        animation:
            kpWodActiveSpin
            2.2s
            linear
            infinite;

        filter:
            drop-shadow(
                0 0 6px
                rgba(
                    216,
                    180,
                    254,
                    .75
                )
            );

    }


    .kp-mobile-dock-item[data-nav-key="wheel-of-dawn"]
    .kp-mobile-dock-label {

        color:
            #b99ad5;

        font-weight:
            950;

    }


    .kp-mobile-dock-item[data-nav-key="wheel-of-dawn"].active
    .kp-mobile-dock-label {

        color:
            #f3e8ff;

        text-shadow:
            0 0 6px
            rgba(
                192,
                132,
                252,
                .45
            );

    }


    @keyframes kpWodIdleSpin {

        from {

            transform:
                rotate(
                    0deg
                );

        }

        to {

            transform:
                rotate(
                    360deg
                );

        }

    }


    @keyframes kpWodActiveSpin {

        0% {

            transform:
                rotate(
                    0deg
                )
                scale(
                    1
                );

        }

        50% {

            transform:
                rotate(
                    180deg
                )
                scale(
                    1.08
                );

        }

        100% {

            transform:
                rotate(
                    360deg
                )
                scale(
                    1
                );

        }

    }


    @keyframes kpWodRingPulse {

        0%,
        100% {

            opacity:
                .25;

            transform:
                scale(
                    .84
                );

        }

        50% {

            opacity:
                .82;

            transform:
                scale(
                    1.08
                );

        }

    }


    @keyframes kpWodActiveRing {

        0%,
        100% {

            opacity:
                .42;

            transform:
                scale(
                    .84
                )
                rotate(
                    0deg
                );

        }

        50% {

            opacity:
                .90;

            transform:
                scale(
                    1.10
                )
                rotate(
                    180deg
                );

        }

        100% {

            transform:
                scale(
                    .84
                )
                rotate(
                    360deg
                );

        }

    }


    @keyframes kpWodStarPulse {

        0%,
        100% {

            opacity:
                .45;

            transform:
                scale(
                    .78
                );

        }

        50% {

            opacity:
                1;

            transform:
                scale(
                    1.25
                );

        }

    }


    /*
     * ============================================================
     * ACCOUNT AVATAR
     * ============================================================
     */

    .kp-mobile-dock-avatar {

        width:
            27px;

        height:
            27px;

        display:
            grid;

        place-items:
            center;

        border:
            1px solid
            rgba(
                168,
                85,
                247,
                .22
            );

        border-radius:
            50%;

        color:
            #b6a8c4;

        background:
            linear-gradient(
                145deg,
                rgba(
                    139,
                    92,
                    246,
                    .13
                ),
                rgba(
                    88,
                    28,
                    135,
                    .06
                )
            );

        font-size:
            8px;

        font-weight:
            950;

        text-transform:
            uppercase;

        transition:
            transform .28s ease,
            color .20s ease,
            border-color .20s ease,
            background .20s ease,
            box-shadow .20s ease;

    }


    .kp-mobile-dock-item.active
    .kp-mobile-dock-avatar {

        color:
            #ffffff;

        border-color:
            rgba(
                216,
                180,
                254,
                .45
            );

        background:
            linear-gradient(
                135deg,
                #a855f7,
                #7c3aed
            );

        box-shadow:
            0 0 16px
            rgba(
                139,
                92,
                246,
                .24
            );

        transform:
            translateY(
                -1px
            )
            scale(
                1.05
            );

    }


    /*
     * ============================================================
     * LABEL
     * ============================================================
     */

    .kp-mobile-dock-label {

        position:
            relative;

        display:
            block;

        max-width:
            100%;

        overflow:
            hidden;

        color:
            inherit;

        font-size:
            6.5px;

        font-weight:
            850;

        line-height:
            1;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

        transition:
            color .20s ease,
            transform .20s ease;

    }


    .kp-mobile-dock-item.active
    .kp-mobile-dock-label {

        color:
            #f8f2ff;

        transform:
            translateY(
                -1px
            );

    }


    /*
     * ============================================================
     * ENTRY
     * ============================================================
     */

    @keyframes kpDockEnter {

        from {

            opacity:
                0;

            transform:
                translateY(
                    calc(
                        100%
                        + 24px
                    )
                )
                scale(
                    .97
                );

        }

        to {

            opacity:
                1;

            transform:
                translateY(
                    0
                )
                scale(
                    1
                );

        }

    }


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

    @media (
        max-width:
            768px
    ) {

        .kp-mobile-dock {

            display:
                block;

            animation:
                kpDockEnter
                .45s
                cubic-bezier(
                    .2,
                    .8,
                    .2,
                    1
                )
                both;

        }


        body {

            padding-bottom:
                calc(
                    78px
                    + env(
                        safe-area-inset-bottom
                    )
                );

        }

    }


    /*
     * ============================================================
     * SMALL PHONE
     * ============================================================
     */

    @media (
        max-width:
            390px
    ) {

        .kp-mobile-dock {

            left:
                8px;

            right:
                8px;

            bottom:
                max(
                    6px,
                    env(
                        safe-area-inset-bottom
                    )
                );

            min-height:
                58px;

            padding:
                4px;

            border-radius:
                19px;

        }


        .kp-mobile-dock-active {

            top:
                4px;

            bottom:
                4px;

            border-radius:
                15px;

        }


        .kp-mobile-dock-items {

            min-height:
                50px;

        }


        .kp-mobile-dock-item {

            border-radius:
                15px;

            gap:
                2px;

        }


        .kp-mobile-dock-icon,
        .kp-mobile-dock-avatar {

            width:
                25px;

            height:
                25px;

        }


        .kp-mobile-dock-icon {

            font-size:
                13px;

        }


        .kp-mobile-dock-label {

            font-size:
                6px;

        }

    }


    /*
     * ============================================================
     * REDUCED MOTION
     * ============================================================
     */

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

        .kp-mobile-dock,
        .kp-mobile-dock-active,
        .kp-mobile-dock-item,
        .kp-mobile-dock-icon,
        .kp-mobile-dock-avatar,
        .kp-mobile-dock-label,
        .kp-mobile-dock-wallet::after,
        .kp-mobile-dock-wod,
        .kp-mobile-dock-wod::before,
        .kp-mobile-dock-wod::after,
        .kp-mobile-dock-wod i {

            animation:
                none !important;

            transition:
                none !important;

        }

    }