#jungle { --dock-space: 130px; --cart-width: 184px; }
.scene-effects { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.rails {
  position: absolute;
  bottom: calc(var(--dock-space) + 12px);
  left: 0;
  width: 100%;
  height: 18px;
  border-top: 3px solid #929b8a;
  border-bottom: 3px solid #434e43;
  background: repeating-linear-gradient(90deg, transparent 0 26px, #695437 26px 35px, transparent 35px 50px);
  box-shadow: 0 3px 5px #0009, inset 0 1px #d8c899;
  opacity: .65;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.minecart-run {
  position: absolute;
  left: calc(0px - var(--cart-width));
  bottom: calc(var(--dock-space) + 28px);
  width: var(--cart-width);
  --travel: calc(100vw + var(--cart-width) + var(--cart-width));
  animation: cart-pass 22s linear infinite;
}
.cart-bounce { position: relative; width: 100%; animation: cart-bob .36s ease-in-out infinite alternate; }
.cart-bounce > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 5px 3px #0008); }
.cart-wheel {
  position: absolute;
  top: 87.5%;
  width: 19%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid #806249;
  background: repeating-conic-gradient(#a27d54 0deg 12deg, #262a25 12deg 45deg);
  box-shadow: inset 0 0 0 2px #b39970, 0 0 0 1px #2b3026;
  transform: translate(-50%,-50%);
  animation: wheel-spin .65s linear infinite;
}
.cart-wheel::after { content: ""; position: absolute; inset: 32%; background: #837153; border: 1px solid #d2aa76; border-radius: 50%; }
.wheel-left { left: 28.5%; }
.wheel-right { left: 70.5%; }
.peek-character {
  position: absolute;
  bottom: calc(var(--dock-space) + 95px);
  width: clamp(110px, 14vw, 210px);
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 6px 10px #0009);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s;
  mask-image: linear-gradient(#000 80%, transparent);
}
.peek-gun { left: 0; transform: translateX(-105%) rotate(-7deg); transform-origin: left bottom; }
.peek-dynamite { right: 0; transform: translateX(105%) rotate(7deg); transform-origin: right bottom; }
.peek-left .peek-gun { transform: translateX(-12%) rotate(4deg); opacity: 1; }
.peek-left .peek-dynamite { transform: translate(68%,24%) rotate(-7deg); opacity: .9; }
.peek-right .peek-dynamite { transform: translateX(12%) rotate(-4deg); opacity: 1; }
.peek-right .peek-gun { transform: translate(-68%,24%) rotate(7deg); opacity: .9; }
#motion-toggle {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 4;
  border: 1px solid #d8c39150;
  border-radius: 30px;
  padding: 10px 14px;
  color: #eadfc3;
  background: #071b15d9;
  backdrop-filter: blur(12px);
  font: 12px Barlow, Arial, sans-serif;
  cursor: pointer;
}
#motion-toggle:hover { background: #173629; }
#motion-toggle:focus-visible { outline: 2px solid #efc472; outline-offset: 4px; }
#jungle[data-motion="off"] .minecart-run { display: none; }
#jungle[data-motion="off"] .peek-character { opacity: 0; transform: translateY(120%); transition: none; }
#jungle[data-motion="off"] .rails { opacity: .25; }
.motion-suspended .minecart-run, .motion-suspended .cart-bounce, .motion-suspended .cart-wheel,
body.viewer-open .minecart-run, body.viewer-open .cart-bounce, body.viewer-open .cart-wheel { animation-play-state: paused; }
@keyframes cart-pass {
  0% { transform: translateX(0); opacity: 0; }
  3% { opacity: 1; }
  28% { transform: translate(calc(var(--travel) * .45), 0); }
  30% { transform: translate(calc(var(--travel) * .48), -12px); }
  32% { transform: translate(calc(var(--travel) * .52), 0); }
  62% { transform: translateX(calc(100vw + var(--cart-width) + var(--cart-width))); opacity: 1; }
  63%, 100% { transform: translateX(calc(100vw + var(--cart-width) + var(--cart-width))); opacity: 0; }
}
@keyframes cart-bob { from { transform: translateY(-1px) rotate(-.6deg); } to { transform: translateY(1px) rotate(.6deg); } }
@keyframes wheel-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@media (max-width: 700px) {
  #jungle { --cart-width: 122px; --dock-space: 165px; }
  .peek-character { display: none; }
  #motion-toggle { font-size: 11px; top: 12px; right: 12px; }
  .cart-wheel { border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) { .peek-character { transition: none; } }

#pixel-chase { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }

.rails::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 18px;
  height: 8px;
  background: #716b46;
  clip-path: polygon(0 100%, 18% 40%, 68% 0, 100% 100%);
}