.station-screen[data-theme="spirit"] { --checkpoint-accent: #ecc198; }
.station-screen[data-theme="sound"] { --checkpoint-accent: #a0d6ce; }
.station-screen[data-theme="exhibition"] { --checkpoint-accent: #d3b9df; }
.trail-panorama { background-size: max(345%, calc(var(--trail-height) * 3)) auto; }

.station-clipping {
  position: absolute;
  top: var(--prop-top, 28%);
  left: var(--prop-left, 22%);
  z-index: 0;
  width: clamp(100px, 19vw, 270px);
  margin: 0;
  pointer-events: none;
  transform: translateX(-50%) rotate(var(--prop-angle, -7deg));
}
.station-clipping img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(1px 2px 0 #dfcaaa80) drop-shadow(4px 7px 4px #17140eb0);
}
.station-screen[data-theme="sound"] { --prop-top: 17%; --prop-left: 68%; --prop-angle: 4deg; }
.station-screen[data-theme="exhibition"] { --prop-top: 19%; --prop-left: 27%; --prop-angle: -5deg; }

.trail-panorama-base {
  filter: grayscale(calc(.22 + var(--trail-mist) * .34))
    brightness(calc(.68 - var(--trail-mist) * .27));
}
.trail-panorama-light { opacity: 0; }
.trail-fog {
  background: radial-gradient(ellipse at 17% 90%, #bfcfd333, transparent 43%),
    radial-gradient(ellipse at 77% 70%, #c3d4da28, transparent 37%);
}
.trail-fog::before {
  inset: 24% -5% -5%;
  background: radial-gradient(ellipse at 44% 76%, #d4e0e034, transparent 44%);
  filter: blur(20px);
}

@media (max-width: 740px) {
  .station-screen .station-clipping {
    top: 7%;
    left: var(--mobile-prop-left, 66%);
    width: clamp(90px, 32vw, 152px);
  }
  .station-screen[data-theme="sound"] { --mobile-prop-left: 35%; }
}