/* Selected study 35: native detail tiles assembled into a 5046 × 1682 panorama. */
.trail-panorama {
  background-image: url(journey-felt-hd.webp);
  background-size: max(270%, calc(var(--trail-height) * 3)) auto;
}
.station-screen { --scene-glow: #da9f62; isolation: auto; z-index: auto; }
.station-screen[data-theme="sound"] { --scene-glow: #88c9c7; }
.station-screen[data-theme="fanmiao"] { --scene-glow: #b6c78c; --checkpoint-accent: #c4ce95; --prop-top: 17%; --prop-left: 73%; --prop-angle: 5deg; }
.station-screen[data-theme="sound"] { --prop-top: 16%; --prop-left: 25%; --prop-angle: -5deg; }
.station-screen[data-theme="exhibition"] { --prop-top: 17%; --prop-left: 72%; --prop-angle: 4deg; }
.station-screen[data-theme="exhibition"] { --scene-glow: #c5a8e7; }
.station-screen::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, transparent 27%, #11191ba6 100%),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--scene-glow) 12%, transparent) 55%, transparent);
  transition: opacity 1s;
}
.station-screen.is-cleared::before { opacity: .42; }
.station-atmosphere { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.station-atmosphere i { position: absolute; display: block; }
[data-theme="spirit"] .station-atmosphere i {
  top: 28%; left: 23%; width: 7px; height: 7px;
  border-radius: 50%; background: #efd390;
  box-shadow: 0 0 20px 7px #edb45340, 0 0 70px 28px #cc8b3520;
  animation: trail-firefly 6s ease-in-out infinite alternate;
}
[data-theme="spirit"] .station-atmosphere i:nth-child(2) { top: 72%; left: 72%; animation-delay: -3s; }
[data-theme="spirit"] .station-atmosphere i:nth-child(3) { top: 43%; left: 87%; animation-delay: -1s; }
[data-theme="fanmiao"] .station-atmosphere i { top: 29%; left: 72%; width: 13px; height: 22px; border-radius: 80% 0 80% 0; background: #c1ce8f42; box-shadow: 0 0 25px #d2df9270; rotate: -24deg; animation: trail-firefly 7s ease-in-out infinite alternate; }
[data-theme="fanmiao"] .station-atmosphere i:nth-child(2) { top: 52%; left: 25%; rotate: 35deg; animation-delay: -3s; }
[data-theme="fanmiao"] .station-atmosphere i:nth-child(3) { top: 76%; left: 67%; rotate: 70deg; animation-delay: -5s; }
[data-theme="sound"] .station-atmosphere i {
  width: clamp(260px, 42vw, 600px); aspect-ratio: 1;
  top: 10%; left: 42%; border: 1px solid #9ad8d23c; border-radius: 50%;
  box-shadow: inset 0 0 55px #82c9c318;
  animation: trail-resonance 8s ease-in-out infinite alternate;
}
[data-theme="sound"] .station-atmosphere i:nth-child(2) { transform: scale(.74); animation-delay: -2s; }
[data-theme="sound"] .station-atmosphere i:nth-child(3) { transform: scale(.48); animation-delay: -4s; }
[data-theme="exhibition"] .station-atmosphere i {
  inset: 3% 6% 4%; opacity: .7;
  background: linear-gradient(108deg, transparent 48%, #e3c1f72b 49%, #d7c4ed05 53%, transparent 54%);
  clip-path: polygon(24% 0, 100% 100%, 0 100%);
}
[data-theme="exhibition"] .station-atmosphere i:nth-child(2) { transform: translateX(-11%) rotate(-12deg); background: linear-gradient(108deg, transparent 48%, #9dccd62e 50%, transparent 54%); }
[data-theme="exhibition"] .station-atmosphere i:nth-child(3) { transform: translateX(9%) rotate(14deg); background: linear-gradient(108deg, transparent 48%, #f2d59d30 50%, transparent 54%); }
.station-screen[data-theme] .station-copy { width: min(100%, 330px); padding: 18px 19px 15px; }
.station-copy h2 { font-size: clamp(28px, 3.1vw, 39px); }
.station-story { font-size: 12px; line-height: 1.8; margin: 8px 0 11px; }
.station-mission { padding: 10px; margin: 10px 0; }
.station-mission > strong { letter-spacing: .06em; }
.station-actions { gap: 4px 12px; }
.station-actions .button { min-height: 44px; padding: 9px 11px; }
.station-next { min-height: 44px; }
.station-screen:not(.is-cleared) .station-copy { background: #1b2529ed; border-color: color-mix(in srgb, #da9f62 48%, #4a4e46); }
.station-screen[data-theme].is-cleared .station-copy { background: #fff5da; border-color: #5c493c; }
.station-screen[data-theme] .station-copy::after { background: #ecc198; }
.station-screen:not(.is-cleared) .station-mission { background: #31403f80; }
.station-screen.is-current .station-copy { box-shadow: 3px 6px 10px #15121b4d, 0 0 48px #da9f621a; }
.station-screen[data-theme] :is(.station-copy, .journey-token) { opacity: 1; visibility: visible; }
.journey-trail { cursor: auto; }
.trail-route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.trail-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trail-route-shadow { stroke: #172226b3; stroke-width: 9px; }
.trail-route-line { stroke: #eed7a1; stroke-width: 2px; stroke-dasharray: 4 8; filter: drop-shadow(0 0 4px #dabf815c); }
.trail-route-node circle { fill: #243331; stroke: #ecd5a0; stroke-width: 1.6; }
.trail-route-node text { fill: #f5e4bd; font: 10px Georgia, serif; }
.trail-route-node.is-complete circle { fill: #68834f; stroke: #e5e9a3; }
.trail-route-node.is-complete text { fill: #fff7d9; }
.trail-explorer { position: absolute; left: 14%; top: 5%; z-index: 4; width: clamp(58px, 6.5vw, 82px); transform: translate(-50%, -100%); pointer-events: none; filter: drop-shadow(2px 4px 4px #201a18a8); }
.trail-explorer picture, .trail-explorer img { display: block; width: 100%; height: auto; }
[data-explorer-caption] {
  display: block; position: absolute; top: calc(100% + 5px); left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; line-height: 1.4; padding: 4px 9px;
  color: #fff0c9; background: #172024ed; border: 1px solid #c8ad6d80;
  border-radius: 12px; box-shadow: 0 2px 7px #0004;
}
.station-screen .journey-token { min-width: 0; width: 144px; }
.station-screen .journey-token.is-earned { box-shadow: 0 0 38px #dbe58b66, 3px 6px 10px #15121b4d; }
.station-screen .journey-token.is-earned .token-art { animation: souvenir-light .65s ease-out; }
.station-screen.is-awaiting-souvenir .journey-token { border-color: #dcc784; }
.station-actions a:focus-visible { outline: 3px solid #f4d991; outline-offset: 5px; }
.is-auto-walking .trail-explorer { filter: drop-shadow(0 0 12px #f4dc94aa); }
.is-auto-walking .trail-route-line { stroke: #ffe3a3; stroke-width: 3px; }
.journey-gift-callout {
  position: relative; z-index: 5; display: grid; grid-template-columns: 170px minmax(0, 1fr);
  align-items: center; gap: 22px; width: min(660px, calc(100% - 72px)); margin: 58px auto 94px;
  padding: 30px 38px 32px 23px; color: #403c32; background: #e9e5ce;
  border: 1px solid #6a6753; border-radius: 2px 12px 3px 9px;
  box-shadow: 5px 6px 0 #292e2426; transform: rotate(-.6deg);
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.journey-gift-callout::before { content: ''; position: absolute; top: -12px; left: 34px; width: 86px; height: 26px; background: #aab68b9c; border-inline: 1px dashed #76825e80; transform: rotate(-8deg); pointer-events: none; }
.journey-gift-callout::after { content: ''; position: absolute; inset: 9px; border: 1px dashed #8c886356; border-radius: inherit; pointer-events: none; }
.gift-parcel { width: 170px; align-self: center; transform: rotate(-5deg); transition: transform .35s ease; }
.gift-parcel svg { display: block; width: 100%; height: auto; overflow: visible; }
.gift-parcel-lid, .gift-parcel-bow { transform-origin: 87px 70px; transition: transform .35s cubic-bezier(.2, .7, .3, 1.3); }
.gift-parcel-seal { transform-origin: 116px 103px; transition: transform .25s ease; }
.gift-parcel-spark { opacity: .3; transition: opacity .25s ease; }
.gift-invitation-copy { position: relative; z-index: 1; }
.journey-gift-callout .journey-kicker { color: #6d7253; font-size: 10px; letter-spacing: .12em; }
.journey-gift-callout h2 { margin: 9px 0 12px; font: 600 clamp(22px, 2.6vw, 29px)/1.45 var(--play-display); letter-spacing: .03em; }
.journey-gift-callout p { margin: 0; font-size: 11px; line-height: 1.85; }
.journey-gift-callout [data-gift-callout-status] { max-width: 32ch; color: #73715c; }
.journey-gift-callout .button { min-height: 42px; margin-top: 18px; padding: 9px 16px; gap: 28px; color: #f7f1d9; background: #59634b; border: 1px solid #46513b; box-shadow: 2px 3px 0 #353d2b38; font-size: 12px; }
.journey-gift-callout .button:disabled { opacity: .55; cursor: default; }
.journey-gift-callout .button > span { display: inline-block; transition: transform .2s ease; }
.journey-gift-callout.is-ready { border-color: #a89b61; box-shadow: 5px 7px 0 #292e2426, 0 0 32px #ebd99520; }
.journey-gift-callout.is-ready .gift-parcel { animation: journey-parcel-wake 1.6s ease-in-out 3; }
.journey-gift-callout.is-ready .gift-parcel-spark { opacity: 1; }
.journey-gift-callout.is-ready:is(:hover, :focus-within) { transform: rotate(0); box-shadow: 6px 9px 0 #292e2426, 0 0 38px #ebd99526; }
.journey-gift-callout.is-ready:is(:hover, :focus-within) .gift-parcel { transform: rotate(2deg) translateY(-4px); }
.journey-gift-callout.is-ready:is(:hover, :focus-within) .gift-parcel-lid { transform: translateY(-4px) rotate(-3deg); }
.journey-gift-callout.is-ready:is(:hover, :focus-within) .gift-parcel-bow { transform: translateY(-6px) rotate(4deg); }
.journey-gift-callout.is-ready:is(:hover, :focus-within) .gift-parcel-seal { transform: rotate(12deg); }
.journey-gift-callout.is-ready .button:hover > span { transform: translate(3px, -3px); }
.journey-gift-callout .button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.journey-gift-callout .button:focus-visible { outline: 3px solid #887448; outline-offset: 5px; }
.gift-download-status { margin: 0; color: #6a604c; font-size: 10px; line-height: 1.7; }
.gift-download-status:empty { display: none; }
@keyframes journey-parcel-wake { 35% { transform: rotate(-8deg) translateY(-4px); } 65% { transform: rotate(1deg) translateY(-4px); } }
@keyframes trail-firefly { to { transform: translate(12px, -22px); opacity: .25; } }
@keyframes trail-resonance { from { opacity: .2; } to { opacity: .75; } }
@keyframes souvenir-light { from { transform: scale(.8); filter: brightness(1.8); } to { transform: scale(1); filter: none; } }
@media (max-width: 740px) {
  .journey-gift-callout { grid-template-columns: 115px minmax(0, 1fr); gap: 10px; width: min(520px, calc(100% - 48px)); margin: 46px auto 72px; padding: 27px 23px 28px 10px; }
  .gift-parcel { width: 115px; }
  .journey-gift-callout h2 { font-size: 23px; }
  .journey-gift-callout .button { gap: 14px; }
  .station-screen[data-theme] .station-copy { width: min(100%, 300px); padding: 14px; }
  .station-story { font-size: 12px; line-height: 1.65; }
  .trail-explorer { width: 62px; }
  .station-screen[data-theme] .journey-token { width: 155px; padding: 9px; }
  .station-screen .token-art { width: 35px; }
  .station-screen .station-clipping { top: 4%; width: 130px; }
  .station-screen[data-theme="fanmiao"] { --mobile-prop-left: 73%; }
  [data-theme="sound"] .station-atmosphere i { left: 18%; top: 20%; width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-gift-callout, .journey-gift-callout *, .journey-gift-callout *::before, .journey-gift-callout *::after { animation: none !important; transition: none !important; }
  .station-atmosphere i, .station-screen .journey-token.is-earned .token-art { animation: none; }
}
@media (max-width: 420px) {
  .journey-gift-callout { grid-template-columns: 78px minmax(0, 1fr); padding: 26px 17px 26px 7px; gap: 6px; }
  .gift-parcel { width: 82px; }
  .journey-gift-callout h2 { font-size: 21px; }
  .journey-gift-callout .journey-kicker { font-size: 9px; }
  .journey-gift-callout .button { gap: 10px; padding-inline: 12px; font-size: 11px; }
}