/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* latin */


:root{
  --paper:#efe6d3;
  --paper-2:#e7dcc4;
  --paper-3:#f5ecd9;
  --ink:#2a1f14;
  --ink-soft:#5c4a35;
  --ink-mute:#8a7558;
  --ink-faint:#c4a882;
  --vermilion:#8b2252;     /* 朱砂 */
  --vermilion-2:#a83254;
  --seal:#c8333a;          /* 印章紅 */
  --gold:#b8860b;
  --gold-soft:#d4b06a;
  --jade:#2d6e5a;
  --line:rgba(90,70,50,.18);
  --line-soft:rgba(90,70,50,.10);
  --font-serif:'Noto Serif TC','Songti TC','STSong',serif;
  --font-display:'ZCOOL XiaoWei','Noto Serif TC',serif;
  --font-brush:'Ma Shan Zheng','ZCOOL XiaoWei',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font-serif);
  color:var(--ink);
  background:#d9c9a8;
  min-height:100vh;
  display:flex;align-items:flex-start;justify-content:center;
  padding:36px 20px 80px;
  -webkit-font-smoothing:antialiased;
}

/* 宣紙背景紋理 */
.paper-bg{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,250,230,.5), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(90,60,30,.10), transparent 60%),
    repeating-linear-gradient(102deg, rgba(90,70,50,.025) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(12deg, rgba(90,70,50,.02) 0 1px, transparent 1px 9px);
}

/* 主卷軸 */
.scroll{
  position:relative;z-index:1;
  width:min(720px,100%);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,250,230,.7), transparent 50%),
    radial-gradient(circle at 18% 88%, rgba(139,34,82,.04), transparent 45%),
    linear-gradient(180deg, var(--paper-3), var(--paper) 20%, var(--paper) 80%, var(--paper-2));
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 0 0 1px rgba(90,70,50,.08),
    0 30px 80px -20px rgba(40,20,5,.35),
    0 10px 30px -10px rgba(40,20,5,.2);
  padding:46px 54px 54px;
  overflow:hidden;
}
.scroll::before,.scroll::after{
  content:'';position:absolute;left:0;right:0;height:14px;
  background:linear-gradient(180deg, rgba(90,60,30,.35), rgba(90,60,30,.05));
  border-top:1px solid rgba(90,60,30,.2);
  border-bottom:1px solid rgba(90,60,30,.1);
}
.scroll::before{top:0}
.scroll::after{bottom:0;transform:scaleY(-1)}

/* 角飾紋（淡墨） */
.corner{
  position:absolute;width:110px;height:110px;opacity:.10;pointer-events:none;color:var(--ink);
}
.corner.tl{top:18px;left:18px}
.corner.tr{top:18px;right:18px;transform:scaleX(-1)}
.corner.bl{bottom:18px;left:18px;transform:scaleY(-1)}
.corner.br{bottom:18px;right:18px;transform:scale(-1,-1)}

/* 標題 */
.ttl-wrap{text-align:center;margin:6px 0 22px;position:relative}
.ttl-zh{
  font-family:var(--font-display);
  font-size:44px;letter-spacing:.5em;
  color:var(--ink);text-indent:.5em;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.ttl-sub{
  font-size:11px;letter-spacing:.55em;color:var(--ink-mute);margin-top:6px;text-indent:.55em;
}
.divine-line{
  width:120px;margin:14px auto;
  display:flex;align-items:center;justify-content:center;gap:10px;
  color:var(--ink-faint);
}
.divine-line .l{flex:1;height:1px;background:currentColor;opacity:.5}
.divine-line .d{width:6px;height:6px;border:1px solid currentColor;transform:rotate(45deg)}

/* 印章（右上） */
.seal{
  position:absolute;top:30px;right:36px;
  width:62px;height:62px;
  border:2.5px solid var(--seal);
  color:var(--seal);
  font-family:var(--font-display);
  font-size:14px;letter-spacing:.08em;line-height:1.15;
  display:grid;grid-template-columns:1fr 1fr;place-items:center;
  padding:6px;
  transform:rotate(-4deg);
  opacity:.85;
  background:
    radial-gradient(circle at 30% 30%, rgba(200,51,58,.08), transparent 70%),
    repeating-linear-gradient(45deg, transparent 0 2px, rgba(255,245,230,.35) 2px 3px);
  box-shadow:inset 0 0 0 1px rgba(200,51,58,.25);
}
.seal span{writing-mode:vertical-rl;font-weight:600}

/* 日期／時辰條 */
.meta-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:.25em;color:var(--ink-mute);
  padding:10px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  margin-bottom:24px;
}
.meta-row span b{color:var(--ink);font-weight:500;letter-spacing:.18em;margin-left:6px}

/* 面板 */
.panel{display:none;animation:fadeIn .5s ease both}
.panel.on{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 首頁 — 提問 */
.ask-block{
  text-align:center;
  padding:8px 0 0;
}
.ask-eyebrow{
  font-size:10px;letter-spacing:.6em;color:var(--ink-mute);margin-bottom:18px;text-indent:.6em;
}
.ask-title{
  font-family:var(--font-display);
  font-size:22px;letter-spacing:.3em;color:var(--ink);
  margin-bottom:6px;text-indent:.3em;
}
.ask-sub{
  font-size:12px;color:var(--ink-mute);letter-spacing:.2em;margin-bottom:26px;
}
.ask-field{
  position:relative;
  max-width:520px;margin:0 auto;
  padding:22px 26px 18px;
  background:linear-gradient(180deg, rgba(255,250,235,.5), rgba(255,250,235,.15));
  border:1px solid var(--line-soft);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.ask-field::before,.ask-field::after{
  content:'';position:absolute;width:16px;height:16px;border:1px solid var(--ink-faint);
}
.ask-field::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.ask-field::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.ask-field textarea{
  width:100%;background:transparent;border:none;resize:none;outline:none;
  font-family:var(--font-serif);font-size:15px;line-height:2;color:var(--ink);
  min-height:90px;
  text-align:center;
}
.ask-field textarea::placeholder{color:var(--ink-faint);font-style:italic;letter-spacing:.1em}
.ask-hint-small{
  font-size:10px;letter-spacing:.4em;color:var(--ink-faint);margin-top:10px;text-indent:.4em;
}

/* 按鈕 */
.btn-main{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  margin:28px auto 0;
  background:linear-gradient(180deg, #3a2d1e, #221810);
  color:var(--paper-3);
  border:none;
  font-family:var(--font-display);
  font-size:16px;letter-spacing:.5em;
  padding:14px 44px 14px 50px;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,220,170,.18),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 8px 18px -8px rgba(40,20,5,.5);
  transition:transform .15s, box-shadow .2s;
}
.btn-main:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,220,170,.25), 0 12px 24px -8px rgba(40,20,5,.6)}
.btn-main:active{transform:translateY(0)}
.btn-main::before,.btn-main::after{
  content:'';width:6px;height:6px;border:1px solid var(--gold-soft);transform:rotate(45deg);opacity:.7;
}
.btn-wrap{text-align:center}

.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;color:var(--ink-soft);
  border:1px solid var(--line);
  font-family:var(--font-serif);font-size:12px;letter-spacing:.3em;
  padding:9px 22px;cursor:pointer;
  transition:all .2s;
}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);background:rgba(255,250,235,.4)}
.btn-ghost.primary{color:var(--vermilion);border-color:rgba(139,34,82,.4)}
.btn-ghost.primary:hover{background:rgba(139,34,82,.06);border-color:var(--vermilion);color:var(--vermilion)}

/* 搖卦面板 */
.shake-stage{
  padding:8px 0 0;
  text-align:center;
}
.shake-eyebrow{
  font-family:var(--font-display);
  font-size:16px;letter-spacing:.5em;color:var(--ink);margin-bottom:4px;text-indent:.5em;
}
.shake-hint{
  font-size:12px;color:var(--ink-mute);letter-spacing:.2em;margin-bottom:26px;
}
.intent-echo{
  max-width:460px;margin:0 auto 22px;
  font-size:13px;color:var(--ink-soft);letter-spacing:.08em;
  padding:10px 18px;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  font-style:italic;line-height:1.9;
}
.intent-echo .q{color:var(--vermilion);margin-right:8px;font-style:normal}

/* 銅錢 → 梅花 */
.blossom-row{
  display:flex;justify-content:center;gap:36px;margin:22px 0 14px;
  min-height:110px;align-items:center;
}
.blossom{
  width:92px;height:92px;position:relative;cursor:pointer;
  transform-style:preserve-3d;
  perspective:800px;
}
.blossom-inner{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transition:transform 1.2s cubic-bezier(.4,1.2,.3,.95);
}
.blossom.shaking .blossom-inner{
  animation:blossomTumble 1.9s cubic-bezier(.32,.06,.28,1);
}
@keyframes blossomTumble{
  0%{transform:translateY(0) rotateY(0) rotateZ(0)}
  18%{transform:translateY(-46px) rotateY(360deg) rotateZ(-15deg)}
  40%{transform:translateY(-26px) rotateY(720deg) rotateZ(18deg)}
  62%{transform:translateY(-32px) rotateY(1080deg) rotateZ(-10deg)}
  82%{transform:translateY(-10px) rotateY(1260deg) rotateZ(5deg)}
  100%{transform:translateY(0) rotateY(1440deg) rotateZ(0)}
}
.blossom-face{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  backface-visibility:hidden;
}
.blossom-face.back{transform:rotateY(180deg)}
.blossom:hover:not(.shaking){transform:translateY(-2px)}

/* 搖卦計數 */
.shake-counter{
  font-family:var(--font-display);
  font-size:12px;letter-spacing:.4em;color:var(--ink-mute);
  margin-top:8px;text-indent:.4em;min-height:20px;
}
.shake-counter b{color:var(--vermilion);font-weight:500;margin:0 4px}

/* 爻線顯示 */
.yao-area{
  max-width:380px;margin:22px auto 0;
  padding:0 10px;
}
.yao-group{margin-bottom:14px}
.yao-glbl{
  font-size:11px;letter-spacing:.3em;color:var(--ink-mute);
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.yao-glbl::before,.yao-glbl::after{content:'';flex:1;height:1px;background:var(--line-soft)}
.yao-glbl b{color:var(--ink);font-family:var(--font-display);letter-spacing:.15em;font-weight:400}
.yao-row{
  display:flex;align-items:center;gap:12px;margin-bottom:9px;
  opacity:0;transform:translateX(-8px);transition:all .4s ease;
}
.yao-row.vis{opacity:1;transform:none}
.yao-pos{font-size:10px;color:var(--ink-faint);width:16px;text-align:right;letter-spacing:.1em}
.yao-segs{display:flex;gap:8px;align-items:center;flex:1;justify-content:center}
.seg{height:5px;background:var(--ink);border-radius:1px;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.yang-seg{width:120px}
.yin-l,.yin-r{width:52px}
.dong-seg{background:var(--vermilion);box-shadow:0 0 10px rgba(139,34,82,.4)}
.dong-lbl{
  font-family:var(--font-display);font-size:11px;color:var(--vermilion);
  letter-spacing:.15em;margin-left:4px;
}
.dong-lbl::before{content:'◆';margin-right:3px;font-size:8px}

/* 結果 */
.result-intent{
  text-align:center;font-size:13px;color:var(--ink-soft);
  padding:0 0 18px;letter-spacing:.05em;line-height:1.9;
}
.result-intent .q-mark{
  color:var(--vermilion);font-family:var(--font-display);
  font-size:13px;letter-spacing:.3em;margin-right:10px;
}

.result-grid{
  display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:0;
  margin:14px 0 22px;
  border:1px solid var(--line);
  background:rgba(255,250,235,.3);
  position:relative;
}
.result-grid::before,.result-grid::after{
  content:'';position:absolute;top:10px;bottom:10px;width:1px;background:var(--line-soft);
}
.result-grid::before{left:33.33%}
.result-grid::after{right:33.33%}
.gua-card{
  padding:20px 10px 18px;text-align:center;
  position:relative;
}
.gua-card.ctr{
  background:
    radial-gradient(ellipse at 50% 100%, rgba(139,34,82,.05), transparent 70%),
    linear-gradient(180deg, rgba(255,250,235,.8), rgba(255,245,225,.4));
}
.gua-card.ctr::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:30px;height:3px;background:var(--vermilion);
}
.gc-lbl{
  font-family:var(--font-display);font-size:11px;letter-spacing:.5em;
  color:var(--ink-mute);margin-bottom:10px;text-indent:.5em;
}
.gua-card.ctr .gc-lbl{color:var(--vermilion)}
.gc-sym{
  font-size:32px;margin:6px 0;line-height:1;color:var(--ink);
  letter-spacing:.08em;
  font-family:'STSong','Songti TC',serif;
}
.gc-name{
  font-family:var(--font-display);font-size:16px;letter-spacing:.15em;color:var(--ink);
  margin-top:8px;text-indent:.15em;
}
.gc-nat{font-size:10px;color:var(--ink-mute);margin-top:5px;letter-spacing:.2em}
.dong-badge{
  display:inline-block;background:transparent;border:1px solid var(--vermilion);color:var(--vermilion);
  font-size:9px;padding:2px 6px;margin-left:6px;letter-spacing:.15em;
}

.sec-title{
  font-family:var(--font-display);
  font-size:11px;letter-spacing:.5em;color:var(--ink);
  display:flex;align-items:center;gap:12px;margin:24px 0 10px;
  text-indent:.5em;
}
.sec-title::before{content:'';width:3px;height:12px;background:var(--vermilion);margin-right:-4px}
.sec-title::after{content:'';flex:1;height:1px;background:var(--line-soft)}

.wx-row{display:flex;gap:8px;margin:10px 0}
.wx-pill{
  flex:1;padding:10px 4px;text-align:center;
  font-size:11px;letter-spacing:.15em;
  border:1px solid var(--line-soft);background:rgba(255,250,235,.4);
  color:var(--ink-mute);
}
.wx-char{font-size:20px;display:block;margin-bottom:3px;font-family:var(--font-display)}
.wx-sheng{border-color:rgba(45,110,90,.35);background:rgba(232,243,239,.6);color:var(--jade)}
.wx-ke{border-color:rgba(139,34,82,.35);background:rgba(242,221,228,.5);color:var(--vermilion)}
.wx-bi{border-color:rgba(184,134,11,.4);background:rgba(245,237,216,.7);color:var(--gold)}

.rel-quote{
  padding:14px 18px;font-size:13px;color:var(--ink-soft);line-height:2;margin:12px 0;
  border-left:2px solid var(--vermilion);background:rgba(255,250,235,.35);
  letter-spacing:.04em;
}

.interp{
  font-size:14px;line-height:2.1;color:var(--ink);letter-spacing:.04em;
  padding:6px 4px;
  text-align:justify;
}

/* 結果底部按鈕列 */
.action-row{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin-top:28px;padding-top:22px;border-top:1px dashed var(--line-soft);
}

/* Toast */
.toast{
  position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--paper-3);
  padding:10px 22px;font-size:12px;letter-spacing:.25em;
  font-family:var(--font-display);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.4);
  opacity:0;transition:all .3s;z-index:100;pointer-events:none;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* 灑落的梅花背景飄落 */
.petal-fall{
  position:fixed;pointer-events:none;z-index:2;
  opacity:.5;
}

@media (max-width:560px){
  .scroll{padding:36px 22px 42px}
  .ttl-zh{font-size:32px}
  .blossom{width:76px;height:76px}
  .blossom-row{gap:20px}
  .seal{top:20px;right:20px;width:52px;height:52px;font-size:12px}
  .yang-seg{width:94px}
  .yin-l,.yin-r{width:40px}
  .result-grid{grid-template-columns:1fr;gap:0}
  .result-grid::before,.result-grid::after{display:none}
  .gua-card{border-bottom:1px solid var(--line-soft)}
  .gua-card:last-child{border-bottom:none}
}

/* ===== 起卦模式 ===== */
.mode-row{display:flex;justify-content:center;gap:10px;margin:18px 0 8px}
.mode-btn{font-family:var(--font-display);font-size:12px;letter-spacing:.25em;text-indent:.25em;padding:8px 16px;background:transparent;border:1px solid var(--line);color:var(--ink-mute);cursor:pointer;border-radius:2px;transition:all .25s}
.mode-btn:hover{border-color:var(--vermilion);color:var(--ink)}
.mode-btn.on{border-color:var(--vermilion);background:var(--vermilion);color:var(--paper)}
.mode-desc{text-align:center;font-size:11px;color:var(--ink-faint);letter-spacing:.15em;margin-bottom:6px}
#numInputs{display:none;justify-content:center;gap:14px;margin:10px 0 4px}
#numInputs input{width:110px;padding:8px 10px;font-family:var(--font-serif);font-size:14px;text-align:center;background:var(--paper-2);border:1px solid var(--line);color:var(--ink);border-radius:2px}
#numInputs input:focus{outline:none;border-color:var(--vermilion)}
#numInputs label{font-size:11px;color:var(--ink-mute);letter-spacing:.2em;display:flex;flex-direction:column;gap:5px;align-items:center}
/* ===== 迷你六爻圖 ===== */
.mini-hex{display:flex;flex-direction:column;gap:4px;align-items:center;margin:8px 0 6px}
.mh-row{display:flex;align-items:center;gap:0;height:5px}
.mh-seg{display:inline-block;height:5px;background:var(--ink-soft);border-radius:1px}
.mh-full{width:44px}
.mh-half{width:19px}
.mh-gap{display:inline-block;width:6px}
.mh-dong .mh-seg{background:var(--vermilion)}
/* ===== 經文 ===== */
.jing-block{margin:4px 0 8px;border:1px solid var(--line-soft);background:var(--paper-2);padding:14px 16px;border-radius:2px}
.jing-row{font-size:13px;line-height:1.9;color:var(--ink);padding:4px 0;border-bottom:1px dashed var(--line-soft)}
.jing-row:last-child{border-bottom:none}
.jing-lbl{display:inline-block;font-family:var(--font-display);font-size:11px;letter-spacing:.15em;color:var(--ink-mute);margin-right:12px;white-space:nowrap}
.jing-dong{color:var(--vermilion)}
.jing-dong .jing-lbl{color:var(--vermilion)}
/* ===== 起卦註記 ===== */
.cast-note{text-align:center;font-size:11px;color:var(--ink-faint);letter-spacing:.12em;margin:-4px 0 10px}
/* ===== 往卦記錄 ===== */
.hist-wrap{margin-top:26px;text-align:center}
#histList{display:none;margin-top:12px;text-align:left;border:1px solid var(--line-soft);background:var(--paper-2);border-radius:2px;max-height:260px;overflow-y:auto}
.hist-item{display:flex;gap:12px;align-items:baseline;padding:9px 14px;font-size:12px;color:var(--ink);border-bottom:1px dashed var(--line-soft);cursor:pointer;transition:background .2s}
.hist-item:hover{background:var(--paper-3)}
.hist-item:last-child{border-bottom:none}
.hist-date{color:var(--ink-faint);font-size:11px;white-space:nowrap}
.hist-gua{font-family:var(--font-display);letter-spacing:.05em;white-space:nowrap}
.hist-q{color:var(--ink-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.hist-empty{padding:14px;text-align:center;font-size:12px;color:var(--ink-faint);letter-spacing:.2em}
.hist-clear{justify-content:center;color:var(--ink-faint);font-size:11px;letter-spacing:.2em}