/* 单一白天主题：整趟旅行都是晴天，刻意不做暗色 */
:root {
  --sky: #9ED8F5;
  --sky-soft: #DDF2FF;
  --sun: #FFD25E;
  --peach: #FF8FA7;
  --mint: #7CD3A8;
  --lav: #C7B6F2;
  --ink: #4A3534;
  --paper: #FFFDF8;
  --display: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", sans-serif;
  --latin: "Baloo 2", "ZCOOL KuaiLe", system-ui, sans-serif;
  --body: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { height: 100%; background: #BDE6D2; overflow: hidden; overscroll-behavior: none; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  background-color: #BDE6D2;
  background-image: radial-gradient(#ffffff88 2px, transparent 2.5px);
  background-size: 22px 22px;
}

#sprite-host { position: absolute; width: 0; height: 0; overflow: hidden; }

.trip {
  position: relative;
  height: 100vh;
  height: 100svh;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
  background: var(--sky);
  box-shadow: 0 0 0 3px var(--ink);
  overflow: hidden;
}

/* ---------- 场景舞台 ---------- */
.page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--sky);
  box-shadow: 0 -3px 0 var(--ink);
  will-change: transform;
}

.stage {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.stage > svg.art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.layer { position: absolute; inset: 0; pointer-events: none; }
.layer .tap { pointer-events: auto; }

/* ---------- 顶部章节标签 ---------- */
.chip {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 2px;
  font-family: var(--latin);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .06em;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  z-index: 5;
}
.chip b { font-family: var(--display); font-weight: 400; letter-spacing: 0; }

/* ---------- 对话气泡 ---------- */
.bubble {
  position: absolute;
  max-width: 78%;
  padding: 10px 16px 8px;
  font-family: var(--display);
  font-size: clamp(18px, 5.2vw, 23px);
  line-height: 1.3;
  text-wrap: balance;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 4px 4px 0 var(--ink);
  z-index: 4;
}
.bubble::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 28px;
  width: 18px;
  height: 18px;
  background: var(--paper);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: skewX(20deg) rotate(45deg);
}
.bubble.right::after { left: auto; right: 28px; }
.bubble.up::after { bottom: auto; top: -13px; transform: skewX(20deg) rotate(-135deg); }
.bubble small { display: block; font-size: .68em; opacity: .7; margin-top: 2px; }

/* ---------- 贴纸 ---------- */
.sticker {
  position: absolute;
  padding: 6px 14px 4px;
  font-family: var(--display);
  font-size: 19px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink);
  white-space: nowrap;
  z-index: 4;
}
.sticker.sun { background: var(--sun); }
.sticker.peach { background: var(--peach); color: var(--paper); }
.sticker.mint { background: var(--mint); }
.sticker.lav { background: var(--lav); }
.sticker.big { font-size: 30px; padding: 8px 18px 6px; }

/* ---------- 路线卡片 ---------- */
.route {
  position: absolute;
  top: calc(max(16px, env(safe-area-inset-top)) + 46px);
  left: 16px;
  right: 16px;
  padding: 8px 14px 6px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--ink);
  z-index: 5;
}
.route svg { display: block; width: 100%; height: auto; }

/* ---------- 封面 ---------- */
.cover-title {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 17%;
  text-align: center;
  z-index: 3;
}
.cover-title .eyebrow {
  display: inline-block;
  font-family: var(--latin);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .14em;
  padding: 3px 12px 1px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
}
.cover-title h1 {
  margin: 10px 0 4px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 14vw, 64px);
  line-height: 1.05;
  color: var(--paper);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 5px 0 var(--ink);
  text-wrap: balance;
}
.cover-title h1 .arrow { color: var(--sun); }
.cover-title p {
  margin: 8px 0 0;
  font-family: var(--display);
  font-size: 21px;
}

.swipe-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  z-index: 30;
}
.swipe-hint span {
  font-family: var(--display);
  font-size: 18px;
  padding: 6px 18px 4px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  white-space: nowrap;
  animation: hint 1.4s ease-in-out infinite;
}
@keyframes hint { 50% { transform: translateY(-8px); } }

/* ---------- 右侧场景小圆点 ---------- */
.dots {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 30;
}
.dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 5px;
  cursor: pointer;
  transition: height .3s, background-color .3s;
}
.dots button.on { height: 22px; background: var(--peach); }
.dots button:focus-visible { outline: 2px dashed var(--ink); outline-offset: 2px; }

/* ---------- 场景结尾的照片框 ---------- */
.photos { position: absolute; inset: 0; z-index: 10; visibility: hidden; pointer-events: none; }
.photos-dim { position: absolute; inset: 0; background: rgba(74, 53, 52, .4); }
.photo {
  position: absolute;
  width: min(60%, 270px);
  margin: 0;
  padding: 9px 9px 0;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 5px 6px 0 var(--ink);
}
.photo.p1 { left: 7%; top: 13%; }
.photo.p2 { right: 7%; top: 45%; }
.photo::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 78px;
  height: 24px;
  margin-left: -39px;
  background: rgba(255, 210, 94, .88);
  border: 2px dashed rgba(74, 53, 52, .35);
  transform: rotate(-4deg);
}
.photo.p2::before { background: rgba(124, 211, 168, .88); transform: rotate(5deg); }
.photo .shot {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sky-soft);
  border: 2px solid var(--ink);
  border-radius: 3px;
}
.photo .shot svg, .photo .shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo figcaption { font-family: var(--display); font-size: 18px; text-align: center; padding: 7px 0 9px; }
.photo .tag {
  position: absolute;
  right: -12px;
  bottom: 34px;
  padding: 2px 9px 1px;
  font-family: var(--display);
  font-size: 13px;
  color: var(--paper);
  background: var(--peach);
  border: 2px solid var(--ink);
  border-radius: 999px;
  transform: rotate(8deg);
}

/* ---------- 第二天分隔 ---------- */
.divider.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-inline: 16px;
  text-align: center;
  background: var(--sun);
}
.day2-sun { margin-bottom: 10px; overflow: visible; }
.divider .day {
  font-family: var(--latin);
  font-weight: 800;
  font-size: 84px;
  line-height: .9;
  color: var(--paper);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--ink);
}
.divider h2 {
  margin: 14px 0 6px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 32px;
  text-wrap: balance;
}
.divider p { margin: 0; font-family: var(--display); font-size: 19px; }

/* ---------- 拍照 ---------- */
.viewfinder {
  position: absolute;
  inset: 22% 7% 26%;
  z-index: 3;
}
.viewfinder i {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 0 solid var(--paper);
  filter: drop-shadow(2px 2px 0 var(--ink));
}
.viewfinder i:nth-child(1) { top: 0; left: 0; border-top-width: 5px; border-left-width: 5px; }
.viewfinder i:nth-child(2) { top: 0; right: 0; border-top-width: 5px; border-right-width: 5px; }
.viewfinder i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 5px; border-left-width: 5px; }
.viewfinder i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 5px; border-right-width: 5px; }
.viewfinder .rec {
  position: absolute;
  top: 10px;
  left: 44px;
  font-family: var(--latin);
  font-weight: 800;
  font-size: 14px;
  color: var(--paper);
  text-shadow: 1px 1px 0 var(--ink);
}
.viewfinder .rec::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  background: #FF5A5A;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 6; pointer-events: none; }

.polaroid {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 62%;
  margin-left: -31%;
  padding: 10px 10px 0;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 5px 6px 0 var(--ink);
  z-index: 7;
}
.polaroid svg { display: block; width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 3px; }
.polaroid figcaption {
  font-family: var(--display);
  font-size: 20px;
  text-align: center;
  padding: 8px 0 10px;
}

/* ---------- 可点按钮 ---------- */
.btn {
  position: absolute;
  font-family: var(--display);
  font-size: 19px;
  color: var(--ink);
  padding: 8px 18px 6px;
  background: var(--sun);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 4px 0 var(--ink);
  cursor: pointer;
  pointer-events: auto;
  z-index: 8;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }

.tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tap:focus-visible { outline: 3px dashed var(--ink); }

/* 点击后飘起的爱心 */
.pop-heart {
  position: fixed;
  width: 30px;
  height: 28px;
  pointer-events: none;
  z-index: 50;
}

/* ---------- 结尾 ---------- */
.ending-card {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 14%;
  text-align: center;
  z-index: 3;
}
.ending-card h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 12vw, 54px);
  color: var(--paper);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 5px 0 var(--ink);
}
.ending-card p { margin: 12px 0 0; font-family: var(--display); font-size: 20px; }
.ending .btn { position: relative; margin-top: 18px; }

/* ---------- 大封面：汉堡 & 薯条 ---------- */
.cover .cover-title { top: 9%; }
.cover .cover-title h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin: 12px 0 0;
  font-size: clamp(58px, 17.5vw, 80px);
}
.cover .cover-title h1 span { display: inline-block; }
.w-burger { color: #F2B457; }
.w-fries { color: #FF6B6B; }
.amp {
  margin: 0 2px;
  font-family: var(--latin);
  font-weight: 800;
  font-size: .56em;
  color: var(--mint);
  transform: rotate(-12deg);
}
.ribbon {
  position: relative;
  display: inline-block;
  margin-top: 10px;
  padding: 8px 30px 4px;
  background: var(--peach);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-3deg);
}
.ribbon::before, .ribbon::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 24px;
  height: 100%;
  background: #E86A86;
  border-block: 3px solid var(--ink);
}
.ribbon::before { left: -27px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.ribbon::after { right: -27px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.ribbon span {
  font-family: var(--display);
  font-size: clamp(26px, 8vw, 34px);
  letter-spacing: .08em;
  color: var(--paper);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 2px 3px 0 var(--ink);
}

/* ---------- 邀请：思考泡泡 ---------- */
.think {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 98px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--ink);
  z-index: 4;
}
.think::before, .think::after {
  content: "";
  position: absolute;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.think::before { width: 22px; height: 22px; bottom: -24px; right: 30px; }
.think::after { width: 12px; height: 12px; bottom: -42px; right: 22px; }
.think svg { position: absolute; left: 26px; top: 16px; width: 72px; height: 66px; overflow: visible; }
.iv-dots { font-family: var(--latin); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: 6px; }
.iv-dots i { display: inline-block; font-style: normal; }
.iv-b2 { font-size: clamp(26px, 8vw, 34px); }

/* ---------- 第三天过场 ---------- */
.divider.page.day3 { background: var(--peach); }
.day3-icon { overflow: visible; margin-bottom: 8px; }

/* 常驻小动画 */
.spin { transform-box: fill-box; transform-origin: center; animation: spin 18s linear infinite; }
.bob { transform-box: fill-box; transform-origin: center bottom; animation: bob 2.4s ease-in-out infinite; }
.drift { animation: drift 9s ease-in-out infinite alternate; }
.steam { transform-box: fill-box; animation: steam 2.2s ease-in-out infinite; }
.steam:nth-of-type(2) { animation-delay: .7s; }
.steam:nth-of-type(3) { animation-delay: 1.4s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
@keyframes drift { to { transform: translateX(26px); } }
@keyframes steam { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-22px); } }

@media (prefers-reduced-motion: reduce) {
  .spin, .bob, .drift, .steam, .swipe-hint span, .viewfinder .rec::before { animation: none; }
}