.journey-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 16px 10px 10px;
  margin: 4px 0 28px;
  border: 2px solid #d7b85c;
  border-radius: 24px;
  background: linear-gradient(125deg, #fff7d4, #edf7df 55%, #d7eee5);
  color: #254941;
  text-align: left;
  box-shadow:
    inset 0 2px 0 #fff,
    0 5px 0 #cfbc84,
    0 10px 22px #35573e19;
}
.journey-entry > img {
  width: 82px;
  height: 94px;
  object-fit: cover;
  border-radius: 17px;
  flex-shrink: 0;
}
.journey-entry > span {
  display: grid;
  gap: 3px;
}
.journey-entry small {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #367c63;
}
.journey-entry strong {
  font: 900 23px/1.1 var(--title, var(--body));
}
.journey-entry span > span {
  font-size: 12px;
}
.journey-entry > .icon {
  margin-left: auto;
  flex-shrink: 0;
}
body[data-screen="journey"] {
  background: #eaf1dc;
}
body[data-screen="journey"] .game-header {
  position: sticky;
  top: var(--safe-top, 0px);
  z-index: 12;
  background: linear-gradient(100deg, #fff8df, #f1f5df);
  border-radius: 0 0 18px 18px;
}
body[data-screen="journey"] .brand {
  display: none;
}
body[data-screen="journey"] #fullscreen {
  display: none;
}
body[data-screen="journey"] .player-supplies {
  flex: 1;
  margin: 0;
  gap: 8px;
}
body[data-screen="journey"] .inventory-summary {
  margin-left: auto;
}
body[data-screen="journey"] .app {
  max-width: 800px;
  padding-bottom: 210px;
}
.journey-page {
  max-width: 640px;
  margin: auto;
  color: #24493d;
}
.journey-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0 8px;
}
.journey-heading small {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #58816a;
}
.journey-heading h1 {
  font-size: 26px;
  line-height: 1.05;
  margin: 4px 0;
}
.journey-heading > div {
  flex: 1;
  min-width: 0;
}
#journey-light {
  display: grid;
  place-content: center;
  gap: 0;
  flex-shrink: 0;
  width: 46px;
  min-height: 46px;
  line-height: 1;
}
#journey-light > span {
  font-size: 24px;
  color: #8e671e;
}
#journey-light small {
  font-size: 9px;
  letter-spacing: 0;
}
.journey-heading .icon-btn {
  flex-shrink: 0;
}
.journey-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #d5c68d;
  border-radius: 20px;
  background: linear-gradient(115deg, #fff9df, #e5f0d8);
  box-shadow:
    inset 0 2px 0 white,
    0 3px 0 #c8d4b4;
}
.journey-status .illustrated-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}
.journey-status > span {
  display: grid;
  gap: 1px;
  font-size: 12px;
}
.journey-status strong {
  font-size: 17px;
}
.journey-dots {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.journey-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c5d4b9;
  box-shadow: inset 0 1px 2px #56754933;
}
.journey-dots i.found {
  background: linear-gradient(#fff094, #ecb32c);
  box-shadow: 0 1px 0 #ad7b16;
}
.journey-coach {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 16px 0 4px;
  padding: 10px 12px;
  background: #fff9e6;
  border-radius: 18px;
  box-shadow: 0 3px 10px #2c613514;
}
.journey-coach img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.journey-coach p {
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
}
.journey-coach strong {
  display: block;
  font-size: 15px;
}
.journey-map {
  position: relative;
  box-sizing: content-box;
  aspect-ratio: var(--map-ratio);
  margin: 16px 0 0;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  border: 2px solid #d5cf91;
  background: #c8e394;
  box-shadow:
    inset 0 0 0 3px #eac76f,
    0 8px 22px #28634223;
}
.journey-overhead {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.journey-find-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 8px;
  color: #426a53;
  font-size: 12px;
  line-height: 1.4;
}
.journey-find-hint > .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.journey-supply {
  position: absolute;
  left: var(--find-x);
  top: var(--find-y);
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: none;
  box-shadow: none;
  touch-action: pan-y;
}
.journey-supply::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 14px;
  bottom: 2px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    #39594066,
    #8cad6333 55%,
    transparent 75%
  );
  pointer-events: none;
}
.journey-supply > .icon {
  position: relative;
  width: 39px;
  height: 39px;
  transform: rotate(var(--find-tilt));
  filter: drop-shadow(1px 3px 0 #255f4844);
}
.journey-supply:active {
  transform: translate(-50%, -50%) scale(0.88);
}
.journey-supply:focus-visible {
  outline: 3px solid #197b96;
  outline-offset: 2px;
}
.journey-supply-shine {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 14px;
  color: #fff1a0;
  text-shadow: 0 1px 2px #806029;
  pointer-events: none;
}
.journey-supply-flight {
  position: fixed;
  z-index: 60;
  width: 44px;
  height: 44px;
  pointer-events: none;
}
.journey-supply-flight > .icon {
  width: 44px;
  height: 44px;
}
.journey-supply-flight > strong {
  position: absolute;
  top: -5px;
  right: -9px;
  padding: 2px 5px;
  border-radius: 8px;
  background: linear-gradient(130deg, #fff7bb, #ffcb63, #eba83b);
  color: #725220;
  font-size: 13px;
  box-shadow: 0 2px 0 #96663155;
}
.journey-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 83%, #e3edbd88 94%, #eff4d6);
  z-index: 1;
  pointer-events: none;
}
/* One static composited color layer: no WebGL context, blur or per-frame JS. */
.journey-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(140deg, #083a7caa, #262075aa 55%, #09627c88);
  opacity: 0;
  transition: opacity 600ms ease;
}
.journey-page[data-light="night"] .journey-map::before {
  opacity: 1;
}
.journey-page[data-light="night"] .journey-map::after {
  background: linear-gradient(transparent 88%, #3a556c88);
}
.journey-lantern {
  opacity: 0;
  transition: opacity 600ms ease;
}
.journey-night-lights {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.journey-page[data-light="night"] .journey-lantern {
  opacity: 1;
}
.journey-overhead > g > path {
  fill: none;
  stroke-linecap: round;
}
.journey-road-shadow {
  stroke: #6c924e;
  stroke-width: 37;
}
.journey-road-edge {
  stroke: #bca36a;
  stroke-width: 31;
}
.journey-road {
  stroke: #fff0b9;
  stroke-width: 26;
}
.journey-road-stones {
  stroke: #cdb778;
  stroke-width: 2;
  stroke-dasharray: 2 12;
}
.journey-road-found {
  stroke: #ebba4c;
  stroke-width: 5;
  stroke-dasharray: 1 11;
}
.journey-node {
  --stop-size: 62px;
  position: absolute;
  left: var(--node-x);
  top: var(--node-y);
  transform: translate(-50%, calc(var(--stop-size) * -0.5 - 5px));
  display: grid;
  justify-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 5px;
  min-width: 108px;
  color: #254b37;
  opacity: 1 !important;
  z-index: 2;
}
.journey-node-face {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--stop-size);
  height: var(--stop-size);
  border: 3px solid #fff5c5;
  border-radius: 50%;
  background: linear-gradient(130deg, #fff9b6, #ffc750 50%, #df9837);
  font: 900 29px var(--body);
  color: #70511d;
  box-shadow:
    inset 0 2px 0 #fff,
    0 5px 0 #987137,
    0 9px 12px #244b413d;
}
.journey-node-face .icon {
  width: 39px;
  height: 39px;
}
.journey-node-face > .illustrated-icon {
  width: 54px;
  height: 54px;
  filter: drop-shadow(0 3px 2px #234e4133);
}
.journey-node-number {
  position: absolute;
  bottom: -4px;
  right: -5px;
  min-width: 26px;
  height: 26px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 2px solid #fff7d2;
  background: linear-gradient(135deg, #fff3b7, #e8bd54);
  color: #6b4e20;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 3px 3px #3b594633;
}
.journey-traveler {
  position: absolute;
  width: 96px;
  height: 96px;
  top: -71px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 3px #315c4166);
  pointer-events: none;
}
.journey-traveler img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.journey-pair-greeting {
  display: none;
}
.journey-flag {
  position: absolute;
  top: -5px;
  left: calc(50% + 34px);
  width: 36px;
  height: 52px;
  pointer-events: none;
}
.journey-node-note {
  position: absolute;
  top: 8px;
  left: calc(50% + 43px);
  display: grid;
  gap: 0;
  padding: 5px 8px;
  background: linear-gradient(135deg, #fff5c2, #ffdfa0);
  border: 1px solid #fff7d2;
  border-radius: 11px;
  color: #63491f;
  box-shadow: 0 3px 0 #a2824755;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.25;
}
.journey-node[data-note-side="left"] .journey-node-note {
  left: auto;
  right: calc(50% + 43px);
}
.journey-node-note strong {
  display: flex;
  align-items: center;
  gap: 3px;
}
.journey-node-note .icon {
  width: 15px;
  height: 15px;
  color: #c1861b;
  fill: #ffd763;
}
.journey-node-note small {
  font-size: 9px;
}
.journey-node-label {
  white-space: nowrap;
  font-weight: 900;
  font-size: 11px;
  background: #fff9df;
  padding: 4px 9px;
  border-radius: 9px;
  box-shadow: 0 2px 3px #25482a33;
}
.journey-node.is-next .journey-node-face {
  background: linear-gradient(135deg, #fff9e5, #e4edcb);
  color: #557154;
  border-color: #eff7db;
  box-shadow:
    inset 0 2px 0 white,
    0 4px 0 #769267,
    0 7px 10px #244b4126;
}
.journey-node.is-next .illustrated-icon {
  opacity: 0.72;
  filter: saturate(0.65) drop-shadow(0 2px 2px #254b4133);
}
.journey-node.is-done .journey-node-face {
  color: #b67513;
}
.journey-node.is-current .journey-node-face {
  color: white;
  border-color: #aff4da;
  background: linear-gradient(135deg, #35c6b0, #1186a3 60%, #306da1);
  box-shadow:
    inset 0 2px 0 #a7ffe8,
    0 5px 0 #125d6d,
    0 0 0 5px #fff7b8bb,
    0 10px 18px #175b4260;
}
.journey-node.is-current {
  --stop-size: 86px;
  z-index: 3;
}
.journey-node.is-current .journey-node-label {
  background: #fff1a2;
  color: #514516;
}
.journey-map-sign {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px;
  background: #fffae5eb;
  border-radius: 15px;
  font-size: 11px;
  color: #476945;
  z-index: 2;
  text-align: center;
}
.journey-preview-stop {
  position: absolute;
  left: var(--node-x);
  top: var(--node-y);
  transform: translate(-50%, -31px);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #5c8059;
  opacity: 0.72;
  font-size: 11px;
  font-weight: 900;
}
.journey-preview-stop .icon {
  width: 42px;
  height: 42px;
  padding: 8px;
  box-sizing: content-box;
  border-radius: 50%;
  border: 2px dashed #fff7cd;
  background: #dcebb9;
}
.journey-preview-stop span {
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 9px;
  background: #fff9df;
}
.journey-actions {
  position: fixed;
  z-index: 11;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(104px + var(--safe-bottom, 0px));
  width: min(600px, calc(100% - 32px));
  padding: 9px;
  border-radius: 23px;
  border: 1px solid #e4cc81;
  background: linear-gradient(130deg, #fff8da, #e7f4ddeb);
  box-shadow: 0 6px 20px #183d4233;
}
.journey-actions > span {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 5px;
  color: #547050;
}
.journey-actions .primary {
  width: 100%;
  min-height: 52px;
  font-size: 18px;
  --blue-top: #1aa5a3;
  --blue: #178ba5;
  --blue-deep: #27699f;
  --blue-edge: #146b7f;
  --blue-base: #11505f;
}
.journey-fork {
  position: relative;
  margin: 18px 0 0;
  padding: 18px 16px;
  border: 2px solid #e0bc5b;
  border-radius: 25px;
  background: linear-gradient(130deg, #fff8d3, #e2f4dc);
  box-shadow: 0 5px 0 #c3b57f;
  text-align: center;
}
.journey-fork > img {
  width: 90px;
  height: 118px;
  object-fit: contain;
  margin-top: -38px;
  float: right;
}
.journey-fork small {
  font-size: 10px;
  font-weight: 900;
  color: #698054;
  letter-spacing: 1px;
}
.journey-fork h2 {
  font-size: 25px;
  line-height: 1.05;
  margin: 4px 0;
}
.journey-fork p {
  font-size: 12px;
  margin: 8px 0 14px;
}
.journey-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  clear: both;
}
.journey-choice {
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 14px 8px;
  border: 2px solid #f5d984;
  border-radius: 22px;
  background: linear-gradient(130deg, #fffced, #ffdf8b);
  box-shadow:
    inset 0 2px 0 white,
    0 4px 0 #bfa056;
  color: #36533f;
}
.journey-choice .illustrated-icon {
  width: 72px;
  height: 72px;
}
.journey-choice strong {
  font-size: 18px;
  line-height: 1.1;
}
.journey-choice > span {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
}
.journey-fork > .small-btn {
  margin-top: 16px;
}
.journey-result-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px;
  margin: 12px 0;
  border-radius: 13px;
  background: linear-gradient(100deg, #e1f1da, #fff1ba);
  color: #326649;
  font-size: 13px;
  font-weight: 900;
}
@media (max-width: 350px) {
  .journey-heading h1 {
    font-size: 22px;
  }
  .journey-status {
    padding: 8px;
  }
  .journey-status strong {
    font-size: 14px;
  }
  .journey-dots {
    gap: 3px;
  }
  .journey-dots i {
    width: 7px;
    height: 7px;
  }
  .journey-actions {
    width: calc(100% - 16px);
  }
  .journey-entry strong {
    font-size: 19px;
  }
  .journey-status .illustrated-icon {
    width: 36px;
    height: 36px;
  }
}

/* One-tap exit stays beside the wallet in both challenge modes. */
.header-home {
  order: -2;
  flex-shrink: 0;
}
.header-home[hidden] {
  display: none;
}
body:is([data-screen="game"], [data-screen="poem"]) .coin-pill {
  order: -1;
}
body:is([data-screen="game"], [data-screen="poem"], [data-screen="journey"])
  .player-supplies {
  justify-content: flex-start;
}
body:is([data-screen="game"], [data-screen="poem"], [data-screen="journey"])
  .inventory-summary {
  margin-left: auto;
}
body[data-screen="poem"] .game-header {
  position: sticky;
  top: var(--safe-top, 0px);
  z-index: 12;
  background: var(--paper);
}
@media (max-width: 760px) {
  body:is([data-screen="game"], [data-screen="poem"], [data-screen="journey"])
    #fullscreen {
    display: none;
  }
  body:is([data-screen="game"], [data-screen="poem"], [data-screen="journey"])
    .player-supplies {
    gap: 6px;
  }
  body:is([data-screen="game"], [data-screen="poem"], [data-screen="journey"])
    .inventory-summary {
    padding-inline: 6px;
  }
  body:is([data-screen="game"], [data-screen="poem"], [data-screen="journey"])
    .inventory-items {
    gap: 5px;
  }
}
@media (min-width: 761px) {
  .journey-map {
    margin-inline: 0;
  }
  .journey-actions {
    bottom: 108px;
  }
  .journey-heading h1 {
    font-size: 32px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .journey-traveler {
    animation: journey-arrive 700ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
  }
  .journey-pair-greeting {
    display: block;
    animation: journey-greeting 1600ms steps(1, end) both;
  }
  .journey-pair-idle {
    animation: journey-idle 1600ms steps(1, end) both;
  }
  @keyframes journey-greeting {
    0%,
    70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes journey-idle {
    0%,
    70% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .journey-node.is-current .illustrated-icon {
    animation: journey-icon-snap 650ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
  }
  @keyframes journey-arrive {
    0% {
      opacity: 0;
      transform: translateX(-50%) translateY(-18px) rotate(-18deg) scale(0.5);
    }
    65% {
      opacity: 1;
      transform: translateX(-50%) translateY(3px) rotate(5deg) scale(1.12);
    }
    100% {
      opacity: 1;
      transform: translateX(-50%);
    }
  }
  @keyframes journey-icon-snap {
    0% {
      transform: scale(0.8) rotate(-12deg);
    }
    65% {
      transform: scale(1.12) rotate(4deg);
    }
    100% {
      transform: none;
    }
  }
  .journey-node.is-current .journey-node-face {
    animation: journey-beacon 2200ms ease-in-out 3;
  }
  .journey-node.is-current:active .journey-node-face {
    transform: translateY(3px) scale(0.96);
  }
  @keyframes journey-beacon {
    0%,
    100% {
      box-shadow:
        inset 0 2px 0 #a7ffe8,
        0 5px 0 #125d6d,
        0 0 0 5px #fff7b8bb,
        0 10px 18px #175b4260;
    }
    50% {
      box-shadow:
        inset 0 2px 0 #a7ffe8,
        0 5px 0 #125d6d,
        0 0 0 10px #fff7b833,
        0 10px 24px #175b4260;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .journey-map::before,
  .journey-lantern {
    transition: none;
  }
}
/* A single supply row leaves the garden, title and next action in view. */
body[data-screen="journey"] .game-header {
  display: flex;
  align-items: center;
  height: 76px;
  padding: 8px 0;
  gap: 8px;
  border-bottom: 0;
}
body[data-screen="journey"] .coin-pill {
  order: -1;
  flex-shrink: 0;
}
body[data-screen="journey"] .top-actions {
  display: flex;
  flex-shrink: 0;
}
@media (max-width: 760px) {
  body[data-screen="journey"] .game-header {
    height: 64px;
    padding: 6px 0;
  }
  body[data-screen="journey"] .inventory-summary {
    gap: 6px;
    padding: 4px 8px;
  }
  body[data-screen="journey"] .inventory-items {
    gap: 7px;
  }
  body[data-screen="journey"] .coin-pill {
    padding-inline: 10px;
    font-size: 14px;
  }
}
@media (min-width: 761px) {
  .journey-actions {
    bottom: calc(160px + var(--safe-bottom, 0px));
  }
}
.journey-entry {
  scroll-margin-top: calc(var(--home-dock-bottom, 0px) + 20px);
  scroll-margin-bottom: 130px;
}
@media (max-width: 350px) {
  body[data-screen="journey"] .inventory-caption {
    display: none;
  }
  body[data-screen="journey"] .coin-pill {
    padding-inline: 8px;
    font-size: 12px;
  }
}