/* ============================================================
   離線地圖互動遊戲（page-offline-map-challenge.hbs）
   上半：全螢幕舞台＝場景插畫＋手機＋敘事面板；下半：重點整理。
   前綴 sy-om-（舞台）／sy-omm-（手機裡的地圖 SVG），避開 components/ 的共用 class。
   1rem = 10px（全站 html 62.5%），這裡一律寫 px。只有這一頁載。
   ============================================================ */

.sy-om {
  --om-ok: #047857;
  --om-warn: #B45309;
  --om-bad: #B91C1C;
  --om-gps: #3B82F6;
  --om-panel-w: min(470px, 40vw);
  background: var(--sy-paper);
  color: var(--sy-ink);
}
body:not(.home-template):not(.page-100peaks) .site-content > .site-main.sy-om { padding-top: 0; }
.sy-om ::selection { background: var(--sy-terracotta-tint); color: var(--sy-ink); }

/* 沒有 JS：舞台整塊不出現，直接是重點整理 */
.sy-om__stage { display: none; }
.sy-js .sy-om__stage { display: block; }

/* ───────────────────────── 舞台 ───────────────────────── */
.sy-om__stage {
  position: relative;
  height: calc(100svh - var(--header-h));
  min-height: 600px;
  max-height: 1100px;
  overflow: hidden;
  isolation: isolate;
  background: var(--sy-dusk);
}

.sy-om__scene { position: absolute; inset: 0; z-index: 0; }
.sy-om__scene-img {
  position: absolute;
  inset: -4%;
  width: 108%;
  max-width: none;
  height: 108%;
  object-fit: cover;
  opacity: 0;
  transform:
    translate3d(calc(var(--mx, 0) * -16px - var(--pan, 0) * 3%), calc(var(--my, 0) * -10px), 0)
    scale(1.06);
  transition: opacity 1.1s var(--sy-ease-out), transform 1.6s var(--sy-ease-out);
  will-change: opacity, transform;
}
.sy-om__scene-img.is-on { opacity: 1; animation: om-drift 28s ease-in-out infinite alternate; }
@keyframes om-drift { from { scale: 1; } to { scale: 1.06; } }
.sy-om__stage[data-scene="trailhead"] .sy-om__scene-img,
.sy-om__stage[data-scene="home"] .sy-om__scene-img { object-position: 60% 50%; }

/* 霧：三團很大的白霧慢慢橫移 */
.sy-om__fog { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--sy-ease-out); pointer-events: none; }
.sy-om__fog span {
  position: absolute;
  width: 90vw;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 250, 249, 0.75), rgba(250, 250, 249, 0));
  animation: om-fog 26s linear infinite;
}
.sy-om__fog span:nth-child(1) { top: 10%; left: -40%; }
.sy-om__fog span:nth-child(2) { top: 38%; left: -10%; animation-duration: 34s; animation-delay: -12s; }
.sy-om__fog span:nth-child(3) { top: 55%; left: -60%; animation-duration: 42s; animation-delay: -20s; opacity: 0.7; }
@keyframes om-fog { from { transform: translateX(0); } to { transform: translateX(80vw); } }

.sy-om__shade { position: absolute; inset: 0; background: var(--sy-dusk); opacity: 0; transition: opacity 1.4s var(--sy-ease-out); pointer-events: none; }
.sy-om__grain {
  position: absolute;
  inset: 0;
  opacity: 0.09;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .22  0 0 0 0 .15  0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ── 上方資訊列：章節、目前位置、時鐘、音效 ── */
.sy-om__hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px var(--sy-gutter) 0;
  pointer-events: none;
}
.sy-om__hud > * { pointer-events: auto; }
.sy-om__chapters {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: rgba(250, 250, 249, 0.94);
  border-radius: var(--sy-radius-pill);
  box-shadow: 0 2px 10px rgba(31, 23, 19, 0.08);
}
.sy-om__chapters li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 12px 5px 5px;
  border-radius: var(--sy-radius-pill);
  font-size: 15px;
  line-height: 1;
  color: var(--sy-ink-2);
  transition: background-color var(--sy-dur-2) var(--sy-ease-out), color var(--sy-dur-2) var(--sy-ease-out);
}
.sy-om__ch-n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  background: var(--sy-sand);
  color: var(--sy-ink-2);
}
.sy-om__chapters li.is-done .sy-om__ch-n { background: var(--sy-terracotta-tint); color: var(--sy-terracotta-deep); }
.sy-om__chapters li.is-now { background: var(--sy-ink); color: var(--sy-paper); }
.sy-om__chapters li.is-now .sy-om__ch-n { background: var(--sy-terracotta); color: #fff; }

.sy-om__hud-r { display: flex; align-items: center; gap: 8px; }
.sy-om__where, .sy-om__clock {
  padding: 8px 14px;
  border-radius: var(--sy-radius-pill);
  background: rgba(250, 250, 249, 0.96);
  font-size: 15px;
  line-height: 1.2;
  color: var(--sy-ink);
  box-shadow: 0 2px 10px rgba(31, 23, 19, 0.08);
}
.sy-om__where:empty { display: none; }
.sy-om__clock { font-family: var(--sy-font-data); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--sy-ink); }
.sy-om__sound {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--sy-radius-pill);
  background: rgba(250, 250, 249, 0.94);
  color: var(--sy-ink-2);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(31, 23, 19, 0.08);
}
.sy-om__sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sy-om__sound svg path:first-child { fill: currentColor; stroke: none; }
.sy-om__sound .sy-om__sound-on { display: none; }
.sy-om__sound[aria-pressed="true"] .sy-om__sound-on { display: inline; }
.sy-om__sound[aria-pressed="true"] .sy-om__sound-off { display: none; }
.sy-om__sound[aria-pressed="true"] { color: var(--sy-terracotta-deep); }

/* ── 面板＋手機 ── */
.sy-om__body {
  position: absolute;
  inset: 76px var(--sy-gutter) 28px;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--om-panel-w) 1fr;
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
}
.sy-om__panel {
  --pad: clamp(24px, 2.4vw, 36px);
  position: relative;
  align-self: center;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--pad) var(--pad) 0;
  border-radius: var(--sy-radius-lg);
  border-top: 2px solid var(--sy-terracotta);
  background: var(--sy-paper);
  box-shadow: 0 24px 60px rgba(31, 23, 19, 0.22), 0 2px 8px rgba(31, 23, 19, 0.08);
  scrollbar-width: thin;
}
.sy-om__panel-in { padding-bottom: var(--pad); }
.sy-om__panel-in > * + * { margin-top: 16px; }
.sy-om__panel-in > .sy-om__title + * { margin-top: 12px; }
/* 主要按鈕列：面板內容太長要捲動時，貼在面板底部，不會掉到看不到的地方 */
.sy-om__actions.is-main {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-bottom: calc(-1 * var(--pad));
  padding: 14px 0 var(--pad);
  background: linear-gradient(to top, var(--sy-paper) 78%, rgba(250, 250, 249, 0));
}

/* 面板標題用黑體（DESIGN.md：卡片裡不用宋體）；宋體留給轉場大字、通行證稱號、頁面 H1 */
.sy-om__title {
  margin: 0;
  font-family: var(--sy-font-text);
  font-weight: 700;
  font-size: clamp(26px, 1.5vw + 12px, 38px);
  line-height: 1.38;
  letter-spacing: 0.01em;
  color: var(--sy-ink);
  text-wrap: balance;
  /* 中文大標只在標點、空白處換行，不會斷在「在／哪」這種詞中間；太長的句子才退回任意斷 */
  word-break: keep-all;
  overflow-wrap: anywhere;
  outline: none;
}
/* 敘事句用黑體（DESIGN.md：宋體是「顯示」的聲音，卡片裡的句子不用） */
.sy-om__title--s { font-family: var(--sy-font-text); font-weight: 700; font-size: clamp(21px, 0.9vw + 13px, 27px); line-height: 1.55; letter-spacing: 0; }
/* 標題逐字淡入：字保持 inline，中文斷行規則（標點不落行首）才照常運作 */
.sy-om__ch { display: inline; }
.sy-om__p { margin: 0; font-size: 17px; line-height: 1.75; color: var(--sy-ink-2); }
.sy-om__p--em { color: var(--sy-ink); font-weight: 700; }

/* 按鈕 */
.sy-om__actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.sy-om__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--sy-terracotta-text);
  border-radius: var(--sy-radius-pill);
  background: var(--sy-terracotta-text);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sy-dur-1) var(--sy-ease-out), transform var(--sy-dur-1) var(--sy-ease-out), box-shadow var(--sy-dur-2) var(--sy-ease-out);
}
.sy-om__btn:hover { background: var(--sy-terracotta-deep); border-color: var(--sy-terracotta-deep); color: #fff; box-shadow: var(--sy-shadow-pop); }
.sy-om__btn:active { transform: translateY(1px) scale(0.99); }
.sy-om__btn--ghost { background: transparent; color: var(--sy-ink); border-color: rgba(28, 25, 23, 0.28); }
.sy-om__btn--ghost:hover { background: var(--sy-sand); color: var(--sy-ink); border-color: rgba(28, 25, 23, 0.4); box-shadow: none; }
.sy-om__btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.sy-om__btn:focus-visible, .sy-om__choice:focus-visible, .sy-om__toggle:focus-visible, .sy-om__sound:focus-visible, .sy-om__range:focus-visible {
  outline: 3px solid var(--sy-terracotta);
  outline-offset: 3px;
}

/* 選項 */
.sy-om__choices { display: grid; gap: 10px; }
.sy-om__choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 10px 16px 10px 10px;
  border: 1px solid rgba(28, 25, 23, 0.16);
  border-radius: var(--sy-radius);
  background: #fff;
  color: var(--sy-ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--sy-dur-1) var(--sy-ease-out), background-color var(--sy-dur-1) var(--sy-ease-out), transform var(--sy-dur-2) var(--sy-ease-out), opacity var(--sy-dur-2) var(--sy-ease-out);
}
.sy-om__choice:hover:not(:disabled) { border-color: var(--sy-terracotta); background: var(--sy-terracotta-wash); transform: translateX(3px); }
.sy-om__choice-k {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--sy-sand);
  font-family: var(--sy-font-data);
  font-weight: 600;
  font-size: 17px;
  color: var(--sy-ink-3);
}
.sy-om__choice:disabled { cursor: default; opacity: 0.4; }
.sy-om__choice.is-picked { opacity: 1; border-color: var(--sy-terracotta-text); background: var(--sy-terracotta-text); color: #fff; }
.sy-om__choice.is-picked .sy-om__choice-k { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* ── 第一章：爬升滑桿＋三項讀數 ── */
.sy-om__live { margin: 0; min-height: 3.4em; font-size: 19px; line-height: 1.7; font-weight: 700; color: var(--sy-ink); }
.sy-om__climb { position: relative; display: block; height: 72px; margin-top: 8px; --p: 0%; }
.sy-om__climb-l { position: absolute; left: 0; top: -4px; font-size: 14px; color: var(--sy-ink-3); }
.sy-om__prof {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 52px;
  background: linear-gradient(90deg, var(--sy-terracotta) var(--p), #E7DFD3 var(--p));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'><path d='M0,58 C40,56 60,50 90,44 C120,38 140,30 170,24 C200,18 230,10 260,6 L300,4 L300,60 L0,60 Z'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'><path d='M0,58 C40,56 60,50 90,44 C120,38 140,30 170,24 C200,18 230,10 260,6 L300,4 L300,60 L0,60 Z'/></svg>") center / 100% 100% no-repeat;
}
.sy-om__range {
  position: absolute;
  left: -14px;
  right: -14px;
  bottom: 0;
  width: calc(100% + 28px);
  height: 52px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
          appearance: none;
  cursor: grab;
  touch-action: pan-y;
}
.sy-om__range:active { cursor: grabbing; }
.sy-om__range::-webkit-slider-runnable-track { height: 52px; background: transparent; }
.sy-om__range::-moz-range-track { height: 52px; background: transparent; }
.sy-om__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  margin-top: 4px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--sy-ink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAF9' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center / 20px no-repeat;
  box-shadow: 0 4px 14px rgba(31, 23, 19, 0.3);
  transform: translateX(var(--nudge, 0px));
}
.sy-om__range::-moz-range-thumb {
  width: 38px;
  height: 38px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--sy-ink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAF9' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center / 20px no-repeat;
  box-shadow: 0 4px 14px rgba(31, 23, 19, 0.3);
}
.sy-om__climb-ends { display: flex; justify-content: space-between; font-size: 14px; color: var(--sy-ink-3); }
.sy-om__meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 4px 0 0; border-top: 1px solid var(--sy-line); }
.sy-om__meter-r { padding: 12px 0 0; }
.sy-om__meter-r + .sy-om__meter-r { padding-left: 14px; border-left: 1px solid var(--sy-line); }
.sy-om__meter dt { font-size: 14px; color: var(--sy-ink-3); }
.sy-om__meter dd { margin: 4px 0 0; font-family: var(--sy-font-data), var(--sy-font-text); font-weight: 600; font-size: 19px; color: var(--sy-ink); }
.sy-om__meter dd::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 2px; }
.is-ok { color: var(--om-ok) !important; }
.is-warn { color: var(--om-warn) !important; }
.is-bad { color: var(--om-bad) !important; }

/* 揭曉：猜對猜錯＋小圖解 */
.sy-om__verdict { margin: 0; font-size: 17px; line-height: 1.7; color: var(--sy-ink-2); }
.sy-om__verdict b { margin-right: 4px; }
.sy-om__verdict.is-right b { color: var(--om-ok); }
.sy-om__verdict.is-wrong b { color: var(--sy-terracotta-deep); }
.sy-om__friend { margin: 0; padding: 12px 14px; border-radius: var(--sy-radius); background: var(--sy-terracotta-wash); font-size: 16px; color: var(--sy-ink-2); }
.sy-om__friend b { color: var(--sy-terracotta-deep); }
.sy-om__dia { margin: 16px 0 0; padding: 14px 14px 12px; border-radius: var(--sy-radius); background: var(--sy-sand); }
.sy-om__dia svg { display: block; width: 100%; height: auto; }
.sy-om__dia-sat rect { fill: var(--sy-ink-2); }
.sy-om__dia-ok { fill: none; stroke: var(--om-gps); stroke-width: 2.5; stroke-dasharray: 6 5; animation: om-beam 1.2s linear infinite; }
@keyframes om-beam { to { stroke-dashoffset: -22; } }
.sy-om__dia-bad { fill: none; stroke: var(--om-bad); stroke-width: 2.5; stroke-dasharray: 6 5; opacity: 0.7; }
.sy-om__dia-tower path { fill: none; stroke: var(--sy-ink-3); stroke-width: 2.5; }
.sy-om__dia-tower circle { fill: var(--sy-ink-3); }
.sy-om__dia-phone { fill: var(--sy-ink); }
.sy-om__dia figcaption { display: grid; gap: 4px; margin-top: 8px; font-size: 15px; color: var(--sy-ink-2); }
.sy-om__dia figcaption i { display: inline-block; width: 18px; height: 0; margin-right: 8px; border-top: 2.5px dashed; vertical-align: middle; }
.sy-om__dia figcaption i.is-ok { color: var(--om-gps) !important; }

/* 第一輪結局：回頭看（每個選擇一枚短標籤＋一句話） */
.sy-om__look { display: grid; gap: 14px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--sy-line); list-style: none; }
.sy-om__look li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px; margin: 0; font-size: 15px; line-height: 1.65; color: var(--sy-ink-2); }
.sy-om__look li span { padding-top: 2px; }
.sy-om__look b {
  flex: none; padding: 3px 10px; border-radius: var(--sy-radius-pill);
  background: var(--sy-ink); color: var(--sy-paper); font-size: 14px; font-weight: 700; white-space: nowrap;
}

/* 兩輪比較 */
.sy-om__cmp { display: grid; gap: 12px; padding: 16px; border-radius: var(--sy-radius); background: var(--sy-sand); }
.sy-om__cmp-axis { margin: 0; font-size: 14px; color: var(--sy-ink-3); }
.sy-om__cmp-r { display: grid; grid-template-columns: 52px 1fr; gap: 4px 12px; align-items: center; }
.sy-om__cmp-l { font-size: 14px; font-weight: 700; color: var(--sy-ink-2); }
.sy-om__cmp-t { position: relative; height: 12px; border-radius: 6px; background: rgba(28, 25, 23, 0.08); overflow: hidden; }
.sy-om__cmp-t i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 6px; transform-origin: left center; }
.sy-om__cmp-r.is-1 i { background: var(--sy-ink-3); }
.sy-om__cmp-r.is-2 i { background: var(--sy-terracotta); }
.sy-om__cmp-v { grid-column: 2; font-family: var(--sy-font-digits); font-size: 14px; color: var(--sy-ink-2); }

/* 第三章：任務清單、下載條、開關、蓋章 */
.sy-om__tasks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sy-om__task { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: var(--sy-radius); color: var(--sy-muted); font-size: 16px; transition: background-color var(--sy-dur-2) var(--sy-ease-out), color var(--sy-dur-2) var(--sy-ease-out); }
.sy-om__task-n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor; font-family: var(--sy-font-data); font-weight: 600; font-size: 15px; }
.sy-om__task.is-now { background: var(--sy-sand); color: var(--sy-ink); font-weight: 700; }
.sy-om__task.is-done { color: var(--om-ok); }
.sy-om__task.is-done .sy-om__task-n { border-color: var(--om-ok); background: var(--om-ok); color: transparent; position: relative; }
.sy-om__task.is-done .sy-om__task-n::after { content: ""; position: absolute; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.sy-om__work { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sy-line); }
.sy-om__work > * + * { margin-top: 12px; }
.sy-om__fb { margin: 0; min-height: 1.6em; font-size: 15px; line-height: 1.65; font-weight: 700; }
.sy-om__dl { position: relative; height: 40px; border-radius: var(--sy-radius); background: var(--sy-sand); overflow: hidden; }
.sy-om__dl i { position: absolute; inset: 0; background: var(--sy-terracotta-tint); transform-origin: left center; }
.sy-om__dl-l { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 700; color: var(--sy-terracotta-deep); }
.sy-om__toggles { display: grid; gap: 8px; }
.sy-om__toggle {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 8px 14px;
  border: 1px solid rgba(28, 25, 23, 0.16); border-radius: var(--sy-radius); background: #fff;
  font: inherit; font-size: 16px; color: var(--sy-ink); text-align: left; cursor: pointer;
}
.sy-om__toggle-box { position: relative; flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--sy-ink-3); transition: background-color var(--sy-dur-1) var(--sy-ease-out); }
.sy-om__toggle[aria-pressed="true"] { border-color: var(--om-ok); background: #F3FAF6; }
.sy-om__toggle[aria-pressed="true"] .sy-om__toggle-box { border-color: var(--om-ok); background: var(--om-ok); }
.sy-om__toggle[aria-pressed="true"] .sy-om__toggle-box::after { content: ""; position: absolute; left: 5px; top: 5px; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
/* 蓋在手機螢幕正中間 */
.sy-om__stamp {
  position: absolute; left: 50%; top: 46%; z-index: 3;
  margin: -64px 0 0 -64px;
  display: grid; place-items: center; width: 128px; height: 128px; border-radius: 50%;
  border: 3px solid var(--sy-terracotta-text); color: var(--sy-terracotta-text);
  font-family: var(--sy-font-display); font-weight: 900; font-size: 22px; letter-spacing: 0.1em;
  transform: rotate(-8deg); pointer-events: none;
  box-shadow: inset 0 0 0 5px var(--sy-paper), inset 0 0 0 6.5px var(--sy-terracotta-text);
  background: rgba(250, 250, 249, 0.82);
}

/* 結果：無訊山通行證（上半場景縮圖、下半稱號＋兩輪時間大字對比） */
.sy-om__ticket { position: relative; border-radius: var(--sy-radius-lg); background: var(--sy-dusk); color: var(--sy-on-dusk); overflow: hidden; box-shadow: 0 18px 40px rgba(31, 23, 19, 0.28); }
.sy-om__ticket-art { position: relative; aspect-ratio: 16 / 7; overflow: hidden; }
.sy-om__ticket-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sy-om__ticket-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(31, 23, 19, 0) 40%, var(--sy-dusk)); }
.sy-om__ticket-name {
  position: absolute; left: 16px; top: 14px; z-index: 1; padding: 5px 12px; border-radius: var(--sy-radius-pill);
  background: rgba(31, 23, 19, 0.82); color: var(--sy-on-dusk-accent); font-size: 14px; font-weight: 700; letter-spacing: 0.06em;
}
.sy-om__ticket-body { position: relative; padding: 0 22px 18px; margin-top: -26px; }
/* 票券的撕線 */
.sy-om__ticket-body::before { content: ""; position: absolute; left: 22px; right: 22px; top: -14px; border-top: 1.5px dashed var(--sy-dusk-line); }
.sy-om__ticket-pre { margin: 0; font-size: 15px; color: var(--sy-on-dusk-muted); }
.sy-om__ticket-title { margin: 4px 0 0; font-family: var(--sy-font-display); font-weight: 900; font-size: clamp(30px, 2vw + 16px, 42px); line-height: 1.25; color: var(--sy-on-dusk); }
.sy-om__ticket-sub { margin: 6px 0 0; font-size: 16px; color: var(--sy-on-dusk-accent); }
.sy-om__ticket-times { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; margin: 16px 0 0; padding: 14px 0; border-top: 1px solid var(--sy-dusk-line); border-bottom: 1px solid var(--sy-dusk-line); }
.sy-om__ticket-times span { display: block; font-size: 13px; color: var(--sy-on-dusk-muted); }
.sy-om__ticket-times b { display: block; font-family: var(--sy-font-data); font-weight: 600; font-size: clamp(36px, 2.4vw + 18px, 52px); line-height: 1.05; font-variant-numeric: tabular-nums; }
.sy-om__ticket-times .is-2 b { color: var(--sy-on-dusk-accent); }
.sy-om__ticket-vs { padding-bottom: 10px; font-family: var(--sy-font-data); font-size: 15px; color: var(--sy-on-dusk-muted); }
.sy-om__ticket-foot { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 0; font-size: 13px; color: var(--sy-on-dusk-muted); }
.sy-om__next { margin-top: 20px !important; padding-top: 18px; border-top: 1px solid var(--sy-line); }
.sy-om__next > * + * { margin-top: 10px; }

/* 章節轉場幕 */
.sy-om__wipe {
  position: absolute; inset: 0; z-index: 10; visibility: hidden;
  display: grid; place-items: center; background: var(--sy-dusk);
}
.sy-om__wipe-t { margin: 0; font-family: var(--sy-font-display); font-weight: 900; font-size: clamp(34px, 4.6vw, 76px); letter-spacing: 0.16em; color: var(--sy-on-dusk); }

/* ───────────────────────── 手機 ───────────────────────── */
.sy-om__device { position: relative; display: grid; place-items: center; height: 100%; min-height: 0; transition: opacity 0.6s var(--sy-ease-out), transform 0.8s var(--sy-ease-out); }
.sy-om__device.is-away { opacity: 0; transform: translateY(40px); pointer-events: none; }
.sy-om__phone {
  --pw: clamp(230px, 19vw, 300px);
  position: relative;
  width: var(--pw);
  max-height: 100%;
  aspect-ratio: 9 / 18.5;
  padding: 9px;
  border-radius: 42px;
  background: #1C1917;
  box-shadow: 0 40px 80px rgba(31, 23, 19, 0.45), 0 0 0 1.5px rgba(255, 255, 255, 0.08) inset, 0 12px 24px rgba(31, 23, 19, 0.3);
  transform: rotate(-2.5deg);
  transition: transform 0.8s var(--sy-ease-out), width 0.8s var(--sy-ease-out), box-shadow 0.5s var(--sy-ease-out);
}
.sy-om__phone.is-big { --pw: clamp(260px, 24vw, 340px); transform: rotate(0deg); }
.sy-om__phone.is-peek { transform: rotate(0deg) scale(1.1); box-shadow: 0 50px 100px rgba(31, 23, 19, 0.55), 0 0 0 6px rgba(59, 130, 246, 0.25); }
.sy-om__phone-screen { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 33px; overflow: hidden; background: var(--sy-paper); }
.sy-om__status {
  display: flex; align-items: center; justify-content: space-between; flex: none;
  height: 34px; padding: 4px 20px 0 24px; font-family: var(--sy-font-data); font-weight: 600; font-size: 14px; color: var(--sy-ink);
  background: var(--sy-paper); position: relative; z-index: 1;
}
.sy-om__status-r { display: inline-flex; align-items: center; gap: 6px; }
.sy-om__plane { display: none; width: 14px; height: 14px; }
.sy-om__plane svg { width: 100%; height: 100%; fill: currentColor; }
.sy-om__phone.is-plane .sy-om__plane { display: inline-block; }
.sy-om__phone.is-plane .sy-om__bars { display: none; }
.sy-om__bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.sy-om__bars i { display: block; width: 3px; border-radius: 1px; background: currentColor; transition: opacity 0.3s, transform 0.3s; }
.sy-om__bars i:nth-child(1) { height: 4px; }
.sy-om__bars i:nth-child(2) { height: 6px; }
.sy-om__bars i:nth-child(3) { height: 8.5px; }
.sy-om__bars i:nth-child(4) { height: 11px; }
.sy-om__bars[data-bars="3"] i:nth-child(n+4),
.sy-om__bars[data-bars="2"] i:nth-child(n+3),
.sy-om__bars[data-bars="1"] i:nth-child(n+2),
.sy-om__bars[data-bars="0"] i { opacity: 0.22; }
.sy-om__net { font-size: 12px; }
.sy-om__phone.is-nosignal .sy-om__net { color: var(--om-bad); }
.sy-om__batt { position: relative; width: 22px; height: 11px; border: 1.5px solid currentColor; border-radius: 3px; }
.sy-om__batt::after { content: ""; position: absolute; right: -4px; top: 2.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; }
.sy-om__batt i { position: absolute; left: 1px; top: 1px; bottom: 1px; width: 80%; max-width: calc(100% - 2px); border-radius: 1px; background: currentColor; transition: width 0.6s var(--sy-ease-out), background-color 0.3s; }
.sy-om__phone.is-low .sy-om__batt i { background: #EF4444; }
.sy-om__map { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #EDEEE3; }
.sy-om__app {
  display: flex; align-items: center; justify-content: space-between; flex: none; gap: 8px;
  height: 44px; padding: 0 16px; background: var(--sy-paper); border-top: 1px solid var(--sy-line);
  font-size: 13px; color: var(--sy-ink-2);
}
.sy-om__app-mode { font-weight: 700; color: var(--sy-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy-om__app-gps { white-space: nowrap; }
.sy-om__phone[data-mode="offline"] .sy-om__app-mode { color: var(--sy-terracotta-text); }
.sy-om__app-gps { display: inline-flex; align-items: center; gap: 6px; }
.sy-om__app-gps i { width: 8px; height: 8px; border-radius: 50%; background: var(--om-gps); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }

/* 地圖 SVG */
.sy-omm { display: block; width: 100%; height: 100%; }
.sy-omm[data-style="online"] .sy-omm__offline,
.sy-omm[data-style="offline"] .sy-omm__online,
.sy-omm[data-style="offline"] .sy-omm__tiles { display: none; }
.sy-omm__label { font-family: var(--sy-font-text); font-size: 15px; font-weight: 700; fill: var(--sy-ink-2); paint-order: stroke; stroke: rgba(250, 250, 249, 0.9); stroke-width: 4px; }
.sy-omm__label--peak { font-size: 17px; fill: var(--sy-ink); }
.sy-omm__label--soft { font-weight: 400; fill: var(--sy-muted); }
.sy-omm__poi { font-family: var(--sy-font-data); font-weight: 600; font-size: 13px; fill: #fff; }
.sy-omm__tile { transition: opacity 0.5s var(--sy-ease-out); }
.sy-omm__tile[data-state="loaded"] { opacity: 0; }
.sy-omm__spin { opacity: 0; }
.sy-omm__tile[data-state="loading"] .sy-omm__spin { opacity: 1; }
.sy-omm__spin circle { transform-box: fill-box; transform-origin: center; animation: om-spin 0.9s linear infinite; }
@keyframes om-spin { to { transform: rotate(360deg); } }
.sy-omm__walk { stroke: var(--om-gps); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; opacity: 0.85; }
.sy-omm__tile.is-drop rect { animation: om-drop 0.3s var(--sy-ease-out); }
@keyframes om-drop { from { opacity: 0; } to { opacity: 1; } }
.sy-omm__track { display: none; }
.sy-omm.has-track .sy-omm__track { display: inline; }
.sy-omm__halo { fill: rgba(59, 130, 246, 0.22); transform-box: fill-box; transform-origin: center; animation: om-pulse 2.2s var(--sy-ease-out) infinite; }
@keyframes om-pulse { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.sy-omm.is-off .sy-omm__halo { fill: rgba(245, 158, 11, 0.4); }
.sy-omm__area rect { fill: rgba(209, 96, 61, 0.12); stroke: var(--sy-terracotta); stroke-width: 3; stroke-dasharray: 10 6; }
.sy-omm__area[data-result="ok"] rect { stroke-dasharray: none; fill: rgba(209, 96, 61, 0.08); }
.sy-omm__area[data-result="miss"] rect { stroke: #EF4444; fill: rgba(239, 68, 68, 0.08); }
.sy-omm.is-area { cursor: crosshair; touch-action: none; }

/* ───────────────────────── 第二輪加的元件 ───────────────────────── */

/* HUD 上的電量（第二章手機收起來時，電量還是看得到） */
.sy-om__hbatt {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--sy-radius-pill);
  background: rgba(250, 250, 249, 0.94); box-shadow: 0 2px 10px rgba(31, 23, 19, 0.08);
  font-family: var(--sy-font-data); font-weight: 600; font-size: 17px; color: var(--sy-ink); font-variant-numeric: tabular-nums;
}
.sy-om__hbatt[hidden] { display: none; }
.sy-om__hbatt i { position: relative; width: 26px; height: 13px; border: 1.75px solid currentColor; border-radius: 3px; }
.sy-om__hbatt i::after { content: ""; position: absolute; right: -4.5px; top: 3px; width: 2.5px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; }
.sy-om__hbatt b { position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; max-width: calc(100% - 3px); border-radius: 1px; background: currentColor; transition: width 0.6s var(--sy-ease-out); }
.sy-om__hbatt.is-low { color: var(--om-bad); }
.sy-om__hbatt.is-low b { animation: om-blink 1.2s steps(2) infinite; }
@keyframes om-blink { 50% { opacity: 0.25; } }

/* 第二章第一輪：電影字幕構圖——場景滿版，文字在底部、選項橫排 */
/* 字幕條放左下：插畫裡的主角都站在畫面正中間，不要蓋住他 */
.sy-om__stage.is-cinema .sy-om__body { grid-template-columns: minmax(0, 1fr); justify-items: start; align-items: end; }
.sy-om__stage.is-cinema .sy-om__device { display: none; }
.sy-om__stage.is-cinema .sy-om__panel { width: min(640px, 100%); max-height: 62%; align-self: end; }
.sy-om__stage.is-cinema .sy-om__choices { grid-template-columns: 1fr; }
.sy-om__stage.is-cinema .sy-om__title--s { font-size: clamp(21px, 0.7vw + 15px, 26px); }

/* 招牌時刻「最後一格」：舞台褪色、手機外框亮一圈藍、藍點旁浮出一句話 */
.sy-om__scene, .sy-om__hud, .sy-om__panel { transition: filter 0.5s var(--sy-ease-out); }
.sy-om__stage.is-dropout .sy-om__scene, .sy-om__stage.is-dropout .sy-om__world { filter: saturate(0.1) brightness(0.82); }
.sy-om__world { transition: opacity 0.6s var(--sy-ease-out), visibility 0s 0.6s, filter 0.5s var(--sy-ease-out); }
.sy-om__stage.is-walk .sy-om__world { transition: opacity 0.6s var(--sy-ease-out), filter 0.5s var(--sy-ease-out); }
.sy-om__stage.is-dropout .sy-om__hud, .sy-om__stage.is-dropout .sy-om__panel { filter: saturate(0) brightness(0.92); }
.sy-om__phone.is-dropout { box-shadow: 0 40px 80px rgba(31, 23, 19, 0.45), 0 0 0 6px rgba(59, 130, 246, 0.35), 0 0 60px rgba(59, 130, 246, 0.35); }
.sy-om__here {
  position: absolute; left: 50%; top: 58%; z-index: 2; margin: 0; padding: 8px 16px; border-radius: var(--sy-radius-pill);
  transform: translate(-50%, 10px); opacity: 0; pointer-events: none; white-space: nowrap;
  background: var(--sy-paper); color: var(--sy-ink); box-shadow: 0 6px 18px rgba(31, 23, 19, 0.18);
  font-weight: 700; font-size: 17px;
  transition: opacity 0.6s var(--sy-ease-out), transform 0.6s var(--sy-ease-out);
}
.sy-om__here.is-on { opacity: 1; transform: translate(-50%, 0); }
.sy-om__toast {
  position: absolute; left: 50%; top: 44px; z-index: 3; margin: 0; max-width: 86%; padding: 7px 14px; border-radius: 12px;
  transform: translate(-50%, -8px); opacity: 0; pointer-events: none; text-align: center;
  background: rgba(28, 25, 23, 0.9); color: #fff; font-size: 13px; line-height: 1.4;
  transition: opacity 0.3s var(--sy-ease-out), transform 0.3s var(--sy-ease-out);
}
.sy-om__toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.sy-om__refresh { padding-top: 0; }

/* 結果頁：通行證置中，兩側留場景 */
.sy-om__stage.is-result .sy-om__body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.sy-om__stage.is-result .sy-om__device { display: none; }
.sy-om__stage.is-result .sy-om__panel { width: min(560px, 100%); }
/* 結果頁的通行證壓扁一點，轉換按鈕才擠得進第一屏 */
.sy-om__stage.is-result .sy-om__ticket-art { aspect-ratio: 16 / 5; }
.sy-om__stage.is-result .sy-om__next { margin-top: 14px !important; padding-top: 0; border-top: 0; }

/* 結局收集：4 格，解鎖的亮、沒解鎖的只給一句提示 */
.sy-om__eds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sy-om__eds li { display: grid; gap: 4px; align-content: start; min-height: 86px; padding: 10px; border-radius: var(--sy-radius); border: 1px dashed rgba(28, 25, 23, 0.22); font-size: 13px; line-height: 1.45; color: var(--sy-muted); }
.sy-om__eds b { font-size: 14px; color: var(--sy-ink-3); }
.sy-om__eds li.is-got { border: 1px solid var(--sy-ink); background: var(--sy-ink); color: var(--sy-on-dusk-muted); }
.sy-om__eds li.is-got b { color: var(--sy-paper); }
.sy-om__eds li.is-now { box-shadow: 0 0 0 3px var(--sy-terracotta); }
.sy-om__eds-h { margin: 0; font-size: 15px; font-weight: 700; color: var(--sy-ink); }
.sy-om__result > * + * { margin-top: 18px; }
.sy-om__eds-box { padding-top: 18px; border-top: 1px solid var(--sy-line); }
.sy-om__eds-box > * + * { margin-top: 10px; }

/* 音效提示：第一次做選擇時，右上角的音效鈕輕輕亮兩下 */
.sy-om__sound.is-hint { animation: om-hint 0.9s var(--sy-ease-out) 2; }
@keyframes om-hint { 50% { box-shadow: 0 0 0 6px rgba(209, 96, 61, 0.35); } }

/* 音效提示泡泡（第一次做選擇時出現一次） */
.sy-om__hud-r { position: relative; }
.sy-om__tip {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 5; width: max-content; max-width: 220px;
  padding: 8px 12px; border-radius: 10px; background: var(--sy-ink); color: var(--sy-paper); font-size: 13px; line-height: 1.5;
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.3s var(--sy-ease-out), transform 0.3s var(--sy-ease-out);
}
.sy-om__tip::before { content: ""; position: absolute; right: 18px; top: -5px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
.sy-om__tip.is-on { opacity: 1; transform: none; }

/* HUD：桌機時鐘獨立一顆；手機把時鐘併進電量那顆（.sy-om__hbatt-time） */
.sy-om__hbatt-time { display: none; }

/* 第二輪：暖色晨光，跟第一輪的灰冷感分開 */
.sy-om__stage.is-run2 .sy-om__scene-img { filter: sepia(0.28) saturate(1.22) brightness(1.08) hue-rotate(-8deg); }
.sy-om__scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--sy-ease-out);
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(255, 214, 170, 0.55), rgba(255, 214, 170, 0) 62%),
    linear-gradient(to bottom, rgba(245, 166, 136, 0.18), rgba(245, 166, 136, 0) 55%);
  mix-blend-mode: screen;
}

/* 夜裡：主角周圍留一圈手電筒的光，外面壓暗，光圈輕輕閃 */
.sy-om__stage[data-scene="night"] .sy-om__shade {
  background: radial-gradient(circle at 50% 74%, rgba(31, 23, 19, 0) 0, rgba(31, 23, 19, 0) 9%, var(--sy-dusk) 46%);
  opacity: 0.62 !important;
  animation: om-torch 3.8s ease-in-out infinite;
}
@keyframes om-torch { 0%, 100% { opacity: 0.62; } 47% { opacity: 0.58; } 50% { opacity: 0.66; } 53% { opacity: 0.6; } }
.sy-om__stage.is-run2 .sy-om__scene::after { opacity: 1; }

/* 霧比插畫更靠近鏡頭：滑鼠移動時位移比插畫大，做出前後景深 */
.sy-om__fog { transform: translate3d(calc(var(--mx, 0) * -34px), calc(var(--my, 0) * -18px), 0); transition: opacity 1.6s var(--sy-ease-out), transform 1.2s var(--sy-ease-out); }

/* 結局收集的縮圖：解鎖的看得清楚，沒解鎖的是模糊剪影 */
.sy-om__eds-img { display: block; overflow: hidden; margin: -10px -10px 4px; border-radius: var(--sy-radius) var(--sy-radius) 0 0; aspect-ratio: 16 / 9; background: var(--sy-dusk); }
.sy-om__eds-img img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.85) blur(2px) brightness(0.62); transform: scale(1.08); }
@media (min-width: 900px) {
  .sy-om__stage.is-result .sy-om__eds { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sy-om__stage.is-result .sy-om__eds li { font-size: 14px; }
  .sy-om__stage.is-result .sy-om__eds b { font-size: 15px; }
}
.sy-om__eds li.is-got .sy-om__eds-img img { filter: none; transform: none; }

/* 結果頁桌機：左欄通行證＋下一步，右欄結局收集＋分享 */
@media (min-width: 900px) {
  .sy-om__stage.is-result .sy-om__panel { width: min(1000px, 100%); }
  .sy-om__result { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .sy-om__result > * { margin-top: 0 !important; }
  .sy-om__result > .sy-om__ticket { grid-column: 1; grid-row: 1; }
  .sy-om__result > .sy-om__next { grid-column: 1; grid-row: 2; margin-top: 16px !important; }
  .sy-om__result > .sy-om__eds-box { grid-column: 2; grid-row: 1; padding-top: 0; border-top: 0; }
  .sy-om__result > .sy-om__actions { grid-column: 2; grid-row: 2; margin-top: 16px !important; }
  .sy-om__stage.is-result .sy-om__ticket-art { aspect-ratio: 16 / 6; }
}
.sy-om__eds-reward { margin: 0; padding: 10px 12px; border-radius: var(--sy-radius); background: var(--sy-terracotta-wash); font-size: 14px; line-height: 1.6; color: var(--sy-ink-2); }
.sy-om__eds-reward b { color: var(--sy-terracotta-deep); }

/* 第二個高潮：蓋章那一刻，手機整個亮起來、紅線發光（對應第一章「最後一格」的失去） */
.sy-om__phone.is-lit .sy-om__phone-screen { box-shadow: inset 0 0 0 3px rgba(209, 96, 61, 0.5), inset 0 0 60px rgba(245, 166, 136, 0.55); transition: box-shadow 0.4s var(--sy-ease-out); }
.sy-om__phone.is-lit { box-shadow: 0 40px 80px rgba(31, 23, 19, 0.45), 0 0 80px rgba(240, 161, 132, 0.55); }
.sy-omm.is-lit .sy-omm__track path:last-child { animation: om-glow 1.4s var(--sy-ease-out); }
@keyframes om-glow { 30% { stroke-width: 10; stroke: #F0A184; } }

/* 第三章通關：蓋章時手機往前一跳 */
.sy-om__phone.is-pop { animation: om-pop 0.7s var(--sy-ease-out); }
@keyframes om-pop { 40% { transform: scale(1.06); } }

/* ───────────────────────── v2 走路版 ───────────────────────── */
/* 俯視的無訊山：只在第一、二章（layout "walk"）出現，蓋在場景插畫上、面板與手機下面 */
.sy-om__world { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.6s var(--sy-ease-out), visibility 0s 0.6s; cursor: pointer; touch-action: manipulation; outline: none; }
.sy-om__stage.is-walk .sy-om__world { opacity: 1; visibility: visible; transition: opacity 0.6s var(--sy-ease-out); }
.sy-om__world:focus-visible { box-shadow: inset 0 0 0 3px var(--sy-terracotta); }
.sy-om__stage.is-walk .sy-om__body { pointer-events: none; grid-template-columns: min(400px, 34vw) 1fr; align-items: end; }
.sy-om__stage.is-walk .sy-om__panel, .sy-om__stage.is-walk .sy-om__device > * { pointer-events: auto; }
.sy-om__stage.is-walk .sy-om__panel { align-self: end; max-height: 60%; }
.sy-om__stage.is-walk .sy-om__device { align-self: center; justify-items: end; padding-right: 2vw; }
.sy-om__stage.is-walk .sy-om__phone { --pw: clamp(190px, 14vw, 230px); transform: rotate(0deg); cursor: pointer; }
.sy-om__stage.is-walk .sy-om__phone.is-peek { transform: scale(1.35); transform-origin: right center; }
/* 大字引導：畫面上方中央，第一次走之前與到岔路口時出現 */
.sy-om__coach {
  position: absolute; left: 50%; top: 84px; z-index: 3; margin: 0; max-width: min(520px, 86vw);
  padding: 10px 20px; border-radius: var(--sy-radius-pill);
  background: rgba(250, 250, 249, 0.96); color: var(--sy-ink); box-shadow: 0 8px 24px rgba(31, 23, 19, 0.28);
  font-size: 17px; font-weight: 700; line-height: 1.4; text-align: center;
  opacity: 0; transform: translate(-50%, -8px); pointer-events: none; transition: opacity 0.4s var(--sy-ease-out), transform 0.4s var(--sy-ease-out);
}
.sy-om__coach.is-on { opacity: 1; transform: translate(-50%, 0); }
.sy-om__stage:not(.is-walk) .sy-om__coach { opacity: 0; }
.sy-om__stage.is-peeking .sy-om__world { filter: brightness(0.6); }
/* 兩輪實際走過的路 */
.sy-om__cmp { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; }
/* 比較頁：面板加寬，軌跡圖才看得清楚 */
@media (min-width: 900px) {
  .sy-om__stage.is-wide .sy-om__body { grid-template-columns: min(640px, 48vw) 1fr; }
  .sy-om__stage.is-wide .sy-om__cmp { grid-template-columns: 260px 1fr; }
}
.sy-om__trails figcaption { flex-wrap: wrap; font-size: 13px !important; }
.sy-om__cmp-bars { display: grid; gap: 12px; align-self: start; padding-top: 6px; }
/* 軌跡圖上的字：白字＋深色描邊，壓在森林上也讀得到 */
.sy-om__tlabel { fill: #FFFFFF; font-weight: 700; paint-order: stroke; stroke: rgba(20, 14, 10, 0.92); stroke-width: 12px; stroke-linejoin: round; }
.sy-om__tlabel.is-off { fill: #FFE1D6; }
.sy-om__trails { margin: 0; }
.sy-om__trails svg { display: block; width: 100%; height: auto; border-radius: var(--sy-radius); background: var(--sy-dusk); }
.sy-om__trails figcaption { display: flex; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--sy-ink-3); }
.sy-om__trails figcaption i { display: inline-block; width: 14px; height: 4px; margin-right: 4px; border-radius: 2px; vertical-align: middle; }
.sy-om__trails i.is-1 { background: #B9ADA2; }
.sy-om__trails i.is-2 { background: #E8743F; }
.sy-om__walkbox > * + * { margin-top: 12px; }
.sy-om__walkbox .sy-om__live { min-height: 3.3em; font-size: 18px; }
.sy-om__live.is-hint { color: var(--sy-terracotta-deep); }
.sy-om__howto { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sy-ink-2); }
.sy-om__stoplist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sy-om__stoplist li { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: 16px; line-height: 1.6; color: var(--sy-ink-2); }
.sy-om__stoplist b { padding: 2px 10px; border-radius: var(--sy-radius-pill); background: var(--sy-ink); color: var(--sy-paper); font-size: 14px; }

/* ───────────────────────── 重點整理 ───────────────────────── */
.sy-om__notes { padding: clamp(48px, 7vw, 104px) 0 clamp(64px, 8vw, 120px); background: var(--sy-paper); }
.sy-om__wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--sy-gutter); }
.sy-om__h1 { margin: 0; font-family: var(--sy-font-display); font-weight: 900; font-size: var(--sy-text-3xl); line-height: 1.22; text-wrap: balance; }
.sy-om__lede { margin: 18px 0 0; font-size: clamp(17px, 0.5vw + 15px, 20px); line-height: 1.75; color: var(--sy-ink-2); }
.sy-om__play-again { display: none; margin: 20px 0 0; }
.sy-js .sy-om__play-again { display: block; }
.sy-om__facts { margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; list-style: none; counter-reset: om; }
.sy-om__facts li { position: relative; margin: 0; padding: 24px 0 24px 64px; border-top: 1px solid var(--sy-line); counter-increment: om; }
.sy-om__facts li::before { content: counter(om, decimal-leading-zero); position: absolute; left: 0; top: 22px; font-family: var(--sy-font-data); font-weight: 600; font-size: 28px; color: var(--sy-terracotta); }
.sy-om__facts h2 { margin: 0; font-size: var(--sy-text-lg); line-height: 1.45; font-weight: 700; }
.sy-om__facts p { margin: 10px 0 0; font-size: 17px; line-height: 1.8; color: var(--sy-ink-2); }
.sy-om__facts a { color: var(--sy-terracotta-text); text-decoration: underline; text-underline-offset: 3px; }
.sy-om__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sy-om__fine { margin: 32px 0 0; font-size: 14px; line-height: 1.7; color: var(--sy-muted); }

/* ───────────────────────── 手機版面 ───────────────────────── */
@media (max-width: 899px) {
  .sy-om__stage { min-height: 560px; max-height: none; }
  .sy-om__hud { padding: 10px 12px 0; }
  .sy-om__chapters li { padding: 4px; }
  .sy-om__chapters li .sy-om__ch-t { display: none; }
  .sy-om__chapters li.is-now { padding-right: 10px; }
  .sy-om__chapters li.is-now .sy-om__ch-t { display: inline; }
  .sy-om__where { display: none; }
  .sy-om__sound { padding: 0 12px; }
  .sy-om__sound-t { display: none; }
  /* 上面一列給手機（至少留 34% 舞台高），下面是面板；面板太長就自己捲，不會蓋到手機 */
  .sy-om__body {
    inset: 58px 0 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .sy-om__stage.has-phone .sy-om__body { grid-template-rows: minmax(34%, 1fr) auto; }
  /* flex（不是 grid）：手機的 height:100% 才解析得到容器的實際高度 */
  .sy-om__device { grid-row: 1; display: flex; align-items: center; justify-content: center; height: 100%; padding: 6px 0; }
  .sy-om__panel {
    grid-row: 2;
    align-self: end;
    max-height: 62svh;
    --pad: calc(18px + env(safe-area-inset-bottom));
    padding: 22px 20px 0;
    border-radius: 20px 20px 0 0;
  }
  .sy-om__stage.is-cinema .sy-om__panel { width: 100%; max-height: 66svh; }
  .sy-om__stage.is-cinema .sy-om__choices { grid-template-columns: 1fr; }
  /* 第三章：手機地圖要能拖框，給它舞台的一大半；任務清單收起來（進度在上方資訊列） */
  .sy-om__stage.is-prep.has-phone .sy-om__body { grid-template-rows: minmax(54%, 1fr) auto; }
  .sy-om__stage.is-prep .sy-om__panel { max-height: 40%; }
  .sy-om__stage.is-prep .sy-om__tasks,
  .sy-om__stage.is-prep .sy-om__panel-in > .sy-om__title + .sy-om__p { display: none; }
  .sy-om__stage.is-prep .sy-om__title { font-size: 21px; }
  .sy-om__stage.is-prep .sy-om__work { margin-top: 8px; padding-top: 0; border-top: 0; }
  /* 沒有手機的幕（第一輪字幕、結局、結果）：插畫只鋪在面板上方，主角才不會被面板蓋住 */
  .sy-om__stage:not(.has-phone) .sy-om__scene { bottom: calc(var(--ph, 34%) - 24px); transition: bottom 0.5s var(--sy-ease-out); }
  .sy-om__stage:not(.has-phone) .sy-om__scene-img { object-position: 50% 78%; }
  .sy-om__gps-t { display: none; }
  .sy-om__app-mode { max-width: 70%; }
  .sy-om__eds { grid-template-columns: repeat(2, 1fr); }
  .sy-om__eds li { min-height: 0; }
  /* 走路版（手機）：地圖滿版，面板縮成底部旁白卡，手機縮成右上角的小視窗（點了放大） */
  .sy-om__stage.is-walk .sy-om__body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .sy-om__stage.is-walk .sy-om__panel { grid-row: 2; max-height: 42%; padding-top: 16px; }
  .sy-om__stage.is-walk .sy-om__panel .sy-om__title { font-size: 18px; }
  .sy-om__stage.is-walk .sy-om__walkbox .sy-om__live { min-height: 2.4em; font-size: 16px; }
  .sy-om__stage.is-walk .sy-om__meter-r { padding-top: 8px; }
  .sy-om__stage.is-walk .sy-om__device { position: absolute; right: 10px; top: 0; height: auto; width: 30vw; max-width: 130px; padding: 0; display: block; grid-row: auto; }
  .sy-om__stage.is-walk .sy-om__phone { width: 100%; height: auto; max-width: none; aspect-ratio: 10 / 14; border-radius: 18px; padding: 4px; transform: none; transform-origin: top right; transition: transform 0.4s var(--sy-ease-out); }
  .sy-om__stage.is-walk .sy-om__phone-screen { border-radius: 14px; }
  .sy-om__stage.is-walk .sy-om__status, .sy-om__stage.is-walk .sy-om__app { display: none; }
  .sy-om__stage.is-walk .sy-om__phone.is-peek { transform: scale(1.6); }
  .sy-om__coach { top: 64px; font-size: 15px; max-width: calc(100vw - 150px); left: calc(50% - 60px); }
  .sy-om__cmp { grid-template-columns: 130px 1fr; }
  /* 下山時（手機版）：小手機窗收起來不擋路；「拿出手機看」時從底部升起抽屜（鏡頭會往上讓開） */
  .sy-om__stage.is-walk.is-run .sy-om__device { top: auto; bottom: calc(var(--ph, 30%) + 8px); left: 4vw; right: 4vw; width: auto; max-width: none; height: 40svh; transform: translateY(30px); opacity: 0; pointer-events: none; transition: transform 0.4s var(--sy-ease-out), opacity 0.3s var(--sy-ease-out); }
  .sy-om__stage.is-walk.is-run.is-peeking .sy-om__device { transform: none; opacity: 1; pointer-events: auto; }
  .sy-om__stage.is-walk.is-run .sy-om__phone, .sy-om__stage.is-walk.is-run .sy-om__phone.is-peek { width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
  .sy-om__stage.is-walk.is-run.is-peeking .sy-om__coach { opacity: 0; }
  .sy-om__stage.is-walk .sy-om__here { font-size: 12px; padding: 4px 8px; }
  /* 資訊列在手機上很擠：章節名不換行、電量只留數字、時鐘與音效縮小 */
  .sy-om__ch-t { white-space: nowrap; }
  .sy-om__hud { gap: 6px; }
  .sy-om__hud-r { gap: 4px; }
  .sy-om__hbatt { padding: 8px 12px; font-size: 15px; gap: 6px; }
  .sy-om__hbatt i { display: none; }
  .sy-om__hbatt-time { display: inline; color: var(--sy-ink); }
  .sy-om__hbatt-time:not(:empty)::after { content: "・"; color: var(--sy-muted); }
  .sy-om__hud-r:has(.sy-om__hbatt:not([hidden])) .sy-om__clock { display: none; }
  .sy-om__clock { padding: 8px 10px; font-size: 15px; }
  .sy-om__sound { min-width: 44px; padding: 0 10px; justify-content: center; }
  .sy-om__stage.has-phone .sy-om__panel { max-height: calc(66svh - 58px - var(--header-h)); }
  .sy-om__stage:not(.has-phone) .sy-om__panel { max-height: 78svh; }
  /* 手機版：依可用高度決定手機大小（高度 100%，寬度跟著比例走） */
  .sy-om__phone {
    width: auto;
    height: 100%;
    max-height: 100%;
    max-width: min(62vw, 260px);
    aspect-ratio: 10 / 13;
    border-radius: 30px;
    padding: 7px;
    transform: rotate(-2deg);
  }
  .sy-om__phone.is-big { max-width: min(76vw, 320px); transform: none; }
  .sy-om__phone.is-peek { transform: scale(1.04); }
  .sy-om__phone-screen { border-radius: 24px; }
  .sy-om__status { height: 28px; padding: 2px 16px 0; font-size: 12px; }
  .sy-om__app { height: 34px; font-size: 12px; padding: 0 12px; }
  .sy-om__title { font-size: clamp(24px, 6.4vw, 30px); }
  .sy-om__title--s { font-size: clamp(19px, 5vw, 23px); }
  .sy-om__p { font-size: 16px; }
  .sy-om__live { font-size: 17px; min-height: 3.2em; }
  .sy-om__choice { min-height: 52px; font-size: 16px; }
  .sy-om__stamp { width: 96px; height: 96px; margin: -48px 0 0 -48px; font-size: 18px; }
  .sy-om__facts li { padding-left: 48px; }
  .sy-om__facts li::before { font-size: 22px; }
}

/* ───────────────────────── 減少動態 ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sy-om__scene-img { transition: opacity 0.2s linear; transform: scale(1.04); }
  .sy-om__scene-img.is-on { animation: none; }
  .sy-om__fog span, .sy-omm__halo, .sy-om__dia-ok, .sy-omm__spin circle { animation: none; }
  .sy-om__device, .sy-om__phone { transition: none; }
}