:root {
  --ink: #123f39;
  --jade: #17655b;
  --deep-jade: #0d4b44;
  --paper: #f5f0d5;
  --gold: #dfbb5d;
  --world: 12600px;
  --scene-scale: 1;
  --scene-height: 67%;
  --road-top: 67%;
  --road-height: 23%;
  --decor-strip-height: 10%;
  /* Road-side assets share the scene's measured lower edge. */
  --scene-child-bottom: 0px;
  --runner-track-y: 79%;
  --lane-offset: 11px;
  --scene-overlap: 96px;
  --scene-fade: 80px;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #bfe3df;
  color: var(--ink);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "Microsoft YaHei", sans-serif;
}

button { font: inherit; }

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 430px;
  overflow: hidden;
  isolation: isolate;
  touch-action: none;
  user-select: none;
  cursor: grab;
  outline: none;
  background: #c5e4e2;
}

.stage.is-dragging { cursor: grabbing; }

.stage::after {
  content: "";
  position: absolute;
  z-index: 30;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 86, 76, .09), transparent 16%, transparent 82%, rgba(5, 35, 31, .15)),
    radial-gradient(ellipse at center, transparent 60%, rgba(13, 55, 48, .12) 145%);
}

.stage.story-open::after {
  background: rgba(8, 45, 39, .36);
}

.world {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--world);
  height: 100%;
  will-change: transform;
}

.scene-track {
  /* Do not create a stacking context here: the supplied roadside children
     remain children of the scene, yet their own z-index can sit above road. */
  z-index: auto;
  background: #c8e6df;
}

.scene-main {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--world);
  height: var(--scene-height);
  overflow: visible;
}

.scene-panels {
  position: absolute;
  inset: 0;
  display: flex;
  height: 100%;
}

.scene-panel {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  margin-right: calc(var(--scene-overlap) * -1);
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-color: #c8e6df;
  transform: translateZ(0);
}

.scene-panel:not(:first-child):not(:last-child) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--scene-fade), #000 calc(100% - var(--scene-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--scene-fade), #000 calc(100% - var(--scene-fade)), transparent 100%);
}

.scene-panel:first-child {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--scene-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--scene-fade)), transparent 100%);
}

.scene-panel:last-child {
  margin-right: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--scene-fade), #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--scene-fade), #000 100%);
}

.route-world { z-index: 4; pointer-events: none; }

.decor-verge {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--decor-strip-height);
  overflow: hidden;
  border-top: 1px solid rgba(222, 204, 132, .28);
  background:
    linear-gradient(180deg, rgba(32, 73, 62, .97), rgba(16, 55, 47, .99)),
    repeating-linear-gradient(102deg, rgba(255, 255, 255, .018) 0 3px, transparent 3px 52px);
  box-shadow: inset 0 16px 24px rgba(7, 35, 30, .16);
}

.decor-verge::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 8% 120%, rgba(105, 145, 90, .18), transparent 36%),
    radial-gradient(ellipse at 76% 130%, rgba(105, 145, 90, .14), transparent 32%);
}

.road {
  position: absolute;
  z-index: 2;
  left: -2px;
  right: -2px;
  top: var(--road-top);
  height: var(--road-height);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(210, 207, 167, .96) 0 5%, #6d786b 6%, #4d5f54 43%, #30483f 100%);
  box-shadow: inset 0 13px 20px rgba(255, 244, 197, .14), inset 0 -30px 42px rgba(8, 38, 33, .28);
}

.road::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(102deg, rgba(255,255,255,.024) 0 4px, transparent 4px 56px);
}

.road-edge {
  position: absolute;
  inset: 4% 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #ead993, #fff0b3 48%, #dec378);
  box-shadow: 0 4px 0 rgba(34, 68, 56, .18);
}

.road-center {
  position: absolute;
  right: 0;
  bottom: var(--lane-offset);
  left: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, rgba(246, 226, 169, .68) 0 40px, transparent 40px 98px);
  opacity: .76;
}

.node-layer,
.roadside-layer { position: absolute; inset: 0; }

.roadside-decor {
  position: absolute;
  z-index: 5;
  left: var(--x);
  bottom: var(--scene-child-bottom);
  width: auto;
  height: var(--h, 86px);
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 4px rgba(13, 47, 40, .2));
}

.roadside-decor--flip { transform: translateX(-50%) scaleX(-1); }

.route-node {
  position: absolute;
  z-index: 7;
  left: var(--x);
  bottom: var(--scene-child-bottom);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  transform: translateX(-50%);
  filter: drop-shadow(0 7px 5px rgba(15, 52, 44, .2));
}

button.route-node { pointer-events: auto; cursor: pointer; }
button.route-node:focus-visible { outline: 3px solid #fff2ad; outline-offset: 6px; }

.route-node--interactive::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -7px;
  padding: 2px;
  border-radius: 15px;
  background: conic-gradient(from 0deg, transparent 0 18%, #f8d66f 22% 35%, transparent 39% 56%, #fff0a7 60% 72%, transparent 76% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderOrbit 2.1s linear infinite;
  filter: drop-shadow(0 0 5px rgba(244, 199, 85, .76));
  pointer-events: none;
}

.route-node--interactive:hover .node-asset,
.route-node--interactive:hover .landmark-target { transform: translateY(-2px); filter: brightness(1.08); }

.route-node.is-stamped::before,
.route-node.is-claimed::before {
  animation: none;
  background: linear-gradient(135deg, #f5d56f, #65b989);
  opacity: .94;
}

@keyframes borderOrbit { to { rotate: 1turn; } }

.node-asset {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: 102px;
  object-fit: contain;
  pointer-events: none;
}

.route-node--gate .node-asset { height: 148px; }
.route-node--station .node-asset { height: 148px; }
.route-node--start { transform: none; }

.landmark-target {
  position: relative;
  z-index: 1;
  display: block;
  width: 164px;
  min-height: 48px;
  padding: 7px 12px 6px;
  border: 1px solid rgba(245, 229, 159, .9);
  border-radius: 4px 14px 4px 14px;
  background: linear-gradient(135deg, rgba(250, 246, 219, .98), rgba(211, 231, 202, .93));
  color: #1b5d50;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.22), 0 5px 12px rgba(10, 53, 44, .18);
  text-align: center;
  transition: transform .2s ease, filter .2s ease;
}

.landmark-target::before,
.landmark-target::after {
  content: "";
  position: absolute;
  bottom: -8px;
  width: 2px;
  height: 9px;
  background: #53766a;
}

.landmark-target::before { left: 25%; }
.landmark-target::after { right: 25%; }
.landmark-target strong,
.landmark-target small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landmark-target strong { font: 800 13px/1.2 "Microsoft YaHei", sans-serif; }
.landmark-target small { margin-top: 2px; color: #a06f32; font: 700 9px/1.15 "Microsoft YaHei", sans-serif; }

.km-marker {
  position: absolute;
  z-index: 6;
  left: var(--x);
  bottom: var(--scene-child-bottom);
  transform: translateX(-50%);
  filter: drop-shadow(0 5px 5px rgba(15, 52, 44, .18));
}

.km-marker img { display: block; width: auto; height: 78px; }

.runner-wrap {
  position: absolute;
  z-index: 12;
  left: 34%;
  top: calc(var(--runner-track-y) + var(--runner-y, 0px));
  width: 118px;
  height: 180px;
  transform: translate(calc(-50% + var(--runner-drift, 0px)), -50%);
  pointer-events: none;
  transition: transform .1s ease;
  will-change: left, transform;
}

.runner {
  position: absolute;
  inset: auto 0 8px;
  width: 100%;
  height: 172px;
  object-fit: contain;
  transform-origin: 50% 88%;
  filter: drop-shadow(0 5px 4px rgba(10, 40, 33, .19));
}

.runner.is-reverse { transform: scaleX(-1); }
.runner.is-running { animation: runnerRun .28s infinite alternate ease-in-out; }

.runner-shadow {
  position: absolute;
  left: 19px;
  bottom: 11px;
  width: 80px;
  height: 12px;
  border-radius: 50%;
  background: rgba(9, 35, 29, .43);
  filter: blur(3px);
  transform: skewX(-14deg);
}

.runner-readout {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  padding: 4px 8px;
  border: 1px solid rgba(239, 217, 143, .72);
  border-radius: 999px;
  background: rgba(245, 241, 215, .93);
  color: #17594d;
  font: 800 11px/1.2 "Microsoft YaHei", sans-serif;
  white-space: nowrap;
  box-shadow: 0 3px 9px rgba(13, 50, 42, .13);
}

@keyframes runnerRun { to { translate: 0 -3px; rotate: -.6deg; } }

.foreground { z-index: 14; pointer-events: none; }

.front-plant {
  position: absolute;
  left: var(--x);
  bottom: -6px;
  width: auto;
  height: 146px;
  object-fit: contain;
  transform: translateX(-50%);
  opacity: .84;
  filter: drop-shadow(0 8px 6px rgba(12, 45, 37, .18));
}

.front-plant--palms { height: 162px; }
.front-plant--blossom { height: 152px; }

.hud {
  position: absolute;
  z-index: 40;
  top: max(18px, env(safe-area-inset-top));
  left: clamp(16px, 3vw, 42px);
  right: clamp(16px, 3vw, 42px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
}

.route-title {
  display: grid;
  gap: 2px;
  color: #154f47;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

.route-title span { font: 700 11px/1.2 "Microsoft YaHei", sans-serif; letter-spacing: .16em; color: #b1722d; }
.route-title b { font-size: clamp(18px, 2vw, 25px); letter-spacing: .08em; }

.course-progress {
  position: absolute;
  z-index: 42;
  top: max(10px, calc(env(safe-area-inset-top) + 10px));
  left: 50%;
  width: min(720px, calc(100vw - 260px));
  min-width: 460px;
  transform: translateX(-50%);
  color: #174f47;
  pointer-events: none;
}

.course-line {
  position: absolute;
  z-index: 0;
  left: 5%;
  right: 5%;
  top: 7px;
  height: 3px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(20, 79, 70, .22);
}

.course-line i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ca8d32, #f1d579);
  box-shadow: 0 0 9px rgba(240, 211, 120, .86);
}

.course-progress ol {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-stop {
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 90px;
  font: 600 9px/1.2 "Microsoft YaHei", sans-serif;
  text-align: center;
  opacity: .62;
  transition: opacity .2s ease, transform .2s ease;
}

.course-stop::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid rgba(247, 240, 202, .95);
  border-radius: 50%;
  background: #4c8677;
  box-shadow: 0 2px 6px rgba(8, 50, 43, .18);
}

.course-stop.is-reached { opacity: 1; transform: translateY(-1px); }
.course-stop.is-reached::before { background: #d99d3f; }
.course-stop b { display: block; font-size: 10px; }
.course-stop span { white-space: nowrap; }

.stamp-count {
  position: absolute;
  z-index: 42;
  left: clamp(14px, 3vw, 40px);
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(239, 220, 153, .52);
  border-radius: 999px;
  background: rgba(12, 68, 59, .78);
  color: #fff2be;
  font-family: "Microsoft YaHei", sans-serif;
  pointer-events: none;
  backdrop-filter: blur(6px);
}

.stamp-count small { font-size: 10px; }
.stamp-count strong { font-size: 15px; }

.story-card {
  position: absolute;
  z-index: 55;
  top: 50%;
  left: 50%;
  width: min(450px, calc(100vw - 40px));
  max-height: min(520px, calc(100vh - 32px));
  overflow: auto;
  padding: 24px 26px 22px;
  border: 1px solid rgba(213, 183, 96, .6);
  border-radius: 3px 26px 3px 26px;
  background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 34%), rgba(247, 242, 215, .95);
  box-shadow: 0 22px 48px rgba(8, 43, 37, .26);
  transform: translate(-50%, -46%) scale(.98);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, transform .24s ease, visibility .24s;
  cursor: default;
  touch-action: pan-y;
  backdrop-filter: blur(10px);
}

.story-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(33, 102, 87, .18);
  border-radius: 2px 19px 2px 19px;
  pointer-events: none;
}

.story-card.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
.story-card.is-finish-card { left: 50%; right: auto; }
.story-copy,
.story-interaction,
.story-action,
.story-close { position: relative; z-index: 1; }

.story-close {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #47746b;
  font-size: 23px;
  cursor: pointer;
}

.story-kicker {
  display: block;
  margin-bottom: 6px;
  color: #b2712f;
  font: 800 10px/1.2 "Microsoft YaHei", sans-serif;
  letter-spacing: .2em;
}

.story-card h2 { margin: 0 36px 8px 0; color: #174f47; font-size: 24px; letter-spacing: .04em; }
.story-card p { margin: 0; color: #456b63; font: 14px/1.75 "Microsoft YaHei", sans-serif; }

.story-interaction { margin-top: 15px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-row button {
  padding: 7px 10px;
  border: 1px solid rgba(27, 92, 80, .32);
  border-radius: 999px;
  background: rgba(255,255,255,.48);
  color: #1a5c51;
  font: 700 12px/1.2 "Microsoft YaHei", sans-serif;
  cursor: pointer;
}
.choice-row button:hover,
.choice-row button.is-selected { background: #1e6a5d; color: #fff3c6; }
.interaction-note { min-height: 21px; margin: 10px 0 0; color: #99642c; font: 12px/1.6 "Microsoft YaHei", sans-serif; }

.supply-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px dashed rgba(27, 92, 80, .38);
  background: rgba(255, 255, 255, .36);
  color: #195b50;
  font: 800 13px/1.3 "Microsoft YaHei", sans-serif;
}
.supply-result small { color: #8d6530; font-size: 10px; font-weight: 600; white-space: nowrap; }
.supply-result.is-complete {
  border-style: solid;
  border-color: rgba(57, 138, 92, .55);
  background: rgba(210, 239, 205, .62);
  color: #19613f;
}
.supply-result.is-complete small { color: #397950; }
.story-card.is-complete { border-color: rgba(79, 150, 97, .76); }
.story-card.is-complete .story-action { background: #4a9170; }

.drum-button {
  width: 76px;
  height: 54px;
  border: 2px solid #d3a14a;
  border-radius: 50%;
  background: radial-gradient(circle, #f5d67d 0 31%, #b96f34 33% 42%, #693c28 44% 100%);
  color: #fff8da;
  font: 800 12px/1 "Microsoft YaHei", sans-serif;
  box-shadow: 0 5px 0 #5c3828;
  cursor: pointer;
}
.drum-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #5c3828; }

.story-action {
  width: 100%;
  margin-top: 17px;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: #185c51;
  color: #fff3c5;
  font: 800 13px/1.2 "Microsoft YaHei", sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 13px rgba(18, 79, 69, .19);
}
.story-action:disabled { background: #84988e; cursor: default; box-shadow: none; }

.poster-dialog {
  position: absolute;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}

.poster-dialog.is-open { opacity: 1; visibility: visible; }

.poster-scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 36, 31, .6);
  backdrop-filter: blur(6px);
}

.poster-sheet {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(430px, calc(100vw - 32px));
  max-height: calc(100vh - 28px);
  gap: 13px;
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(244, 214, 123, .68);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.17), transparent 36%), #124f45;
  box-shadow: 0 28px 70px rgba(0, 20, 17, .45);
  transform: translateY(14px) scale(.97);
  transition: transform .24s ease;
}

.poster-dialog.is-open .poster-sheet { transform: none; }

.poster-copy { padding-right: 34px; color: #fff0bd; }
.poster-copy span { display: block; margin-bottom: 3px; color: #edc866; font: 800 10px/1.2 "Microsoft YaHei", sans-serif; letter-spacing: .16em; }
.poster-copy h2 { margin: 0; font-size: 20px; letter-spacing: .04em; }

#posterPreview {
  display: block;
  width: min(100%, 278px);
  max-height: min(58vh, 440px);
  margin: 0 auto;
  border: 1px solid rgba(246, 225, 154, .5);
  box-shadow: 0 12px 24px rgba(0, 27, 23, .3);
  object-fit: contain;
}

.poster-close {
  position: absolute;
  top: 10px;
  right: 11px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff3ca;
  font-size: 24px;
  cursor: pointer;
}

.poster-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.poster-actions button { min-height: 44px; border-radius: 999px; font: 800 13px/1.2 "Microsoft YaHei", sans-serif; cursor: pointer; }
.poster-secondary { border: 1px solid rgba(241, 220, 151, .54); background: transparent; color: #fff1bf; }
.poster-download { border: 0; background: #e7bc53; color: #153f37; box-shadow: 0 6px 14px rgba(0, 25, 21, .25); }
.poster-actions button:disabled { opacity: .58; cursor: default; }

.orientation-tip {
  display: none;
  position: absolute;
  z-index: 58;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(231, 207, 132, .72);
  border-radius: 16px;
  background: rgba(247, 242, 217, .95);
  color: #185a50;
  box-shadow: 0 12px 28px rgba(8, 47, 40, .22);
  backdrop-filter: blur(9px);
}

.orientation-tip.is-hidden,
.story-open .orientation-tip { display: none; }
.orientation-icon { color: #b87a31; font: 800 21px/1 "Microsoft YaHei", sans-serif; white-space: nowrap; }
.orientation-tip span:nth-child(2) { display: grid; gap: 2px; }
.orientation-tip b { font: 800 12px/1.25 "Microsoft YaHei", sans-serif; }
.orientation-tip small { font: 10px/1.35 "Microsoft YaHei", sans-serif; opacity: .72; }
.orientation-tip button {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 0;
  border-radius: 999px;
  background: #1b6256;
  color: #fff2be;
  font: 700 10px/1 "Microsoft YaHei", sans-serif;
  cursor: pointer;
}

.poster-preview {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(201, 154, 66, .45);
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 231, 146, .46) 0 7px, transparent 8px),
    radial-gradient(circle at 83% 28%, rgba(255, 255, 255, .28) 0 12px, transparent 13px),
    radial-gradient(circle at 70% 78%, rgba(224, 157, 67, .36) 0 8px, transparent 9px),
    radial-gradient(circle at 26% 82%, rgba(255, 255, 255, .2) 0 15px, transparent 16px),
    linear-gradient(145deg, #1b6156, #a9d6c6);
  color: #fff5ce;
  text-align: center;
}
.poster-preview strong { font-size: 23px; }
.poster-preview small { font: 11px/1.4 "Microsoft YaHei", sans-serif; }

.gesture-hint {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(245, 243, 219, .82);
  color: #326a5c;
  font: 12px/1.2 "Microsoft YaHei", sans-serif;
  white-space: nowrap;
  transition: opacity .5s;
  backdrop-filter: blur(5px);
}

.gesture-hint.is-soft { opacity: .5; }
.gesture-hint.is-hidden { opacity: 0; }

@media (max-width: 900px) {
  .stage { min-height: 380px; }
  .route-node { transform: translateX(-50%) scale(.76); transform-origin: bottom center; }
  .route-node--start { transform: scale(.76); transform-origin: left bottom; }
  .km-marker { transform: translateX(-50%) scale(.74); transform-origin: bottom center; }
  .runner-wrap { left: 32%; transform: translate(calc(-50% + var(--runner-drift, 0px)), -50%) scale(.76); }
  .roadside-decor { height: var(--mh, 58px); transform-origin: bottom center; }
  .roadside-decor--flip { transform: translateX(-50%) scaleX(-1); }
  .front-plant { height: 116px; opacity: .78; }
  .front-plant--palms { height: 128px; }
  .front-plant--blossom { height: 122px; }
  .route-title b { font-size: 17px; }
  .course-progress { top: max(8px, calc(env(safe-area-inset-top) + 8px)); width: calc(100vw - 36px); min-width: 0; }
  .course-stop { width: 48px; }
  .course-stop span { display: none; }
  .course-stop b { font-size: 9px; }
  .story-card { width: calc(100vw - 24px); max-height: calc(100vh - 24px); padding: 20px 21px 18px; }
  .story-card h2 { font-size: 20px; }
  .story-card p { font-size: 13px; line-height: 1.6; }
  .poster-sheet { width: min(390px, calc(100vw - 24px)); padding: 16px; }
  .poster-copy h2 { font-size: 18px; }
  .poster-actions { gap: 8px; }
  .gesture-hint { bottom: 26px; font-size: 11px; }
  .stamp-count { bottom: 14px; }
}

@media (max-width: 520px) {
  .hud { top: max(10px, env(safe-area-inset-top)); left: 12px; right: 12px; }
  .route-title span { font-size: 9px; }
  .route-title b { font-size: 15px; }
  .stamp-count { left: 10px; padding: 6px 9px; }
}

@media (max-width: 700px) and (orientation: portrait) {
  .orientation-tip {
    top: max(112px, calc(env(safe-area-inset-top) + 104px));
    left: 14px;
    right: 14px;
    display: flex;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .route-title span { font-size: 8px; }
  .route-title b { font-size: 14px; }
  .course-progress { top: max(6px, calc(env(safe-area-inset-top) + 6px)); width: min(620px, calc(100vw - 210px)); }
  .course-stop { gap: 3px; }
  .runner-wrap { transform: translate(calc(-50% + var(--runner-drift, 0px)), -50%) scale(.68); }
  .route-node { transform: translateX(-50%) scale(.7); }
  .route-node--start { transform: scale(.7); }
  .roadside-decor { transform: translateX(-50%) scale(.88); }
  .roadside-decor--flip { transform: translateX(-50%) scale(-.88, .88); }
  .front-plant { transform: translateX(-50%) scale(.82); transform-origin: bottom center; }
  .story-card { width: min(390px, calc(100vw - 36px)); max-height: calc(100vh - 24px); padding: 17px 19px 15px; }
  .story-card h2 { font-size: 19px; }
  .story-card p { font-size: 12px; line-height: 1.55; }
  .story-interaction { margin-top: 10px; }
  .story-action { margin-top: 11px; padding: 8px 12px; }
  .poster-dialog { padding: 12px; }
  .poster-sheet { grid-template-columns: minmax(0, 1fr) 190px; width: min(610px, calc(100vw - 24px)); max-height: calc(100vh - 20px); gap: 10px 14px; padding: 14px; }
  .poster-copy { grid-column: 1; }
  #posterPreview { grid-column: 2; grid-row: 1 / span 2; width: 190px; max-height: calc(100vh - 48px); }
  .poster-actions { grid-column: 1; grid-template-columns: 1fr; }
  .poster-actions button { min-height: 38px; font-size: 12px; }
  .stamp-count { bottom: 10px; }
  .gesture-hint { display: none; }
}

/* Compact landscape keeps the supplied scene artwork in proportion.  Scale
   every foreground layer with the same scene factor so people, stations,
   signs, kilometre markers and plants do not overpower the reduced backdrop. */
@media (max-width: 1180px) and (orientation: landscape) {
  .stage.is-compact-landscape { min-height: 0; }

  .stage.is-compact-landscape .runner-wrap {
    transform: translate(calc(-50% + var(--runner-drift, 0px)), -50%) scale(var(--scene-scale));
  }

  .stage.is-compact-landscape .route-node {
    transform: translateX(-50%) scale(var(--scene-scale));
    transform-origin: center bottom;
  }

  .stage.is-compact-landscape .route-node--start {
    transform: scale(var(--scene-scale));
    transform-origin: left bottom;
  }

  .stage.is-compact-landscape .km-marker {
    transform: translateX(-50%) scale(var(--scene-scale));
    transform-origin: center bottom;
  }

  .stage.is-compact-landscape .roadside-decor {
    height: var(--h, 86px);
    transform: translateX(-50%) scale(var(--scene-scale));
    transform-origin: center bottom;
  }

  .stage.is-compact-landscape .roadside-decor--flip {
    transform: translateX(-50%) scaleX(-1) scale(var(--scene-scale));
  }

  .stage.is-compact-landscape .front-plant {
    transform: translateX(-50%) scale(var(--scene-scale));
    transform-origin: center bottom;
  }
}

@media (prefers-reduced-motion: reduce) {
  .runner.is-running { animation: none; }
  .runner-wrap,
  .gesture-hint,
  .story-card { transition: none; }
}