/* 独立首页 → 目的地 → 居中准备弹窗 → 紧凑花园。 */
.home-actions { max-width: 360px; margin: 22px auto 0; }
.home-actions .btn { width: 100%; }
#view-destinations { padding-bottom: 24px; }
#view-destinations .destination-section { margin-top: 18px; }

/* 所有辅助面板共用居中弹窗；长内容在弹窗内部滚动。 */
.overlay-root { align-items: center; padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.overlay-root .sheet[class] {
  width: 100%; max-width: 460px; margin: 0; padding: 22px;
  border-radius: 24px; max-height: 86vh; max-height: 86dvh;
  overscroll-behavior: contain; animation: garden-popup-in .18s ease-out;
}
.overlay-root .sheet-title { font-size: 20px; line-height: 1.5; }
.overlay-root .sheet-body { font-size: 13px; }
.overlay-root .encounter-options { gap: 10px; margin: 14px 0; }
.overlay-root .encounter-options > button { padding: 13px; }
.overlay-root .sheet-actions { flex-wrap: wrap; gap: 8px; }
.overlay-root .sheet-actions .btn { min-width: 105px; }
.overlay-root .day-path { padding-left: 0; padding-right: 0; }
.overlay-root .day-stop { min-width: 0; width: 10%; }
.overlay-root .trip-banner { padding: 12px; gap: 10px; }
.overlay-root .trip-mini-art { width: 70px; }
.overlay-root .trip-stamp { display: none; }
.overlay-root .trip-banner h2 { font-size: 17px; }
.overlay-root .trip-banner h2 span { display: none; }
@keyframes garden-popup-in { from { opacity: 0; scale: .97; } to { opacity: 1; scale: 1; } }

/* 花园页用单列游戏布局，桌面也保持同一套操作顺序。 */
body[data-view="game"] { background: #F5F2E7; }
body[data-view="game"] .app {
  max-width: 520px; padding: max(4px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
}
body[data-view="game"] .brandbar { height: 38px; justify-content: center; border: 0; }
body[data-view="game"] .brand { font-size: 15px; gap: 6px; }
body[data-view="game"] .brand-flower { font-size: 20px; }
body[data-view="game"] .brand-edition,
body[data-view="game"] .brand-motto,
body[data-view="game"] #nav-settings { display: none; }
#view-game { padding-bottom: 0; }
#view-game .topbar { height: 50px; margin: 0; padding: 0; gap: 8px; }
#view-game .icon-btn { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 12px; box-shadow: none; }
.game-destination { display: inline-flex; align-items: center; gap: 3px; padding: 8px 0; min-width: 0; border: 0; background: none; color: #526A44; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.game-destination > span:last-child { color: #929C84; }
#view-game .daytag { margin-left: auto; font-size: 12px; white-space: nowrap; letter-spacing: 0; }
#view-game .daytag b { font-size: 22px; }
.game-scorebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 35px; padding: 0 4px; }
.game-score { white-space: nowrap; color: #939782; }
.game-score b { color: #698452; font-size: 29px; line-height: 1; }
.game-score span { font-size: 12px; }
.game-objective { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; color: #939782; padding: 8px 0 8px 8px; font: inherit; font-size: 12px; cursor: pointer; }
.game-objective b { color: #667C51; font-size: 13px; }
.score-track { height: 3px; margin: 3px 4px 2px; background: #E6E7D7; border-radius: 5px; overflow: hidden; }
.score-track > span { display: block; height: 100%; width: 0; background: #A2B58C; border-radius: inherit; transition: width .3s ease; }
#view-game #tripBanner, #view-game #dayPath, #view-game .garden-heading,
#view-game #terrainLegend, #view-game #ecologyStatus, #view-game #bloomLetter,
#view-game #adventurePanel, #view-game .scene-decor, #view-game .care-foot { display: none; }
#view-game .play-layout { display: flex; flex-direction: column; gap: 0; }
#view-game .garden-area { width: 100%; padding: 0; background: none; border: 0; border-radius: 0; overflow: visible; }
#view-game .garden-area .stage {
  width: min(100%, 460px); max-width: 100%; margin: 0 auto -5px; padding: 0;
  background: none; box-shadow: none;
}
#view-game .stage canvas { width: 100%; height: auto; }
#view-game .care-area { width: 100%; gap: 0; }
#view-game .care-box { padding: 10px 10px 8px; border-radius: 22px; border: 1px solid #E5E3D7; background: #FFFCF5; box-shadow: 0 3px 12px #76674908; }
#view-game .care-heading { display: none; }
#view-game .hint { padding: 0 2px; margin: 0 0 5px; background: none; border: 0; font-size: 11px; line-height: 1.5; }
#view-game .hint:not(.good):not(.bad) { display: none; }
#view-game .hint.bad { color: #AA6655; }
.tray-step { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin: 0 1px 7px; color: #8C937E; font-size: 11px; }
.tray-step .link { padding: 2px 6px; min-height: 24px; text-decoration: none; font-size: 12px; font-weight: 600; }
#view-game .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
#view-game .cards.four-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#view-game .cards .seed-card { min-width: 0; min-height: 88px; padding: 5px 3px; gap: 1px; border-radius: 14px; position: relative; background: #F2F1E3; border-color: transparent; box-shadow: none; }
#view-game .cards.four-choices .seed-card { min-height: 88px; padding: 5px 3px; }
#view-game .cards .seed-card.on { background: #E9EED9; border-color: #A4B68C; box-shadow: inset 0 0 0 1px #D5DFC3; transform: none; }
#view-game .card-art { width: 42px; height: 42px; margin: 0; }
#view-game .seed-name { font-size: 13px; line-height: 1.5; margin: 0; }
#view-game .seed-meta { font-size: 10px; line-height: 1.5; white-space: normal; }
#view-game .seed-dots { position: absolute; right: 6px; top: 6px; grid-template-columns: repeat(3, 3px); grid-auto-rows: 3px; gap: 1px; }
#view-game .tray-actions { gap: 8px; margin-top: 8px; }
#view-game .tray-actions .btn { min-height: 38px; padding: 6px 10px; font-size: 13px; border-radius: 13px; }
#view-game .tray-actions .btn[data-act="rotate"] { flex: 0 0 29%; }
#view-game .tray-actions .btn[data-act="confirm"] { flex: 1; }
#view-game .tray-actions .button-orbit { display: none; }
#view-game #waterTray { gap: 7px; margin-top: 0; }
#view-game #waterTray .water-note { font-size: 11px; line-height: 1.5; }
#view-game #waterTray .drops { min-height: 45px; padding: 6px 10px; gap: 8px; border-radius: 12px; }
#view-game #waterTray .drop { width: 19px; height: 25px; }
#view-game #btn-end { min-height: 40px; font-size: 13px; }
#view-game .game-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 7px; }
#view-game .tool-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 46px; padding: 5px 0; border: 1px solid #D9DFCC; border-radius: 13px; background: #FCFBF3; box-shadow: 0 2px 0 #E3E6D7; color: #7F8A70; font: inherit; font-size: 15px; white-space: nowrap; cursor: pointer; }
#view-game .tool-button:active { background: #EAF0DD; box-shadow: none; transform: translateY(1px); }
#view-game .tool-button > span[aria-hidden] { font-size: 19px; }
#view-game .has-news::after { content: ''; position: absolute; top: 6px; right: 12px; width: 6px; height: 6px; border-radius: 50%; background: #C58973; }
body[data-view="game"] .app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
body[data-view="game"] .brandbar { flex: 0 0 38px; }
#view-game { display: flex; flex-direction: column; flex: 1; }
#view-game .topbar, .game-scorebar, .score-track, #view-game .play-layout { flex-shrink: 0; }
.garden-journal { position: relative; flex: 1; min-height: 0; overflow: hidden; color: #94A183; }
.journal-copy { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); }
.journal-kicker { font-size: 9px; letter-spacing: 1px; }
.journal-copy p { font-size: 11px; line-height: 1.5; margin: 3px 0 6px; }
.journal-trail { display: flex; align-items: center; gap: 7px; }
.journal-trail i { width: 4px; height: 4px; border-radius: 50%; background: #DFE4D1; }
.journal-trail i.past { background: #B5C29F; }
.journal-trail i.current { width: 6px; height: 6px; background: #94AA7C; box-shadow: 0 0 0 3px #E5EAD8; }
.journal-art { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 105px; height: 58px; opacity: .8; }

/* 保存面板只保留关闭与保存，结果通过状态文字告知。 */
.poster-wrap img { -webkit-touch-callout: default; user-select: auto; -webkit-user-select: auto; }
.poster-status { margin: 10px 0 0; }
@media (max-width: 620px) {
  #view-home .journey-hero { padding-top: 20px; gap: 16px; }
  #view-home .home-actions { margin-top: 16px; }
  #view-destinations .destination-section { margin-top: 8px; }
  #view-destinations .destination-art { min-height: 112px; }
  #view-destinations .destination-card-body { padding: 11px 14px; }
  #view-destinations .departure { margin-top: 17px; }
  #view-game .garden-area .stage { width: min(100%, calc((100svh - 390px) * .88235)); }

  /* 首页和目的地页按可用视口分配空间，不再以长网页堆叠。 */
  body[data-view="home"], body[data-view="destinations"] { height: 100vh; height: 100dvh; overflow: hidden; }
  body[data-view="home"] .app, body[data-view="destinations"] .app {
    display: flex; flex-direction: column; height: 100vh; height: 100dvh;
    min-height: 0; padding: max(4px, env(safe-area-inset-top)) 16px max(8px, env(safe-area-inset-bottom));
  }
  body[data-view="home"] .brandbar, body[data-view="destinations"] .brandbar { flex: 0 0 50px; height: 50px; }
  #view-home, #view-destinations { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; }
  #view-home .journey-hero { flex: 1; min-height: 0; grid-template-rows: auto minmax(0, 1fr); padding: 10px 0 6px; gap: 8px; }
  #view-home .hero-copy { min-height: 0; }
  #view-home .hero .eyebrow { font-size: 7px; margin-bottom: 0; }
  #view-home .hand-note { font-size: 10px; margin-top: 5px; }
  #view-home .hand-note span { font-size: 17px; }
  #view-home .hero h1 { font-size: clamp(25px, 7.6vw, 34px); line-height: 1.35; margin: 7px 0; }
  #view-home .hero .lede { font-size: 11px; line-height: 1.7; }
  #view-home .hero-chips { margin-top: 7px; font-size: 9px; gap: 12px; }
  #view-home .hero-picture { height: 100%; width: auto; aspect-ratio: .82; max-width: 78%; min-height: 0; padding: 10px 4px 0; border-width: 5px; display: flex; flex-direction: column; }
  #view-home .picture-caption { margin-top: 0; font-size: 6px; letter-spacing: 1.7px; flex: 0 0 auto; }
  #view-home .hero .stage-home { flex: 1; min-height: 0; height: 0; width: 100%; margin: 0; }
  #view-home .hero .stage-home canvas { width: 100%; height: 100%; object-fit: contain; }
  #view-home .picture-footer { flex: 0 0 auto; font-size: 7px; padding-bottom: 6px; }
  #view-home .floating-sticker { font-size: 8px; padding: 4px 6px; }
  #view-home .sticker-cloud { left: -16px; top: 24%; }
  #view-home .sticker-flower { right: -15px; bottom: 18%; }
  #view-home .home-actions { flex: 0 0 auto; width: 100%; margin: 7px auto 0; gap: 6px; }
  #view-home .home-actions .btn { min-height: 42px; padding: 6px 14px; font-size: 14px; }
  #view-home .home-actions .button-orbit { width: 25px; height: 25px; flex-basis: 25px; }
  #view-home .meta-row { margin-top: 8px; font-size: 9px; gap: 8px; line-height: 1.5; }
  #view-home .links { flex: 0 0 auto; margin-top: 2px; gap: 7px; }
  #view-home .links .link { font-size: 10px; padding: 5px 1px; }
  #view-home > .footnote { margin: 2px 0 0; font-size: 8px; line-height: 1.4; }

  #view-destinations > .topbar { flex: 0 0 43px; height: 43px; }
  #view-destinations .destination-section { flex: 1; min-height: 0; margin-top: 10px; display: flex; flex-direction: column; }
  #view-destinations .section-top { flex: 0 0 auto; gap: 4px; margin-bottom: 10px; }
  #view-destinations .section-top h2 { font-size: 23px; margin: 2px 0 0; }
  #view-destinations .destination-grid { flex: 1; min-height: 0; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; }
  #view-destinations .destination-card { min-height: 0; grid-template-columns: 29% minmax(0, 1fr); }
  #view-destinations .destination-art { min-height: 0; height: 100%; }
  #view-destinations .destination-art svg { max-height: 110px; height: 100%; transform: none; }
  #view-destinations .destination-card-body { align-self: center; padding: 9px 12px; }
  #view-destinations .destination-card h3 { font-size: 17px; margin: 2px 0 4px; }
  #view-destinations .destination-card p { font-size: 11px; line-height: 1.5; margin-bottom: 5px; }
  #view-destinations .destination-rule { font-size: 9px; padding: 3px 6px; }
  #view-destinations .departure { flex: 0 0 auto; margin-top: 12px; padding: 10px 14px; gap: 8px; }
  #view-destinations .departure-copy .mini-ticket, #view-destinations .departure-copy > span:last-child { display: none; }
  #view-destinations .departure-copy b { font-size: 13px; }
  #view-destinations .departure .actions { border: 0; padding: 0; }
  #view-destinations .departure .btn { min-height: 43px; padding: 6px 12px; font-size: 13px; }
  #view-destinations .departure .button-orbit { width: 26px; height: 26px; flex-basis: 26px; }
}
@media (max-width: 620px) and (max-height: 680px) {
  #view-home .hero .eyebrow, #view-home .hand-note, #view-home > .footnote { display: none; }
  #view-home .hero h1 { font-size: 25px; margin: 3px 0 5px; }
  #view-home .hero .lede { font-size: 10px; }
  #view-home .hero-chips { font-size: 8px; margin-top: 5px; }
  #view-home .journey-hero { padding-top: 7px; gap: 6px; }
  #view-destinations .section-top > p, #view-destinations .section-top .eyebrow, #view-destinations .destination-kicker { display: none; }
  #view-destinations .section-top h2 { font-size: 21px; }
  #view-destinations .destination-card p { font-size: 10px; }
  #view-destinations .destination-card-body { padding: 7px 10px; }
  #view-destinations .destination-grid { gap: 8px; }
}
@media (max-width: 359px) {
  .game-destination { font-size: 13px; }
  #view-game .tool-button { font-size: 14px; gap: 2px; }
  #view-game .tool-button > span[aria-hidden] { font-size: 17px; }
  #view-game .seed-name { font-size: 12px; }
  #view-game .cards.four-choices .seed-meta { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .overlay-root .sheet[class] { animation: none; }
  .score-track > span { transition: none; }
}