#layered-expedition-view {
    position: fixed;
    inset: 0;
    z-index: 8;
    overflow: hidden;
    pointer-events: none;
    background: transparent;
}

#layered-expedition-view[hidden] {
    display: none;
}

.layered-expedition-objects {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.layered-expedition-object {
    --object-anchor-y: -76%;
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    width: clamp(62px, 6.2vw, 92px);
    aspect-ratio: 1;
    object-fit: contain;
    transform: translate(-50%, var(--object-anchor-y));
    filter: drop-shadow(0 5px 3px rgba(52, 61, 34, .3));
    -webkit-user-drag: none;
    will-change: left, top;
}

.layered-expedition-object[hidden] {
    display: none;
}

.layered-expedition-object.is-find {
    width: clamp(58px, 5.5vw, 82px);
    animation: layered-find-hover 1.7s ease-in-out infinite alternate;
}

.layered-expedition-object.is-route-tool {
    --object-anchor-y: -60%;
    width: clamp(58px, 5.3vw, 80px);
    transform: translate(-50%, var(--object-anchor-y));
}

.layered-expedition-object.is-collecting {
    z-index: 6;
    animation: none;
    transform-origin: 50% 76%;
    transform: translate(-50%, var(--object-anchor-y))
        rotate(var(--pickup-turn, 0deg)) scale(var(--pickup-scale, 1));
    opacity: var(--pickup-opacity, 1);
    filter: drop-shadow(0 3px 3px rgba(52, 61, 34, .2))
        drop-shadow(0 0 var(--pickup-glow, 0px) rgba(255, 215, 112, .8));
    will-change: left, top, transform, opacity;
}

.layered-expedition-object.is-route-tool.is-collecting {
    transform-origin: 50% 60%;
}

.layered-expedition-object.is-trampoline {
    z-index: 3;
    width: clamp(156px, 13.5vw, 210px);
    transform: translate(-50%, -98%);
}

.layered-expedition-object.is-trampoline.is-active {
    filter:
        drop-shadow(0 5px 3px rgba(52, 61, 34, .26))
        drop-shadow(0 0 8px rgba(255, 206, 78, .75));
}

.layered-expedition-traveler {
    --jump-lift: 0%;
    --jump-shadow-scale: 1;
    --jump-shadow-opacity: 1;
    position: absolute;
    z-index: 7;
    left: 50%;
    top: 50%;
    width: clamp(82px, 7.4vw, 116px);
    aspect-ratio: 1;
    transform: translate(-50%, -69%);
    pointer-events: none;
    will-change: left, top;
}

.layered-expedition-shadow {
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 15%;
    width: 48%;
    height: 14%;
    border-radius: 50%;
    background: rgba(49, 58, 34, .3);
    filter: blur(3px);
    transform: translateX(-50%) scale(var(--jump-shadow-scale));
    opacity: var(--jump-shadow-opacity);
    transition: transform 30ms linear, opacity 30ms linear;
}

.layered-expedition-hero {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translateY(var(--jump-lift));
    transform-origin: 50% 75%;
    filter: drop-shadow(0 4px 2px rgba(56, 63, 38, .16));
    -webkit-user-drag: none;
}

.layered-expedition-hero[data-direction='WEST'] {
    transform: translateY(var(--jump-lift)) scaleX(-1);
}

#layered-expedition-view[data-three-hero='true'] .layered-expedition-hero,
#layered-expedition-view[data-three-hero='true'] .layered-expedition-shadow,
#layered-expedition-view[data-three-hero='true'] .layered-expedition-queue {
    visibility: hidden;
}

.layered-expedition-traveler.is-moving .layered-expedition-hero {
    animation: layered-lamb-trot 280ms ease-in-out infinite alternate;
}

.layered-expedition-queue {
    --queue-rotation: 0deg;
    position: absolute;
    z-index: 8;
    left: 50%;
    top: -12%;
    width: 30%;
    aspect-ratio: 1;
    color: #e9fff3;
    font: 900 clamp(20px, 2vw, 30px) / 1 system-ui, sans-serif;
    text-align: center;
    text-shadow: 0 2px 5px rgba(20, 63, 48, .68);
    transform: translateX(-50%) rotate(var(--queue-rotation));
    filter: drop-shadow(0 0 5px rgba(78, 240, 189, .9));
}

.layered-expedition-queue[hidden] {
    display: none;
}

@keyframes layered-lamb-trot {
    from { translate: 0 0; rotate: -1deg; }
    to { translate: 0 -5%; rotate: 1deg; }
}

@keyframes layered-find-hover {
    from { translate: 0 0; }
    to { translate: 0 -7%; }
}

@media (max-width: 700px) {
    .layered-expedition-traveler {
        width: clamp(68px, 12vw, 94px);
    }
}