html:has(.journey-page) {
  --journey-header: 88px;
  scroll-padding-top: var(--journey-header);
  scroll-snap-type: y mandatory;
}

.journey-page .play-tools { display: none; }
.journey-page .footer { scroll-snap-align: end; }
.inline-journey { --journey-header: 100px; }
.inline-journey:not(.is-in-view) :is(.journey-rail, .journey-guide) { visibility: hidden; }
.inline-journey .journey-guide { bottom: max(78px, env(safe-area-inset-bottom)); }
.inline-journey .journey-intro:not(.is-current) .paw-pair img { animation-name: none; }
.journey-screen {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--journey-header));
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: clip;
  border-bottom: 1px solid #74644e;
}

.journey-kicker {
  color: #6d4937;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.7;
}

.journey-intro {
  background: radial-gradient(ellipse at 49% 62%, #504b40, transparent 65%),
    repeating-linear-gradient(0deg, #1c1d20 0 31px, #242529 32px 33px);
}
.journey-intro-stage > .journey-kicker { color: #e6d9bd; }

.journey-intro-stage {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: end;
  min-height: min(620px, calc(100svh - var(--journey-header)));
  padding: 39px 0 56px;
}

.journey-intro-stage > .journey-kicker { position: absolute; top: 30px; z-index: 3; }
.paw-pair {
  position: absolute;
  z-index: 3;
  inset: 3% 0 auto;
  height: 57%;
  pointer-events: none;
}

.paw-pair img {
  position: absolute;
  top: -7%;
  width: clamp(205px, 28vw, 365px);
  height: auto;
  filter: drop-shadow(5px 12px 8px #5534213d);
  animation: paw-offer .85s cubic-bezier(.15,.75,.25,1) both;
}

.paw-left { left: 8%; --paw-flip: 1; --paw-tilt: -3deg; }
.paw-right { right: 8%; --paw-flip: -1; --paw-tilt: -3deg; }
@keyframes paw-offer {
  from { opacity: 0; transform: translateY(-48%) scaleX(var(--paw-flip)) rotate(var(--paw-tilt)); }
  to { opacity: 1; transform: translateY(0) scaleX(var(--paw-flip)) rotate(var(--paw-tilt)); }
}

.passport-book {
  position: relative;
  display: grid;
  grid-template-columns: minmax(140px,.52fr) 1fr;
  width: min(680px, 91%);
  margin-top: 238px;
  background: #fff6dd;
  border: 2px solid #4a392f;
  border-radius: 11px 8px 9px 12px;
  box-shadow: 6px 8px 0 #9e5a3d, 12px 17px 0 #71472f26;
  transform: rotate(-1.2deg);
  animation: passport-arrives .72s .15s ease-out both;
}

@keyframes passport-arrives {
  from { opacity: 0; transform: translateY(25px) rotate(-4deg); }
  to { opacity: 1; transform: translateY(0) rotate(-1.2deg); }
}

.passport-cover {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 17px 12px;
  border-radius: 8px 0 0 8px;
  border-right: 2px solid #604433;
  background: #8f4c39;
  color: #fff4ce;
  text-align: center;
}

.passport-cover span { font: 750 clamp(16px,2.1vw,24px)/1.3 var(--play-display); }
.passport-cover img { width: min(95px,82%); height: auto; filter: drop-shadow(2px 4px 3px #40271e66); }
.passport-cover small { font: 9px/1.6 Arial,sans-serif; letter-spacing: .1em; }
.passport-pages { position: relative; z-index: 4; padding: clamp(18px,3vw,35px); }
.passport-pages :is(h1, h3), .station-copy h2, .gift-copy h2 {
  font: 800 clamp(32px,5.3vw,65px)/1.15 var(--play-display);
  letter-spacing: -.045em;
  margin: 9px 0 14px;
}
.passport-pages h1 { font-size: clamp(27px,4vw,45px); }
.passport-pages p, .station-story, .gift-copy p { line-height: 1.85; font-size: clamp(13px,1.4vw,16px); }
.passport-pages .button { margin-top: 8px; }

.journey-rail {
  position: fixed;
  z-index: 30;
  top: 50%;
  right: max(12px, env(safe-area-inset-right));
  transform: translateY(-40%);
}
.journey-rail ol { margin: 0; padding: 0; list-style: none; }
.journey-rail li + li { margin-top: 7px; }
.journey-rail a {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 29px;
  padding: 4px 8px 4px 4px;
  border: 1px solid #5b473d;
  border-radius: 999px;
  background: #fff7e1;
  color: #372921;
  font-size: 10px;
  white-space: nowrap;
}
.journey-rail a span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #ece0c7; font-weight: 800; }
.journey-rail a.is-current { background: #f1cd83; box-shadow: 2px 3px 0 #584333; }
.journey-rail a.is-current span { background: #814633; color: #fff6d9; }
.journey-rail a.is-cleared:not(.is-current) span { background: #3e584c; color: #fff2b9; }

.journey-guide {
  position: fixed;
  z-index: 31;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 13px 4px 5px;
  border: 1px solid #624839;
  border-radius: 40px;
  background: #fff6d9;
  box-shadow: 3px 4px 0 #634c3c;
  font-size: 10px;
}
.journey-guide img { width: 43px; height: 43px; object-fit: contain; }
.journey-guide strong, .journey-guide span { display: block; }
.journey-guide strong { font-size: 13px; }

.journey-trail {
  --trail-height: calc(100svh - var(--journey-header));
  --trail-camera: 0%;
  --trail-mist: 1;
  --lantern-x: 37%;
  --lantern-y: 47%;
  position: relative;
  isolation: isolate;
  background: #181b1c;
}
.inline-journey .journey-trail {
  --trail-page-edge: #f5f3ec;
  overflow: clip;
}
[data-home-ambience="dark"] .inline-journey .journey-trail { --trail-page-edge: #141416; }
.inline-journey .journey-trail::before,
.inline-journey .journey-trail::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: clamp(105px, 24svh, 225px);
  background: linear-gradient(
    var(--trail-page-edge),
    color-mix(in srgb, var(--trail-page-edge) 85%, transparent) 22%,
    color-mix(in srgb, var(--trail-page-edge) 32%, transparent) 62%,
    transparent
  );
  pointer-events: none;
}
.inline-journey .journey-trail::after {
  inset: auto 0 0;
  height: clamp(140px, 29svh, 265px);
  transform: rotate(180deg);
}
.trail-view {
  position: sticky;
  top: var(--journey-header);
  height: var(--trail-height);
  margin-bottom: calc(-1 * var(--trail-height));
  overflow: hidden;
  pointer-events: none;
}
.trail-panorama, .trail-fog { position: absolute; inset: 0; }
.trail-panorama {
  background-image: url(journey-panorama.webp);
  background-position: var(--trail-camera) center;
  background-size: max(145%, calc(var(--trail-height) * 3)) auto;
  background-repeat: no-repeat;
}
.trail-panorama-base {
  filter: grayscale(var(--trail-mist)) brightness(calc(.95 - var(--trail-mist) * .42));
  transition: filter .62s ease;
}
.trail-panorama-light {
  mask-image: radial-gradient(circle clamp(115px,17vw,225px) at var(--lantern-x) var(--lantern-y), #000 14%, #000a 43%, transparent 100%);
  opacity: .55;
  transition: opacity .3s ease;
}
.has-lantern .trail-panorama-light { opacity: 1; }
.trail-fog {
  background:
    radial-gradient(ellipse at 11% 95%, #bdcbce80, transparent 58%),
    radial-gradient(ellipse at 97% 7%, #c0cecf70, transparent 55%),
    linear-gradient(0deg, #a9b7be65, transparent 33%, transparent 67%, #15202966);
  mask-image: radial-gradient(circle clamp(135px,19vw,260px) at var(--lantern-x) var(--lantern-y), transparent 26%, #000 100%);
  opacity: var(--trail-mist);
  transition: opacity .72s ease;
}
.trail-lantern-hint {
  position: sticky;
  top: calc(var(--journey-header) + 14px);
  z-index: 2;
  width: fit-content;
  margin: 0 auto -28px;
  padding: 4px 12px;
  background: #181d20e8;
  color: #f6e5b4;
  border: 1px solid #d6bc7a80;
  border-radius: 20px;
  line-height: 18px;
  font-size: 10px;
  letter-spacing: .1em;
  pointer-events: none;
}
.station-screen { background: transparent; border-bottom-color: transparent; z-index: 1; }
.station-inner {
  display: grid;
  grid-template-columns: minmax(320px,1fr) minmax(145px,.4fr);
  align-items: end;
  justify-content: space-between;
  gap: clamp(45px,12vw,180px);
  padding: 40px 42px 67px 0;
}
.station-copy, .journey-token {
  border: 1.5px solid #5b4436;
  background: #fff5da;
  box-shadow: 5px 6px 0 #5b4436;
}
.station-copy { padding: clamp(20px,3.4vw,44px); transform: rotate(-.65deg); }
.station-copy, .journey-token { transition: background-color .55s, border-color .55s, color .55s; }
.station-copy h2 { color: #382e25; }
.station-mission { padding: 12px 14px; margin: 18px 0; border: 1px dashed #947250; background: #f0e4c8; font-size: 13px; }
.station-mission p { margin: 4px 0 0; line-height: 1.6; }
[data-journey-status] { color: #734936; font-size: 11px; font-weight: 800; }
.station-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px 20px; }
.station-next { display: inline-flex; align-items: center; min-height: 44px; font-weight: 750; font-size: 13px; text-decoration: underline; text-underline-offset: .3em; }
.journey-token { justify-self: center; width: min(100%, 215px); padding: 13px 12px 17px; text-align: center; transform: rotate(3deg); }
.journey-token strong, [data-token-status], .token-eyebrow { display: block; }
.journey-token strong { font-size: 17px; }
[data-token-status], .token-eyebrow { font-size: 11px; color: #674e3c; line-height: 1.6; }
.token-art { width: min(100px,78%); margin: 2px auto; }
.token-art svg { display: block; width: 100%; height: auto; }
.journey-token:not(.is-earned) .token-art { filter: grayscale(.8); opacity: .55; }
.journey-token.is-earned { background: #e7e8aa; }
.station-screen:not(.is-cleared) :is(.station-copy, .journey-token) {
  background: #222728ed;
  color: #f6efe1;
  border-color: #878578;
  box-shadow: 4px 5px 0 #111719b0;
}
.station-screen:not(.is-cleared) :is(.station-copy h2, .journey-kicker, [data-journey-status], .token-eyebrow, [data-token-status]) { color: #efd8a1; }
.station-screen:not(.is-cleared) .station-mission { background: #343a39; border-color: #998965; }
.station-screen:not(.is-cleared) .station-actions .button { color: #251d15; background: #efd8a1; border-color: #efd8a1; }
.station-screen:not(.is-cleared) .station-actions .button:hover { background: #fff0be; }
.station-copy { width: min(100%, 465px); }
.station-screen:is([data-theme='spirit'],[data-theme='sound']) .station-copy { justify-self: end; }
.station-screen:not(.is-cleared) .station-copy { background: #222728dc; }

@media (min-width: 741px) {
  .station-screen:is([data-theme='spirit'],[data-theme='sound']) .station-inner {
    grid-template-columns: minmax(145px,.48fr) minmax(320px,1fr);
  }
  .station-screen:is([data-theme='spirit'],[data-theme='sound']) .station-copy { grid-column: 2; grid-row: 1; }
  .station-screen:is([data-theme='spirit'],[data-theme='sound']) .journey-token {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: min(100%, 170px);
    transform: translateY(32px) rotate(3deg);
  }
}

.gift-screen { background: radial-gradient(ellipse at 31% 40%, #7c6193, transparent 45%), #332c49; color: #fff2cf; }
.gift-inner { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(260px,1fr); align-items: center; gap: clamp(20px,8vw,100px); padding: 55px 55px 78px 0; }
.gift-copy .journey-kicker { color: #f4c894; }
.gift-copy .button { background: #f4cc83; color: #34293a; border-color: #f4cc83; }
.gift-copy .button:disabled { opacity: .53; cursor: not-allowed; transform: none; }
.gift-copy .station-next { margin-left: 15px; }
[data-gift-lock] { font-weight: 750; }
.gift-box { position: relative; justify-self: center; width: min(82%,275px); aspect-ratio: 1.15; margin-top: 35px; border: 2px solid #462c36; border-radius: 0 0 13px 13px; background: #b5644c; box-shadow: 12px 16px 0 #19152c66, inset 0 -15px #8d443c; transform: rotate(-7deg); }
.gift-lid { position: absolute; inset: -19% -5% auto; height: 29%; border: 2px solid #462c36; border-radius: 9px; background: #db9265; z-index: 2; transition: transform .38s ease; }
.gift-ribbon { position: absolute; inset: 0 38% 0; background: #f1c474; box-shadow: inset 6px 0 #e5a95e; }
.gift-box > span { position: absolute; z-index: 3; top: -31%; left: 43%; color: #ffe9a5; font-size: 44px; text-shadow: 2px 4px #7d543e; }
.gift-screen.is-opened .gift-lid { transform: translate(-6%,-96%) rotate(-19deg); }
.gift-dialog { width: min(670px,calc(100% - 28px)); max-height: 91dvh; overflow: auto; color: #372c33; background: #fff3d8; padding: clamp(16px,3vw,28px); border: 2px solid #60463e; box-shadow: 9px 11px 0 #1a172754; }
.gift-dialog::backdrop { background: #1d182bce; backdrop-filter: blur(4px); }
.gift-dialog[open] { animation: gift-reveal .35s ease-out both; }
.gift-dialog h2 { font: 800 clamp(26px,5vw,40px)/1.25 var(--play-display); margin: 16px 0 7px; }
.gift-dialog p { font-size: 13px; line-height: 1.7; }
.gift-dialog .dialog-top button { min-height: 40px; border: 1px solid currentColor; background: transparent; color: inherit; }
[data-gift-art] svg { display: block; width: 100%; max-height: 46dvh; height: auto; margin: 13px auto; }
@keyframes gift-reveal { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }

@media (max-width: 740px) {
  html:has(.journey-page) { --journey-header: 76px; }
  .journey-intro-stage { padding: 32px 0 98px; }
  .journey-intro-stage > .journey-kicker { top: 25px; }
  .paw-pair { inset: 14% -14px auto; }
  .paw-pair img { width: clamp(138px,46vw,235px); top: 0; }
  .paw-left { left: 0; }
  .paw-right { right: 0; }
  .passport-book { width: calc(100% - 19px); margin-top: 168px; grid-template-columns: minmax(82px,.34fr) 1fr; }
  .passport-pages { padding: 15px 13px; }
  .passport-pages h1 { font-size: clamp(24px,6vw,35px); }
  .passport-pages p { font-size: 12px; line-height: 1.7; }
  .passport-pages .button, .station-actions .button { font-size: 11px; padding-inline: 11px; }
  .passport-cover { padding: 12px 7px; }
  .passport-cover small { font-size: 7px; }
  .journey-rail { right: 6px; }
  .journey-rail a { padding: 2px; min-height: 27px; }
  .journey-rail a span { width: 22px; height: 22px; }
  .journey-rail small { display: none; }
  .journey-guide { right: 12px; bottom: 12px; }
  .journey-guide img { width: 35px; height: 35px; }
  .station-inner { grid-template-columns: 1fr; align-content: end; gap: 12px; padding: 60px 26px 63px 0; }
  .station-copy { padding: 16px 14px; }
  .station-copy h2 { font-size: 35px; }
  .station-story { margin: 0 0 8px; font-size: 12px; }
  .station-mission { margin: 9px 0 10px; padding: 8px 10px; font-size: 12px; }
  .station-actions { gap: 7px 12px; }
  .journey-token { width: auto; max-width: 100%; min-width: 192px; display: grid; grid-template-columns: 50px 1fr; align-items: center; justify-self: start; gap: 1px 6px; padding: 5px 9px; text-align: left; transform: rotate(2deg); }
  .token-eyebrow { grid-column: 2; font-size: 8px; }
  .token-art { grid-column: 1; grid-row: 1 / 4; width: 46px; margin: 0; }
  .journey-token strong { grid-column: 2; font-size: 13px; }
  [data-token-status] { grid-column: 2; font-size: 9px; }
  .gift-inner { grid-template-columns: 1fr; gap: 24px; padding: 38px 28px 72px 0; }
  .gift-box { width: min(45%,175px); margin-top: 36px; }
  .gift-copy h2 { font-size: 34px; }
  .gift-copy .station-next { margin-left: 9px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html:has([data-journey]) { scroll-behavior: auto; }
  .journey *, .journey *::before, .journey *::after { animation: none !important; transition: none !important; }
  .paw-pair img { transform: scaleX(var(--paw-flip)) rotate(var(--paw-tilt)); }
}

/* Lantern exploration and paper trail labels. */
.journey-trail { cursor: url(trail-lantern.svg) 17 19, crosshair; }
.station-actions a { cursor: pointer; }
.trail-panorama-base {
  filter: grayscale(var(--trail-mist)) brightness(calc(.95 - var(--trail-mist) * .57));
}
.trail-panorama-light {
  filter: brightness(1.22) saturate(1.19);
  mask-image: radial-gradient(circle clamp(100px,17vw,210px) at var(--lantern-x) var(--lantern-y),#000 15%,#000d 40%,#0005 72%,transparent 100%);
  opacity: .22;
}
.has-lantern .trail-panorama-light { opacity: 1; }
.trail-fog {
  background:
    radial-gradient(ellipse at 23% 70%,#d5dfe0a6,transparent 57%),
    radial-gradient(ellipse at 82% 28%,#a6bac19c,transparent 55%),
    linear-gradient(0deg,#c1d0d2b0,transparent 43%,transparent 65%,#15202995);
  mask-image: radial-gradient(circle clamp(125px,19vw,245px) at var(--lantern-x) var(--lantern-y),transparent 29%,#0002 47%,#000d 76%,#000 100%);
}
.trail-fog::before {
  content: '';
  position: absolute;
  inset: -14%;
  background: radial-gradient(ellipse at 13% 67%,#eff5f498,transparent 31%),
    radial-gradient(ellipse at 42% 91%,#c4d5df97,transparent 34%),
    radial-gradient(ellipse at 88% 42%,#d5e3e58c,transparent 33%),
    radial-gradient(ellipse at 62% 20%,#8eacb77c,transparent 38%);
  filter: blur(22px);
  animation: mist-drift 11s ease-in-out infinite alternate;
}
@keyframes mist-drift { to { transform: translate(7%,-4%) scale(1.08); } }
.station-copy, .journey-token {
  position: relative;
  border: 1px solid #5c493c;
  border-radius: 2px 1px 12px 1px;
  box-shadow: 3px 6px 10px #15121b4d;
}
.station-copy {
  width: min(100%, 320px);
  padding: 13px 15px 11px;
}
.station-copy::after, .journey-token::after {
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: 2;
  top: -6px;
  left: calc(50% - 23px);
  width: 46px;
  height: 11px;
  transform: rotate(-6deg);
  background: #debc7baf;
  box-shadow: 0 1px 0 #42352640;
}
.station-copy h2 { font-size: clamp(24px,3.2vw,38px); margin-block: 5px; }
.station-story { margin: 0 0 5px; font-size: 12px; line-height: 1.58; }
.station-mission { margin: 7px 0; padding: 6px 8px; font-size: 11px; }
.station-actions { gap: 5px 12px; }
.station-actions .button { padding: 7px 9px; gap: 7px; font-size: 11px; }
.station-next { min-height: 36px; font-size: 11px; }
.journey-token, .station-screen:is([data-theme='spirit'],[data-theme='sound']) .journey-token {
  width: min(100%, 112px);
  padding: 8px 5px 7px;
}
.journey-token strong { font-size: 12px; }
.token-eyebrow, [data-token-status] { font-size: 9px; }
.token-art { width: 48px; }
@media (max-width: 740px) {
  .station-inner { gap: 8px; }
  .station-copy { width: min(100%, 265px); padding: 11px 10px 8px; }
  .station-screen:is([data-theme='spirit'],[data-theme='sound']) .station-copy { justify-self: start; }
  .journey-token, .station-screen:is([data-theme='spirit'],[data-theme='sound']) .journey-token {
    width: 130px;
    min-width: 0;
    grid-template-columns: 30px 1fr;
  }
  .token-art { width: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .trail-fog::before { animation: none; }
}