/* The original farm scene stays visible above this optional, client-only journey. */
.ag-sheet {
  --ag-ink: #263b2b;
  --ag-muted: #65705c;
  --ag-paper: #fcf8ec;
  --ag-line: #dcd9c4;
  --ag-leaf: #486947;
  --ag-gold: #967a36;
  --ag-danger: #8d3930;
  position: fixed;
  inset: auto 0 0;
  box-sizing: border-box;
  width: min(100%, 480px);
  max-width: 480px;
  max-height: min(80dvh, 730px);
  padding: 0;
  margin: 0 auto;
  border: 1px solid #ffffffc4;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  color: var(--ag-ink);
  background: var(--ag-paper);
  box-shadow: 0 -8px 48px #263b2b2b;
  font: 15px/1.5 "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  overflow: hidden;
  overscroll-behavior: contain;
}
.ag-sheet::backdrop { background: linear-gradient(#17241908, #17241929); }
body.ag-guide-open { overflow: hidden; }
.ag-sheet *, .ag-sheet *::before, .ag-sheet *::after { box-sizing: border-box; }
.ag-sheet button, .ag-sheet a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ag-sheet button { font: inherit; cursor: pointer; letter-spacing: normal; text-transform: none; }
.ag-sheet button:disabled { cursor: default; opacity: .48; }
.ag-sheet :focus-visible { outline: 3px solid var(--ag-gold); outline-offset: 3px; }
.ag-sheet h2:focus { outline: none; }
.ag-shell { display: flex; flex-direction: column; max-height: min(80dvh, 730px); }
.ag-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 8px; flex: 0 0 auto; }
.ag-sheet-top > div { display: flex; flex-direction: column; gap: 3px; }
.ag-kicker { font-size: 11px; font-weight: 750; letter-spacing: .13em; color: var(--ag-gold); }
.ag-demo-label { color: var(--ag-muted); font-size: 12px; }
.ag-icon-button { width: 44px; height: 44px; min-width: 44px; padding: 0; border: 1px solid var(--ag-line); border-radius: 50%; background: #fffdf5; color: var(--ag-ink); font-size: 25px !important; line-height: 1; }
.ag-body { padding: 0 18px 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ag-progress { display: flex; gap: 5px; padding: 4px 0 8px; }
.ag-progress span { flex: 1; height: 4px; border-radius: 4px; background: #dedfcf; }
.ag-progress span.done { background: #91a78b; }
.ag-progress span.current { background: var(--ag-leaf); }
.ag-step-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--ag-muted); font-size: 11px; }
.ag-sheet h2 { margin: 10px 0 7px; font-size: clamp(21px, 5.9vw, 25px); line-height: 1.25; font-weight: 750; }
.ag-copy { margin: 0 0 12px; font-size: 14px; line-height: 1.65; }
.ag-demo { position: relative; padding: 12px; border: 1px solid var(--ag-line); border-radius: 17px; background: linear-gradient(145deg, #f0edda, #f7f3e5); }
.ag-demo p { margin: 5px 0; font-size: 13px; }
.ag-art { display: block; object-fit: contain; width: 96px; height: 96px; flex-shrink: 0; filter: drop-shadow(0 4px 5px #3c402a14); }
.ag-demo-stage { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 96px; }
.ag-demo-stage > div { flex: 1; min-width: 0; }
.ag-demo-stage strong, .ag-touch strong { display: block; font-size: 14px; }
.ag-demo-stage p { color: var(--ag-muted); }
.ag-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 9px 12px; border: 1px solid #899b7c; border-radius: 12px; color: var(--ag-ink); background: #fffdf5; text-decoration: none; font-size: 14px !important; font-weight: 650; line-height: 1.4; box-shadow: none; }
.ag-button.ag-primary { color: #fffdf2; background: var(--ag-leaf); border-color: var(--ag-leaf); }
.ag-button[aria-pressed="true"] { background: #dde6d6; border-color: var(--ag-leaf); box-shadow: inset 0 0 0 1px var(--ag-leaf); }
.ag-wide { width: 100%; margin-top: 10px; }
.ag-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.ag-role-choice { margin: 0 0 8px; }
.ag-role-choice .ag-button { font-size: 12px !important; }
.ag-touch { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 118px; padding: 8px; border: 1px dashed #94a07b; border-radius: 12px; color: var(--ag-ink); background: #ffffff5c; }
.ag-plot { min-height: 142px; }
.ag-empty-plot { display: grid; place-items: center; width: 94px; height: 66px; background: radial-gradient(ellipse, #b5aa7b 0, #b5aa7b 59%, transparent 61%); color: #fcf8ec; font-size: 34px; }
.ag-animal { min-height: 145px; border-color: transparent; background: transparent; }
.ag-animal .ag-art { width: 112px; height: 94px; }
.ag-animal small { text-align: center; font-size: 12px; color: var(--ag-muted); }
.ag-timer { display: inline-block; font-size: 12px; color: var(--ag-muted); }
.ag-status { padding: 9px 10px; margin-top: 10px !important; border-radius: 10px; background: #e1e9d8; border: 1px solid #bbceb0; color: #334c2f; font-size: 12px !important; line-height: 1.6; }
.ag-status.ag-danger { color: var(--ag-danger); background: #f8e6da; border-color: #dbb5a0; }
.ag-materials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ag-material { display: flex; flex-direction: column; align-items: center; min-height: 124px; padding: 8px 3px; background: #fffdf5; border: 1px solid var(--ag-line); border-radius: 12px; color: var(--ag-ink); }
.ag-material[aria-pressed="true"] { background: #dde6d6; border-color: var(--ag-leaf); }
.ag-material .ag-art { width: 68px; height: 68px; }
.ag-material strong { font-size: 12px; line-height: 1.3; text-align: center; margin: 2px 0 4px; }
.ag-material small { font-size: 10px; color: var(--ag-muted); }
.ag-story-stage { position: relative; border-radius: 11px; overflow: hidden; height: 134px; background: #dedabf; }
.ag-story-art { width: 100%; height: 100%; object-fit: cover; filter: none; }
.ag-story-stage > span { position: absolute; bottom: 0; left: 0; right: 0; padding: 15px 9px 7px; color: #fffef3; background: linear-gradient(transparent, #243025e0); font-size: 12px; text-align: center; }
.ag-gear-stage .ag-art { width: 108px; height: 122px; }
.ag-quality { display: block; margin-bottom: 6px; color: #36677a; font-size: 12px; }
.ag-risk { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 0 8px; }
.ag-risk > div { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ag-risk strong { font-size: 30px; color: var(--ag-leaf); line-height: 1.3; }
.ag-risk > div + div strong, .ag-risk > div + div span { color: var(--ag-danger); }
.ag-risk span { font-size: 12px; }
.ag-risk-button { border-color: #bc8b77; }
.ag-badge-note { text-align: center; font-size: 11px !important; color: var(--ag-muted); }
.ag-links { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 4px; }
.ag-route { display: inline-flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 44px; padding: 6px 1px; color: var(--ag-leaf); font-size: 12px; text-decoration: none; font-weight: 650; }
.ag-footer { flex: 0 0 auto; padding: 10px 18px max(9px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ag-line); background: var(--ag-paper); }
.ag-footer-row { display: grid; grid-template-columns: .72fr 1.28fr; gap: 10px; }
.ag-footer-note { display: flex; justify-content: space-between; align-items: center; gap: 5px; color: var(--ag-muted); font-size: 10px; }
.ag-text-button { display: inline-flex; justify-content: center; align-items: center; min-width: 44px; min-height: 44px; padding: 5px 0; border: 0; color: var(--ag-muted); background: transparent; font-size: 11px !important; box-shadow: none; }
.ag-complete { text-align: center; padding: 5px 22px 16px; }
.ag-complete > .ag-art { width: 146px; height: 152px; margin: 0 auto 10px; }
.ag-complete p { font-size: 14px; }
.ag-complete .ag-links { justify-content: center; }
.ag-complete + .ag-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 370px) {
  .ag-sheet-top { padding-left: 15px; padding-right: 15px; }
  .ag-body { padding-left: 15px; padding-right: 15px; }
  .ag-footer { padding-left: 15px; padding-right: 15px; }
  .ag-copy { font-size: 13px; }
  .ag-footer-note > span { font-size: 9px; }
}
@media (max-height: 650px) {
  .ag-sheet, .ag-shell { max-height: 86dvh; }
  .ag-sheet-top { padding-top: 9px; }
  .ag-story-stage { height: 100px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ag-sheet[open] { animation: ag-arrive .18s ease-out; }
  @keyframes ag-arrive { from { transform: translateY(24px); opacity: .5; } to { transform: translateY(0); opacity: 1; } }
}