/* ============================================================
   castyi · 設計系統 v2
   東方美學：宣紙纖維、墨線、朱砂、如意雲、線裝書拐
   可用性：WCAG AA 對比度、鍵盤焦點、減少動態偏好、44px 觸控目標
   ============================================================ */

/* ---------- 1. 設計權杖（Design Tokens） ---------- */
:root{
  /* 紙色：三層深淺，區分層次而不破壞整體宣紙感 */
  --paper:#F7F3EA;
  --paper2:#FCFAF5;
  --paper3:#F1EBDE;

  /* 墨色：四階，全部通過 WCAG AA（正常文字 ≥4.5:1） */
  --ink:#2B2B2B;       /* 13.0:1 濃墨，主文字 */
  --ink2:#5A554E;      /* 7.0:1  正文次要 */
  --ink3:#6E685F;      /* 4.9:1  輔助說明（舊 #9A948B 僅 2.7:1，不合規） */
  --ink4:#8C8579;      /* 3.3:1  僅作裝飾、超大字 */

  /* 朱砂：強調、按鈕、變爻 */
  --cinnabar:#A3342A;  /* 6.1:1 */
  --cinnabar-soft:#FDF4F1;
  --cinnabar-dim:#8B2A22;

  /* 輔色 */
  --gold:#6E6039;      /* 5.6:1 古金 */
  --jade:#3F6B5F;      /* 5.4:1 青瓷，用於「還願/成功」語義 */
  --mist:#C9C0AE;      /* 裝飾霧氣 */

  /* 邊框：line 僅作裝飾分隔；line2/line3 用於可交互元件，通過 3:1 UI 對比 */
  --line:#DCD3C4;
  --line2:#C2B8A4;     /* ~2.3:1 on paper — 裝飾細線 */
  --line3:#A99E88;     /* ~3.1:1 on paper — 輸入框/按鈕邊界 */

  /* 字體：西文襯線 + 中文宋體，fallback 充足 */
  --serif:"EB Garamond","Noto Serif SC","Noto Serif TC","Songti SC","Songti TC","Source Han Serif SC","Source Han Serif TC",STSong,SimSun,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans SC","Noto Sans TC",sans-serif;

  /* 類型尺度（基準 16px） */
  --text-xs:0.6875rem;  /* 11px */
  --text-sm:0.8125rem;  /* 13px */
  --text-base:1rem;     /* 16px */
  --text-md:1.0625rem;  /* 17px */
  --text-lg:1.125rem;   /* 18px */
  --text-xl:1.375rem;   /* 22px */
  --text-2xl:1.75rem;   /* 28px */
  --text-3xl:2.125rem;  /* 34px */
  --text-4xl:2.625rem;  /* 42px */

  /* 間距：4px 基數 */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:52px;
  --space-10:72px;

  /* 圓角 */
  --radius-sm:2px;
  --radius-md:4px;
  --radius-lg:8px;

  /* 陰影：「墨影」而非黑影，偏暖褐 */
  --shadow-sm:0 1px 2px rgba(43,43,43,0.05);
  --shadow-md:0 6px 18px rgba(43,43,43,0.08);
  --shadow-lg:0 14px 34px rgba(43,43,43,0.11);

  /* 過渡 */
  --transition-fast:150ms ease;
  --transition-base:250ms ease;
  --transition-slow:500ms ease;
}

/* ---------- 2. 基礎重置與全域 ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  background-color:var(--paper);
  background-image:url(../ink/paper.png);
  background-repeat:repeat;
  background-size:300px 300px;
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.85;
  letter-spacing:.02em;
  font-size:var(--text-md);
}

/* 跳轉連結：鍵盤用戶第一個焦點 */
.skip-link{
  position:absolute;
  left:50%;
  top:-60px;
  transform:translateX(-50%);
  background:var(--ink);
  color:var(--paper);
  padding:var(--space-3) var(--space-5);
  font-family:var(--sans);
  font-size:var(--text-sm);
  letter-spacing:.08em;
  border-radius:var(--radius-md);
  z-index:200;
  transition:top var(--transition-fast);
}
.skip-link:focus{top:var(--space-4); outline:none}

/* 焦點環：一致且東方感（朱砂） */
:focus-visible{outline:2px solid var(--cinnabar); outline-offset:3px; border-radius:var(--radius-sm)}
button:focus-visible, .chip:focus-visible, .scene-chip:focus-visible, .hcell:focus-visible, .opt:focus-visible, .sharebtn:focus-visible, .authbtn:focus-visible, .amtbtn:focus-visible{outline-offset:4px}

/* 觸控目標最小 44px；觸控裝置加大間距 */
@media (pointer:coarse){
  .chip, .sharebtn, .authbtn, .amtbtn, .ghostbtn, .btn-primary, .btn-ghost, .opt, .langbtn, nav a{min-height:44px; display:inline-flex; align-items:center; justify-content:center}
  .chip{padding-top:10px; padding-bottom:10px}
}

/* 減少動態偏好：關閉擲幣翻轉與所有過渡 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important
  }
  .coin.spin{animation:none}
}

/* 連結：只在真正文本連結上顯示底線 */
a{color:inherit; text-decoration:none}
.logo, nav a, .cta, .cta.ghost, .chip, .scene-chip, .hcell, .opt, .sharebtn, .authbtn, .amtbtn, .ghostbtn, .btn-primary, .btn-ghost, .langbtn, .gate a, .daily-actions a, .close{border-bottom:none !important}
p a, .about-text a, .legal a, .blk a, .wish a, .verse a, .q-echo a{
  border-bottom:1px solid var(--line3);
  transition:border-color var(--transition-fast), color var(--transition-fast)
}
p a:hover, .about-text a:hover, .legal a:hover, .blk a:hover, .wish a:hover, .verse a:hover, .q-echo a:hover{
  border-color:var(--cinnabar); color:var(--cinnabar)
}
img{max-width:100%; display:block}

/* 視覺隱藏（輔助用） */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0
}

.wrap{max-width:840px;margin:0 auto;padding:0 var(--space-6)}
.narrow{max-width:640px;margin:0 auto;padding:0 var(--space-6)}

/* ---------- 3. 東方裝飾元件 ---------- */
/* 墨線分隔 */
.rule{width:100%; max-width:420px; height:14px; margin:var(--space-5) auto; background:url(../ink/rule.png) no-repeat center/contain; opacity:0.55; border:none}
.rule.s{max-width:180px; height:10px; opacity:0.6; margin:var(--space-4) auto}

/* 標題雲紋裝飾 */
.title-ornament{display:flex; align-items:center; justify-content:center; gap:var(--space-5); margin-bottom:var(--space-7); flex-wrap:wrap}
.title-ornament h2{margin:0; text-align:center}
.title-ornament .cloud{display:inline-block; width:90px; height:22px; background:url(../ink/cloud.png) no-repeat center/contain; opacity:0.5; flex-shrink:0}
.title-ornament .cloud.flip{transform:scaleX(-1)}

/* 線裝書拐（卡片角飾） */
.cornered{position:relative}
.cornered::before, .cornered::after{
  content:''; position:absolute; width:26px; height:26px;
  background:url(../ink/corner.png) no-repeat center/contain;
  opacity:0.30; pointer-events:none
}
.cornered::before{top:10px; left:10px}
.cornered::after{bottom:10px; right:10px; transform:rotate(180deg)}

/* 朱砂印章 */
.seal{display:inline-block; background:url(../ink/seal.png) no-repeat center/contain; vertical-align:middle}
.seal-lg{width:52px; height:52px}
.seal-sm{width:32px; height:32px}

/* 墨跡標題下劃線（裝飾） */
.ink-title{position:relative; display:inline-block; padding-bottom:var(--space-3)}
.ink-title::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:70%; height:10px; background:url(../ink/brush.png) no-repeat center/contain; opacity:0.32
}

/* ---------- 4. Header ---------- */
header{display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-5) 0; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:var(--space-3)}
.logo{font-size:var(--text-xl); letter-spacing:.2em; display:inline-flex; align-items:center; gap:var(--space-2)}
.logo b{color:var(--cinnabar); font-weight:400}
nav{display:flex; gap:var(--space-4); align-items:center; flex-wrap:wrap}
nav a{font-size:var(--text-sm); color:var(--ink2); letter-spacing:.06em; padding:var(--space-2) var(--space-1); border-radius:var(--radius-sm); min-height:40px; display:inline-flex; align-items:center}
nav a:hover, nav a[aria-current="page"]{color:var(--cinnabar)}
.langbtn{border:1px solid var(--line3); background:transparent; padding:var(--space-2) var(--space-4); min-height:40px;
  font-family:inherit; font-size:var(--text-sm); color:var(--ink2); cursor:pointer; border-radius:var(--radius-sm); transition:border-color var(--transition-fast), color var(--transition-fast)}
.langbtn:hover{border-color:var(--gold); color:var(--ink)}

/* ---------- 5. Hero ---------- */
.hero{padding:var(--space-10) 0 var(--space-9); text-align:center; position:relative; overflow:hidden;
  background-image:url(../ink/far.svg);
  background-position:center bottom -40px;
  background-size:1200px auto;
  background-repeat:no-repeat}
/* 伏羲御龍主視覺（移植自 v0.3）：低透明度 + 漸變遮罩，保證文字可讀 */
.hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(../ink/fuxi.jpg) center center / cover no-repeat;
  opacity:.45;}

.hero::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(247,243,234,.18) 0%, rgba(247,243,234,.48) 55%, rgba(247,243,234,.82) 100%);
}
.hero > *{position:relative; z-index:1}
.hero h1{font-size:var(--text-3xl); font-weight:500; line-height:1.5; margin-bottom:var(--space-6); letter-spacing:.04em; color:var(--ink)}
.hero p{color:var(--ink2); font-size:var(--text-base); max-width:620px; margin:0 auto var(--space-4); text-align:left; line-height:1.9}
.hero .lead{font-size:var(--text-lg); color:var(--ink); text-align:center; max-width:560px; line-height:1.8}
.hero .cta{margin-top:var(--space-7)}

/* CTA */
.cta{display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; min-height:48px; background:var(--ink); color:var(--paper);
  padding:var(--space-3) var(--space-7); letter-spacing:.16em; font-size:var(--text-sm); cursor:pointer; border:none;
  font-family:inherit; border-radius:var(--radius-sm); transition:background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base)}
.cta:hover{background:var(--cinnabar); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-md)}
.cta:active{transform:translateY(0)}
.cta.ghost{background:transparent; color:var(--ink); border:1px solid var(--ink3)}
.cta.ghost:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}

.seal-tag{display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; gap:var(--space-2); color:var(--cinnabar); border:1.5px solid var(--cinnabar);
  border-radius:var(--radius-sm); padding:var(--space-1) var(--space-3); font-size:var(--text-sm); letter-spacing:.1em; margin-top:var(--space-7); min-height:48px}

/* ---------- 6. Section ---------- */
section{padding:var(--space-9) 0; border-top:1px solid var(--line)}
h2{font-size:var(--text-sm); letter-spacing:.32em; color:var(--ink3); font-weight:500;
  text-align:center; margin-bottom:var(--space-7); text-transform:uppercase}
h3{font-size:var(--text-xl); font-weight:500; margin-bottom:var(--space-4); line-height:1.5}
.muted{color:var(--ink3); font-size:var(--text-base)}

/* ---------- 7. 名人堂 ---------- */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-5)}
.q{border:1px solid var(--line); padding:var(--space-5); background:var(--paper2); border-radius:var(--radius-sm); transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}
.q:hover{border-color:var(--line3); box-shadow:var(--shadow-sm)}
.q .txt{font-size:var(--text-base); color:var(--ink); margin-bottom:var(--space-3); line-height:1.8}
.q .who{font-size:var(--text-sm); color:var(--ink2); letter-spacing:.05em}
.q .who b{font-weight:500; color:var(--ink)}
.q .src{font-size:var(--text-xs); color:var(--ink3); margin-top:var(--space-1); display:block}

/* ---------- 8. 定價 ---------- */
.prices{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--space-5)}
.p{border:1px solid var(--line); padding:var(--space-6) var(--space-4); text-align:center; border-radius:var(--radius-sm); background:var(--paper2); transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}
.p:hover{border-color:var(--line3); box-shadow:var(--shadow-sm)}
.p.hi{border-color:var(--cinnabar); background:var(--cinnabar-soft); position:relative}
.p.hi::before{
  content:'★'; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--cinnabar); color:#fff; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:12px
}
.p .amt{font-size:var(--text-2xl); color:var(--cinnabar); margin-bottom:var(--space-1)}
.p .lb{font-size:var(--text-base); color:var(--ink); margin-bottom:var(--space-1)}
.p .note{font-size:var(--text-xs); color:var(--ink3)}

/* ---------- 9. 占卦流程 ---------- */
.screen{display:none; padding:var(--space-9) 0}
.screen.on{display:block}
.chat{max-width:620px; margin:0 auto}
.msg{background:var(--paper2); border:1px solid var(--line); padding:var(--space-4) var(--space-5);
  margin-bottom:var(--space-4); font-size:var(--text-base); border-radius:var(--radius-sm); line-height:1.85}
.msg.me{text-align:right; background:var(--paper3)}
.chips{display:flex; flex-wrap:wrap; gap:var(--space-3); margin:var(--space-5) 0; justify-content:center}
.chip{border:1px solid var(--line3); padding:var(--space-3) var(--space-5); font-size:var(--text-sm); cursor:pointer;
  background:transparent; font-family:inherit; color:var(--ink2); border-radius:var(--radius-sm); min-height:44px; display:inline-flex; align-items:center; justify-content:center; transition:border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast)}
.chip:hover{border-color:var(--cinnabar); color:var(--cinnabar)}
.chip.sel{border-color:var(--cinnabar); color:var(--cinnabar); background:var(--cinnabar-soft)}
.chat input, .chat textarea{width:100%; padding:var(--space-4); border:1px solid var(--line3);
  background:var(--paper2); font-family:inherit; font-size:var(--text-base); color:var(--ink); border-radius:var(--radius-sm); transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}
.chat input:focus, .chat textarea:focus{outline:none; border-color:var(--cinnabar); box-shadow:0 0 0 3px rgba(163,52,42,0.12)}
.chat textarea{min-height:92px; resize:vertical; line-height:1.75}

/* 擲卦 */
.cast{text-align:center; padding:var(--space-8) 0}
.coins{display:flex; justify-content:center; gap:var(--space-6); margin:var(--space-8) 0}
.coin{width:64px; height:64px; border-radius:50%; border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:var(--text-xs); color:var(--gold);
  background:var(--paper2); box-shadow:inset 0 0 0 1px #EDE6D8, var(--shadow-sm)}
.spin{animation:flip .9s ease-in-out}
@keyframes flip{0%{transform:rotateY(0)}100%{transform:rotateY(1080deg)}}
.hex{display:flex; flex-direction:column-reverse; gap:var(--space-3); align-items:center; margin:var(--space-7) 0}
.yao{width:164px; height:12px; background:var(--ink); border-radius:var(--radius-sm); opacity:0; transition:opacity .5s}
.yao.yin{background:none; display:flex; justify-content:space-between}
.yao.yin i{width:70px; height:12px; background:var(--ink); display:block; border-radius:var(--radius-sm)}
.yao.show{opacity:1}
.yao.chg{box-shadow:0 0 0 2px var(--cinnabar)}
.yao.yin.chg i{background:var(--cinnabar)}
.yao.yang.chg{background:var(--cinnabar)}
.status{color:var(--ink3); font-size:var(--text-sm); letter-spacing:.1em; min-height:26px}

/* 結果 */
.res{max-width:680px; margin:0 auto;
  background-color:transparent;
  background-image:url(../ink/frame.svg);
  background-position:center center;
  background-size:contain;
  background-repeat:no-repeat;
  padding:var(--space-7) 0 var(--space-8)}
.htitle{text-align:center; font-size:var(--text-2xl); margin-bottom:var(--space-2); display:flex; align-items:center; justify-content:center; gap:var(--space-3); flex-wrap:wrap}
.hno{text-align:center; color:var(--ink3); font-size:var(--text-xs); letter-spacing:.22em; margin-bottom:var(--space-3)}
.hsym{text-align:center; font-size:44px; letter-spacing:.12em; margin:var(--space-4) 0 var(--space-2); color:var(--ink)}
.hsym .arrow{color:var(--cinnabar); font-size:24px; margin:0 var(--space-3); vertical-align:middle}
.blocks{display:grid; gap:var(--space-5); margin-top:var(--space-7)}
.blk{border-left:3px solid var(--cinnabar); padding:var(--space-1) 0 var(--space-1) var(--space-4)}
.blk h4{font-size:var(--text-xs); letter-spacing:.24em; color:var(--ink3); font-weight:500; margin-bottom:var(--space-2); text-transform:uppercase}
.blk p{font-size:var(--text-base); line-height:1.85}
.verse{background:var(--paper2); border:1px solid var(--line); padding:var(--space-4) var(--space-5); margin-top:var(--space-6);
  font-size:var(--text-sm); color:var(--ink2); border-radius:var(--radius-sm)}
.verse .t{font-size:var(--text-xs); letter-spacing:.2em; color:var(--ink3); display:block; margin-bottom:var(--space-2)}
.acts{display:flex; gap:var(--space-4); justify-content:center; margin-top:var(--space-8); flex-wrap:wrap}
.ghostbtn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--ink3); background:transparent; padding:var(--space-3) var(--space-6); font-family:inherit;
  font-size:var(--text-sm); cursor:pointer; border-radius:var(--radius-sm); color:var(--ink); transition:border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast)}
.ghostbtn:hover{background:var(--ink); color:var(--paper)}

/* ---------- 10. 每日一卦 ---------- */
.daily-wrap{text-align:center; padding:var(--space-2) 0 var(--space-1); border-top:1px solid var(--line)}
.streak{display:inline-flex; align-items:center; gap:var(--space-1); color:var(--cinnabar); border:1px solid var(--cinnabar);
  border-radius:999px; padding:var(--space-1) var(--space-4); font-size:var(--text-xs); letter-spacing:.1em; margin:var(--space-7) 0 var(--space-3)}
.streak:empty{display:none}
.streak .flame{margin-right:var(--space-1)}
.daily{max-width:540px; margin:0 auto; border:1px solid var(--line); background-color:var(--paper2);
  background-image:url(../ink/frame.svg);
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  padding:var(--space-6) var(--space-5) var(--space-5); border-radius:var(--radius-sm)}
.daily-kicker{font-size:var(--text-xs); letter-spacing:.28em; color:var(--ink3); text-transform:uppercase}
.daily-date{font-size:var(--text-sm); color:var(--gold); letter-spacing:.14em; margin-top:var(--space-1)}
.daily-visual{display:flex; align-items:center; justify-content:center; gap:var(--space-7); margin:var(--space-5) 0 var(--space-4); flex-wrap:wrap}
.daily-svg{width:170px; height:auto}
.daily-poem{writing-mode:vertical-rl; text-orientation:upright; font-size:var(--text-2xl); line-height:1.9; letter-spacing:.16em; color:var(--ink); height:170px}
.daily-poem.en{writing-mode:horizontal-tb; font-size:var(--text-lg); line-height:1.7; max-width:220px; height:auto; font-style:italic; color:var(--ink2)}
.daily-name{font-size:var(--text-2xl); font-weight:500; margin-bottom:var(--space-1)}
.daily-no{font-size:var(--text-xs); color:var(--ink3); letter-spacing:.12em}
.daily-punch{font-size:var(--text-xl); line-height:1.7; margin:var(--space-4) 0 var(--space-6); color:var(--ink); letter-spacing:.03em; max-width:520px; margin-left:auto; margin-right:auto}
.daily-actions{display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap}
.daily-free{font-size:var(--text-sm); color:var(--ink3); margin-top:var(--space-4); max-width:460px; margin-left:auto; margin-right:auto}

.btn-primary{display:inline-flex; align-items:center; justify-content:center; min-height:44px; background:var(--ink); color:var(--paper); padding:var(--space-3) var(--space-7);
  letter-spacing:.12em; font-size:var(--text-sm); border:none; font-family:inherit; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base)}
.btn-primary:hover{background:var(--cinnabar); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn-ghost{display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--ink3); background:transparent; padding:var(--space-3) var(--space-6);
  font-family:inherit; font-size:var(--text-sm); cursor:pointer; border-radius:var(--radius-sm); color:var(--ink); transition:background var(--transition-fast), color var(--transition-fast)}
.btn-ghost:hover{background:var(--ink); color:var(--paper)}

/* ---------- 11. 場景入口 ---------- */
.scenes{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--space-3); max-width:740px; margin:0 auto}
.scene-chip{display:flex; align-items:center; border:1px solid var(--line3); background:var(--paper2); padding:var(--space-4) var(--space-5);
  font-size:var(--text-base); border-radius:var(--radius-sm); color:var(--ink); text-align:left; line-height:1.6; min-height:56px; transition:border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast)}
.scene-chip:hover{border-color:var(--cinnabar); color:var(--cinnabar); background:var(--cinnabar-soft)}
.scene-chip::before{content:'“'; color:var(--cinnabar); font-size:var(--text-xl); margin-right:var(--space-2); line-height:1}
.scene-chip:focus-visible{outline-offset:3px}

/* ---------- 12. 集卦進度 ---------- */
.prog-box{border-top:1px solid var(--line); padding:var(--space-9) 0; max-width:560px; margin:0 auto}
.prog-head{display:flex; justify-content:space-between; font-size:var(--text-sm); letter-spacing:.16em;
  color:var(--ink2); margin-bottom:var(--space-3); text-transform:uppercase}
.prog-num{color:var(--cinnabar); letter-spacing:.1em}
.prog-track{height:4px; background:var(--line); border-radius:var(--radius-sm); overflow:hidden}
.prog-fill{height:100%; background:var(--cinnabar); transition:width .6s ease}
.prog-note{font-size:var(--text-sm); color:var(--ink3); margin-top:var(--space-3); text-align:center}

/* ---------- 13. 結果頁：一句話 ---------- */
.punch{font-size:var(--text-xl); line-height:1.75; text-align:center; color:var(--ink);
  margin:var(--space-5) auto var(--space-2); max-width:520px; letter-spacing:.03em}
.punch:empty{display:none}
.q-echo{background:var(--paper2); border:1px solid var(--line); padding:var(--space-3) var(--space-4); margin:0 auto var(--space-5);
  max-width:520px; font-size:var(--text-base); border-radius:var(--radius-sm); text-align:left}
.q-echo .t{display:block; font-size:var(--text-xs); letter-spacing:.2em; color:var(--ink3); margin-bottom:var(--space-1)}

/* ---------- 14. 關於長文 ---------- */
.about-text{max-width:620px; margin:0 auto}
.about-text p{color:var(--ink2); font-size:var(--text-base); margin-bottom:var(--space-4); text-align:left; line-height:1.9}

/* ---------- 15. Toast ---------- */
.toast{position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:var(--paper); padding:var(--space-3) var(--space-5); font-size:var(--text-sm); border-radius:var(--radius-sm);
  opacity:0; pointer-events:none; transition:.25s; z-index:20; box-shadow:var(--shadow-md); font-family:var(--sans)}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- 16. 還願牆 ---------- */
.wall{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-5)}
.wish{border:1px solid var(--line); padding:var(--space-5); background:var(--paper2); position:relative; border-radius:var(--radius-sm); transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}
.wish:hover{border-color:var(--line3); box-shadow:var(--shadow-sm)}
.wish .demo{position:absolute; top:var(--space-2); right:var(--space-3); font-size:var(--text-xs); color:var(--ink4); letter-spacing:.08em}
.wish .who{font-size:var(--text-sm); color:var(--ink2); margin-bottom:var(--space-3); letter-spacing:.05em}
.wish .body{font-size:var(--text-base); line-height:1.75}
.wish .amt{margin-top:var(--space-3); font-size:var(--text-sm); color:var(--cinnabar)}
.amts{display:flex; gap:var(--space-3); flex-wrap:wrap; justify-content:center; margin:var(--space-5) 0}
/* 自訂金額輸入（英語區 $5 起，繁中區 NT$9.9 起，上限 99,999,999） */
.amt-custom{display:flex; flex-direction:column; align-items:center; gap:var(--space-2); margin:0 0 var(--space-4)}
.amt-input{width:220px; padding:var(--space-3) var(--space-4); border:1px solid var(--line3);
  background:var(--paper2); font-family:inherit; font-size:var(--text-base); color:var(--ink);
  border-radius:var(--radius-sm); text-align:center; transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}
.amt-input:focus{outline:none; border-color:var(--cinnabar); box-shadow:0 0 0 3px rgba(163,52,42,0.12)}
.amt-range{font-size:var(--text-xs); color:var(--ink3); letter-spacing:.04em}

/* ---------- 還願牆：五色便箋瀑布流（移植自 v0.3） ---------- */
.wall-grid{columns:3; column-gap:var(--space-4); max-width:880px; margin:0 auto}
@media (max-width:860px){ .wall-grid{columns:2} }
@media (max-width:560px){ .wall-grid{columns:1} }
.wall-note{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  display:block; width:100%; margin:0 0 var(--space-4); padding:var(--space-4) var(--space-5);
  border:1px solid var(--line); border-radius:var(--radius-sm); position:relative;
  font-size:var(--text-sm); line-height:1.75; text-align:left;
  box-shadow:var(--shadow-sm); transition:transform var(--transition-fast), box-shadow var(--transition-fast)}
.wall-note:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.wall-note.n1{background:#FBF6E9}
.wall-note.n2{background:#F7EFE8}
.wall-note.n3{background:#F1F3E8}
.wall-note.n4{background:#EDF1F0}
.wall-note.n5{background:#F8EDF0}
.wall-note.own{border:2px dashed var(--cinnabar); background:#FFF}
.wall-note .wall-head{display:flex; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-2)}
.wall-note .wall-who{font-size:var(--text-xs); color:var(--ink2); letter-spacing:.06em}
.wall-note .wall-amt{font-size:var(--text-sm); color:var(--cinnabar); white-space:nowrap}
.wall-note p{font-size:var(--text-sm); color:var(--ink)}
.wall-note .wall-date{font-size:var(--text-xs); color:var(--ink3); margin-top:var(--space-2)}
.wall-note .wall-demo{
  display:inline-block; font-size:10px; letter-spacing:.12em; color:var(--ink3);
  border:1px solid var(--line2); border-radius:2px; padding:1px 5px; margin-bottom:var(--space-2);
  background:rgba(255,255,255,.7)}
.wall-seed-note{max-width:640px; margin:var(--space-4) auto 0; text-align:center;
  font-size:var(--text-xs); color:var(--ink3); line-height:1.8}
.amtbtn{border:1px solid var(--line3); padding:var(--space-3) var(--space-5); font-size:var(--text-base); cursor:pointer; background:var(--paper2);
  font-family:inherit; color:var(--ink); border-radius:var(--radius-sm); min-height:44px; transition:border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast)}
.amtbtn:hover{border-color:var(--cinnabar); color:var(--cinnabar)}
.amtbtn.sel{border-color:var(--cinnabar); color:var(--cinnabar); background:var(--cinnabar-soft)}

/* ---------- 16b. 願望樹 ---------- */
.tree-stage{position:relative; width:100%; max-width:900px; margin:0 auto; aspect-ratio:1200/820;
  background-color:var(--paper2);
  background-image:url(../ink/tree.svg);
  background-position:center center; background-size:contain; background-repeat:no-repeat;
  border:1px solid var(--line); border-radius:var(--radius-sm)}
.tree-fallback{display:none; padding:var(--space-7); text-align:center; font-size:var(--text-sm); color:var(--ink3)}

.ribbon{position:absolute; width:13px; height:26px; padding:0; margin:0; border:0; background:transparent;
  transform:translate(-50%,-100%); transform-origin:top center; cursor:pointer;
  animation:ribbon-sway 6s ease-in-out infinite;
  transition:opacity var(--transition-fast)}
.ribbon::after{content:''; position:absolute; left:-14px; right:-14px; top:-10px; bottom:-6px}
.ribbon-body{display:block; width:13px; height:26px; border-radius:1px;
  background:linear-gradient(180deg,#A3342A 0%, #8B2A22 100%);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
  box-shadow:0 1px 2px rgba(43,43,43,.28)}
.ribbon:hover .ribbon-body,.ribbon:focus-visible .ribbon-body{background:linear-gradient(180deg,#C4402F 0%, #A3342A 100%)}
.ribbon:focus-visible{outline:2px solid var(--cinnabar); outline-offset:2px}
.ribbon.own .ribbon-body{background:linear-gradient(180deg,#C4402F 0%, #A3342A 100%);
  box-shadow:0 0 0 1.5px var(--gold), 0 1px 3px rgba(43,43,43,.3)}
.ribbon.own{z-index:2}
.ribbon.dim{opacity:.2}
@keyframes ribbon-sway{0%,100%{transform:translate(-50%,-100%) rotate(-4deg)}50%{transform:translate(-50%,-100%) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){ .ribbon{animation:none} }
@media (max-width:640px){
  .ribbon{width:9px; height:19px}
  .ribbon-body{width:9px; height:19px}
}

.wish-detail{display:none; max-width:640px; margin:var(--space-5) auto 0; padding:var(--space-4) var(--space-5);
  border:1px solid var(--line); border-left:3px solid var(--cinnabar); background:var(--paper2);
  border-radius:var(--radius-sm); text-align:left}
.wish-detail.on{display:block}
.wish-detail .wd-cat{font-size:var(--text-xs); letter-spacing:.1em; color:var(--cinnabar)}
.wish-detail .wd-text{font-size:var(--text-md); line-height:1.9; margin:var(--space-2) 0}
.wish-detail .wd-who{font-size:var(--text-xs); color:var(--ink3)}

.wish-list{max-width:760px; margin:0 auto}
.wish-row{display:grid; grid-template-columns:auto 1fr; gap:var(--space-1) var(--space-3);
  padding:var(--space-3) 0; border-bottom:1px dashed var(--line); text-align:left}
.wish-row.own{background:linear-gradient(90deg, rgba(163,52,42,.06), transparent)}
.wish-row .wish-text{font-size:var(--text-sm); color:var(--ink); line-height:1.8}
.wish-row .wish-who{grid-column:2; font-size:var(--text-xs); color:var(--ink3); letter-spacing:.04em}
.wish-row .wish-cat,.gb-type{display:inline-flex; align-items:center; font-size:10.5px; letter-spacing:.08em;
  padding:2px 8px; border-radius:999px; white-space:nowrap; align-self:start; margin-top:2px}
.c0{background:#F8EDF0; color:#8B2A55}
.c1{background:#EDF1F0; color:var(--jade)}
.c2{background:#F1F3E8; color:var(--gold)}
.c3{background:#FBF6E9; color:#7A5A22}
.c4{background:#EEF1F6; color:#3A5470}
.wish-demo,.wish-own{font-style:normal; font-size:10px; letter-spacing:.12em; color:var(--ink3);
  border:1px solid var(--line2); border-radius:2px; padding:1px 5px; background:rgba(255,255,255,.7)}
.wish-own{border-color:var(--cinnabar); color:var(--cinnabar)}
.cat-row{display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:center; margin:0 0 var(--space-5)}
.catbtn{min-height:44px; padding:var(--space-2) var(--space-4); border:1px solid var(--line3); background:transparent;
  border-radius:999px; font-family:inherit; font-size:var(--text-sm); color:var(--ink2); cursor:pointer;
  display:inline-flex; align-items:center; transition:border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast)}
.catbtn:hover{border-color:var(--cinnabar); color:var(--cinnabar)}
.catbtn.sel{border-color:var(--cinnabar); color:var(--cinnabar); background:var(--cinnabar-soft)}

/* ---------- 16c. 表單元件（許願 / 留言共用） ---------- */
.wish-form,.gb-form{max-width:560px; margin:0 auto; text-align:left}
.fl{display:block; font-size:var(--text-xs); letter-spacing:.08em; color:var(--ink3); margin-bottom:var(--space-2)}
.f-in,.f-area{width:100%; padding:var(--space-3) var(--space-4); border:1px solid var(--line3); background:var(--paper2);
  font-family:inherit; font-size:var(--text-base); color:var(--ink); border-radius:var(--radius-sm);
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}
.f-area{min-height:96px; resize:vertical; line-height:1.8}
.f-in:focus,.f-area:focus{outline:none; border-color:var(--cinnabar); box-shadow:0 0 0 3px rgba(163,52,42,.12)}
.f-in:disabled,.f-area:disabled{background:var(--paper3); color:var(--ink4)}
.form-2{display:flex; gap:var(--space-3); flex-wrap:wrap}
.form-2 > *{flex:1 1 180px}
.form-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-2)}
.f-count{font-size:var(--text-xs); color:var(--ink3); letter-spacing:.04em}
.f-count.over{color:var(--cinnabar)}
.form-msg{font-size:var(--text-sm); text-align:center; min-height:22px; margin-top:var(--space-3)}
.form-msg.ok{color:var(--jade)}
.form-msg.warn{color:var(--cinnabar)}
.form-note{max-width:560px; margin:var(--space-3) auto 0; text-align:center; font-size:var(--text-xs); color:var(--ink3); line-height:1.8}

/* ---------- 16d. 留言簿 ---------- */
.gb-list{max-width:760px; margin:0 auto}
.gb-item{border:1px solid var(--line); background:var(--paper2); border-radius:var(--radius-sm);
  padding:var(--space-4) var(--space-5); margin-bottom:var(--space-3); text-align:left}
.gb-item.own{border-style:dashed; border-color:var(--cinnabar); background:#FFF}
.gb-head{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2);
  font-size:var(--text-xs); color:var(--ink3); letter-spacing:.04em}
.gb-who{color:var(--ink2)}
.gb-date{margin-left:auto}
.k0{background:#FBF6E9; color:var(--gold)}
.k1{background:#EDF1F0; color:var(--jade)}
.k2{background:#F8EDF0; color:#8B2A55}
.gb-body{margin:var(--space-3) 0 0; font-size:var(--text-sm); line-height:1.9; color:var(--ink)}

/* ---------- 17. 單卦頁首屏 ---------- */
.hex-hero{border-top:none; padding:var(--space-8) 0 var(--space-7); text-align:center;
  background-image:url(../ink/frame.svg);
  background-position:center center;
  background-size:contain;
  background-repeat:no-repeat}

/* ---------- 18. 64卦列表 / 卦頁 ---------- */
.hgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:var(--space-3)}
.hcell{border:1px solid var(--line); padding:var(--space-3) var(--space-2); text-align:center; background:var(--paper2); border-radius:var(--radius-sm); display:block; transition:border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast)}
.hcell:hover{border-color:var(--cinnabar); background:#fff; transform:translateY(-2px)}
.hcell .n{font-size:var(--text-xs); color:var(--ink3); letter-spacing:.1em}
.hcell .nm{font-size:var(--text-base); margin:var(--space-1) 0}
.hcell .en{font-size:var(--text-xs); color:var(--ink2); line-height:1.4}

/* ---------- 19. Footer ---------- */
footer{padding:var(--space-7) 0 var(--space-10); border-top:1px solid var(--line); text-align:center;
  font-size:var(--text-sm); color:var(--ink3); line-height:2;
  background-image:url(../ink/near.svg);
  background-position:center bottom;
  background-size:1200px auto;
  background-repeat:no-repeat}
footer nav{justify-content:center; margin-bottom:var(--space-4); gap:var(--space-4)}
footer nav a{min-height:40px; padding:var(--space-2)}
.disc{font-size:var(--text-sm); color:var(--ink3); margin-top:var(--space-3); max-width:600px; margin-left:auto; margin-right:auto}

/* ---------- 20. Modal ---------- */
.modal{position:fixed; inset:0; background:rgba(43,43,43,.5); display:none;
  align-items:center; justify-content:center; z-index:9; padding:var(--space-5)}
.modal.on{display:flex}
.mbox{background:var(--paper); padding:var(--space-7); max-width:430px; width:100%; border-radius:var(--radius-sm);
  max-height:90vh; overflow:auto; position:relative; box-shadow:var(--shadow-lg)}
.mbox h3{font-size:var(--text-xl); margin-bottom:var(--space-1); font-weight:500}
.mbox .sub{font-size:var(--text-base); color:var(--ink2); margin-bottom:var(--space-5)}
.opt{border:1px solid var(--line3); padding:var(--space-3) var(--space-4); margin-bottom:var(--space-3); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; font-size:var(--text-base); border-radius:var(--radius-sm); transition:border-color var(--transition-fast)}
.opt:hover{border-color:var(--cinnabar)}
.opt b{color:var(--cinnabar); font-weight:500}
.fine{font-size:var(--text-xs); color:var(--ink3); margin-top:var(--space-4); text-align:center; line-height:1.7}

/* ---------- 21. 語言門 ---------- */
.gate{min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center}
.gate .inner{max-width:520px}
.gate h1{font-size:var(--text-3xl); font-weight:500; letter-spacing:.16em; margin-bottom:var(--space-3)}
.gate p{color:var(--ink2); margin-bottom:var(--space-7); font-size:var(--text-base)}
.gate .opts{display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap}
.gate a{padding:var(--space-4) var(--space-7); border:1px solid var(--ink3); border-radius:var(--radius-sm); font-size:var(--text-base); letter-spacing:.1em; transition:border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast)}
.gate a:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* ---------- 22. 法務 ---------- */
.legal h3{margin-top:var(--space-7); font-size:var(--text-lg)}
.legal p, .legal li{font-size:var(--text-base); color:var(--ink2); margin-bottom:var(--space-3); line-height:1.8}
.legal ul{margin:0 0 var(--space-3) var(--space-6)}

/* ---------- 23. 墨卦 SVG ---------- */
.mogua{display:block; margin:0 auto; max-width:100%; height:auto}
.mogua path{transition:fill var(--transition-base)}

/* ---------- 24. 結果頁：題句與變卦 ---------- */
.poem{font-size:var(--text-lg); color:var(--ink2); font-style:italic; margin:var(--space-3) 0 var(--space-5); letter-spacing:.04em}
html[lang="zh-Hant"] .poem{font-style:normal; font-size:var(--text-xl); letter-spacing:.12em; color:var(--ink2)}
#rSym{display:flex; align-items:center; justify-content:center; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-5)}
.r-arr{font-size:var(--text-2xl); color:var(--cinnabar); font-family:Georgia,serif}

/* ---------- 25. 社群登入 ---------- */
.authslot{position:relative}
.authchip{display:flex; align-items:center; gap:var(--space-2); background:transparent; border:1px solid var(--line3); padding:var(--space-1) var(--space-3); border-radius:20px; cursor:pointer; font-family:inherit; font-size:var(--text-sm); color:var(--ink2); min-height:36px; transition:border-color var(--transition-fast), color var(--transition-fast)}
.authchip:hover{border-color:var(--gold); color:var(--ink)}
.authchip img{width:22px; height:22px; border-radius:50%; object-fit:cover}
.authchip .initial{width:22px; height:22px; border-radius:50%; background:var(--cinnabar); color:#fff; display:flex; align-items:center; justify-content:center; font-size:var(--text-xs)}
.authmenu{display:none; position:absolute; right:0; top:38px; background:var(--paper2); border:1px solid var(--line); border-radius:var(--radius-sm); min-width:160px; box-shadow:var(--shadow-md); z-index:50; padding:var(--space-1) 0}
.authmenu.on{display:block}
.authmenu .mi{padding:var(--space-2) var(--space-4); font-size:var(--text-sm); color:var(--ink2); background:transparent; border:none; width:100%; text-align:left; font-family:inherit; cursor:pointer; min-height:40px}
.authmenu .mi:hover{background:var(--paper); color:var(--ink)}
.authbox{max-width:360px}
.authbtns{display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-4)}
.authbtn{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border:1px solid var(--line3); background:var(--paper2); border-radius:var(--radius-sm); cursor:pointer; font-family:inherit; font-size:var(--text-base); text-align:left; transition:border-color var(--transition-fast), background var(--transition-fast); min-height:48px}
.authbtn:hover{border-color:var(--ink); background:var(--paper)}
.authbtn.google{border-left:3px solid #4285F4}
.authbtn.apple{border-left:3px solid #000}
.authbtn.facebook{border-left:3px solid #1877F2}
.authbtn.x{border-left:3px solid #1DA1F2}
.guestline{text-align:center; border-top:1px solid var(--line); padding-top:var(--space-4); margin-top:var(--space-2)}

/* ---------- 26. 分享 Modal ---------- */
.sharebox{max-width:520px}
.sharepreview{background:var(--paper2); border:1px solid var(--line); padding:var(--space-3); border-radius:var(--radius-sm); text-align:center; max-height:340px; overflow:auto}
.sharepreview img{max-width:100%; max-height:300px; border-radius:var(--radius-sm); box-shadow:var(--shadow-md)}
.shareactions{display:flex; gap:var(--space-3); justify-content:center; margin:var(--space-4) 0; flex-wrap:wrap}
.sharegrid{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-2)}
.sharebtn{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--space-2) var(--space-1); border:1px solid var(--line3); border-radius:var(--radius-sm); font-size:var(--text-xs); color:var(--ink2); background:var(--paper2); transition:border-color var(--transition-fast), color var(--transition-fast); min-height:52px}
.sharebtn:hover{border-color:var(--cinnabar); color:var(--cinnabar)}

/* ---------- 27. Modal 關閉鈕 ---------- */
.close{position:absolute; right:var(--space-3); top:var(--space-2); background:none; border:none; font-size:var(--text-2xl); color:var(--ink3); cursor:pointer; line-height:1; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm)}
.close:hover{color:var(--ink)}

/* ---------- 28. 響應式 ---------- */
@media (max-width:640px){
  .hero{padding:var(--space-8) 0 var(--space-7)}
  .hero h1{font-size:var(--text-2xl)}
  .hero p{font-size:var(--text-base)}
  section{padding:var(--space-7) 0}
  .coin{width:54px; height:54px; font-size:var(--text-xs)}
  .coins{gap:var(--space-4)}
  .yao{width:140px}
  .yao.yin i{width:60px}
  .hsym{font-size:36px}
  header{padding:var(--space-4) 0}
  .logo{font-size:var(--text-lg)}
  nav{gap:var(--space-3)}
  nav a{font-size:var(--text-sm); padding:var(--space-1)}
  .daily-visual{flex-direction:column; gap:var(--space-4)}
  .daily-poem{height:auto; writing-mode:horizontal-tb; font-size:var(--text-xl)}
  .sharebox{max-width:94vw}
  .sharegrid{grid-template-columns:repeat(2,1fr)}
  .title-ornament .cloud{width:56px; height:14px}
}

@media (min-width:1024px){
  .wrap{max-width:920px}
  .hero h1{font-size:var(--text-4xl)}
}