:root {
  --paper: #f4ecdf;
  --paper-deep: #eadcc6;
  --card: #fbf6ee;
  --ink: #3b3127;
  --ink-soft: #64554a;
  --accent: #9a5a2b;
  --on-accent: #ffffff;
  --accent-soft: #e9c9a6;
  --line: #d9c7ad;
  --night: #1f1b18;
  --night-ink: #efe4d4;
  --dream: #e9e2f2;
  --dream-ink: #4a3f5c;
  --danger: #a0463c;
  /* 字：內文與標題用思源宋體（端正、有書卷氣），手寫的地方（信、紙條、寫下的回憶）用霞鶩文楷 */
  --serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
  --hand: "LXGW WenKai TC", "Noto Serif TC", "Kaiti TC", serif;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  /* 動態的節奏：所有動畫共用同一組速度與曲線，畫面才會「動得一致」 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* 進場：快快出來、慢慢停穩 */
  --ease-in: cubic-bezier(0.55, 0, 0.85, 0.35);    /* 離場：慢慢起步、快快離開 */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* 場景、大範圍的變化 */
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1); /* 選到的回饋：輕輕彈一下 */
  --dur-1: 140ms;  /* 按下、滑過 */
  --dur-2: 280ms;  /* 小元件：勾選、提示 */
  --dur-3: 560ms;  /* 換頁 */
  --dur-4: 900ms;  /* 場景、氣氛 */
  --stagger: 70ms;
  --shadow-1: 0 1px 2px rgba(60, 40, 20, 0.06), 0 2px 8px -2px rgba(60, 40, 20, 0.08);
  --shadow-2: 0 2px 4px rgba(60, 40, 20, 0.06), 0 12px 28px -8px rgba(60, 40, 20, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #26211c;
    --paper-deep: #2f2923;
    --card: #322b25;
    --ink: #efe4d4;
    --ink-soft: #b8a78f;
    --accent: #e0a46f;
    --on-accent: #22190f;
    --accent-soft: #5a4330;
    --line: #4a3f34;
    --dream: #2c2735;
    --dream-ink: #e3d9f2;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  /* 中文標點擠一點、中英數字之間自動留一點空（瀏覽器支援時） */
  text-spacing-trim: space-first;
  text-autospace: normal;
}

#root {
  min-height: calc(100vh - 48px);
  min-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 32px;
  transition: background 1s ease, color 1s ease;
}

#root.dark { background: var(--night); color: var(--night-ink); }
#root.warm { background: var(--paper-deep); }
#root.paper { background: var(--paper); }
#root.dreamy { background: var(--dream); color: var(--dream-ink); }
#root.dim { background: var(--paper); }

/* 回憶之窗：像素場景固定在上方，換頁時不跟著閃 */
#stage { width: 100%; max-width: 560px; max-height: 0; opacity: 0; overflow: hidden; margin-bottom: 0; transition: max-height var(--dur-4) var(--ease-in-out), opacity var(--dur-4) var(--ease-out), margin-bottom var(--dur-4) var(--ease-in-out); }
#stage.show { max-height: 400px; opacity: 1; margin-bottom: 18px; }

#app { position: relative; width: 100%; max-width: 560px; }

.screen { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 18px; }

p { margin: 0 0 0.6em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.title { font-size: 1.4rem; font-weight: 700; margin: 8px 0 0; letter-spacing: 0.06em; line-height: 1.5; text-wrap: balance; }
.meta { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); letter-spacing: 0.08em; margin: 0; }
.label { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.1em; }
.note { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); line-height: 1.7; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px;
}
.card.soft { background: transparent; border-style: dashed; }
.card.era { border-left: 4px solid var(--accent-soft); }
.card.recall { border-left: 4px solid var(--accent); }
.card.summary { font-size: 1.05rem; }
.card.glean h2 { font-size: 1.3rem; margin: 0 0 12px; font-weight: 700; letter-spacing: 0.06em; }
.intro-line { color: var(--accent); font-family: var(--hand); font-size: 1.08em; }
.question { font-weight: 700; font-size: 1.12rem; line-height: 1.75; letter-spacing: 0.05em; text-wrap: balance; }

.options { display: flex; flex-direction: column; gap: 10px; }
.options.row { flex-direction: row; }
.options.row > * { flex: 1; }

button {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
button:hover { border-color: var(--accent); }
button:active { transform: scale(0.98); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); text-align: center; font-weight: 600; }
button.ghost { background: transparent; border-style: dashed; }
button.danger { color: var(--danger); }
button.link { background: none; border: none; padding: 0; color: inherit; font-size: inherit; text-decoration: underline; }
#root.dark button:not(.primary) { background: transparent; color: var(--night-ink); border-color: #5a4f45; }
#root.dreamy button:not(.primary) { background: transparent; color: var(--dream-ink); }

textarea, input[type=text], input[type=date], input[type=number], select {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-top: 6px;
}
textarea { resize: vertical; line-height: 1.8; font-family: var(--hand); font-size: 1.08rem; letter-spacing: 0.02em; }
.age-input { width: 4.5em; display: inline-block; margin: 0 4px; padding: 4px 8px; }
.hidden { display: none; }

.setup { display: flex; flex-direction: column; gap: 16px; }
.setup .item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.setup h3 { margin: 0; font-size: 1.05rem; }
.setup label { font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft); display: block; }
fieldset { border: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
legend { font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 6px; width: 100%; }
.pill { display: inline-flex !important; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; color: var(--ink) !important; }
.check { display: flex !important; gap: 10px; align-items: flex-start; font-family: var(--sans); font-size: 0.92rem; margin-top: 12px; }
.check input { margin-top: 5px; }

.progress { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress div { height: 100%; background: var(--accent); transition: width 0.8s ease; }

.intro { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; text-align: center; }
.intro .options { margin-top: 24px; }
.intro button { text-align: center; }
.whisper { font-size: 1.25rem; letter-spacing: 0.1em; }
.story p { font-size: 1.08rem; }
.year-counter { font-size: 3rem; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 12px; }

.numbers { display: grid; grid-template-columns: 1fr; gap: 12px; }
.numbers div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; align-items: baseline; gap: 12px; }
.numbers b { font-size: 1.8rem; font-weight: 700; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.numbers span { font-family: var(--sans); color: var(--ink-soft); }

.letter {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px 24px;
  box-shadow: 0 8px 24px rgba(60, 40, 20, 0.08);
  font-size: 1.12rem;
  font-family: var(--hand);
  background-image: repeating-linear-gradient(transparent, transparent 33px, var(--line) 34px);
  background-position: 0 14px;
}
.letter .to { font-weight: 600; }
.letter-note { font-family: var(--sans); color: var(--ink-soft); font-size: 0.92rem; padding: 0 4px; }

.dream-choice { font-style: italic; color: var(--dream-ink); opacity: 0.85; }
.chapters { display: flex; flex-direction: column; gap: 14px; }
.chapter { border-left: 2px solid var(--dream-ink); padding-left: 14px; opacity: 0.95; }
.chapter b { font-family: var(--sans); font-size: 0.85rem; display: block; margin-bottom: 4px; }
.ledger { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ledger h3 { font-family: var(--sans); font-size: 0.9rem; margin: 0 0 6px; }
.ledger ul { margin: 0; padding-left: 1.2em; }

.book-stage { border-top: 1px solid var(--line); padding-top: 16px; }
.book-stage h3 { margin: 0 0 8px; }
.book-stage ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.book-stage li b { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); margin-right: 6px; }
.book-stage blockquote { margin: 4px 0 0; padding-left: 12px; border-left: 2px solid var(--accent-soft); color: var(--ink-soft); }
.book-stage .summary { margin-bottom: 10px; font-style: italic; }
.glean-mini { margin-bottom: 12px; }
.glean-mini b { display: block; }

.loading { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--ink-soft); }
.dot-row { display: flex; gap: 8px; }
.dot-row span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s infinite ease-in-out; }
.dot-row span:nth-child(2) { animation-delay: 0.2s; }
.dot-row span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

.fade-in { animation: fade 1.1s var(--ease-out) both; }
.delay-1 { animation: fade 1.4s var(--ease-out) 0.3s both; }
.delay-2 { animation: fade 1.4s var(--ease-out) 1.2s both; }
.delay-3 { animation: fade 1.4s var(--ease-out) 2.2s both; }
.delay-4 { animation: fade 1.4s var(--ease-out) 3.2s both; }
.delay-5 { animation: fade 1.4s var(--ease-out) 4.2s both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fade-in, .delay-1, .delay-2, .delay-3, .delay-4, .delay-5 { animation: none; }
}

.footer {
  min-height: 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 8px;
  padding: 8px 12px;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: var(--paper);
}
.footer a { color: inherit; }

.year-banner { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 4px; border-bottom: 1px solid var(--line); animation: fade 1.1s ease both; }
.year-banner b { font-size: 2.3rem; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); line-height: 1.15; font-variant-numeric: lining-nums tabular-nums; }
.year-banner span { font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft); letter-spacing: 0.06em; }
.skip-year { align-self: center; font-size: 0.85rem; color: var(--ink-soft); margin-top: 4px; }

canvas.pixel { width: 100%; aspect-ratio: 16 / 9; image-rendering: pixelated; image-rendering: crisp-edges; display: block; background: var(--card); }
/* 回憶之窗做成一張老照片：米白相紙、日期印記、背面手寫的一行字 */
#stage .photo { background: #fbf7ef; padding: 8px 8px 6px; border-radius: 4px; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 22px rgba(60, 40, 20, 0.14); }
#stage .shot { position: relative; border-radius: 2px; overflow: hidden; }
#stage .shot::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255,255,255,0) 60%, rgba(70,40,10,0.16) 100%); }
#stage-stamp { position: absolute; right: 8px; bottom: 6px; font-family: "Courier New", ui-monospace, monospace; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.08em; color: #ff9a3c; text-shadow: 0 0 4px rgba(255,140,40,0.55); opacity: 0.9; z-index: 1; }
#stage-stamp:empty { display: none; }
#stage-caption { font-family: var(--hand); font-size: 1.02rem; color: #7a6450; padding: 8px 6px 2px; letter-spacing: 0.06em; min-height: 1.2em; }
#stage-caption:empty { display: none; }
#root.dark #stage .photo { background: #e9e1d3; }
.options.tight { gap: 8px; }
.options.tight button { text-align: center; padding: 10px 8px; }
.look-group { display: flex; flex-direction: column; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 12px; border-radius: 999px; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 6px; text-align: center; }
.chip.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,0.2); }

/* 換頁：舊文字先淡出，新內容一行一行浮現 */
.screen.leaving { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateY(-6px); transition: opacity 240ms var(--ease-in), transform 240ms var(--ease-in); pointer-events: none; z-index: 2; }
.screen.enter > * { animation: rise var(--dur-3) var(--ease-out) both; }
.screen.enter > *:nth-child(1) { animation-delay: 0.18s; }
.screen.enter > *:nth-child(2) { animation-delay: 0.26s; }
.screen.enter > *:nth-child(3) { animation-delay: 0.34s; }
.screen.enter > *:nth-child(4) { animation-delay: 0.42s; }
.screen.enter > *:nth-child(5) { animation-delay: 0.5s; }
.screen.enter > *:nth-child(6) { animation-delay: 0.56s; }
.screen.enter > *:nth-child(n + 7) { animation-delay: 0.62s; }
.screen.enter .options > * { animation: rise var(--dur-3) var(--ease-out) both; }
.screen.enter .options > *:nth-child(1) { animation-delay: 0.42s; }
.screen.enter .options > *:nth-child(2) { animation-delay: 0.5s; }
.screen.enter .options > *:nth-child(3) { animation-delay: 0.58s; }
.screen.enter .options > *:nth-child(4) { animation-delay: 0.66s; }
.screen.enter .options > *:nth-child(n + 5) { animation-delay: 0.74s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
button, .chip, .card, .letter { transition: transform var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .screen.enter > *, .screen.enter .options > * { animation: none; }
  .screen.leaving { transition: none; }
  #stage { transition: none; }
}
.screen.waiting { opacity: 0.5; pointer-events: none; transition: opacity 0.4s ease; }

.card.reflect .question { font-weight: 500; }
.card.reflect.big { border-style: solid; border-color: var(--accent-soft); }
.card.reflect.big .question { font-weight: 700; }

.mirror { align-self: center; width: 62%; max-width: 240px; aspect-ratio: 64 / 128; background: radial-gradient(ellipse at 50% 40%, #fffaf2 0%, #f0e2cc 70%, #e2cdb0 100%); border: 6px solid #c9a27a; border-radius: 120px 120px 18px 18px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; box-shadow: inset 0 0 0 2px #e8d2b2, 0 8px 20px rgba(60,40,20,0.15); }
.mirror canvas { width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }

/* ───────── 懷舊感 ───────── */
/* 舊紙的紋理 */
#root { background-image: var(--paper-noise, none); background-blend-mode: multiply; }
/* 記憶的濾鏡：越久以前越泛黃、越褪色 */
#stage-canvas, #stage-fx { filter: sepia(var(--sepia, 0.1)) saturate(var(--sat, 1)) contrast(0.96) brightness(1.02); transition: filter 1.6s ease, opacity 1.6s ease; }
/* 相片顯影：先是一片白，再慢慢浮現 */
#stage .shot.developing #stage-canvas, #stage .shot.developing #stage-fx { filter: sepia(0.9) saturate(0.25) brightness(1.75) blur(0.7px); opacity: 0.75; transition: none; }
/* 底片顆粒 */
#stage .grain { position: absolute; inset: -20%; pointer-events: none; background-image: var(--grain-noise, none); opacity: 0.16; mix-blend-mode: overlay; animation: grain 0.9s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -1%); } 100% { transform: translate(0, 0); } }
/* 偶爾閃過的漏光 */
#stage .leak { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255,120,40,0) 55%, rgba(255,140,60,0.42) 78%, rgba(255,220,140,0.55) 92%, rgba(255,120,40,0) 100%); mix-blend-mode: screen; opacity: 0; animation: leak 14s ease-in-out infinite; }
@keyframes leak { 0%, 78%, 100% { opacity: 0; transform: translateX(10%); } 86% { opacity: 1; transform: translateX(0); } 94% { opacity: 0.4; transform: translateX(-6%); } }
/* 文字一字一字浮現 */
.ch { opacity: 0; animation: chIn 0.5s ease forwards; }
@keyframes chIn { from { opacity: 0; filter: blur(1.5px); } to { opacity: 1; filter: none; } }
.screen.enter .options > *:nth-child(1) { animation-delay: calc(var(--after, 0.42s) + 0s); }
.screen.enter .options > *:nth-child(2) { animation-delay: calc(var(--after, 0.42s) + 0.08s); }
.screen.enter .options > *:nth-child(3) { animation-delay: calc(var(--after, 0.42s) + 0.16s); }
.screen.enter .options > *:nth-child(4) { animation-delay: calc(var(--after, 0.42s) + 0.24s); }
.screen.enter .options > *:nth-child(n + 5) { animation-delay: calc(var(--after, 0.42s) + 0.32s); }
.card p, .letter p { letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) {
  .ch { opacity: 1; animation: none; }
  #stage .grain, #stage .leak { animation: none; }
  #stage .leak { opacity: 0; }
}

/* 新的插圖：平滑，不用像素放大 */
canvas.art { width: 100%; aspect-ratio: 16 / 9; display: block; background: var(--card); }
.note-letter p { margin-bottom: 0.9em; }
.mode-choice { display: flex !important; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; cursor: pointer; color: var(--ink) !important; }
.mode-choice input { margin-top: 6px; }
.mode-choice b { display: block; font-size: 1rem; margin-bottom: 2px; }
.mode-choice small { display: block; margin-top: 4px; color: var(--ink-soft); }
.mode-choice:has(input:checked) { border-color: var(--accent); background: rgba(185, 115, 63, 0.08); }
.photo-pick { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.photo-btn { display: inline-flex !important; align-self: flex-start; align-items: center; gap: 8px; padding: 10px 16px; border: 1px dashed var(--accent); border-radius: 999px; color: var(--accent) !important; font-family: var(--sans); cursor: pointer; }
.book-photo { display: block; max-width: 100%; margin-top: 8px; border: 8px solid #fff; box-shadow: 0 4px 12px rgba(60,40,20,0.15); filter: sepia(0.15); }
@media print { .footer, #stage, .options { display: none !important; } #root { background: #fff !important; } }

/* 只給螢幕報讀軟體讀的文字 */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mic { align-self: flex-start; margin-top: 8px; padding: 8px 14px; border-radius: 999px; font-size: 0.9rem; text-align: center; border-style: dashed; }
.mic.on { border-color: var(--danger); color: var(--danger); border-style: solid; }
.mic-note { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); margin-top: 4px; }

/* ───────── 文字大小 ───────── */
html[data-font="s"], html[data-font="s"] body { font-size: 16px; }
html[data-font="l"], html[data-font="l"] body { font-size: 20px; }
html[data-font="xl"], html[data-font="xl"] body { font-size: 22px; }

/* ───────── 減少動畫 ───────── */
html.calm *, html.calm *::before, html.calm *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; }
html.calm .ch { opacity: 1; }
html.calm #stage .grain, html.calm #stage .leak { display: none; }

/* ───────── 上方：回上一步與剩下的時間 ───────── */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); margin-bottom: -10px; }
.topbar .undo { font-size: 0.85rem; text-decoration: none; color: var(--ink-soft); padding: 4px 0; }
.topbar .undo:hover { color: var(--accent); }
.topbar .eta { letter-spacing: 0.04em; }
.note.center { text-align: center; }

/* ───────── 年份翻頁 ───────── */
.year-flip { position: relative; display: inline-block; perspective: 400px; }
.year-flip span { display: inline-block; transform-origin: 50% 60%; }
.year-flip .old { position: absolute; left: 0; top: 0; animation: flipOut 0.5s var(--ease-in) 0.15s both; color: var(--ink-soft); }
.year-flip .new { animation: flipIn 0.7s var(--ease-out) 0.55s both; }
@keyframes flipOut { from { opacity: 1; transform: rotateX(0); } to { opacity: 0; transform: rotateX(80deg) translateY(-6px); } }
@keyframes flipIn { from { opacity: 0; transform: rotateX(-80deg) translateY(6px); } to { opacity: 1; transform: none; } }

/* ───────── 設定選單 ───────── */
#settings { position: fixed; inset: 0; z-index: 50; background: rgba(30, 22, 16, 0); display: flex; align-items: flex-end; justify-content: center; transition: background var(--dur-2) var(--ease-out); }
#settings.open { background: rgba(30, 22, 16, 0.42); }
#settings[hidden] { display: none; }
.sheet { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--card); color: var(--ink); border-radius: 18px 18px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; transform: translateY(24px); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; font-family: var(--sans); font-size: 0.95rem; }
#settings.open .sheet { transform: none; opacity: 1; }
.sheet h2 { margin: 0; font-family: var(--serif); font-size: 1.25rem; }
.sheet h3 { margin: 8px 0 0; font-size: 0.95rem; color: var(--ink-soft); }
.sheet .check { margin-top: 0; }
.range { display: flex; flex-direction: column; gap: 4px; }
.range input { width: 100%; accent-color: var(--accent); }
.row-set { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { border: none; border-radius: 0; padding: 8px 12px; text-align: center; background: transparent; font-size: 0.9rem; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent); color: var(--on-accent); }
.file-btn { display: block; font-family: var(--sans); font-size: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; }
.file-btn:hover { border-color: var(--accent); }
.plain-link { color: var(--ink-soft); font-size: 0.9rem; padding: 2px 4px; }
.backup-tip { display: flex; flex-direction: column; gap: 10px; }
.backup-tip button { align-self: flex-start; }
.book-cover { text-align: center; padding: 18px 12px 12px; margin-bottom: 10px; background: rgba(185, 115, 63, 0.07); border-radius: 10px; }
.book-cover span { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.08em; }
.book-cover h3 { margin: 2px 0 0 !important; font-size: 1.2rem; letter-spacing: 0.08em; }

/* ───────── 提示與出錯畫面 ───────── */
.toast { position: fixed; left: 50%; bottom: calc(64px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); max-width: min(520px, calc(100% - 32px)); background: var(--night); color: var(--night-ink); font-family: var(--sans); font-size: 0.9rem; line-height: 1.6; padding: 12px 16px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 60; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.crash { position: fixed; inset: 0; z-index: 70; background: rgba(30, 22, 16, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.crash .sheet { border-radius: 18px; transform: none; opacity: 1; max-width: 460px; }

/* 簡體字的玩家：用簡體版的霞鶩文楷 */
html.script-cn { --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif; --hand: "LXGW WenKai", "LXGW WenKai TC", "Noto Serif SC", serif; }
.curve-box { color: var(--accent); }
.life-curve { width: 100%; height: auto; display: block; }

/* 開場的遊戲名稱 */
.game-title { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 28px; }
.game-title b { font-size: 2.9rem; letter-spacing: 0.5em; padding-left: 0.5em; font-weight: 700; line-height: 1.3; }
.game-title span { font-family: var(--hand); font-size: 1.12rem; letter-spacing: 0.24em; padding-left: 0.24em; opacity: 0.78; }

/* ───────── 互動 ───────── */
/* 擦去灰塵 */
#stage .shot { touch-action: pan-y; }
.dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; cursor: grab; touch-action: none; transition: opacity 0.6s ease; }
.dust.gone { opacity: 0; pointer-events: none; }
.dust-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; pointer-events: none; font-family: var(--sans); font-size: 0.95rem; color: #5a4a36; background: rgba(255, 250, 238, 0.82); padding: 6px 14px; border-radius: 999px; animation: hintPulse 1.8s ease-in-out infinite; transition: opacity 0.3s ease; }
.dust-hint.gone { opacity: 0; animation: none; }
@keyframes hintPulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
.screen.veiled .card, .screen.veiled .options, .screen.veiled .skip-year, .screen.veiled .ritual { visibility: hidden; }
.screen.veiled .ch, .screen.veiled .options > * { animation-play-state: paused; }
.unveil { align-self: center; font-size: 0.9rem; color: var(--ink-soft); }

/* 特別的動作 */
.screen.ritual-pending .options:not(.row), .screen.ritual-pending .skip-year { display: none; }
.ritual { display: flex; flex-direction: column; align-items: stretch; gap: 8px; transition: opacity 0.5s ease, transform 0.5s ease; }
.ritual.ritual-done { opacity: 0; transform: scale(0.96); }
.ritual .note { text-align: center; }
.ritual-btn { font-size: 1.05rem; padding: 16px; }
.hold-btn { position: relative; overflow: hidden; isolation: isolate; text-align: center; font-weight: 600; padding: 18px 16px; user-select: none; -webkit-user-select: none; touch-action: none; background: var(--card); }
.hold-btn::before { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--accent-soft); z-index: -1; }
.hold-btn.held::before { background: var(--accent); }
.hold-btn.held { color: var(--on-accent); }
.slide-track { position: relative; height: 56px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; touch-action: none; }
.slide-track .knob { position: absolute; left: 4px; top: 4px; width: 48px; height: 46px; border-radius: 999px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; transition: transform 0.25s ease; touch-action: none; }
.slide-track .slide-label { font-family: var(--sans); color: var(--ink-soft); padding-left: 40px; }
.slide-track.done { border-color: var(--accent); }
.sign-pad canvas { width: 100%; aspect-ratio: 600 / 220; background-color: #fffdf6; border: 1px dashed var(--line); border-radius: 10px; touch-action: none; display: block; background-image: linear-gradient(transparent calc(100% - 40px), rgba(120, 100, 80, 0.25) calc(100% - 40px), rgba(120, 100, 80, 0.25) calc(100% - 39px), transparent calc(100% - 39px)); }
img.signature { display: block; max-width: 240px; margin-top: 6px; }
.book-sign { text-align: center; }
.book-sign img.signature { margin: 6px auto 0; }
#stage .shot.shake { animation: shake 0.5s ease; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px) rotate(-0.6deg); } 40% { transform: translateX(5px) rotate(0.6deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* 答案卡 */
.answer-sheet { background-color: #fbf8ef; color: #3b3127; border: 1px solid #c9b8d8; border-radius: 10px; padding: 12px; background-image: repeating-linear-gradient(transparent 0 46px, rgba(150, 120, 190, 0.12) 46px 47px); }
.sheet-head { font-family: var(--sans); font-size: 0.8rem; color: #6a4a8a; letter-spacing: 0.1em; margin: 0 0 4px; }
.answer-sheet .bubble-row { display: flex; align-items: center; gap: 12px; background: transparent; border-color: transparent; color: #3b3127; }
.answer-sheet .bubble-row:hover { border-color: #c9b8d8; }
.bubble { flex: 0 0 auto; width: 34px; height: 22px; border: 1.5px solid #7a5a9a; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; color: #6a4a8a; position: relative; }
.bubble.filled { background: #2a2a2e; color: transparent; border-color: #2a2a2e; animation: fillIn 0.35s ease; }
@keyframes fillIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* 選了之後：選項飛進盒子 */
.options button.picked { animation: flyToBox 0.5s cubic-bezier(0.5, 0, 0.8, 0.4) forwards !important; z-index: 5; position: relative; }
.options button.unpicked { opacity: 0.25; transition: opacity var(--dur-2) var(--ease-out); }
@keyframes flyToBox { 0% { transform: none; opacity: 1; } 30% { transform: scale(1.03) rotate(-1deg); } 100% { transform: translateY(var(--fly-y, -80px)) scale(0.3) rotate(-6deg); opacity: 0; } }

/* 打開的盒子 */
.box-card .question { margin-top: 4px; }
.box-picks button { text-align: center; }

/* 相簿 */
.album { display: flex; flex-direction: column; gap: 8px; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.album-item { padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: #fbf7ef; border-radius: 6px; box-shadow: 0 2px 8px rgba(60, 40, 20, 0.1); text-align: center; }
.album-item:nth-child(odd) { transform: rotate(-1.2deg); }
.album-item:nth-child(even) { transform: rotate(1deg); }
.album-item canvas { width: 100%; aspect-ratio: 4 / 3; display: block; }
.album-item span { font-family: var(--sans); font-size: 0.78rem; color: #5a4a38; }
.album-item.on { outline: 2px solid var(--accent); }
.album-detail { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.album-detail blockquote, .year-mem blockquote { margin: 6px 0 0; padding-left: 12px; border-left: 2px solid var(--accent-soft); color: var(--ink-soft); }

/* 年份膠卷 */
.film { display: flex; gap: 3px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; background: #2b2420; border-radius: 6px; margin: 2px 0 -4px; }
.film::-webkit-scrollbar { display: none; }
.film .frame { flex: 0 0 auto; width: 38px; height: 34px; padding: 0; border: none; border-radius: 3px; background: #463a32; color: #c8b6a0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; font-family: var(--sans); }
.film .frame b { font-size: 0.72rem; font-weight: 600; }
.film .frame i { font-style: normal; font-size: 0.6rem; }
.film .frame.has { background: #6a5444; color: #fbefdc; }
.film .frame.now { background: #e0a46f; color: #22190f; }
.film .frame.future { opacity: 0.35; }
.film .frame:disabled { cursor: default; }
.year-mem { border-top: 1px dashed var(--line); padding-top: 10px; }

/* 信的動作 */
#stage-canvas.anim-send, #stage-fx.anim-send { animation: sendAway 1.4s ease-in forwards; }
#stage-canvas.anim-keep, #stage-fx.anim-keep { animation: keepDown 1.3s ease-in forwards; }
@keyframes sendAway { 0% { transform: none; } 30% { transform: scale(0.96); } 100% { transform: translateY(-40px) scale(0.5); opacity: 0; } }
@keyframes keepDown { 0% { transform: none; } 100% { transform: translateY(40px); opacity: 0; } }
html.calm .options button.picked, html.calm #stage-canvas.anim-send, html.calm #stage-canvas.anim-keep, html.calm #stage-fx.anim-send, html.calm #stage-fx.anim-keep { animation: none !important; }

/* ───────── 用動作回答 ───────── */
#stage-canvas, #stage-fx { filter: sepia(var(--sepia, 0.1)) saturate(var(--sat, 1)) contrast(0.96) brightness(1.02) blur(var(--blur, 0px)); }
.widget { display: flex; flex-direction: column; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.widget .question { margin: 0; }
.widget-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.widget-actions .primary { min-width: 40%; }
.widget-actions .primary:disabled { opacity: 0.45; cursor: default; }
.screen.ritual-pending .widget-host { display: none; }
.ritual.activity { display: block; }

/* 座位表 */
.classroom-map { display: grid; grid-template-columns: 22px 1fr 22px; grid-template-rows: auto 1fr; gap: 6px; background: #e8e2cc; border-radius: 10px; padding: 10px; color: #3b3127; }
.classroom-map .board { grid-column: 1 / 4; text-align: center; background: #2f4f3e; color: #eef2e6; border-radius: 4px; font-family: var(--sans); font-size: 0.8rem; padding: 4px; }
.classroom-map .side { writing-mode: vertical-rl; font-family: var(--sans); font-size: 0.72rem; color: #6a6250; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.classroom-map .window { background: repeating-linear-gradient(#bcd8e8 0 18px, #4f8a5c 18px 21px); color: #234; }
.classroom-map .door { background: #d8cfb6; color: #4a4232; }
.desks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.desk { aspect-ratio: 1.3; padding: 0; border-radius: 4px; background: #c99a62; border: 2px solid #a87a48; }
.desk:hover { border-color: var(--accent); }
.desk.me { background: #f2c14e; border-color: #9a5a2b; position: relative; }
.desk.me::after { content: "我"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #5a3a1a; font-family: var(--serif); }

/* 便當 */
.lunch { display: flex; flex-direction: column; gap: 10px; }
.lunch-type { align-self: flex-start; }
.bento { min-height: 96px; border-radius: 14px; background: linear-gradient(#d8dbde, #a8adb2); border: 4px solid #8a9096; padding: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; box-shadow: inset 0 2px 8px rgba(0,0,0,0.15); }
.bento.tray { background: linear-gradient(#e8ecef, #c8ced4); border-radius: 6px; border-color: #b8bec4; }
.food-in { background: #fffaf0; color: #3b3127; border-radius: 999px; padding: 4px 10px; font-size: 0.9rem; animation: drop var(--dur-2) var(--ease-spring); }
.bento-empty { color: #5a6066; font-family: var(--sans); font-size: 0.85rem; margin: auto; }
@keyframes drop { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 舊手機與聊天 */
.flip-phone { width: min(240px, 100%); margin: 0 auto; background: linear-gradient(#9aa4b4, #6a7484); border-radius: 26px; padding: 16px 14px 18px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.lcd { background: #b8c8a0; border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 4px; box-shadow: inset 0 0 0 3px #2c3a52; }
.lcd-bar { font-family: monospace; font-size: 0.75rem; color: #2a3a2a; border-bottom: 1px solid #6a7a5a; }
.lcd input, .lcd textarea { background: transparent; border: none; border-radius: 0; margin: 0; padding: 2px; font-family: monospace; color: #1a2a1a; font-size: 0.95rem; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.keypad span { background: #dfe4ea; border-radius: 10px; text-align: center; font-family: var(--sans); font-weight: 600; color: #2a2e36; padding: 4px 0; line-height: 1.1; }
.keypad small { display: block; font-size: 0.55rem; font-weight: 400; color: #5a6070; }
.chat-phone { width: min(280px, 100%); margin: 0 auto; background: #26282e; border-radius: 24px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-phone input, .chat-phone textarea { margin: 0; background: #f4f4f6; color: #222; }
.chat { min-height: 60px; background: linear-gradient(#3a5a8a, #8a6aa8); border-radius: 12px; }

/* 制服 */
.uniform-maker { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px) { .uniform-maker { grid-template-columns: 180px 1fr; } }
.uniform-preview { display: flex; justify-content: center; background: #f4ead6; border-radius: 12px; padding: 8px; }
.uniform-svg { width: 170px; height: auto; }
.uniform-controls .label { margin: 6px 0 4px; }

/* 薪水分罐 */
.coins { display: flex; flex-direction: column; gap: 12px; }
.coin-pile { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 34px; }
.coin-pile em { font-style: normal; font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); margin-left: 8px; }
.coin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b0, #d8a83c 60%, #a8781c); box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.jars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jar { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px 12px 18px 18px; background: rgba(200, 225, 240, 0.35); border: 2px solid #9ab8cc; text-align: center; }
.jar-coins { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 48px; align-content: flex-end; }
.jar-coins .coin { width: 16px; height: 16px; }
.jar b { font-size: 0.85rem; }
.jar small { font-family: var(--sans); color: var(--ink-soft); }

/* 年夜飯 */
.round-table { display: flex; justify-content: center; }
.table-top { position: relative; width: min(300px, 86vw); aspect-ratio: 1; }
.table-center { position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(#e84a3c, #b8262a); color: #fff2c8; display: flex; align-items: center; justify-content: center; font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
.seat { position: absolute; transform: translate(-50%, -50%); width: 22%; aspect-ratio: 1; border-radius: 50%; padding: 2px; font-size: 0.72rem; text-align: center; line-height: 1.2; background: #f4ead6; border: 2px dashed #c9a878; color: #3b3127; z-index: 1; }
.seat.taken { border-style: solid; background: #fffaf0; }
.seat.empty-seat { background: transparent; border-style: dotted; color: var(--ink-soft); }
.people { justify-content: center; }

/* 小鎮地圖 */
.town-map { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #d8e4c4; border-radius: 12px; overflow: hidden; }
.road { position: absolute; background: #c8bca4; }
.road.r1 { left: 0; right: 0; top: 52%; height: 10%; }
.road.r2 { top: 0; bottom: 0; left: 46%; width: 9%; }
.place { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; background: rgba(255, 250, 238, 0.92); border-radius: 8px; font-size: 0.78rem; line-height: 1.2; color: #3b3127; text-align: center; max-width: 34%; }
.place.visited { box-shadow: 0 0 0 2px var(--accent); }
.place .pin { width: 10px; height: 10px; border-radius: 50%; background: #c0443c; }
.place.home .pin { background: #4f8a5c; }
.kid { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -110%); border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 30%, #f2d0b0 35%, #c0443c 36%); transition: left 0.8s ease, top 0.8s ease; z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.town-note:empty { display: none; }

/* 吹直笛、最後一棒、背包、模糊 */
.recorder .score { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; }
.recorder .score span { font-family: var(--sans); padding: 4px 8px; border-radius: 8px; background: var(--paper); color: var(--ink-soft); }
.recorder .score span.next { background: var(--accent); color: var(--on-accent); }
.recorder .score span.ok { color: #3f7a4f; }
.recorder .score span.miss { color: var(--danger); text-decoration: line-through; }
.holes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.hole { border-radius: 50%; aspect-ratio: 1; padding: 0; text-align: center; font-size: 0.8rem; background: #f6f0e2; border: 3px solid #c9b48a; }
.relay .track { position: relative; height: 54px; background: #c96a4a; border-radius: 27px; margin-bottom: 10px; overflow: hidden; }
.relay .finish { position: absolute; right: 6%; top: 0; bottom: 0; width: 6px; background: repeating-linear-gradient(#fff 0 6px, #222 6px 12px); }
.relay .runner { position: absolute; left: 0; top: 10px; width: 34px; height: 34px; border-radius: 50%; background: #f2c14e; border: 3px solid #fff; transition: left 0.15s ease; }
.relay .dash { width: 100%; font-size: 1.2rem; padding: 18px; }
.bag { min-height: 48px; border-radius: 14px; background: #e06a5e; color: #fff6ec; padding: 12px; font-family: var(--sans); }
.pack .chips { margin-top: 10px; }
.focus-range { width: 100%; accent-color: var(--accent); }
.draw-pad canvas { aspect-ratio: 600 / 380; background-image: none; }
.draw-tools { display: flex; justify-content: flex-end; }
img.drawing { display: block; max-width: 280px; margin-top: 6px; background: #fffdf6; border: 1px solid var(--line); border-radius: 8px; }
.book-stage .uniform-svg { width: 140px; margin-top: 6px; }

/* 每一年的天氣 */
.weather-pick { display: flex; flex-direction: column; gap: 6px; }
.weather-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.weather { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; text-align: center; font-size: 0.8rem; }
.weather svg { width: 30px; height: 30px; }
.weather.on { border-color: var(--accent); background: rgba(185, 115, 63, 0.12); font-weight: 600; }
.film .frame.w-sun { box-shadow: inset 0 -3px 0 #f2b84a; }
.film .frame.w-cloud { box-shadow: inset 0 -3px 0 #c9ccd2; }
.film .frame.w-rain { box-shadow: inset 0 -3px 0 #5f8fbf; }
.film .frame.w-storm { box-shadow: inset 0 -3px 0 #8a96a4; }
.film .frame.w-rainbow { box-shadow: inset 0 -3px 0 #e86f6f; }

/* 探索：畫面上發亮的地方 */
.hotspots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hotspot { position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background: transparent; pointer-events: auto; cursor: pointer; }
.hotspot span { position: absolute; inset: 10px; border-radius: 50%; background: rgba(255, 236, 170, 0.85); box-shadow: 0 0 0 0 rgba(255, 226, 150, 0.8); animation: glowPulse 1.8s ease-out infinite; }
.hotspot.visited span { background: rgba(255, 255, 255, 0.55); animation: none; }
.hotspot.on span { background: #fff; box-shadow: 0 0 0 6px rgba(255, 226, 150, 0.5); }
@keyframes glowPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 226, 150, 0.8); } 100% { box-shadow: 0 0 0 16px rgba(255, 226, 150, 0); } }
.explore-spots { flex-direction: row; flex-wrap: wrap; }
.explore-spots button { flex: 1 1 40%; text-align: center; }
.explore-spots button.visited { color: var(--ink-soft); }
html.calm .hotspot span { animation: none; }

/* ───────── 精緻畫面（WebGL）───────── */
/* 原本的畫布還在（負責畫、也負責接收點擊），只是看不見；看到的是上面那層 WebGL 畫布 */
#stage-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#stage .shot.fx #stage-canvas { opacity: 0 !important; }
/* 顆粒、漏光、暗角改由 WebGL 畫，CSS 的那幾層就不用了 */
#stage .shot.fx .grain, #stage .shot.fx .leak, #stage .shot.fx::after { display: none; }
#stage .shot.fx #stage-stamp { z-index: 2; }

/* ───────── 動態與質感 ───────── */
/* 按鈕：滑鼠移過去時微微浮起；按下去時往下沉一點，放開時輕輕彈回 */
@media (hover: hover) {
  button:not(:disabled):not(.link):hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
  button.primary:not(:disabled):hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 22px -8px rgba(120, 60, 20, 0.55); }
}
button:not(:disabled):not(.link):active { transform: translateY(0) scale(0.97); transition-duration: 60ms; }
button.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 16px -8px rgba(120, 60, 20, 0.5);
  letter-spacing: 0.08em;
}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
textarea, input[type=text], input[type=date], input[type=number], select { transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out); }
textarea:focus, input[type=text]:focus, input[type=date]:focus, input[type=number]:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
/* 舊手機螢幕上的字：用一般的字，不用手寫 */
.widget [data-msg], .widget [data-to] { font-family: var(--sans); font-size: 1rem; }
/* 卡片與信紙：疊兩層很淡的影子，像紙放在桌上 */
.card:not(.soft) { box-shadow: var(--shadow-1); }
.letter { box-shadow: var(--shadow-2); }
#stage .photo { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 2px 6px rgba(60, 40, 20, 0.08), 0 18px 36px -12px rgba(60, 40, 20, 0.28); }
/* 換頁時，一層一層依序浮上來 */
.screen.enter > *:nth-child(1) { animation-delay: calc(var(--stagger) * 2); }
.screen.enter > *:nth-child(2) { animation-delay: calc(var(--stagger) * 3); }
.screen.enter > *:nth-child(3) { animation-delay: calc(var(--stagger) * 4); }
.screen.enter > *:nth-child(4) { animation-delay: calc(var(--stagger) * 5); }
.screen.enter > *:nth-child(5) { animation-delay: calc(var(--stagger) * 6); }
.screen.enter > *:nth-child(6) { animation-delay: calc(var(--stagger) * 7); }
.screen.enter > *:nth-child(n + 7) { animation-delay: calc(var(--stagger) * 8); }
.screen.enter .options > *:nth-child(1) { animation-delay: calc(var(--after, 0.42s) + 0ms); }
.screen.enter .options > *:nth-child(2) { animation-delay: calc(var(--after, 0.42s) + var(--stagger)); }
.screen.enter .options > *:nth-child(3) { animation-delay: calc(var(--after, 0.42s) + var(--stagger) * 2); }
.screen.enter .options > *:nth-child(4) { animation-delay: calc(var(--after, 0.42s) + var(--stagger) * 3); }
.screen.enter .options > *:nth-child(n + 5) { animation-delay: calc(var(--after, 0.42s) + var(--stagger) * 4); }
/* 選到的東西：輕輕彈一下 */
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
.chip.on, .weather.on, .seg button.on, .widget [aria-pressed="true"], .widget .on { animation: pop var(--dur-2) var(--ease-spring); }
/* 設定面板：從下面滑上來 */
.sheet { transition: transform 420ms var(--ease-out), opacity 300ms var(--ease-out) !important; }
.toast { transition: opacity var(--dur-2) var(--ease-out), transform 420ms var(--ease-spring) !important; }
/* 探索畫面裡可以點的地方：小小的亮點，外面一圈慢慢擴散的光 */
.hotspot span { inset: 13px; background: radial-gradient(circle, #fffdf4 0 28%, rgba(255, 232, 160, 0.92) 30% 52%, rgba(255, 232, 160, 0) 72%); animation: glowPulse 2.4s var(--ease-out) infinite; }
.hotspot.on span { background: radial-gradient(circle, #fff 0 34%, rgba(255, 240, 190, 0.95) 36% 60%, rgba(255, 240, 190, 0) 76%); }
@media (prefers-reduced-motion: reduce) {
  button:not(:disabled):not(.link):hover, button:not(:disabled):not(.link):active { transform: none; }
  .chip.on, .weather.on, .seg button.on, .widget [aria-pressed="true"], .widget .on { animation: none; }
}
html.calm button:not(:disabled):not(.link):hover, html.calm button:not(:disabled):not(.link):active { transform: none; }
/* 精緻畫面自己會調色，越久以前越泛黃的那層濾鏡就淡一點，免得黃上加黃 */
#stage .shot.fx #stage-fx { filter: sepia(calc(var(--sepia, 0.1) * 0.55)) saturate(calc(0.35 + var(--sat, 1) * 0.65)) blur(var(--blur, 0px)); }
#stage .shot.fx.developing #stage-fx { filter: sepia(0.9) saturate(0.25) brightness(1.75) blur(0.7px); }

/* ───────── 心理學的設計：感官的線索、安靜的時刻、鏡子、走進回憶、還好嗎、你寫下的話 ───────── */
/* 寫字之前的一個感官細節 */
.sense { font-family: var(--hand); color: var(--ink-soft); font-size: 1rem; margin: 2px 0 0; padding-left: 1.4em; position: relative; }
.sense::before { content: "◦"; position: absolute; left: 0.3em; color: var(--accent); }
.quiet-note { font-family: var(--hand); font-size: 0.98rem; margin: 6px 0 0; }
/* 先放回盒子：很低調，但一直都在 */
.link.contain { align-self: center; font-size: 0.86rem; color: var(--ink-soft); }
/* 鏡子與走進回憶：字慢一點、大一點 */
.card.parent-mirror, .card.visit { font-size: 1.12rem; line-height: 2.05; letter-spacing: 0.06em; border-left: 4px solid var(--accent-soft); }
.card.parent-mirror p:last-child { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
/* 那件事留下了什麼 */
.options.meanings { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.options.meanings button { text-align: center; }
/* 5-4-3-2-1 安定練習 */
.grounding { text-align: center; }
.ground-word { font-size: 2.6rem; font-weight: 700; color: var(--accent); letter-spacing: 0.3em; padding-left: 0.3em; margin: 8px 0; line-height: 1.3; }
/* 結局：你寫下的話，一句一句浮現 */
.montage { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 12px 4px; cursor: default; }
.montage-head { text-align: center; margin-bottom: 8px; }
.montage-line { opacity: 0; animation: fade 1.8s var(--ease-out) var(--d, 0s) both; margin: 0; }
p.montage-line { font-family: var(--hand); font-size: 1.2rem; line-height: 1.85; letter-spacing: 0.04em; }
p.montage-line span { display: block; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.12em; opacity: 0.62; margin-bottom: 2px; }
.montage.all .montage-line { animation: none; opacity: 1; }
button.montage-line { align-self: center; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .montage-line { animation: none; opacity: 1; } }
/* 爸媽的年紀（開始前的設定） */
.parent-ages { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .parent-ages { grid-template-columns: 1fr; } }
.letter-card .field input { display: inline-block; width: auto; min-width: 10em; margin-left: 6px; }

/* 「我的答案不在這裡」 */
.link.missing-link { align-self: center; font-size: 0.86rem; color: var(--ink-soft); }
.missing-box { width: 100%; max-width: 560px; margin: 4px auto 0; display: grid; gap: 8px; text-align: left; }
.missing-box .row { display: flex; gap: 10px; flex-wrap: wrap; }
.missing-box input { width: 100%; }

/* 回報問題／建議 */
.feedback-sheet > * { flex-shrink: 0; } /* 內容多的時候不要把按鈕壓扁，整個視窗改成可以捲動 */
.feedback-sheet textarea { width: 100%; box-sizing: border-box; }
.feedback-types { display: flex; flex-wrap: wrap; align-self: stretch; }
.feedback-types button { flex: 1 1 auto; white-space: nowrap; }