:root {
  --hue: 32;
  --bg-cream: #f5f0e6;
  --bg-warm: #efe8dc;
  --text-primary: #3a3530;
  --text-secondary: rgba(58,53,48,0.6);
  --text-hint: rgba(58,53,48,0.4);
  --accent-gold: #c8a87c;
  --accent-gold-dim: #b89860;
  --accent-gold-light: rgba(200,168,124,0.3);
  --border-warm: rgba(160,130,90,0.15);
  --candle-warm: rgba(212,165,116,0.9);
  --whisper: rgba(160,140,110,0.6);
  --paper-soft: rgba(58,53,48,0.85);
  --paper-mute: rgba(58,53,48,0.5);
  --ease-standard: cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-decel: cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.175,0.885,0.32,1.275);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 20px;
}
::selection {
  background: rgba(200,168,124,0.25);
  color: inherit;
}
::-moz-selection {
  background: rgba(200,168,124,0.25);
  color: inherit;
}
:focus-visible {
  outline: 2px solid rgba(200,168,124,0.5);
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(200,168,124,0.4);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body {
  height:100%; background:var(--bg-cream); color:var(--text-primary);
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif; font-weight:300;
  letter-spacing:.02em; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
/* 底部導覽列是 fixed，字級放大時它自己也會變高；有導覽列的畫面（首頁／回歸）
   底部留白跟著實際量到的高度走，才不會把最下面那顆按鈕壓在導覽列底下。
   .nav-space 由 flow.js 的 go() 依「階段」切換（見那裡的註解）。
   .stage 是 min-height:100vh 且垂直置中，所以留白要下在 .stage 上，
   只加在 body 上沒有用——舞台本身還是滿一個視窗高，內容依舊會置中到導覽列下面。 */
body.nav-space { padding-bottom: calc(var(--nav-h, 52px) + 12px); }
body.nav-space .stage { padding-bottom: calc(60px + var(--nav-h, 52px)); }

/* ======== SPLASH 頁 ======== */
#splash {
  position:fixed; inset:0; z-index:200;
  background:var(--bg-cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; transition: opacity 1.2s ease;
}
#splash.leaving { opacity:0; pointer-events:none; }

/* 星球容器 */
.mirror-surface {
  position:relative; width:300px; height:300px;
  border-radius:50%;
  background: radial-gradient(circle at 40% 38%, #f7ecd6 0%, #eeddb8 42%, #ddc397 75%, #c9a874 100%);
  box-shadow:
    0 0 70px rgba(200,168,124,0.32),
    0 0 140px rgba(200,168,124,0.16),
    0 2px 50px rgba(160,130,90,0.2),
    0 0 0 1px rgba(212,165,116,0.15);
  border: 1px solid rgba(200,168,124,0.35);
  animation: mirrorFloat 5s ease-in-out infinite;
  overflow:hidden;
}

/* 星球大氣光掃過 */
.mirror-surface::before {
  content:'';
  position:absolute; inset:-50%;
  background: linear-gradient(
    130deg,
    transparent 35%,
    rgba(212,165,116,0.14) 42%,
    rgba(212,165,116,0.24) 49%,
    rgba(212,165,116,0.14) 56%,
    transparent 63%
  );
  animation: sheen 8s ease-in-out infinite;
}

/* 星球大氣層光環 */
.mirror-surface::after {
  content:'';
  position:absolute; inset:-3px;
  border-radius:50%;
  border: 1px solid rgba(200,168,124,0.28);
  box-shadow:
    inset 0 0 18px rgba(212,165,116,0.14),
    0 0 32px rgba(212,165,116,0.2);
  animation: mirrorFloat 5s ease-in-out infinite reverse;
}

@keyframes mirrorFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-6px) scale(1.01); }
}

@keyframes sheen {
  0% { transform:translateX(-120%) rotate(0deg); opacity:0; }
  10% { opacity:1; }
  45% { transform:translateX(120%) rotate(0deg); opacity:1; }
  55% { opacity:0; }
  100% { transform:translateX(120%) rotate(0deg); opacity:0; }
}

/* 鏡中的字 */
.splash-title-row {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  z-index:2;
  opacity:0; animation: fadeIn 2s ease-out 1s forwards;
}
.mirror-char {
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif;
  font-size:calc(42px * var(--user-font-scale)); font-weight:300;
  color: rgba(58,53,48,0.55);
  text-shadow:
    0 0 20px rgba(200,168,124,0.15);
  animation: mirrorCharBreathe 4s ease-in-out infinite;
}
@keyframes mirrorCharBreathe {
  0%,100% { opacity:1; }
  50% { opacity:0.85; }
}

/* 倒影 */
.mirror-reflection {
  width:200px; height:40px; margin-top:12px;
  background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(200,168,124,0.1) 0%, rgba(200,168,124,0.04) 40%, transparent 80%);
  border-radius:50%;
  filter:blur(10px);
  animation: mirrorFloat 5s ease-in-out infinite;
}

.splash-sub {
  font-size:calc(12px * var(--user-font-scale)); letter-spacing:.4em; color:var(--text-hint);
  text-transform:uppercase; font-family:'Klee One', Georgia, 'Noto Serif TC', serif;
}

.splash-hint {
  position:absolute; bottom:80px;
  font-size:calc(11px * var(--user-font-scale)); color:rgba(160,130,90,0.5); letter-spacing:.15em;
  opacity:0; animation: fadeIn 2s ease-out 2.5s forwards;
}

/* 點擊後：星球溶解成星塵 */
.mirror-particle {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(200,168,124,0.5) 0%, rgba(200,168,124,0.15) 60%, transparent 100%);
  pointer-events:none; filter:blur(0.5px);
}
@keyframes particleRise {
  0% { opacity:0.8; transform:translate(0,0) scale(1); }
  40% { opacity:0.6; }
  100% { opacity:0; transform:translate(var(--tx), var(--ty)) scale(0.3); }
}

/* ======== 背景 ======== */
.room {
  position:fixed; inset:0;
  background: var(--bg-cream);
  pointer-events:none; transition:background 4s ease;
}
/* Dialogue mode background — follows theme */
.room.dialogue-active {
  background: var(--bg-cream) !important;
  transition: background 1.5s ease;
}
body.dark-theme .room.dialogue-active {
  background: #1a1816 !important;
}
.room.dialogue-active + .candle-glow {
  opacity: 0.15;
}
.candle-glow {
  position:fixed; bottom:-10vh; left:50%; transform:translateX(-50%);
  width:80vw; height:60vh;
  background:radial-gradient(ellipse,rgba(200,168,124,0.05) 0%,transparent 70%);
  filter:blur(40px); animation:breathe 6s ease-in-out infinite;
  pointer-events:none; z-index:1; transition:background 4s ease;
}
@keyframes breathe { 0%,100%{opacity:.7;transform:translateX(-50%) scale(1)} 50%{opacity:1;transform:translateX(-50%) scale(1.08)} }
.noise {
  position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.01;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
#dustContainer { position:fixed; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.dust { position:absolute; border-radius:50%; background:rgba(200,168,124,0.3); animation:float linear infinite; will-change:transform,opacity; }
.dust.sm { width:2px; height:2px; opacity:.12; filter:blur(.3px); }
.dust.md { width:3px; height:3px; opacity:.18; filter:blur(.4px); box-shadow:0 0 4px rgba(200,168,124,0.1); }
.dust.lg { width:4px; height:4px; opacity:.22; filter:blur(.3px); box-shadow:0 0 6px rgba(200,168,124,0.12); }
@media (max-width:480px) and (prefers-reduced-motion:no-preference) { .dust:nth-child(n+20) { display:none; } }
@media (prefers-reduced-motion:reduce) { .dust { animation:none; display:none; } }
@keyframes float { from{transform:translateY(0) translateX(0);opacity:0} 8%{opacity:var(--dust-peak,.5)} 85%{opacity:var(--dust-peak,.5)} to{transform:translateY(-100vh) translateX(var(--drift,15px));opacity:0} }

/* ======== 主舞台 ======== */
.stage {
  position:relative; z-index:10; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 24px;
}
/* 對話時底部是 fixed 的輸入列；留白吃實際量到的輸入列高度，
   字級放大讓輸入列變高時，最後一則訊息／按鈕才不會被輸入列蓋住。 */
.stage.dialog-active { justify-content:flex-start; padding-top:40px; padding-bottom: calc(var(--input-h, 120px) + 40px); }
@keyframes fadeIn { to{opacity:1} }
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes thinkPulse { 0%,100%{opacity:.2;transform:scale(1)} 50%{opacity:.7;transform:scale(1.3)} }

.phase { display:none; max-width:540px; width:100%; opacity:0; }
.phase.active { display:block; animation:phaseEnter 1.8s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.phase.leaving { animation:phaseLeave 1s ease-in forwards; pointer-events:none; }
@keyframes phaseEnter {
  0% { opacity:0; transform:translateY(20px); filter:blur(4px); }
  40% { filter:blur(0); }
  100% { opacity:1; transform:translateY(0); filter:blur(0); }
}
@keyframes phaseLeave {
  0% { opacity:1; transform:translateY(0); filter:blur(0); }
  100% { opacity:0; transform:translateY(-12px); filter:blur(6px); }
}

/* Splash → Entry morph */
#splash.phase-leaving .mirror-surface {
  animation: orbToEntry 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes orbToEntry {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.6; filter: blur(8px); }
  100% { transform: scale(0.3) translateY(-40px); opacity: 0; filter: blur(20px); }
}

#entry.phase-entering {
  animation: entryReveal 0.8s ease-out 0.4s both;
}

@keyframes entryReveal {
  from { opacity: 0; transform: translateY(20px) scale(0.95); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* 轉場呼吸遮罩 */
.transition-veil {
  position:fixed; inset:0; z-index:90;
  background:radial-gradient(ellipse at 50% 50%, rgba(245,240,230,0.98) 0%, rgba(245,240,230,0.95) 100%);
  opacity:0; pointer-events:none;
  transition:opacity 1.2s ease;
}
.transition-veil.active { opacity:1; pointer-events:all; }
.transition-veil .veil-text {
  position:absolute; top:68%; left:50%; transform:translate(-50%,-50%);
  font-size:calc(14px * var(--user-font-scale)); letter-spacing:.3em; color:var(--text-hint);
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif; text-transform:uppercase;
  opacity:0; animation:fadeIn 1.5s ease-out 0.5s forwards;
  z-index:2;
}
/* 等待期載入動畫：三個脈動點，讓轉場/API 等待一定有可見的動態回饋 */
.veil-loading-dots {
  position:absolute; top:calc(68% + 30px); left:50%; transform:translate(-50%,-50%);
  display:flex; gap:8px; z-index:2;
}
.veil-loading-dots span {
  width:6px; height:6px; border-radius:50%;
  background:var(--accent-gold);
  animation:veilDotPulse 1.2s ease-in-out infinite;
}
.veil-loading-dots span:nth-child(2) { animation-delay:.2s; }
.veil-loading-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes veilDotPulse {
  0%,80%,100% { opacity:.25; transform:scale(0.8); }
  40% { opacity:1; transform:scale(1.15); }
}
.transition-veil .seeing-glow {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:0; height:0; border-radius:50%;
  background:radial-gradient(circle, hsla(var(--hue,32),40%,60%,.15) 0%, transparent 70%);
  animation:seeingExpand 4s ease-out forwards;
}
@keyframes seeingExpand { 0%{width:0;height:0;opacity:.6} 100%{width:600px;height:600px;opacity:0} }

/* 開場 */
.mirror-mark {
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif; font-size:calc(56px * var(--user-font-scale)); font-weight:300;
  letter-spacing:.4em; color:var(--accent-gold); text-align:center;
  margin-bottom:8px; text-indent:.4em; opacity:.85;
}
.mirror-sub {
  font-size:calc(11px * var(--user-font-scale)); letter-spacing:.5em; color:var(--text-hint); text-align:center;
  text-indent:.5em; margin-bottom:60px; text-transform:uppercase;
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif;
}
.entry-headline {
  font-size:calc(22px * var(--user-font-scale)); line-height:2.2; color:var(--accent-gold);
  text-align:center; font-weight:300; margin-bottom:28px;
  letter-spacing:.15em;
}
.entry-headline .line { display:block; opacity:0; animation:fadeIn 1.5s ease-out forwards; }
.entry-headline .line:nth-child(1) { animation-delay:.2s; }
.entry-headline .line:nth-child(2) { animation-delay:.8s; }
.entry-prose {
  font-size:calc(16px * var(--user-font-scale)); line-height:2.4; color:var(--text-primary);
  margin-bottom:50px; text-align:center; font-weight:300;
}
.entry-prose .line { display:block; opacity:0; animation:fadeIn 1.2s ease-out forwards; }
.entry-prose .line:nth-child(1) { animation-delay:1.2s; }
.entry-prose .line:nth-child(2) { animation-delay:1.7s; }
.entry-prose .line:nth-child(3) { animation-delay:2.2s; }
.entry-prose .line:nth-child(4) { animation-delay:2.7s; }
.entry-action { opacity:0; animation:fadeIn 1.5s ease-out 3.2s forwards; text-align:center; }

/* 入口首屏：讓內容先被讀懂，再邀請使用者開始。 */
.entry-phase {
  max-width: 560px;
  padding: 34px 30px 38px;
  text-align: center;
}
.entry-phase::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  width: min(58%, 250px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(184,152,96,0.72), transparent);
}
.entry-phase .mirror-mark {
  margin-bottom: 4px;
  color: var(--accent-gold-dim);
  font-size: clamp(3rem, 10vw, 4.25rem);
  line-height: 1;
  text-shadow: 0 10px 26px rgba(160,130,90,0.12);
}
.entry-phase .mirror-sub {
  margin-bottom: 28px;
  color: var(--story-muted, var(--text-hint));
  font-size: calc(0.68rem * var(--user-font-scale));
  letter-spacing: 0.42em;
}
.entry-date {
  display: inline-block;
  margin: 0 0 26px !important;
  padding: 6px 11px;
  border: 1px solid rgba(160,130,90,0.16);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.30);
  color: var(--story-muted, var(--text-hint)) !important;
  font-size: calc(0.68rem * var(--user-font-scale)) !important;
}
.entry-headline {
  max-width: 440px;
  margin: 0 auto 22px;
  color: var(--story-ink, var(--text-primary));
  font-family: var(--font-serif, 'Klee One', Georgia, serif);
  font-size: clamp(1.35rem, 4.8vw, 1.72rem);
  line-height: 1.88;
  letter-spacing: 0.10em;
}
.entry-headline .line:last-child { color: var(--accent-gold-dim); }
.entry-prose {
  max-width: 410px;
  margin: 0 auto 34px;
  color: var(--text-secondary);
  font-family: var(--font-sans, 'Noto Sans TC', sans-serif);
  font-size: clamp(0.92rem, 3.6vw, 1rem);
  line-height: 2.05;
  letter-spacing: 0.035em;
}
.entry-action { position: relative; }
#entryMainBtn {
  min-width: min(100%, 250px);
  min-height: 52px;
  border: 1px solid rgba(122,91,52,0.22);
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #d8bc91, #c49d69);
  box-shadow: 0 10px 22px rgba(160,130,90,0.18), inset 0 1px rgba(255,255,255,0.46);
  color: #30261d;
  font-size: calc(0.95rem * var(--user-font-scale));
  font-weight: 400;
  letter-spacing: 0.15em;
  transition: transform var(--duration-fast, .2s) var(--ease-decel), box-shadow var(--duration-fast, .2s), filter var(--duration-fast, .2s);
}
#entryMainBtn:hover {
  border-color: rgba(122,91,52,0.32);
  color: #30261d;
  filter: brightness(1.035);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(160,130,90,0.26), inset 0 1px rgba(255,255,255,0.52);
}
#entryMainBtn:active { transform: translateY(0) scale(0.98); }
.entry-cta-meta {
  margin: 13px 0 0;
  color: var(--story-muted, var(--text-hint));
  font-family: var(--font-sans, 'Noto Sans TC', sans-serif);
  font-size: calc(0.7rem * var(--user-font-scale));
  letter-spacing: 0.08em;
}
body.dark-theme .entry-date { background: rgba(255,255,255,0.04); }
body.dark-theme #entryMainBtn { color: #282119; box-shadow: 0 12px 26px rgba(0,0,0,0.26), inset 0 1px rgba(255,255,255,0.38); }

/* 按鈕 */
.btn {
  background:transparent; border:1px solid rgba(160,130,90,.25);
  color:var(--text-primary); font-family:inherit; font-size:calc(15px * var(--user-font-scale)); font-weight:300;
  padding:18px 50px; letter-spacing:.2em; cursor:pointer; transition:all .8s;
}
.btn:hover { border-color:rgba(200,168,124,.6); color:var(--accent-gold); }
.btn.btn-ghost { background:transparent; border-style:dashed; display:block; margin-left:auto; margin-right:auto; transition:all .5s; }
.btn.btn-ghost:hover { opacity:1; border-style:solid; border-color:rgba(200,168,124,.4); color:var(--accent-gold); }

@media (max-width: 480px) {
  .entry-phase { padding: 24px 18px 30px; }
  .entry-phase .mirror-sub { margin-bottom: 22px; }
  .entry-date { margin-bottom: 22px !important; }
  .entry-phase .entry-headline { font-size: calc(1.28rem * var(--user-font-scale)); line-height: 1.8; }
  .entry-phase .entry-prose { margin-bottom: 28px; font-size: calc(0.9rem * var(--user-font-scale)); line-height: 2; }
  #entryMainBtn { width: min(100%, 320px); }
}

/* 表單 */
.form-prompt { font-size:calc(16px * var(--user-font-scale)); line-height:2; text-align:center; margin-bottom:50px; }
.form-prompt em { color:var(--accent-gold); font-style:normal; }
.form-fields { display:flex; flex-direction:column; gap:24px; margin-bottom:50px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-field { display:flex; flex-direction:column; gap:8px; text-align:left; }
.form-field label { font-size:calc(11px * var(--user-font-scale)); letter-spacing:.2em; color:var(--text-secondary); text-transform:uppercase; }
.form-field input {
  background:rgba(200,168,124,0.08); border:none; border-bottom:1px solid var(--border-warm);
  color:var(--text-primary); font-family:inherit; font-size:calc(16px * var(--user-font-scale)); padding:12px 14px;
  font-weight:300; outline:none; transition:border-color .4s;
}
.form-field input:focus { border-bottom-color:var(--accent-gold); }
.form-hint { font-size:calc(12px * var(--user-font-scale)); color:var(--text-hint); font-style:italic; margin-top:6px; }

/* 議題 */
.topic-btn {
  background:transparent; border:1px solid var(--border-warm);
  color:var(--text-primary); font-family:inherit; font-size:calc(15px * var(--user-font-scale)); font-weight:300;
  padding:18px 28px; letter-spacing:.05em; cursor:pointer; transition:all .6s;
  text-align:left; line-height:1.7; width:100%; margin-bottom:14px;
}
.topic-btn:hover { border-color:rgba(200,168,124,.5); color:var(--accent-gold); padding-left:36px; }

/* 對話 */
.dialog-wrap { max-width:600px; width:100%; position:relative; overflow-x:hidden; }
.chart-stamp {
  text-align:right; padding:0 4px 16px 0; font-size:calc(11px * var(--user-font-scale)); letter-spacing:.2em;
  color:rgba(212,165,116,0.3); font-family:'Klee One', Georgia, 'Noto Serif TC', serif;
}

/* 對話：只顯示當前一組，上一組淡出消失 */
#dialogHistory { display:none; }
#dialogFocus {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 24px 0 100px;
  min-height: 50vh;
}
#dialogFocus .msg {
  animation: focusFadeIn 0.8s ease-out forwards;
}
@keyframes focusFadeIn {
  0% { opacity:0; transform:translateY(12px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes fadeOutUp {
  0% { opacity:1; transform:translateY(0); }
  100% { opacity:0; transform:translateY(-20px); }
}
.msg.fading-out {
  animation: fadeOutUp 0.5s ease-in forwards;
}
/* 分隔線（不再使用） */
.dialog-divider { display:none !important; }

.msg { margin-bottom:32px; animation:fadeUp 1s ease-out forwards; }
.msg.user { text-align:right; margin-left:25%; }
.msg.user .bubble { display:inline-block; padding:14px 22px; background:rgba(200,168,124,0.1); border-right:1px solid rgba(200,168,124,.25); font-size:calc(15px * var(--user-font-scale)); line-height:1.9; text-align:left; overflow-wrap:break-word; word-break:break-word; max-width:100%; }
.msg.mirror { margin-right:20%; }
.msg.mirror .bubble { font-size:calc(17px * var(--user-font-scale)); line-height:2.1; white-space:pre-wrap; overflow-wrap:break-word; word-break:break-word; }
.emphasis {
  display:block; margin:20px 0; padding:24px 28px;
  border-left:1px solid var(--accent-gold);
  background:linear-gradient(90deg,rgba(212,165,116,.04),transparent);
  font-size:calc(18px * var(--user-font-scale)); line-height:2; font-style:italic; color:var(--accent-gold);
}
.thinking { display:flex; align-items:center; gap:14px; margin:16px 0 28px; padding:14px 0; }
.thinking-dots { display:flex; gap:5px; align-items:center; }
.thinking-dot { width:5px; height:5px; border-radius:50%; background:var(--accent-gold); animation:thinkPulse 1.6s ease-in-out infinite; }
.thinking-dot:nth-child(2) { animation-delay:.2s; }
.thinking-dot:nth-child(3) { animation-delay:.4s; }
.thinking-text { font-size:calc(12px * var(--user-font-scale)); color:var(--text-hint); letter-spacing:.15em; font-style:italic; transition:opacity .6s ease; }
.thinking-text.fade-out { opacity:0; }
.thinking-text.fade-in { opacity:1; }
/* 對話呼吸點 — 階段過渡 */
.dialog-breath {
  text-align:center; padding:28px 0 20px; opacity:0;
  animation: breathFadeIn 2s ease forwards;
}
.dialog-breath .breath-line { width:40px; height:1px; background:rgba(212,165,116,.25); margin:0 auto 14px; }
.dialog-breath .breath-text { font-size:calc(11px * var(--user-font-scale)); color:var(--text-hint); letter-spacing:.4em; font-style:italic; }
@keyframes breathFadeIn { 0%{opacity:0;transform:translateY(8px)} 40%{opacity:1;transform:translateY(0)} 100%{opacity:.6;transform:translateY(0)} }

.input-area {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  max-width:600px; width:100%; padding:20px 20px 28px;
  background:rgba(30,26,22,0.95);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(200,168,124,0.12);
  z-index:50;
}
/* 避免手機虛擬鍵盤彈出時 input 被擋 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .input-area { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}
.input-inner { display:flex; gap:10px; align-items:flex-end; }
.input-textarea {
  background:rgba(200,168,124,0.08); border:1px solid var(--border-warm);
  color:var(--text-primary); font-family:inherit; font-size:calc(14px * var(--user-font-scale)); padding:12px 16px;
  /* 高度上下限也跟著字級走：字放大了框卻不放大，能看到的行數會變少。 */
  flex:1; outline:none; resize:none; min-height:calc(44px * var(--user-font-scale)); max-height:calc(120px * var(--user-font-scale));
  font-weight:300; letter-spacing:.05em; line-height:1.7; transition:border-color .4s;
  border-radius:4px;
}
.input-textarea:focus { border-color:rgba(200,168,124,.5); }
.btn-send {
  background:transparent; border:1px solid rgba(212,165,116,.3); color:var(--accent-gold);
  font-family:inherit; font-size:calc(12px * var(--user-font-scale)); padding:10px 18px; letter-spacing:.15em;
  cursor:pointer; transition:all .4s; text-transform:uppercase; white-space:nowrap;
  flex-shrink:0; border-radius:4px;
}
.btn-send:hover { background:rgba(212,165,116,.05); border-color:var(--accent-gold); }
.btn-send:active { transform:scale(.94); transition:transform .1s; }
.btn-send:disabled { opacity:.3; cursor:not-allowed; }

/* 報告頁表單 */
.feedback-textarea { width:100%; background:rgba(200,168,124,.06); border:1px solid var(--border-warm); border-radius:6px; color:var(--text-primary); font-family:inherit; font-size:calc(13px * var(--user-font-scale)); padding:12px; resize:none; outline:none; transition:border-color .3s; }
.feedback-textarea:focus { border-color:rgba(212,165,116,.4); }
.feedback-textarea::placeholder { color:var(--text-hint); }
.feedback-ig-input { background:rgba(200,168,124,.06); border:1px solid var(--border-warm); border-radius:6px; color:var(--text-primary); font-family:inherit; font-size:calc(13px * var(--user-font-scale)); padding:10px 12px; outline:none; transition:border-color .3s; }
.feedback-ig-input:focus { border-color:rgba(212,165,116,.4); }
.feedback-ig-input::placeholder { color:var(--text-hint); }

/* 報告 */
.report-name { font-family:'Klee One', Georgia, 'Noto Serif TC', serif; font-size:calc(42px * var(--user-font-scale)); letter-spacing:.15em; font-weight:300; margin-bottom:8px; }
.report-name-en { font-family:'Klee One', Georgia, 'Noto Serif TC', serif; font-size:calc(14px * var(--user-font-scale)); letter-spacing:.3em; color:var(--text-hint); margin-bottom:40px; font-weight:300; text-transform:uppercase; }
.report-label { font-size:calc(11px * var(--user-font-scale)); letter-spacing:.2em; color:var(--text-hint); margin-bottom:16px; text-transform:uppercase; }
.report-divider { border-top:1px solid var(--border-warm); margin:36px 0; padding-top:36px; }
.report-section { margin-bottom:36px; text-align:left; padding:0 8px; }
.report-section p { font-size:calc(15px * var(--user-font-scale)); line-height:2.2; color:var(--text-primary); font-weight:300; }

/* Aura 光環 */
.aura-container { position:relative; width:260px; height:260px; margin:0 auto 24px; }
.aura-outer {
  position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle,
    transparent 32%,
    hsla(var(--aura-outer-h),50%,55%,0.12) 38%,
    hsla(var(--aura-outer-h),50%,55%,0.35) 50%,
    hsla(var(--aura-outer-h),50%,55%,0.2) 62%,
    hsla(var(--aura-outer-h),50%,55%,0.05) 72%,
    transparent 80%
  );
  filter:blur(8px);
  animation: auraBreath 5s ease-in-out infinite;
}
.aura-mid {
  position:absolute; inset:15%; border-radius:50%;
  background: radial-gradient(circle,
    transparent 15%,
    hsla(var(--aura-mid-h),55%,58%,0.15) 28%,
    hsla(var(--aura-mid-h),55%,58%,0.4) 45%,
    hsla(var(--aura-mid-h),55%,58%,0.15) 62%,
    transparent 75%
  );
  filter:blur(5px);
  animation: auraBreath 5s ease-in-out infinite 0.5s;
}
.aura-inner {
  position:absolute; inset:30%; border-radius:50%;
  background: radial-gradient(circle,
    hsla(var(--aura-inner-h),60%,68%,0.7) 0%,
    hsla(var(--aura-inner-h),60%,68%,0.4) 35%,
    hsla(var(--aura-inner-h),60%,68%,0.1) 65%,
    transparent 100%
  );
  filter:blur(4px);
  animation: auraBreath 5s ease-in-out infinite 1s;
}
.aura-core {
  position:absolute; inset:40%; border-radius:50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0.08) 50%,
    transparent 100%
  );
  animation: auraBreath 5s ease-in-out infinite 1.5s;
}
.aura-glow {
  position:absolute; inset:-15%; border-radius:50%;
  box-shadow: 0 0 60px 10px hsla(var(--aura-outer-h),45%,50%,0.15),
              0 0 120px 30px hsla(var(--aura-outer-h),45%,50%,0.06);
  animation: auraBreath 5s ease-in-out infinite;
}
@keyframes auraBreath {
  0%,100% { transform:scale(1); opacity:.8; }
  50% { transform:scale(1.05); opacity:1; }
}

/* 光環解讀卡 */
.aura-legend { max-width:320px; margin:0 auto 40px; text-align:left; }
.aura-legend-row {
  display:flex; align-items:flex-start; gap:12px; margin-bottom:16px;
  font-size:calc(13px * var(--user-font-scale)); line-height:1.8; color:var(--text-secondary);
}
.aura-legend-dot {
  width:10px; height:10px; border-radius:50%; margin-top:5px; flex-shrink:0;
  box-shadow: 0 0 6px currentColor;
}

/* 報告卡片（IG 截圖用）*/
.report-card {
  background: linear-gradient(180deg, #faf6ef 0%, var(--bg-cream) 100%);
  border:1px solid var(--border-warm);
  border-radius:12px; padding:48px 32px 40px;
  margin-bottom:36px; position:relative; overflow:hidden;
}
.report-card::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 50% at 50% 30%, hsla(var(--hue),35%,45%,0.06) 0%, transparent 70%);
  pointer-events:none;
}
.report-watermark {
  position:absolute; top:20px; right:24px;
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif; font-size:calc(11px * var(--user-font-scale));
  letter-spacing:.3em; color:rgba(201,192,177,0.15);
}

/* 紋章 */
.emblem-container {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:80px; height:80px; opacity:.12;
  pointer-events:none;
}
.emblem-container svg { width:100%; height:100%; }

/* 命盤切片 */
.chart-slice { text-align:left; padding:0 8px; }
.chart-slice-title {
  font-size:calc(13px * var(--user-font-scale)); letter-spacing:.12em; color:var(--accent-gold);
  margin-bottom:10px; font-weight:400;
}
.chart-slice-text { font-size:calc(14px * var(--user-font-scale)); line-height:2.1; color:var(--text-primary); font-weight:300; margin-bottom:20px; }

/* 鏡的觀察 */
.mirror-obs-list { text-align:left; padding:0 8px; }
.mirror-obs-item {
  font-size:calc(14px * var(--user-font-scale)); line-height:2; color:var(--text-secondary);
  padding:8px 0 8px 16px; border-left:1px solid rgba(160,130,90,0.18);
  margin-bottom:8px;
}

/* 版本號 */
.version-tag {
  position:fixed; bottom:8px; right:12px; z-index:200;
  font-size:calc(9px * var(--user-font-scale)); letter-spacing:.15em; color:rgba(138,132,120,0.25);
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif;
}

/* ======== 五卡組 Carousel ======== */
.cards-carousel {
  width:100%; max-width:420px; margin:0 auto; position:relative;
  overflow:hidden; touch-action:pan-y;
}
.cards-track {
  display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.card-slide {
  flex:0 0 100%; min-width:0; padding:0 8px; box-sizing:border-box;
}
.card-inner {
  background:linear-gradient(180deg,#faf6ef 0%,var(--bg-cream) 100%);
  border:1px solid var(--border-warm); border-radius:14px;
  padding:44px 28px 36px; position:relative; overflow:hidden;
  min-height:520px;
}
.card-inner::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 50% at 50% 30%,hsla(var(--hue),35%,45%,.06),transparent 70%);
  pointer-events:none;
}
.card-watermark {
  position:absolute; top:18px; right:22px;
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif; font-size:calc(10px * var(--user-font-scale));
  letter-spacing:.3em; color:rgba(160,130,90,0.18);
}
.card-label-bar {
  text-align:center; margin-bottom:12px;
  font-size:calc(12px * var(--user-font-scale)); letter-spacing:.25em; color:var(--text-hint);
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif;
}
.share-btn {
  background:none; border:1px solid rgba(160,130,90,0.2); color:var(--text-hint);
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .3s;
}
.share-btn:hover { border-color:rgba(212,165,116,.4); color:var(--accent-gold); }
.share-toast {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:rgba(245,240,230,.95); color:var(--accent-gold); border:1px solid rgba(200,168,124,.3);
  padding:10px 24px; border-radius:20px; font-size:calc(13px * var(--user-font-scale)); letter-spacing:.1em;
  z-index:999; animation: toastIn .3s ease, toastOut .3s ease 1.5s forwards;
}
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes toastOut { to{opacity:0;transform:translateX(-50%) translateY(-10px)} }
#cardsDots {
  display:flex; justify-content:center; gap:8px; margin-top:16px;
}
.cards-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(160,130,90,0.25); transition:all .3s; cursor:pointer;
}
.cards-dot.active { background:var(--accent-gold); transform:scale(1.2); }

/* C卡書法字 */
.calligraphy-star {
  font-family:'Noto Serif TC',serif; font-size:calc(64px * var(--user-font-scale)); font-weight:200;
  letter-spacing:.3em; text-indent:.3em; opacity:.85; margin:16px 0 8px;
}
/* C卡印章 */
.seal-stamp {
  display:inline-block; border:2px solid; padding:4px 10px;
  font-size:calc(11px * var(--user-font-scale)); letter-spacing:.15em; transform:rotate(-4deg);
  opacity:.7; margin:8px 0 20px;
}
/* E卡觀察區塊 */
.obs-section {
  text-align:left; padding:0 4px; margin-bottom:20px;
}
.obs-section .obs-num {
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif; font-size:calc(11px * var(--user-font-scale));
  letter-spacing:.2em; color:var(--text-hint); margin-bottom:6px;
}
.obs-section .obs-text {
  font-size:calc(14px * var(--user-font-scale)); line-height:2.2; color:var(--text-primary); font-weight:300;
}
/* E卡結尾 */
.e-card-footer {
  border-top:1px solid var(--border-warm); padding-top:20px; margin-top:24px;
  text-align:center;
}
.e-card-footer .footer-en {
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif; font-size:calc(12px * var(--user-font-scale));
  letter-spacing:.3em; color:rgba(201,192,177,.25); font-style:italic;
}
.e-card-footer .footer-zh {
  font-size:calc(12px * var(--user-font-scale)); color:var(--text-hint); margin-top:4px; letter-spacing:.1em;
}

/* SVG 卡片容器 */
.card-svg-wrap {
  padding:0; background:none; border:none; border-radius:12px; overflow:hidden;
  min-height:auto;
}
.card-svg-wrap::before { display:none; }
.card-svg {
  display:block; width:100%; height:auto; border-radius:12px;
}

/* ===== 卡片動畫 ===== */
/* 星星閃爍（D/V 卡宇宙背景星點） */
@keyframes twinkle {
  0%, 100% { opacity: var(--orig-opacity, 0.5); }
  50% { opacity: 0.1; }
}
@keyframes twinkle2 {
  0%, 100% { opacity: var(--orig-opacity, 0.4); }
  40% { opacity: 0.8; }
  80% { opacity: 0.05; }
}
.cosmic-stars-D circle:nth-child(3n),
.cosmic-stars-V circle:nth-child(3n) {
  animation: twinkle 3s ease-in-out infinite;
}
.cosmic-stars-D circle:nth-child(3n+1),
.cosmic-stars-V circle:nth-child(3n+1) {
  animation: twinkle2 4.5s ease-in-out 0.7s infinite;
}
.cosmic-stars-D circle:nth-child(5n),
.cosmic-stars-V circle:nth-child(5n) {
  animation: twinkle 6s ease-in-out 1.2s infinite;
}

/* 星座連線描繪（D 卡星座圖） */
@keyframes drawLine {
  from { stroke-dashoffset: 200; }
  to { stroke-dashoffset: 0; }
}
.card-svg g[class^="constellation-"] line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawLine 1.5s ease-out forwards;
}
.card-slide.in-view .card-svg g[class^="constellation-"] line:nth-child(2) { animation-delay: 0.15s; }
.card-slide.in-view .card-svg g[class^="constellation-"] line:nth-child(3) { animation-delay: 0.3s; }
.card-slide.in-view .card-svg g[class^="constellation-"] line:nth-child(4) { animation-delay: 0.45s; }
.card-slide.in-view .card-svg g[class^="constellation-"] line:nth-child(5) { animation-delay: 0.6s; }
.card-slide.in-view .card-svg g[class^="constellation-"] line:nth-child(n+6) { animation-delay: 0.75s; }

/* 書法大字呼吸浮動（C 卡） */
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-3px) scale(1.01); opacity: 0.92; }
}
.card-slide.in-view .card-svg text[font-size="220"] {
  animation: fadeSlideUp 0.8s ease-out both, breathe 6s ease-in-out 1s infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* 金色光暈脈動（C 卡） */
@keyframes glowPulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.25; }
}
.card-svg ellipse[filter] {
  animation: glowPulse 5s ease-in-out infinite;
}

/* 文字淡入 */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.card-slide.in-view .card-svg text {
  animation: fadeSlideUp 0.8s ease-out both;
}
.card-slide.in-view .card-svg text:nth-of-type(2) { animation-delay: 0.08s; }
.card-slide.in-view .card-svg text:nth-of-type(3) { animation-delay: 0.14s; }
.card-slide.in-view .card-svg text:nth-of-type(4) { animation-delay: 0.2s; }
.card-slide.in-view .card-svg text:nth-of-type(5) { animation-delay: 0.26s; }
.card-slide.in-view .card-svg text:nth-of-type(6) { animation-delay: 0.32s; }
.card-slide.in-view .card-svg text:nth-of-type(7) { animation-delay: 0.38s; }
.card-slide.in-view .card-svg text:nth-of-type(8) { animation-delay: 0.44s; }
.card-slide.in-view .card-svg text:nth-of-type(n+9) { animation-delay: 0.5s; }

/* 宇宙星河緩慢流動 */
@keyframes cosmicDrift {
  0% { transform: translateX(0) translateY(0); }
  33% { transform: translateX(3px) translateY(-2px); }
  66% { transform: translateX(-2px) translateY(3px); }
  100% { transform: translateX(0) translateY(0); }
}
.cosmic-river-D, .cosmic-river-V {
  animation: cosmicDrift 20s ease-in-out infinite;
}

/* 光暈星微亮（D/V 卡的 glare stars） */
@keyframes glarePulse {
  0%, 100% { opacity: 0.6; filter: blur(0px); }
  50% { opacity: 1; filter: blur(1px); }
}
.card-svg circle[r="4"], .card-svg circle[r="3.5"],
.card-svg circle[r="5"], .card-svg circle[r="4.5"] {
  animation: glarePulse 4s ease-in-out infinite;
}
.card-svg circle[r="4"]:nth-child(2n) { animation-delay: 1.5s; }
.card-svg circle[r="5"]:nth-child(2n) { animation-delay: 2s; }

/* ===== 五卡全螢幕翻頁模式 ===== */
.cards-fullscreen {
  position:fixed; inset:0; z-index:80;
  background:var(--bg-cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; transition:opacity 1s ease;
  pointer-events:none;
}
.cards-fullscreen.active { opacity:1; pointer-events:all; }

.cards-fullscreen .cards-carousel {
  max-width:100vw; width:100%;
}
.cards-fullscreen .card-inner {
  min-height:80vh; max-height:95vh; overflow-y:auto;
}
.cards-fullscreen .card-svg-wrap {
  min-height:auto; max-height:95vh; overflow:hidden;
}
.cards-fullscreen .card-svg-wrap .card-svg {
  max-height:95vh; width:auto; max-width:100%; margin:0 auto;
}
.cards-fullscreen .card-inner::-webkit-scrollbar { width:2px; }
.cards-fullscreen .card-inner::-webkit-scrollbar-thumb { background:rgba(160,130,90,0.2); border-radius:2px; }
#galaxyTrack::-webkit-scrollbar { display:none; }

/* 翻頁提示 */
.swipe-hint {
  margin-top:20px; font-size:calc(11px * var(--user-font-scale)); letter-spacing:.2em; color:var(--text-hint);
  opacity:0; animation:fadeIn 2s ease-out 1.5s forwards;
}

/* 看完五卡後的結尾區 */
.cards-end-section {
  text-align:center; padding:40px 20px 32px;
  opacity:0; animation:fadeIn 1.5s ease-out 0.5s forwards;
}
.btn-view-cards {
  background:transparent; border:1px solid rgba(212,165,116,.25);
  color:var(--accent-gold); font-family:inherit; font-size:calc(14px * var(--user-font-scale));
  padding:16px 36px; letter-spacing:.15em; cursor:pointer; transition:all .6s;
  margin:8px;
}
.btn-view-cards:hover { border-color:rgba(212,165,116,.6); background:rgba(212,165,116,.04); }

/* 鏡還能做的事 */
.more-section {
  max-width:420px; margin:48px auto 0; padding:32px 20px;
  border-top:1px solid rgba(160,130,90,0.12); text-align:center;
}
.more-section h3 {
  font-size:calc(16px * var(--user-font-scale)); letter-spacing:.2em; color:var(--text-primary);
  font-weight:300; margin-bottom:8px;
}
.more-section p {
  font-size:calc(13px * var(--user-font-scale)); color:var(--text-hint); line-height:2; margin-bottom:24px;
}
.more-topics {
  display:flex; flex-direction:column; gap:10px; margin-bottom:24px;
}
.more-topic-btn {
  background:transparent; border:1px solid rgba(160,130,90,0.18);
  color:var(--text-secondary); font-family:inherit; font-size:calc(14px * var(--user-font-scale));
  padding:14px 20px; text-align:left; cursor:pointer; transition:all .5s;
  letter-spacing:.05em; line-height:1.6;
}
.more-topic-btn:hover { border-color:rgba(212,165,116,.3); color:var(--accent-gold); padding-left:28px; }

/* 結尾輪播 */
.ending-carousel {
  position:relative; overflow:hidden; width:100%; max-width:600px; margin:0 auto;
}
.ending-track {
  display:flex; transition:transform 0.5s ease;
}
.ending-slide {
  min-width:100%; min-height:60vh;
  display:flex; align-items:center; justify-content:center;
}
.ending-slide .report-fade-in {
  opacity:0; transform:translateY(12px);
  animation:reportReveal 1.2s ease forwards;
}
.ending-slide .report-fade-in:nth-child(2) { animation-delay:.3s; }
.ending-slide .report-fade-in:nth-child(3) { animation-delay:.6s; }
.ending-slide .report-fade-in:nth-child(4) { animation-delay:.9s; }
.ending-slide .report-fade-in:nth-child(5) { animation-delay:1.2s; }
@keyframes reportReveal { to { opacity:1; transform:translateY(0); } }

/* Debug 面板 */
.debug-panel {
  position:fixed; top:0; right:0; z-index:999; width:340px; max-height:100vh;
  background:rgba(245,240,230,0.97); border-left:1px solid var(--border-warm);
  color:var(--text-secondary); font-size:calc(11px * var(--user-font-scale)); line-height:1.7; padding:16px;
  overflow-y:auto; display:none; backdrop-filter:blur(10px);
}
.debug-panel.open { display:block; }
.debug-panel h3 { font-size:calc(12px * var(--user-font-scale)); color:var(--accent-gold); letter-spacing:.15em; margin:12px 0 6px; font-weight:400; }
.debug-panel pre { background:rgba(160,130,90,.06); padding:8px; border-radius:4px; overflow-x:auto; white-space:pre-wrap; word-break:break-all; font-size:calc(10px * var(--user-font-scale)); margin:4px 0 12px; }
.debug-panel .close-btn { position:absolute; top:8px; right:12px; background:none; border:none; color:var(--text-secondary); cursor:pointer; font-size:calc(16px * var(--user-font-scale)); }

@media(max-width:600px) {
  .stage{padding:40px 16px} .mirror-mark{font-size:calc(42px * var(--user-font-scale))} .entry-prose{font-size:calc(15px * var(--user-font-scale))}
  .form-row{grid-template-columns:1fr} .msg.user{margin-left:10%} .msg.mirror{margin-right:6%}
  .mirror-surface{width:260px;height:260px} .mirror-char{font-size:calc(36px * var(--user-font-scale))}
  .mirror-reflection{width:180px}
  .report-card{padding:36px 20px 32px; border-radius:10px}
  .aura-container{width:200px;height:200px}
  .report-name{font-size:calc(34px * var(--user-font-scale));letter-spacing:.1em}
  .report-name-en{font-size:calc(12px * var(--user-font-scale));letter-spacing:.2em}
  .aura-legend{padding:0 4px}
  .chart-slice{padding:0 4px}
  .emphasis{padding:18px 16px;font-size:calc(15px * var(--user-font-scale));overflow-wrap:break-word;word-break:break-word}
  .report-section p{font-size:calc(14px * var(--user-font-scale))}
}
@media(max-width:375px) {
  .stage{padding:32px 12px}
  .entry-prose{font-size:calc(14px * var(--user-font-scale));letter-spacing:.04em}
  .mirror-surface{width:220px;height:220px} .mirror-char{font-size:calc(30px * var(--user-font-scale))}
  .mirror-reflection{width:150px}
  .cards-fullscreen .card-inner{min-height:70vh}
  .form-prompt{font-size:calc(18px * var(--user-font-scale))}
  .topic-btn{font-size:calc(14px * var(--user-font-scale));padding:12px 16px}
  .msg.user{margin-left:5%} .msg.mirror{margin-right:3%}
  .emphasis{padding:14px 12px;font-size:calc(14px * var(--user-font-scale))}
}

/* ======== Quiz 頁面 (Quick Mode) ======== */
.quiz-container { text-align:center; }
.quiz-q-num {
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif; font-size:calc(11px * var(--user-font-scale));
  letter-spacing:.3em; color:var(--text-hint); margin-bottom:28px;
  text-transform:uppercase;
}
.quiz-question {
  font-size:calc(18px * var(--user-font-scale)); line-height:2.2; color:var(--accent-gold);
  margin-bottom:40px; font-weight:300; letter-spacing:.08em;
}
.quiz-options { display:flex; flex-direction:column; gap:14px; }
.quiz-opt-btn {
  background:transparent; border:1px solid var(--border-warm);
  color:var(--text-primary); font-family:inherit; font-size:calc(15px * var(--user-font-scale)); font-weight:300;
  padding:18px 28px; letter-spacing:.05em; cursor:pointer; transition:all .6s;
  text-align:left; line-height:1.7; width:100%;
}
.quiz-opt-btn:hover { border-color:rgba(200,168,124,.5); color:var(--accent-gold); padding-left:36px; }
.quiz-opt-btn:active { background:rgba(200,168,124,.1); }
.quiz-fade-enter { animation: phaseEnter 0.8s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.quiz-fade-leave { animation: phaseLeave 0.5s ease-in forwards; }

/* ======== Quick Result 頁面 ======== */
.quick-result-name {
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif;
  font-size:calc(48px * var(--user-font-scale)); font-weight:300; letter-spacing:.2em; text-indent:.2em;
  color:var(--accent-gold); text-align:center; margin-bottom:8px; opacity:.9;
}
.quick-result-sub {
  font-size:calc(12px * var(--user-font-scale)); letter-spacing:.3em; color:var(--text-hint); text-align:center;
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif; margin-bottom:32px; text-transform:uppercase;
}
.quick-result-personality {
  font-size:calc(15px * var(--user-font-scale)); line-height:2.2; color:var(--text-primary); font-weight:300;
  text-align:center; margin-bottom:40px; padding:0 8px;
}
.quick-result-cards {
  display:flex; gap:16px; justify-content:center; margin-bottom:40px;
}
.quick-card-preview {
  flex:0 0 45%; max-width:200px; cursor:pointer; transition:transform .3s;
}
.quick-card-preview:hover { transform:scale(1.03); }
.quick-card-preview .card-svg-wrap {
  border-radius:10px; overflow:hidden; border:1px solid rgba(160,130,90,0.18);
}
.quick-card-preview .card-svg { width:100%; height:auto; display:block; }
.quick-card-label {
  font-size:calc(11px * var(--user-font-scale)); letter-spacing:.15em; color:var(--text-hint); text-align:center;
  margin-top:8px; font-family:'Klee One', Georgia, 'Noto Serif TC', serif;
}
.quick-save-btn {
  background:transparent; border:1px solid rgba(160,130,90,0.2);
  color:var(--text-secondary); font-family:inherit; font-size:calc(12px * var(--user-font-scale));
  padding:6px 16px; letter-spacing:.1em; cursor:pointer; transition:all .4s;
  margin-top:6px; display:inline-block;
}
.quick-save-btn:hover { border-color:rgba(212,165,116,.4); color:var(--accent-gold); }
.quick-result-cta {
  text-align:center; margin-top:36px; padding-top:28px;
  border-top:1px solid rgba(160,130,90,0.12);
}
.quick-result-cta p {
  font-size:calc(14px * var(--user-font-scale)); color:var(--text-hint); line-height:2; margin-bottom:16px;
  letter-spacing:.08em; font-style:italic;
}
.quick-result-cta .btn { font-size:calc(14px * var(--user-font-scale)); padding:14px 32px; }

/* 存圖按鈕（全螢幕卡片用）*/
.save-card-btn {
  background:none; border:1px solid rgba(160,130,90,0.2); color:var(--text-hint);
  font-family:inherit; font-size:calc(11px * var(--user-font-scale)); padding:6px 14px; letter-spacing:.15em;
  cursor:pointer; transition:all .3s; border-radius:4px;
}
.save-card-btn:hover { border-color:rgba(212,165,116,.4); color:var(--accent-gold); }

@media(max-width:600px) {
  .quick-result-name { font-size:calc(36px * var(--user-font-scale)); }
  .quick-result-cards { gap:10px; }
  .quick-card-preview { max-width:160px; }
}

/* === ARCHIVED: Planet system CSS (moved to _archive/planet-era/) === */
/* ===== 情緒星球 Planet Phase ===== */
#phPlanet { max-width:100vw; padding:0; opacity:1; }
#phPlanet.active { max-width:100vw; }
.planet-wrap {
  position:fixed; inset:0; z-index:900;
  background:radial-gradient(ellipse at center, var(--bg-cream) 0%, var(--bg-warm) 100%);
  overflow-y:auto; overflow-x:hidden;
  display:none; opacity:0; transition:opacity .6s;
}
.planet-wrap.open { display:block; opacity:1; }
.planet-back {
  position:absolute; top:20px; left:20px; z-index:901;
  background:none; border:1px solid rgba(160,130,90,0.25);
  color:var(--text-secondary); font-size:calc(12px * var(--user-font-scale)); padding:6px 16px;
  border-radius:20px; cursor:pointer; font-family:inherit;
  letter-spacing:.1em; transition:all .3s;
}
.planet-back:hover { border-color:var(--accent-gold); color:var(--accent-gold); }
.planet-title {
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif;
  font-size:calc(22px * var(--user-font-scale)); color:var(--accent-gold); letter-spacing:.2em;
  margin-bottom:4px; text-align:center;
}
.planet-sub {
  font-size:calc(12px * var(--user-font-scale)); color:var(--text-secondary); letter-spacing:.15em; text-align:center;
}
.planet-canvas-wrap {
  display:flex; justify-content:center; align-items:center;
  padding:8px 0 4px;
}
#planetMount {
  width:min(340px, 88vw); height:min(340px, 88vw);
  cursor:grab; touch-action:none;
  border-radius:50%; overflow:hidden;
}
#planetMount:active { cursor:grabbing; }
#planetMount canvas { display:block; width:100% !important; height:100% !important; }
.planet-count {
  font-size:calc(13px * var(--user-font-scale)); color:var(--text-hint); letter-spacing:.1em; text-align:center;
  margin-top:4px;
}
.planet-count span { color:var(--accent-gold); font-weight:400; }
.planet-legend {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 16px; padding:16px 24px 40px; max-width:380px; margin:0 auto;
}
.planet-legend-item {
  display:flex; align-items:center; gap:5px;
  font-size:calc(11px * var(--user-font-scale)); color:var(--text-hint); letter-spacing:.06em;
  cursor:pointer; transition:opacity .3s;
}
.planet-legend-item:hover { opacity:1 !important; }
.planet-legend-dot {
  width:8px; height:8px; border-radius:50%;
}

/* Island detail overlay */
.island-detail-overlay {
  position:fixed; inset:0; z-index:910;
  background:rgba(245,240,230,0.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:none; opacity:0; transition:opacity .4s;
  overflow-y:auto;
}
.island-detail-overlay.open { display:block; opacity:1; }
.island-detail-inner {
  max-width:440px; margin:0 auto; padding:60px 24px 40px;
}
.island-detail-header {
  text-align:center; margin-bottom:30px;
}
.island-detail-name {
  font-size:calc(24px * var(--user-font-scale)); letter-spacing:.15em; margin-bottom:4px;
}
.island-detail-desc {
  font-size:calc(12px * var(--user-font-scale)); color:var(--text-hint); line-height:1.6; margin-top:8px;
}
.island-detail-close {
  position:fixed; top:20px; right:20px; z-index:911;
  background:none; border:1px solid rgba(160,130,90,0.25);
  color:var(--text-secondary); font-size:calc(12px * var(--user-font-scale)); padding:6px 16px;
  border-radius:20px; cursor:pointer; font-family:inherit;
  letter-spacing:.1em; transition:all .3s;
}
.island-detail-close:hover { border-color:var(--accent-gold); color:var(--accent-gold); }
.emotion-list { list-style:none; }
.emotion-item {
  padding:14px 0; border-bottom:1px solid rgba(160,130,90,0.1);
  display:flex; align-items:flex-start; gap:12px;
}
.emotion-icon {
  width:32px; height:32px; flex-shrink:0;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display:flex; align-items:center; justify-content:center;
  font-size:calc(12px * var(--user-font-scale)); color:#fff;
}
.emotion-icon.locked { background:rgba(160,130,90,0.08); color:rgba(160,130,90,0.2); }
.emotion-info { flex:1; }
.emotion-full-name {
  font-size:calc(13px * var(--user-font-scale)); color:var(--text-primary); line-height:1.5; letter-spacing:.04em;
}
.emotion-date {
  font-size:calc(10px * var(--user-font-scale)); color:var(--text-hint); margin-top:3px; letter-spacing:.08em;
}
.emotion-locked-name {
  font-size:calc(13px * var(--user-font-scale)); color:var(--text-hint); opacity:.4; letter-spacing:.08em;
}
/* Island hex map */
.island-hex-map { display:flex; justify-content:center; margin:16px 0 24px; }
.island-hex-map svg { max-width:100%; height:auto; }
.island-hex-map svg .hex-emo { cursor:pointer; transition:filter .3s, transform .2s; }
.island-hex-map svg .hex-emo:hover { filter:brightness(1.3); }
.island-hex-map svg .hex-filler { opacity:.35; }
.island-hex-map svg .hex-label { pointer-events:none; font-family:'Noto Serif TC',serif; }
.island-emo-detail {
  text-align:center; margin-top:8px; min-height:48px;
  transition:opacity .3s;
}
.island-emo-detail .emo-detail-name {
  font-size:calc(16px * var(--user-font-scale)); color:var(--text-primary); letter-spacing:.08em;
}
.island-emo-detail .emo-detail-date {
  font-size:calc(10px * var(--user-font-scale)); color:var(--text-hint); margin-top:4px; letter-spacing:.08em;
}
.island-emo-detail .emo-detail-locked {
  font-size:calc(12px * var(--user-font-scale)); color:var(--text-hint); opacity:.4; letter-spacing:.08em;
}

/* Emotion discovery overlay */
.discover-overlay {
  position:fixed; inset:0; z-index:950;
  background:radial-gradient(ellipse at center, var(--bg-cream) 0%, var(--bg-warm) 100%);
  display:none; opacity:0; transition:opacity .8s;
  overflow:hidden;
}
.discover-overlay.open { display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:1; }
.discover-prompt {
  text-align:center; max-width:360px; padding:0 24px;
}
.discover-prompt-title {
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif;
  font-size:calc(18px * var(--user-font-scale)); color:var(--accent-gold); letter-spacing:.15em;
  margin-bottom:8px;
}
.discover-prompt-sub {
  font-size:calc(12px * var(--user-font-scale)); color:var(--text-hint); line-height:1.8; letter-spacing:.06em;
  margin-bottom:32px;
}
.discover-choices {
  display:flex; flex-direction:column; gap:12px; width:100%;
}
.discover-choice {
  background:rgba(200,168,124,0.06); border:1px solid rgba(160,130,90,0.15);
  border-radius:10px; padding:16px 18px; cursor:pointer;
  text-align:left; transition:all .4s; font-family:inherit;
  color:var(--text-primary); font-size:calc(13px * var(--user-font-scale)); line-height:1.6; letter-spacing:.04em;
}
.discover-choice:hover { border-color:var(--accent-gold); background:rgba(212,165,116,.04); }
.discover-choice.selected {
  border-color:var(--accent-gold); background:rgba(212,165,116,.08);
  box-shadow:0 0 20px rgba(212,165,116,.1);
}
/* Discovery celebration */
.discover-celebrate {
  position:fixed; inset:0; z-index:960;
  background:radial-gradient(ellipse at center, var(--bg-cream) 0%, var(--bg-warm) 100%);
  display:none; opacity:0; transition:opacity .8s;
  overflow:hidden;
}
.discover-celebrate.open { display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:1; }
.discover-star {
  width:80px; height:80px;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display:flex; align-items:center; justify-content:center;
  font-size:calc(24px * var(--user-font-scale)); color:#fff;
  animation:starBorn 1.5s ease-out forwards;
  margin-bottom:24px;
}
@keyframes starBorn {
  0% { transform:scale(0) rotate(-60deg); opacity:0; }
  50% { transform:scale(1.2) rotate(10deg); opacity:1; }
  100% { transform:scale(1) rotate(0deg); opacity:1; }
}
.discover-star-glow {
  position:absolute; width:200px; height:200px; border-radius:50%;
  opacity:0; animation:starGlow 2s ease-out .3s forwards;
  pointer-events:none;
}
@keyframes starGlow {
  0% { opacity:0; transform:scale(.5); }
  50% { opacity:.3; transform:scale(1); }
  100% { opacity:0; transform:scale(1.5); }
}
.discover-emo-name {
  font-size:calc(16px * var(--user-font-scale)); color:var(--text-primary); text-align:center;
  line-height:1.8; letter-spacing:.06em; margin-bottom:6px;
  max-width:300px;
}
.discover-island-name {
  font-size:calc(12px * var(--user-font-scale)); letter-spacing:.12em; margin-bottom:4px;
}
.discover-count {
  font-size:calc(11px * var(--user-font-scale)); color:var(--text-hint); letter-spacing:.1em; margin-top:16px;
}
.discover-count span { color:var(--accent-gold); }
.discover-continue {
  margin-top:28px; background:none; border:1px solid rgba(160,130,90,0.25);
  color:var(--text-secondary); font-family:inherit; font-size:calc(12px * var(--user-font-scale));
  padding:10px 28px; border-radius:20px; cursor:pointer;
  letter-spacing:.1em; transition:all .3s;
}
.discover-continue:hover { border-color:var(--accent-gold); color:var(--accent-gold); }

/* Decoration picker */
.deco-picker-overlay {
  position:fixed; inset:0; z-index:955;
  background:radial-gradient(ellipse at center, var(--bg-cream) 0%, var(--bg-warm) 100%);
  display:none; opacity:0; transition:opacity .6s;
  overflow:hidden;
}
.deco-picker-overlay.open {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:1;
}
.deco-picker-inner {
  text-align:center; max-width:340px; padding:0 20px;
}
.deco-picker-title {
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif;
  font-size:calc(17px * var(--user-font-scale)); color:var(--accent-gold); letter-spacing:.12em;
  margin-bottom:6px;
}
.deco-picker-sub {
  font-size:calc(11px * var(--user-font-scale)); color:var(--text-hint); line-height:1.8; letter-spacing:.06em;
  margin-bottom:8px;
}
.deco-picker-island {
  font-size:calc(11px * var(--user-font-scale)); letter-spacing:.12em; margin-bottom:24px;
}
.deco-picker-options {
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}
.deco-option {
  width:90px; cursor:pointer; transition:all .4s;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 8px; border-radius:12px;
  border:1px solid rgba(160,130,90,0.12);
  background:rgba(200,168,124,0.04);
}
.deco-option:hover {
  border-color:var(--accent-gold); background:rgba(212,165,116,.04);
  transform:translateY(-2px);
}
.deco-option.selected {
  border-color:var(--accent-gold); background:rgba(212,165,116,.08);
  box-shadow:0 0 24px rgba(212,165,116,.12);
  transform:translateY(-4px);
}
.deco-option canvas {
  width:64px; height:64px; border-radius:6px;
}
.deco-option-name {
  font-size:calc(12px * var(--user-font-scale)); color:var(--text-primary); letter-spacing:.08em;
}
.deco-picker-skip {
  margin-top:24px; font-size:calc(11px * var(--user-font-scale)); color:var(--text-hint);
  opacity:.4; cursor:pointer; letter-spacing:.08em;
  transition:opacity .3s;
}
.deco-picker-skip:hover { opacity:.7; }

/* ===== Backpack System ===== */
.bp-overlay {
  position:fixed; inset:0; z-index:960;
  background:rgba(245,240,230,0.98);
  display:none; flex-direction:column;
  opacity:0; transition:opacity .4s;
  overflow:hidden;
}
.bp-overlay.open { display:flex; }
.bp-inner {
  width:100%; max-width:400px; margin:0 auto;
  padding:20px; display:flex; flex-direction:column;
  height:100%; overflow:hidden;
}
.bp-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px; flex-shrink:0;
}
.bp-title {
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif;
  font-size:calc(18px * var(--user-font-scale)); color:var(--accent-gold);
  letter-spacing:.16em;
}
.bp-close {
  width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(160,130,90,0.15);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-hint); cursor:pointer; font-size:calc(14px * var(--user-font-scale));
  transition:border-color .3s;
}
.bp-close:hover { border-color:var(--accent-gold); color:var(--accent-gold); }
.bp-tabs {
  display:flex; gap:8px; margin-bottom:16px; flex-shrink:0;
}
.bp-tab {
  flex:1; text-align:center; padding:8px 0;
  font-size:calc(12px * var(--user-font-scale)); letter-spacing:.1em;
  color:var(--text-hint); cursor:pointer;
  border:1px solid rgba(160,130,90,0.12);
  border-radius:8px; transition:all .3s;
}
.bp-tab.active {
  border-color:var(--accent-gold);
  color:var(--accent-gold);
  background:rgba(212,165,116,.06);
}
.bp-tab-count {
  font-size:calc(10px * var(--user-font-scale)); opacity:.5; margin-left:4px;
}
.bp-grid {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:10px; overflow-y:auto; flex:1;
  padding-bottom:16px;
  -webkit-overflow-scrolling:touch;
}
.bp-item {
  display:flex; flex-direction:column; align-items:center;
  gap:4px; padding:10px 4px 8px;
  border:1px solid rgba(160,130,90,0.12);
  border-radius:10px; cursor:pointer;
  transition:all .3s; position:relative;
  background:rgba(200,168,124,0.03);
}
.bp-item:hover { border-color:rgba(160,130,90,0.25); background:rgba(200,168,124,0.06); }
.bp-item.selected {
  border-color:var(--accent-gold);
  background:rgba(212,165,116,.08);
  box-shadow:0 0 20px rgba(212,165,116,.1);
}
.bp-item.locked {
  opacity:.35; cursor:default;
}
.bp-item.placed {
  border-color:rgba(107,143,113,.4);
}
.bp-item-preview {
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
}
.bp-item-name {
  font-size:calc(11px * var(--user-font-scale)); color:var(--text-primary);
  letter-spacing:.06em; text-align:center;
  line-height:1.3;
}
.bp-item-rarity {
  font-size:calc(9px * var(--user-font-scale)); color:var(--text-hint); letter-spacing:2px;
}
.bp-item-rarity.uncommon { color:#7ca8c9; }
.bp-item-rarity.rare { color:#c9a86c; }
.bp-item-badge {
  position:absolute; top:4px; right:4px;
  font-size:calc(8px * var(--user-font-scale)); color:#6b8f71;
  letter-spacing:.04em; opacity:.7;
}
.bp-item-lock {
  font-size:calc(9px * var(--user-font-scale)); color:var(--text-hint);
  opacity:.6; text-align:center;
  line-height:1.3; letter-spacing:.04em;
}
.bp-hint {
  flex-shrink:0; text-align:center;
  font-size:calc(11px * var(--user-font-scale)); color:var(--text-hint);
  letter-spacing:.06em; padding:12px 0;
  opacity:.4; transition:all .3s;
}
.bp-hint.active {
  color:var(--accent-gold); opacity:.8;
}

/* Backpack button (in island detail view) */
.bp-open-btn {
  position:absolute; bottom:20px; right:20px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(212,165,116,.25);
  background:rgba(245,240,230,0.85);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:10;
  transition:all .3s;
  color:var(--accent-gold); font-size:calc(18px * var(--user-font-scale));
}
.bp-open-btn:hover {
  border-color:var(--accent-gold);
  background:rgba(212,165,116,.08);
  transform:scale(1.05);
}

/* 整理模式按鈕：啟用時高亮成紫色 */
.rearrange-btn.active {
  border-color:#b48ad8;
  background:rgba(150,100,190,.28);
  color:#e8d4ff;
  box-shadow:0 0 12px rgba(150,100,190,.5);
}

/* 放置提示輕微脈動，提醒使用者現在可以點空格 */
@keyframes bpHintPulse {
  0%, 100% { opacity:.78; transform:translateX(-50%) scale(1); }
  50%      { opacity:1;   transform:translateX(-50%) scale(1.04); }
}

/* Reward notification */
.bp-reward-notification {
  position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-80px);
  z-index:999; display:flex; align-items:center; gap:12px;
  padding:12px 20px; border-radius:12px;
  background:rgba(245,240,230,0.95); border:1px solid rgba(212,165,116,.3);
  backdrop-filter:blur(12px);
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .5s;
  opacity:0;
}
.bp-reward-notification.show {
  transform:translateX(-50%) translateY(0); opacity:1;
}
.bp-reward-icon {
  font-size:calc(20px * var(--user-font-scale)); color:var(--accent-gold);
}
.bp-reward-title {
  font-size:calc(10px * var(--user-font-scale)); color:var(--text-hint); letter-spacing:.1em;
}
.bp-reward-name {
  font-size:calc(14px * var(--user-font-scale)); color:var(--accent-gold); letter-spacing:.08em;
  font-family:'Klee One', Georgia, 'Noto Serif TC', serif;
}

/* Planet entry button */
.planet-entry-btn {
  position:absolute; top:16px; right:16px;
  background:none; border:1px solid rgba(160,130,90,0.15);
  color:var(--text-hint); width:36px; height:36px;
  border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:calc(16px * var(--user-font-scale)); transition:all .3s;
  opacity:.5;
}
.planet-entry-btn:hover { opacity:1; border-color:var(--accent-gold); color:var(--accent-gold); }

@media(max-width:400px) {
  #planetMount { width:min(300px, 92vw); height:min(300px, 92vw); }
  .planet-legend { gap:8px 12px; padding:12px 16px 30px; }
  .planet-legend-item { font-size:calc(10px * var(--user-font-scale)); }
}

/* === 關係鏡 (Relation Mirror) === */
@keyframes relationCardIn {
  from { opacity:0; transform:translateY(20px) scale(.97); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

.relation-emphasis {
  color: var(--accent-gold);
  font-weight: 500;
  display: inline;
}

.relation-card {
  animation: relationCardIn 1.2s ease both;
}

/* 關係鏡像卡片覆蓋層 */
#relationCardOverlay {
  -webkit-overflow-scrolling: touch;
}

#relationCardOverlay button:active {
  transform: scale(.96);
  opacity: .8;
}

/* Emotion tier unlock message */
.emotion-tier-msg {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(239,232,220,0.8);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.emotion-tier-msg.etm-show { opacity: 1; }
.etm-text {
  color: var(--text-primary);
  font-size: calc(1.2rem * var(--user-font-scale));
  letter-spacing: 0.15em;
  text-align: center;
  animation: etmPulse 2s ease-in-out;
}
@keyframes etmPulse {
  0%, 100% { opacity: 0.7; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1); }
}

/* ── Microlight 微光 ── */
.ml-breathing-dot {
  position: fixed;
  bottom: 100px;
  right: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(180, 140, 80, 0.7);
  box-shadow: 0 0 12px rgba(160, 120, 60, 0.4), 0 0 24px rgba(160, 120, 60, 0.15);
  z-index: 1000;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.8s ease, transform 0.8s ease;
  animation: mlBreathe 3s ease-in-out infinite;
}
.ml-dot-show { opacity: 1; transform: scale(1); }

@keyframes mlBreathe {
  0%, 100% { box-shadow: 0 0 8px rgba(160,120,60,0.3), 0 0 16px rgba(160,120,60,0.1); transform: scale(1); }
  50% { box-shadow: 0 0 16px rgba(160,120,60,0.5), 0 0 32px rgba(160,120,60,0.2); transform: scale(1.15); }
}

.ml-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(239, 232, 220, 0.95);
  display: flex; align-items: center; justify-content: center;
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ml-overlay-show { opacity: 1; }

.ml-task-card, .ml-collect-card {
  max-width: 320px;
  padding: 40px 28px;
  text-align: center;
  color: var(--text-primary);
}

.ml-label {
  font-size: calc(0.75rem * var(--user-font-scale));
  letter-spacing: 0.2em;
  color: rgba(255, 223, 170, 0.7);
  margin-bottom: 24px;
  text-transform: uppercase;
}

.ml-prompt {
  font-size: calc(1.2rem * var(--user-font-scale));
  line-height: 1.8;
  margin-bottom: 32px;
  letter-spacing: 0.05em;
}
.ml-prompt-small {
  font-size: calc(0.95rem * var(--user-font-scale));
  line-height: 1.7;
  margin-bottom: 20px;
  color: var(--text-secondary);
}

.ml-hint {
  font-size: calc(0.8rem * var(--user-font-scale));
  color: var(--text-hint);
  margin-bottom: 32px;
}

.ml-btn, .ml-submit-btn {
  background: transparent;
  border: 1px solid rgba(255, 223, 170, 0.4);
  color: rgba(255, 223, 170, 0.9);
  padding: 10px 32px;
  border-radius: 24px;
  font-size: calc(0.9rem * var(--user-font-scale));
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.1em;
}
.ml-btn:hover, .ml-submit-btn:hover {
  background: rgba(255, 223, 170, 0.1);
  border-color: rgba(255, 223, 170, 0.7);
}

.ml-collect-q {
  font-size: calc(1.1rem * var(--user-font-scale));
  margin-bottom: 24px;
  color: var(--text-primary);
}

.ml-choice-row {
  display: flex; gap: 16px; justify-content: center; margin-bottom: 20px;
}
.ml-choice-btn {
  background: transparent;
  border: 1px solid rgba(160,130,90,0.25);
  color: var(--text-primary);
  padding: 10px 24px;
  border-radius: 20px;
  font-size: calc(0.9rem * var(--user-font-scale));
  cursor: pointer;
  transition: all 0.3s;
}
.ml-choice-yes:hover { border-color: rgba(255,223,170,0.6); color: rgba(255,223,170,0.9); }
.ml-choice-no:hover { border-color: var(--text-hint); }

.ml-word-label {
  font-size: calc(0.85rem * var(--user-font-scale));
  color: var(--text-hint);
  margin-bottom: 16px;
}
.ml-word-grid {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 20px;
}
.ml-word-btn {
  background: rgba(200,168,124,0.08);
  border: 1px solid rgba(160,130,90,0.2);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 16px;
  font-size: calc(0.85rem * var(--user-font-scale));
  cursor: pointer;
  transition: all 0.3s;
}
.ml-word-btn:hover { border-color: rgba(255,223,170,0.4); }
.ml-word-active {
  background: rgba(255,223,170,0.15) !important;
  border-color: rgba(255,223,170,0.6) !important;
  color: rgba(255,223,170,0.95) !important;
}

.ml-note-section {
  display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 8px;
}
.ml-note-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(160,130,90,0.25);
  color: var(--text-primary);
  font-size: calc(0.9rem * var(--user-font-scale));
  padding: 8px 4px;
  width: 80%;
  text-align: center;
  outline: none;
}
.ml-note-input::placeholder { color: rgba(58,53,48,0.25); }

.ml-dismiss-msg {
  font-size: calc(1rem * var(--user-font-scale));
  color: var(--text-secondary);
  padding: 40px 0;
  letter-spacing: 0.1em;
}

.ml-complete {
  display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 0;
}
.ml-float-light {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 223, 170, 0.9);
  box-shadow: 0 0 16px rgba(255, 200, 120, 0.6);
  animation: mlFloat 2.5s ease-out forwards;
}
@keyframes mlFloat {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-120px) scale(0.3); opacity: 0; }
}
.ml-complete-text {
  font-size: calc(0.85rem * var(--user-font-scale));
  color: var(--text-hint);
  letter-spacing: 0.15em;
}

/* ── Storybook 故事書 ── */
@import url('https://fonts.googleapis.com/css2?family=Klee+One&display=swap');

.storybook-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: rgba(22,18,14,0.85);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.8s ease;
}
.storybook-overlay.sb-show { opacity: 1; }

.storybook-container {
  --sb-cream: #f5f0e6;
  width: min(94vw, 520px);
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 10px;
  background: var(--sb-cream);
  box-shadow:
    0 8px 48px rgba(100,70,30,0.25),
    0 2px 12px rgba(0,0,0,0.1),
    -3px 0 8px rgba(120,100,70,0.1),
    3px 0 6px rgba(255,248,235,0.2);
  border-left: 2px solid rgba(120,100,70,0.12);
  position: relative;
}

.sb-page {
  width: 100%;
  background: var(--sb-cream);
  position: relative;
  overflow: hidden;
}

.sb-page-image {
  width: 100%;
  aspect-ratio: 4/3;
  max-height: 45vh;
  object-fit: cover;
  display: block;
  opacity: 0;
  animation: sbImgReveal 0.8s ease 0.15s forwards;
}
@keyframes sbImgReveal {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: scale(1); }
}

/* IG 同款：圖片底部 fade into 奶油色文字區 */
.sb-page-image-wrap {
  position: relative;
}
.sb-page-image-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to bottom, transparent 0%, var(--sb-cream) 100%);
  pointer-events: none;
}

.sb-page-text {
  padding: 4px 24px 24px;
  background: var(--sb-cream);
  position: relative;
}

.sb-chapter-label {
  font-size: calc(0.65rem * var(--user-font-scale));
  letter-spacing: 0.25em;
  color: rgba(100,80,50,0.55);
  margin: 0 0 12px;
}

.sb-story-text {
  font-family: 'Klee One', Georgia, 'Noto Serif TC', serif;
  font-size: calc(0.95rem * var(--user-font-scale));
  line-height: 2.2;
  color: #2a2520;
  margin: 0;
}
.sb-story-text::first-letter {
  font-size: calc(1.8em * var(--user-font-scale));
  float: left;
  line-height: 1;
  margin: 4px 6px 0 0;
  color: rgba(160,130,90,0.7);
  font-family: 'Noto Serif TC', serif;
  font-weight: 400;
}

.sb-story-text.sb-dim {
  color: rgba(58,53,48,0.5);
  font-size: calc(0.85rem * var(--user-font-scale));
}

.sb-story-text.sb-highlight {
  font-size: calc(1.05rem * var(--user-font-scale));
  color: #3a3530;
}

.sb-attribution {
  font-size: calc(0.7rem * var(--user-font-scale));
  color: rgba(120,100,70,0.5);
  margin: 16px 0 0;
  letter-spacing: 0.15em;
}

.sb-page-nav {
  padding: 8px 24px 16px;
  background: var(--sb-cream);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sb-page-num {
  font-size: calc(0.6rem * var(--user-font-scale));
  color: rgba(120,100,70,0.45);
}

.sb-nav-hint {
  font-size: calc(0.6rem * var(--user-font-scale));
  color: rgba(120,100,70,0.45);
}

/* Progress dots */
.sb-dots {
  display: flex; gap: 4px; align-items: center;
}
.sb-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(160,130,90,0.2);
  transition: all 0.3s;
}
.sb-dot.sb-dot-active {
  background: rgba(160,130,90,0.6);
  width: 12px; border-radius: 2px;
}

/* Full-bleed image page with text overlay */
.sb-page-full {
  position: relative;
  width: 100%;
}
.sb-page-full .sb-page-image {
  aspect-ratio: 3/4;
}
.sb-page-full .sb-text-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px;
  background: linear-gradient(transparent, rgba(60,50,40,0.85));
}
.sb-page-full .sb-story-text {
  color: rgba(240,230,214,0.95);
  text-shadow: 0 1px 4px rgba(160,130,90,0.1);
}

/* No image fallback: text fills full page */
/* 缺圖時隱藏圖片容器（含底部漸層 ::after），讓純文字大留白版面接管 */
.sb-page.sb-no-img .sb-page-image-wrap {
  display: none;
}
.sb-page.sb-no-img .sb-page-text {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 28px;
}
.sb-page.sb-no-img .sb-text-overlay {
  position: static;
  background: none;
  padding: 40px 28px;
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sb-page.sb-no-img .sb-text-overlay .sb-story-text {
  color: #2a2520;
  text-shadow: none;
}

/* Page transition */
.sb-page-enter {
  animation: sbPageIn 0.6s ease forwards;
}
@keyframes sbPageIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Close button */
.sb-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(40,30,20,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(200,168,124,0.15);
  color: rgba(240,225,200,0.7);
  font-size: calc(16px * var(--user-font-scale));
  cursor: pointer;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, color 0.3s;
}
.sb-close:active {
  background: rgba(40,30,20,0.45);
  color: rgba(240,225,200,1);
}

/* Storybook shelf (entry point to browse past chapters) */
.sb-shelf-btn {
  background: transparent;
  border: 1px solid rgba(200,168,124,0.3);
  color: rgba(200,168,124,0.8);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: calc(0.8rem * var(--user-font-scale));
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: all 0.3s;
}
.sb-shelf-btn:hover {
  background: rgba(200,168,124,0.1);
  border-color: rgba(200,168,124,0.6);
}

/* ── Bookmark ── */
.sb-bookmark {
  position: absolute; top: 8px; right: 48px;
  background: transparent; border: none;
  font-size: calc(18px * var(--user-font-scale)); color: rgba(160,130,90,0.3);
  cursor: pointer; z-index: 5;
  transition: all 0.3s;
}
.sb-bookmark:hover { color: rgba(160,130,90,0.6); }
.sb-bookmarked { color: rgba(160,130,90,0.8) !important; }
.sb-bookmark.sb-bookmark-bounce {
  animation: bookmarkBounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes bookmarkBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.sb-page.sb-has-bookmark::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent rgba(200,168,124,0.3) transparent transparent;
  pointer-events: none;
}

/* ── Letter Envelope ── */
/* ── Envelope ── */
.letter-envelope {
  width: min(320px, 85vw); aspect-ratio: 16/10;
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 28px, rgba(180,160,120,0.03) 28px, rgba(180,160,120,0.03) 29px),
    linear-gradient(170deg, #f8f1e4 0%, #ede4d2 35%, #e4d9c4 70%, #ddd0b8 100%);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  box-shadow:
    0 12px 40px rgba(60,40,20,0.35),
    0 4px 12px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(160,130,90,0.1);
  transition: transform 0.8s ease;
  border: 1px solid rgba(180,160,120,0.2);
  overflow: hidden;
}
/* 信封蓋三角 */
.letter-flap {
  position: absolute; top: 0; left: 0; right: 0;
  height: 55%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #ece3d0 0%, #e2d6c0 50%, #d8ccb5 100%);
  border-bottom: 1px solid rgba(160,130,90,0.08);
  z-index: 2;
}
.letter-flap::after {
  content: '';
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.04) 100%);
}
/* 信封左右三角摺痕 */
.letter-envelope::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 60%;
  background:
    linear-gradient(to top right, transparent 49.5%, rgba(160,140,110,0.06) 50%, transparent 51%),
    linear-gradient(to top left, transparent 49.5%, rgba(160,140,110,0.06) 50%, transparent 51%);
  pointer-events: none;
  z-index: 1;
}
/* 紙紋 noise */
.letter-envelope::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 3;
}
.letter-opened {
  animation: envelopeOpen 0.8s ease forwards;
}
@keyframes envelopeOpen {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.03) translateY(-10px); }
  100% { transform: scale(0.9) translateY(-30px); opacity: 0; }
}
/* ── Wax Seal ── */
.wax-seal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #a83232, #8b2020 60%, #6b1515);
  border: 3px solid rgba(180,150,80,0.8);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4), inset 0 1px 4px rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: sealPulse 4s ease-in-out infinite;
}
.wax-seal::before { display: none; }
.wax-seal::after { display: none; }
@keyframes sealPulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.4), inset 0 1px 4px rgba(255,255,255,0.15); }
  50% { box-shadow: 0 4px 18px rgba(0,0,0,0.5), inset 0 1px 4px rgba(255,255,255,0.15); }
}
.wax-seal:hover {
  transform: translate(-50%, -50%) scale(1.05);
}
.wax-seal-inner {
  font-family: 'Noto Serif TC', serif;
  font-size: calc(1.1rem * var(--user-font-scale));
  color: rgba(255,230,180,0.9);
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  user-select: none;
  position: relative;
  z-index: 1;
}
/* Seal crack animation */
.wax-cracked {
  animation: sealCrack 0.5s ease forwards;
}
.wax-cracked .wax-seal-inner {
  opacity: 0;
  transition: opacity 0.3s;
}
@keyframes sealCrack {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1.12); }
  60% { transform: translate(-50%, -50%) scale(1.06); opacity: 0.8;
    box-shadow: 0 0 24px rgba(180,40,20,0.4);
  }
  100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0;
    box-shadow: none;
  }
}
.letter-body-hidden {
  position: absolute; bottom: 14px; left: 0; right: 0;
  text-align: center;
  z-index: 4;
}
.letter-hint {
  font-size: calc(10px * var(--user-font-scale)); color: rgba(140,115,75,0.45);
  letter-spacing: 0.2em; margin: 0;
  font-family: 'Noto Serif TC', serif;
}

/* ── Letter Content ── */
.letter-content {
  max-width: 340px;
  position: relative;
}
.letter-paper {
  background: #fdf8f0 url('/images/ui/letter-paper.webp') center/cover no-repeat;
  padding: 32px 28px;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(160,130,90,0.1);
}
.letter-title {
  font-size: calc(0.75rem * var(--user-font-scale)); letter-spacing: 0.2em;
  color: rgba(160,130,90,0.5); margin: 0 0 20px;
  text-align: center;
}
.letter-text {
  font-family: 'Klee One', Georgia, serif;
  font-size: calc(0.9rem * var(--user-font-scale)); line-height: 2.2;
  color: #3a3530;
}
.letter-text p { margin: 0; }
.letter-text br { display: block; content: ''; margin: 8px 0; }
@keyframes letterAppear {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.letter-appear { animation: letterAppear 0.6s ease; }

/* ── Postcard (3D flip) ── */
.postcard-container {
  width: 300px;
  position: relative;
  perspective: 800px;
}
.postcard-inner {
  position: relative;
  width: 100%;
  transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
  transform-style: preserve-3d;
}
.postcard-flipped .postcard-inner {
  transform: rotateY(180deg);
}
.postcard-front, .postcard-back {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.postcard-front {
  position: relative;
}
.postcard-img {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover; display: block;
}
.postcard-stamp {
  position: absolute; top: 8px; right: 8px;
  background: rgba(200,168,124,0.8);
  color: var(--bg-cream);
  padding: 3px 8px; border-radius: 2px;
  font-size: calc(9px * var(--user-font-scale)); letter-spacing: 0.15em;
  margin: 0;
}
.postcard-back {
  background: #faf8f4;
  padding: 24px 20px;
  position: absolute; top: 0; left: 0; right: 0;
  min-height: 100%;
  transform: rotateY(180deg);
  border-radius: 6px;
  box-shadow: 0 2px 16px rgba(120,90,50,0.1);
  overflow: hidden;
}
.postcard-back::before {
  content: '';
  position: absolute; inset: 0;
  background: url('/images/ui/postcard.webp') center/cover no-repeat;
  filter: saturate(0.6) brightness(1.05);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
.postcard-back > * { position: relative; z-index: 1; }
.postcard-date {
  font-size: calc(0.65rem * var(--user-font-scale)); color: rgba(120,100,70,0.35);
  margin: 0 0 12px; letter-spacing: 0.1em;
}
.postcard-text {
  font-family: 'Klee One', Georgia, serif;
  font-size: calc(0.85rem * var(--user-font-scale)); line-height: 2; color: rgba(58,53,48,0.6);
  margin: 0 0 10px;
}
.postcard-word {
  font-family: 'Klee One', Georgia, serif;
  font-size: calc(0.95rem * var(--user-font-scale)); line-height: 2; color: #3a3530;
}
.postcard-note {
  font-size: calc(0.8rem * var(--user-font-scale)); color: rgba(58,53,48,0.5);
  margin: 0 0 12px; font-style: italic;
}
.postcard-sign {
  font-size: calc(0.75rem * var(--user-font-scale)); color: rgba(160,130,90,0.5);
  margin: 0; letter-spacing: 0.1em;
}
.postcard-flip-hint {
  text-align: center; font-size: calc(0.7rem * var(--user-font-scale));
  color: rgba(200,168,124,0.5); margin: 12px 0 0;
  cursor: pointer; letter-spacing: 0.1em;
  transition: color 0.3s;
}
.postcard-flip-hint:active { color: rgba(200,168,124,0.9); }

/* ── 2026 視覺整理：紙本閱讀與收藏卡片系統 ── */
.storybook-container {
  --sb-cream: var(--surface-paper);
  --sb-ink: var(--story-ink);
  --sb-muted: var(--story-muted);
  width: min(94vw, 560px);
  border: 1px solid rgba(160, 130, 90, 0.22);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.48), transparent 30%),
    var(--sb-cream);
  box-shadow: var(--shadow-paper);
}
.storybook-container::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(160, 130, 90, 0.10);
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;
}
.sb-page {
  background: var(--sb-cream);
}
.sb-page-image-wrap {
  background: var(--surface-paper-deep);
}
.sb-page-image {
  max-height: min(48vh, 440px);
  object-position: center 42%;
}
.sb-page-image.sb-image-focus-top { object-position: center 18%; }
.sb-page-image.sb-image-focus-center { object-position: center center; }
.sb-page-image.sb-image-focus-bottom { object-position: center 78%; }
.sb-page-text {
  padding: 2px 28px 24px;
  margin-top: -6px;
  position: relative;
  z-index: 3;
}
.sb-chapter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sb-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
}
.sb-chapter-label::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--accent-gold);
  opacity: 0.75;
}
.sb-first-page-note {
  color: var(--accent-gold-dim);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  margin: 0 0 14px;
}
.sb-story-text {
  color: var(--sb-ink);
  font-size: clamp(0.98rem, 2.8vw, 1.06rem);
  line-height: var(--leading-ultra);
  letter-spacing: 0.025em;
}
.sb-story-text.sb-dim { color: var(--sb-muted); }
.sb-attribution {
  color: var(--sb-muted);
  font-size: var(--text-xs);
  margin-top: 18px;
}
.sb-sketch-page {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 44px 30px;
  text-align: center;
}
.sb-sketch-page .sb-story-text { max-width: 280px; }
.sb-sketch-date { margin-bottom: 16px; font-size: var(--text-sm); }
.sb-page-nav {
  display: grid;
  grid-template-columns: minmax(54px, 1fr) auto minmax(128px, 1fr);
  gap: 10px;
  padding: 12px 28px 20px;
  border-top: 1px solid rgba(160, 130, 90, 0.12);
}
.sb-page-num,
.sb-nav-hint {
  color: var(--sb-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}
.sb-nav-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sb-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.sb-share-btn,
.sb-nav-button {
  min-height: 34px;
  border: 1px solid rgba(160, 130, 90, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.32);
  color: var(--sb-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  padding: 6px 11px;
  transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.sb-nav-button.sb-next-btn {
  border-color: rgba(184, 152, 96, 0.45);
  color: var(--story-ink);
}
.sb-share-btn:hover,
.sb-nav-button:hover {
  background: rgba(200, 168, 124, 0.12);
  border-color: var(--accent-gold-dim);
  color: var(--story-ink);
}
.sb-nav-button:disabled { cursor: default; opacity: 0.35; }
.sb-nav-button:disabled:hover { background: rgba(255,255,255,0.32); border-color: rgba(160, 130, 90, 0.22); }
.sb-dots { justify-self: center; }
.sb-dot { width: 5px; height: 5px; }
.sb-dot.sb-dot-active { width: 16px; background: var(--accent-gold-dim); }
.sb-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(42, 37, 32, 0.52);
  color: rgba(255,250,240,0.96);
}
.sb-bookmark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(251,247,239,0.75);
  border: 1px solid rgba(160,130,90,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 書架：封面、章節與收藏採同一張紙本卡片語言。 */
.storybook-container.shelf-wood {
  background:
    linear-gradient(180deg, rgba(62,42,23,0.98), rgba(37,26,16,0.98)),
    var(--bg-warm);
  color: #f6eddc;
}
.sb-shelf-container {
  max-height: 85vh;
  overflow-y: auto;
  padding: 0;
}
.shelf-header { padding: 34px 28px 14px; text-align: center; }
.shelf-header-title {
  margin: 0;
  color: #f7eddb;
  font-family: var(--font-serif);
  font-size: calc(1.25rem * var(--user-font-scale));
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
}
.shelf-header-subtitle {
  margin: 7px 0 0;
  color: rgba(246,237,219,0.56);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}
.sb-shelf-tabs {
  display: flex;
  justify-content: center;
  /* 卡片併入書館後變成 5 個分頁，窄螢幕要能橫向捲，不要擠成兩行 */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 4px;
  padding: 0 16px 16px;
  border-bottom: 1px solid rgba(230,212,175,0.12);
}
.sb-shelf-tabs::-webkit-scrollbar { display: none; }
.sb-shelf-tabs .sb-tab-btn { flex: 0 0 auto; white-space: nowrap; }
/* 書館「卡片」分頁：卡片列表本身是行內樣式，這裡只負責外距 */
.shelf-cards-wrap { padding: 4px 2px 8px; }
.sb-tab-btn {
  min-height: 36px;
  padding: 6px 11px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: rgba(230,212,175,0.62);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}
.sb-tab-btn.sb-tab-active { color: #f8eedc; border-bottom-color: var(--accent-gold); }
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 22px;
}
.shelf-list { padding: 18px; }
.shelf-empty { padding: 42px 20px; text-align: center; }
.shelf-empty-mark { margin: 0 0 12px; color: rgba(226,203,162,0.60); font-size: calc(1.3rem * var(--user-font-scale)); }
.shelf-empty-copy { margin: 0; color: rgba(246,237,219,0.66); font-size: var(--text-sm); line-height: var(--leading-normal); }
.shelf-list-grid { display: grid; gap: 12px; }
.shelf-bookmark-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shelf-postcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shelf-archive-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(200,180,140,0.22);
  border-radius: 10px;
  background: var(--surface-paper);
  box-shadow: 0 7px 18px rgba(0,0,0,0.20);
  color: var(--story-ink);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast), border-color var(--duration-fast);
}
.shelf-archive-card:hover { transform: translateY(-3px); border-color: rgba(212,184,150,0.55); box-shadow: 0 12px 24px rgba(0,0,0,0.26); }
.shelf-archive-image,
.shelf-archive-fallback { display: block; width: 100%; object-fit: cover; background: linear-gradient(135deg, #e8e0d0, #cfc0a4); }
.shelf-bookmark-grid .shelf-archive-image,
.shelf-bookmark-grid .shelf-archive-fallback { aspect-ratio: 2 / 3; }
.shelf-postcard-grid .shelf-archive-image,
.shelf-postcard-grid .shelf-archive-fallback { aspect-ratio: 1; }
.shelf-archive-copy { padding: 9px 10px 11px; }
.shelf-archive-mark,
.shelf-archive-date { display: block; color: var(--accent-gold-dim); font-size: calc(0.58rem * var(--user-font-scale)); letter-spacing: var(--tracking-wide); }
.shelf-archive-mark { margin-bottom: 3px; }
.shelf-archive-title { display: -webkit-box; overflow: hidden; margin: 0; color: var(--story-ink); font-family: var(--font-serif); font-size: calc(0.75rem * var(--user-font-scale)); line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.shelf-postcard-grid .shelf-archive-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
.shelf-letter-card {
  width: 100%;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid rgba(200,180,140,0.24);
  border-radius: 8px;
  background: #fdf8f0 url('/images/ui/letter-paper.webp') center / cover no-repeat;
  box-shadow: 0 7px 17px rgba(0,0,0,0.20);
  color: var(--story-ink);
  cursor: pointer;
  font: inherit;
  padding: 16px 18px;
  text-align: left;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}
.shelf-letter-card:hover { transform: translateY(-2px); box-shadow: 0 11px 22px rgba(0,0,0,0.26); }
.shelf-letter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.shelf-letter-title { margin: 0; color: #3a3530; font-family: var(--font-serif); font-size: calc(0.88rem * var(--user-font-scale)); font-weight: 500; }
.shelf-letter-date { margin: 0; color: rgba(120,100,70,0.62); font-size: calc(0.62rem * var(--user-font-scale)); letter-spacing: var(--tracking-normal); }
.shelf-letter-preview { display: -webkit-box; overflow: hidden; margin: 0; color: rgba(60,50,35,0.68); font-family: var(--font-serif); font-size: calc(0.76rem * var(--user-font-scale)); line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.shelf-book {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(225,203,162,0.30);
  border-radius: 6px 10px 10px 6px;
  background: var(--surface-paper-deep);
  box-shadow: 4px 7px 14px rgba(0,0,0,0.28), inset 3px 0 rgba(83,53,25,0.20);
  cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-decel), box-shadow var(--duration-normal) var(--ease-standard);
}
.shelf-book:hover { transform: translateY(-5px) rotate(-0.6deg); box-shadow: 7px 13px 22px rgba(0,0,0,0.34), inset 3px 0 rgba(83,53,25,0.20); }
.shelf-book-cover { position: absolute; inset: 0; background-position: center 40%; background-size: cover; }
.shelf-book-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20,14,8,0.02) 22%, rgba(245,240,230,0.94) 72%, #f5f0e6 100%);
}
.shelf-book-copy { position: absolute; right: 10px; bottom: 11px; left: 12px; z-index: 1; text-align: left; }
.shelf-book-mark { margin: 0 0 4px; color: var(--accent-gold-dim); font-size: calc(0.6rem * var(--user-font-scale)); letter-spacing: var(--tracking-widest); }
.shelf-book-title { margin: 0; color: #2a2520; font-family: var(--font-serif); font-size: calc(0.83rem * var(--user-font-scale)); font-weight: 400; line-height: 1.5; letter-spacing: 0.06em; }
.shelf-book-brand { margin: 6px 0 0; color: rgba(64,47,29,0.55); font-family: var(--font-mono); font-size: calc(0.48rem * var(--user-font-scale)); letter-spacing: var(--tracking-ultra); }

/* 報告與鏡像卡：補足框架與層級，但維持留白。 */
.report-card,
.card-inner {
  border-color: rgba(160,130,90,0.20);
  box-shadow: 0 14px 34px rgba(93,68,37,0.08), inset 0 1px rgba(255,255,255,0.72);
}
.report-card::after,
.card-inner::after {
  content: '';
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,152,96,0.48), transparent);
  pointer-events: none;
}
.card-label-bar { color: var(--accent-gold-dim); font-size: var(--text-xs); }
.card-watermark,
.report-watermark { color: rgba(160,130,90,0.28); }
.quick-card-preview .card-svg-wrap {
  border-radius: 12px;
  border-color: rgba(160,130,90,0.25);
  box-shadow: 0 8px 20px rgba(93,68,37,0.10);
}
.quick-card-label { color: var(--story-muted); }

/* 明信片由「圖片方塊」改為可收藏的紙本物件。 */
.postcard-container { width: min(320px, 86vw); }
.postcard-front,
.postcard-back {
  border: 1px solid rgba(160,130,90,0.24);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(52,35,17,0.24);
}
.postcard-front::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 58%, rgba(34,25,17,0.38));
  pointer-events: none;
}
.postcard-img { aspect-ratio: 4 / 3; object-position: center 42%; }
.postcard-stamp {
  top: 12px;
  right: 12px;
  padding: 5px 9px;
  border: 1px solid rgba(255,245,225,0.44);
  border-radius: 2px;
  background: rgba(105,80,47,0.74);
  color: #fff8ed;
}
.postcard-back { padding: 28px 24px; background: var(--surface-paper); }
.postcard-date { color: var(--story-muted); }
.postcard-text { color: var(--story-muted); font-size: calc(0.9rem * var(--user-font-scale)); }
.postcard-word { color: var(--story-ink); font-size: calc(1rem * var(--user-font-scale)); }
.postcard-sign { color: var(--accent-gold-dim); }
.postcard-flip-hint { color: rgba(238,222,190,0.80); font-size: var(--text-sm); }

.storybook-overlay button:focus-visible,
.cards-carousel button:focus-visible,
.quick-card-preview:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
body.dark-theme .storybook-container:not(.shelf-wood),
body.dark-theme .sb-page { background: var(--surface-paper); }
body.dark-theme .sb-page-image-wrap { background: #181512; }
body.dark-theme .sb-share-btn,
body.dark-theme .sb-nav-button,
body.dark-theme .sb-bookmark { background: rgba(255,255,255,0.04); }

@media (max-width: 480px) {
  .storybook-container { width: min(96vw, 560px); border-radius: 12px; }
  .sb-page-text { padding-right: 22px; padding-left: 22px; }
  .sb-page-nav { grid-template-columns: 1fr auto; padding: 12px 22px 18px; }
  .sb-dots { display: none; }
  .sb-nav-actions { grid-column: 2; }
  .shelf-grid { gap: 12px; padding: 16px; }
  .shelf-list { padding: 16px; }
  .sb-shelf-tabs { gap: 0; overflow-x: auto; justify-content: flex-start; }
  .sb-tab-btn { flex: 0 0 auto; }
  .report-card,
  .card-inner { border-radius: 12px; }
}

/* ── Ambient Breathing Glow ── */
.room::after {
  content: '';
  position: fixed;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,168,124,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: ambientBreathe 8s ease-in-out infinite;
}
@keyframes ambientBreathe {
  0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.7; transform: translateX(-50%) scale(1.15); }
}

/* ── Global Touch Feedback ── */
.mirror-tap {
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease;
  cursor: pointer;
}
.mirror-tap:active {
  transform: scale(0.97);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .room::after { display: none; }
}

/* 手動「減少動態」開關（settings.js 加 body.reduce-motion）
   停用翻頁 page-curl / 圖片 reveal / 進出場位移動畫 */
body.reduce-motion .sb-page-enter,
body.reduce-motion .sb-page-enter-anim,
body.reduce-motion .sb-page-exit,
body.reduce-motion .sb-page-image {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}