.world-backpack-launcher {
    position: fixed;

    right: 1.05rem;
    bottom: 5rem;

    z-index: 8500;

    display: block;

    width: 4.5rem;
    height: 5.25rem;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    filter:
        drop-shadow(
            0 0.75rem 0.7rem
            rgba(0, 0, 0, 0.5)
        );

    transition:
        transform 150ms ease,
        filter 150ms ease;
}



.world-backpack-launcher:hover,
.world-backpack-launcher:focus-visible {
    transform:
        translateY(-0.18rem)
        scale(1.06);

    outline: none;

    filter:
        drop-shadow(
            0 0.8rem 0.75rem
            rgba(0, 0, 0, 0.5)
        )
        drop-shadow(
            0 0 0.8rem
            rgba(116, 218, 255, 0.35)
        );
}


.world-pack {
    position: absolute;
    inset: 0.2rem;

    display: block;
}


.world-pack__handle {
    position: absolute;

    left: 50%;
    top: 0;

    width: 1.9rem;
    height: 1.45rem;

    transform:
        translateX(-50%);

    border:
        0.34rem solid
        #6b4129;

    border-bottom: 0;

    border-radius:
        0.85rem 0.85rem 0 0;

    box-shadow:
        inset 0 0.15rem
        rgba(255, 221, 162, 0.2);
}


.world-pack__body {
    position: absolute;

    left: 0.35rem;
    right: 0.35rem;
    top: 0.95rem;
    bottom: 0.15rem;

    border:
        0.13rem solid
        #3d251a;

    border-radius:
        1rem
        1rem
        0.8rem
        0.8rem;

    background:
        linear-gradient(
            110deg,
            #6f4025 0%,
            #9a6033 42%,
            #784425 64%,
            #4d2b20 100%
        );

    box-shadow:
        inset 0.35rem 0
        rgba(255, 205, 130, 0.12),
        inset -0.4rem -0.35rem
        rgba(35, 14, 9, 0.32);
}


.world-pack__flap {
    position: absolute;

    left: 0.14rem;
    right: 0.14rem;
    top: 0.14rem;

    height: 2rem;

    border:
        0.11rem solid
        #40251a;

    border-radius:
        0.75rem
        0.75rem
        1.1rem
        1.1rem;

    background:
        linear-gradient(
            180deg,
            #aa6b39,
            #744020
        );

    transform-origin:
        top center;

    transition:
        transform 420ms
        cubic-bezier(
            0.2,
            0.7,
            0.3,
            1
        );
}


.world-pack__buckle {
    position: absolute;

    left: 50%;
    top: 1.72rem;

    width: 0.65rem;
    height: 0.76rem;

    transform:
        translateX(-50%);

    border:
        0.13rem solid
        #e5c574;

    border-radius:
        0.16rem;

    background:
        rgba(61, 37, 26, 0.8);
}


.world-pack__pocket {
    position: absolute;

    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.55rem;

    height: 1.35rem;

    border:
        0.1rem solid
        #41251a;

    border-radius:
        0.4rem
        0.4rem
        0.65rem
        0.65rem;

    background:
        linear-gradient(
            180deg,
            #90552e,
            #63371f
        );
}


.world-pack__strap {
    position: absolute;

    top: 1.7rem;

    width: 0.28rem;
    height: 2.85rem;

    border-radius:
        0.2rem;

    background:
        #3e2419;
}


.world-pack__strap--left {
    left: 0.55rem;
}


.world-pack__strap--right {
    right: 0.55rem;
}


.world-pack__moonstone {
    position: absolute;

    left: 50%;
    top: 2.72rem;

    width: 0.42rem;
    height: 0.42rem;

    transform:
        translateX(-50%)
        rotate(45deg);

    border:
        1px solid
        rgba(220, 250, 255, 0.9);

    background:
        #87e7ff;

    box-shadow:
        0 0 0.5rem
        #83e9ff;
}


.world-pack__new {
    position: absolute;

    right: -0.05rem;
    top: 0.6rem;

    display: none;

    width: 0.8rem;
    height: 0.8rem;

    border-radius: 50%;

    background:
        #c8faff;

    box-shadow:
        0 0 1rem
        #8ceaff;
}


.world-backpack-launcher.has-new-item
.world-pack__new {
    display: block;
}


.world-backpack-launcher.has-new-item {
    animation:
        world-pack-reward
        0.44s
        ease-in-out
        4
        alternate;
}


.world-backpack-launcher.is-opening
.world-pack__flap {
    transform:
        perspective(5rem)
        rotateX(-105deg);
}


.world-backpack-launcher.is-opening
.world-pack__moonstone {
    animation:
        world-pack-stone-open
        0.55s
        ease-out
        forwards;
}


@keyframes world-pack-reward {
    to {
        transform:
            scale(1.12)
            rotate(-2deg);

        filter:
            drop-shadow(
                0 0 1.6rem
                rgba(116, 227, 255, 0.9)
            );
    }
}


@keyframes world-pack-stone-open {
    to {
        transform:
            translateX(-50%)
            rotate(225deg)
            scale(1.65);

        box-shadow:
            0 0 1.5rem
            #a8f4ff;
    }
}


/*
 * Backpack opening transition.
 */
.backpack-opening {
    position: fixed;
    inset: 0;

    z-index: 11800;

    pointer-events: none;

    opacity: 0;

    overflow: hidden;

    transition:
        opacity 180ms ease;
}


.backpack-opening.is-visible {
    opacity: 1;
}


.backpack-opening.is-finishing {
    opacity: 0;
}


.backpack-opening__glow {
    position: absolute;

    right: -3rem;
    bottom: -2rem;

    width: 17rem;
    height: 17rem;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(230, 255, 255, 0.95) 0%,
            rgba(128, 228, 255, 0.72) 13%,
            rgba(101, 149, 255, 0.32) 34%,
            rgba(93, 53, 156, 0.13) 54%,
            transparent 72%
        );

    transform:
        scale(0.2);

    animation:
        backpack-glow-open
        0.72s
        ease-out
        forwards;
}


.backpack-opening__rays {
    position: absolute;

    right: 1.7rem;
    bottom: 6rem;

    width: 1px;
    height: 1px;
}


.backpack-opening__rays i {
    position: absolute;

    left: 0;
    top: 0;

    width: 0.18rem;
    height: 11rem;

    transform-origin:
        50% 100%;

    border-radius: 50%;

    background:
        linear-gradient(
            to top,
            rgba(190, 247, 255, 0.85),
            transparent
        );

    opacity: 0;

    animation:
        backpack-ray-open
        0.62s
        ease-out
        forwards;
}


.backpack-opening__rays i:nth-child(1) {
    transform: rotate(-58deg);
}

.backpack-opening__rays i:nth-child(2) {
    transform: rotate(-34deg);
}

.backpack-opening__rays i:nth-child(3) {
    transform: rotate(-14deg);
}

.backpack-opening__rays i:nth-child(4) {
    transform: rotate(10deg);
}

.backpack-opening__rays i:nth-child(5) {
    transform: rotate(31deg);
}

.backpack-opening__rays i:nth-child(6) {
    transform: rotate(55deg);
}


.backpack-opening__sparkles {
    position: absolute;

    right: 4rem;
    bottom: 6rem;
}


.backpack-opening__sparkles i {
    position: absolute;

    width: 0.35rem;
    height: 0.35rem;

    border-radius: 50%;

    background:
        #dffcff;

    box-shadow:
        0 0 0.8rem
        #b6f4ff;

    animation:
        backpack-spark-open
        0.8s
        ease-out
        forwards;
}


.backpack-opening__sparkles i:nth-child(1) {
    --x: -4rem;
    --y: -5rem;
}

.backpack-opening__sparkles i:nth-child(2) {
    --x: -1rem;
    --y: -8rem;
}

.backpack-opening__sparkles i:nth-child(3) {
    --x: 3rem;
    --y: -6rem;
}

.backpack-opening__sparkles i:nth-child(4) {
    --x: 5rem;
    --y: -2rem;
}

.backpack-opening__sparkles i:nth-child(5) {
    --x: -6rem;
    --y: -2rem;
}

.backpack-opening__sparkles i:nth-child(6) {
    --x: 2rem;
    --y: -10rem;
}

.backpack-opening__sparkles i:nth-child(7) {
    --x: -3rem;
    --y: -10rem;
}

.backpack-opening__sparkles i:nth-child(8) {
    --x: 7rem;
    --y: -7rem;
}


@keyframes backpack-glow-open {
    to {
        transform:
            scale(1);
    }
}


@keyframes backpack-ray-open {
    20% {
        opacity: 0;
    }

    55% {
        opacity: 0.75;
    }

    100% {
        opacity: 0;
    }
}


@keyframes backpack-spark-open {
    0% {
        opacity: 0;

        transform:
            translate(0, 0)
            scale(0);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translate(
                var(--x),
                var(--y)
            )
            scale(1.4);
    }
}