@font-face { font-family: "LXGW WenKai TC"; src: url(/fonts/wenkai-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "LXGW WenKai TC"; src: url(/fonts/wenkai-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root { --paper: #F3EBDC; --card: #FFFBF3; --ink: #4A3A2E; --soft: #7A6453; --line: #E6D8C0; --coral: #D86B50; --tape: #F2C76E; --night: #2E3A63; --green: #DDE8DA; color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.75 "LXGW WenKai TC", "PingFang TC", "Noto Sans TC", serif; }
img { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--coral); }
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
/* 語言切換：同一頁中英（照 sonar），點了只顯示一種 */
.langbar { position: sticky; top: 0; z-index: 5; background: #F3EBDCee; backdrop-filter: blur(6px); border-bottom: 1px dashed var(--line); }
.langbar .wrap { display: flex; align-items: center; gap: 10px; padding-block: 8px; }
.langbar img { width: 30px; height: 30px; border-radius: 8px; }
.langbar b { font-size: 17px; margin-right: auto; }
.langbar a { text-decoration: none; color: var(--ink); padding: 2px 12px; border-radius: 999px; font-size: 15px; }
.langbar a.on { background: var(--ink); color: #FFF8EE; }
[data-lang] { display: none; } [data-lang].on { display: block; }
section { padding-block: 64px; }
h2 { font-size: 30px; margin: 0 0 8px; text-align: center; }
.lead { text-align: center; color: var(--soft); margin: 0 auto 32px; max-width: 34em; }
/* 開場 */
.hero { padding-block: 48px 40px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(27px, 3.6vw, 44px); line-height: 1.4; margin: 0; letter-spacing: .02em; }
main[lang="zh-Hant"] .hero h1 span { white-space: nowrap; }
.hero .polaroid { max-width: 440px; justify-self: center; }
.hero .sub { font-size: 20px; color: var(--soft); margin: 18px 0 26px; }
.store { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #FFF8EE; text-decoration: none; padding: 12px 22px; border-radius: 14px; font-size: 17px; box-shadow: 0 3px 0 #2c2119; }
.store svg { width: 22px; height: 22px; fill: currentColor; }
.meta { font-size: 14px; color: var(--soft); margin-top: 12px; }
.polaroid { margin: 0; }
.polaroid img { border-radius: 18px; box-shadow: 0 14px 30px -18px #3a2a1e88; }
/* 怎麼玩 */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.step { background: var(--card); border-radius: 16px 18px 14px 20px; box-shadow: 0 2px 0 var(--line); padding: 14px; }
.step .n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 16px; }
.step h3 { font-size: 19px; margin: 8px 0 4px; }
.step p { margin: 0 0 10px; font-size: 15px; color: var(--soft); }
.step.dark { background: var(--night); color: #FFF6E6; } .step.dark p { color: #E6DCF0; }
.step .shot { width: 100%; border-radius: 12px; box-shadow: 0 6px 14px -10px #3a2a1e88; }
/* 功能 */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feat { background: var(--card); border-radius: 16px; box-shadow: 0 2px 0 var(--line); padding: 18px 20px; }
.feat b { font-size: 19px; display: block; margin-bottom: 4px; }
.feat span { font-size: 15px; color: var(--soft); }
/* 截圖 */
.shots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 230px); gap: 16px; overflow-x: auto; padding: 8px 4px 18px; scroll-snap-type: x mandatory; }
.shots img { width: 100%; border-radius: 12px; box-shadow: 0 8px 18px -12px #3a2a1e88; scroll-snap-align: start; }
/* 設計概念 */
.why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.why article { background: var(--card); border-radius: 18px 14px 20px 16px; box-shadow: 0 2px 0 var(--line); padding: 22px 24px; }
.why h3 { margin: 0 0 6px; font-size: 21px; }
.why p { margin: 0; color: var(--ink); font-size: 16px; }
.why small { display: block; margin-top: 8px; color: var(--soft); font-size: 13px; }
/* 隱私 */
.privacy { background: var(--card); }
.privacy ul { list-style: none; padding: 0; margin: 0 auto; max-width: 40em; display: grid; gap: 10px; }
.privacy li { padding-left: 30px; position: relative; }
.privacy li::before { content: "🥚"; position: absolute; left: 0; }
/* 常見問題 */
.faq { max-width: 44em; margin: 0 auto; }
.faq details { background: var(--card); border-radius: 14px; box-shadow: 0 2px 0 var(--line); padding: 12px 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { margin: 8px 0 0; color: var(--soft); }
/* 下載 */
.cta { text-align: center; padding-block: 56px 72px; }
.cta p { font-size: 24px; margin: 0 0 18px; }
footer { border-top: 1px dashed var(--line); padding-block: 20px 40px; font-size: 14px; color: var(--soft); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 28px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  section { padding-block: 44px; }
  h2 { font-size: 25px; }
  .steps { grid-template-columns: 1fr; }
  .feats { grid-template-columns: 1fr; }
  .step .shot { max-width: 240px; margin: 0 auto; }
}

.dl { display: inline-grid; justify-items: start; gap: 8px; }
.dl b { font-size: 17px; }
.badge img { height: 52px; width: auto; }
.cta .dl { justify-items: center; }
.heroyard { width: 100%; max-width: 560px; justify-self: center; }
.yardtitle { margin: 0 0 8px; font-weight: 700; font-size: 17px; color: var(--soft); text-align: center; }
/* 怎麼玩照 sonar「你要做的事」：只有編號＋標題＋一句，4 步排一列（手機往下排），不放截圖（用戶 10/15）。
   緊接著「畫面」區放 8 張商店截圖，每張 290px、間距 16px（sonar 量到的大小） */
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.step { padding: 18px 18px 20px; }
.step h3 { font-size: 19px; margin: 10px 0 4px; }
.step p { font-size: 15px; margin: 0; color: var(--soft); }
.shots { grid-auto-columns: 290px; gap: 16px; }
.why .cite::before { content: "— "; }
.refs { font-size: 13.5px; color: var(--soft); margin-top: 22px; }
.refs ol { margin: 4px 0 0; padding-left: 20px; }
.refs a { color: inherit; }
/* 季節活動：每季一張 app 活動頁的主視覺（限定生物剪影），從現在的月光季照時間排，桌機手機都左右滑 */
.seasons { display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: 16px; overflow-x: auto; padding: 8px 4px 18px; scroll-snap-type: x mandatory; }
.season { margin: 0; background: var(--card); border-radius: 16px 18px 14px 20px; box-shadow: 0 2px 0 var(--line); overflow: hidden; scroll-snap-align: start; }
.season img { display: block; width: 100%; height: auto; }
.season figcaption { padding: 12px 16px 16px; }
.season b { font-size: 19px; }
.season .when { display: block; font-size: 14px; color: var(--soft); }
.season p { margin: 6px 0 0; font-size: 15px; }
@media (max-width: 820px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 手機（用戶 10/15「要考慮 RWD，手機上看的」）：內文 16px、可點的地方至少 44px 高、標頭不換行、季節卡放大 */
.langbar b, .langbar a { white-space: nowrap; }
.langbar a { min-height: 44px; display: inline-flex; align-items: center; }
.faq details { padding: 0; } .faq summary { padding: 12px 18px; } .faq details p { margin: 0; padding: 0 18px 14px; }
footer a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.why .cite, .refs { font-size: 14px; }
@media (max-width: 480px) {
  .wrap { padding-inline: 16px; }
  .langbar b { font-size: 15px; }
  .langbar .wrap { gap: 4px; }
  .langbar a { padding-inline: 10px; }
  .step p, .season p, .feat span { font-size: 16px; }
  .seasons { grid-auto-columns: min(82vw, 340px); }
  .steps { grid-template-columns: 1fr; gap: 12px; }
  .shots { grid-auto-columns: 289px; gap: 16px; }
}