:root { --paper:#f5ecd6; --paper-deep:#ebdfc1; --ink:#1d1d1f; --ink-soft:#4a4a4a; --cinnabar:#a8323a; --cinnabar-deep:#7a2026; --jade:#4f7a52; --gold:#b58b3d;
    --line:rgba(29,29,31,0.12); --shadow:0 10px 30px rgba(0,0,0,0.15); --shadow-lg:0 16px 40px rgba(0,0,0,0.22);
    /* --serif/--kai 字體棧統一由 site.css :root 提供（含 LXGW WenKai TC webfont），此處不再重定義 */ }
  * { box-sizing: border-box; }
  /* 背景與氛圍光統一由 site.css 的 body 提供（宣紙/墨暈/暗角），此處不再覆蓋 */
  html, body { margin:0; padding:0; min-height:100vh; color:var(--ink); font-family:var(--serif); }
  .scroll { max-width:780px; margin:48px auto; padding:0 24px 64px; position:relative; z-index:1; }
  .title-block { text-align:center; padding:20px 0 6px; }
  .title-block .seal { display:inline-block; background:var(--cinnabar); color:var(--paper); padding:6px 12px; letter-spacing:.3em; transform:rotate(-2deg); box-shadow:var(--shadow); font-family:var(--serif); font-size:14px; }
  .title-block h1 { font-family:var(--kai); font-weight:500; font-size:34px; letter-spacing:.1em; margin:18px 0 2px; }
  .title-block .sub { font-size:12px; color:var(--ink-soft); letter-spacing:.3em; }
  .title-block .meta { font-size:11px; color:var(--ink-soft); margin-top:8px; opacity:.7; letter-spacing:.05em; }
  .hint { text-align:center; font-size:12px; letter-spacing:.3em; color:var(--ink-soft); margin:14px 0 22px; }
  .sea { position:relative; height:320px; border-radius:4px;
    background:linear-gradient(to bottom,
      rgba(180,200,210,0.18) 0%,
      rgba(200,220,230,0.12) 35%,
      rgba(220,235,240,0.06) 55%,
      rgba(120,180,200,0.15) 60%,
      rgba(80,160,185,0.22) 100%); }
  /* 水面主體 */
  .sea-surface { position:absolute; left:0; right:0; bottom:0; height:42%; z-index:0;
    background:linear-gradient(to bottom,
      rgba(100,185,210,0.18) 0%,
      rgba(70,155,185,0.26) 50%,
      rgba(50,130,165,0.32) 100%);
    border-radius:50% 50% 0 0 / 20% 20% 0 0; }
  /* B2 §C：月光帶 */
  /* B4 §E1：夜海月亮（日間不顯示） */
  .moon { display:none; position:absolute; top:6%; left:14%; width:64px; height:64px; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle at 38% 35%, #fdf3d0, #e8cf8e 58%, rgba(232,207,142,0.25) 78%, rgba(232,207,142,0) 100%);
    box-shadow:0 0 34px rgba(240,216,150,0.35), 0 0 90px rgba(240,216,150,0.15); }
  html[data-theme="night"] .moon { display:block; }
  /* B4 §E4：瓶子橫向漂移差（三瓶週期錯開，避免排排坐） */
  .bottle-body svg { animation:sway 9s ease-in-out infinite alternate; }
  .bottle:nth-of-type(2) .bottle-body svg { animation-duration:11s; animation-delay:1.2s; }
  .bottle:nth-of-type(3) .bottle-body svg { animation-duration:10s; animation-delay:2.6s; }
  @keyframes sway { from { transform:translateX(-3px); } to { transform:translateX(3px); } }
  .sea-surface::after { content:""; position:absolute; inset:-10% -6%; pointer-events:none;
    background:linear-gradient(24deg, transparent 40%, rgba(255,248,220,0.07) 50%, transparent 60%);
    animation:moonDrift 18s ease-in-out infinite alternate; }
  @keyframes moonDrift { from { transform:translateX(-4%); } to { transform:translateX(4%); } }
  /* B2 §C：上浮氣泡 */
  .bubbles { position:absolute; left:0; right:0; bottom:0; height:62%; z-index:1; pointer-events:none; }
  .bubbles span { position:absolute; bottom:6%; width:6px; height:6px; border:1.5px solid rgba(255,255,255,0.6);
    border-radius:50%; opacity:0; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%);
    animation:bubbleRise linear infinite; }
  .bubbles span:nth-child(1) { left:10%; animation-duration:9s;  animation-delay:0s; }
  .bubbles span:nth-child(2) { left:26%; animation-duration:12s; animation-delay:2.4s; width:5px; height:5px; }
  .bubbles span:nth-child(3) { left:44%; animation-duration:8.5s; animation-delay:4.2s; }
  .bubbles span:nth-child(4) { left:61%; animation-duration:13s; animation-delay:1.2s; width:6px; height:6px; }
  .bubbles span:nth-child(5) { left:76%; animation-duration:10s; animation-delay:5.6s; }
  .bubbles span:nth-child(6) { left:90%; animation-duration:11.5s; animation-delay:3.4s; width:4px; height:4px; }
  @keyframes bubbleRise {
    0% { transform:translateY(0); opacity:0; }
    10% { opacity:0.5; }
    80% { opacity:0.35; }
    100% { transform:translateY(-150px); opacity:0; }
  }
  /* 水面波紋 SVG */
  .sea-waves { position:absolute; left:0; right:0; bottom:0; height:42%; z-index:1; overflow:hidden; pointer-events:none; }
  .bottles { position:absolute; inset:0; z-index:3; }
  .bottle { position:absolute; width:64px; height:116px; cursor:pointer; z-index:1; transform:rotate(var(--tilt,0deg)); }
  .bottle-body { width:100%; height:100%; animation: float var(--float-dur,4s) ease-in-out var(--float-delay,0s) infinite; transition:transform .25s ease, filter .25s ease; filter:drop-shadow(0 4px 4px rgba(0,0,0,0.10)); position:relative; }
  .bottle:hover .bottle-body { transform:translateY(-8px) rotate(-4deg); filter:drop-shadow(0 10px 8px rgba(0,0,0,0.18)); }
  .bottle-body svg { display:block; width:100%; height:100%; }
  .bottle-waterline { position:absolute; left:-10px; right:-10px; bottom:22%; height:3px; border-radius:50%;
    background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.25), transparent 75%);
    animation: bottleRipple var(--float-dur,4s) ease-in-out infinite; }
  @keyframes bottleRipple { 0%,100%{transform:scaleX(1);opacity:.6;} 50%{transform:scaleX(1.12);opacity:.9;} }
  @keyframes float { 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-7px) rotate(2deg);} }
  .note { position:absolute; left:50%; bottom:100%; margin-bottom:16px; transform:translate(-50%,6px) scale(0.7) rotate(calc(var(--tilt,0deg) * -1)); transform-origin:50% calc(100% + 0px); width:220px; padding:14px 14px 12px; background:rgba(var(--paper-rgb),0.97); border:1px solid var(--line); border-radius:4px; box-shadow:var(--shadow-lg); font-family:var(--serif); color:var(--ink); text-align:center; opacity:0; pointer-events:none; transition:opacity .35s ease, transform .35s ease; z-index:5; }
  .note::after { content:""; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:12px; background:rgba(var(--paper-rgb),0.97); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .bottle.open .note { opacity:1; transform:translate(-50%,0) scale(1) rotate(calc(var(--tilt,0deg) * -1)); pointer-events:auto; }
  .note-cap { font-size:11px; letter-spacing:.35em; color:var(--ink-soft); margin-bottom:6px; }
  .note-body { font-family:var(--kai); font-size:20px; letter-spacing:.15em; color:var(--jade); font-weight:500; padding:0 4px 6px; }
  /* 股票代號：卡片張開時由左至右淡入 */
  .bottle.open .note-body {
    -webkit-mask-image:linear-gradient(90deg,#000 42%,rgba(0,0,0,0) 58%);
            mask-image:linear-gradient(90deg,#000 42%,rgba(0,0,0,0) 58%);
    -webkit-mask-size:260% 100%;
            mask-size:260% 100%;
    -webkit-mask-repeat:no-repeat;
            mask-repeat:no-repeat;
    animation:noteWipe 1.8s ease .15s both;
  }
  @keyframes noteWipe {
    from { -webkit-mask-position:100% 0; mask-position:100% 0; }
    to   { -webkit-mask-position:0% 0;   mask-position:0% 0; }
  }
  .note-sub { font-size:10.5px; color:var(--ink-soft); margin-top:2px; }
  .note-q { margin-top:8px; padding-top:10px; border-top:1px dashed var(--line); opacity:0; transform:translateY(-4px); transition:opacity .35s ease, transform .35s ease; transition-delay:.2s; }
  .bottle.open .note-q { opacity:1; transform:translateY(0); }
  .note-q-text { font-family:var(--kai); font-size:13px; letter-spacing:.3em; color:var(--ink-soft); margin-bottom:12px; }
  /* 擲錢起卦按鈕 */
  .coin-btn { position:relative; width:56px; height:56px; border:none; border-radius:50%; background:radial-gradient(circle at 35% 30%, #e6c878, var(--gold) 55%, var(--gold-deep)); border:2px solid var(--gold-deep); box-shadow:0 4px 10px rgba(0,0,0,0.18), inset 0 2px 3px rgba(255,255,255,0.4); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; display:flex; align-items:center; justify-content:center; }
  .coin-btn:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 8px 16px rgba(0,0,0,0.22), inset 0 2px 3px rgba(255,255,255,0.5); }
  .coin-btn:active { transform:translateY(0) scale(.97); }
  .coin-btn.flipping { animation:coinFlip 700ms cubic-bezier(.22,.61,.36,1) forwards; pointer-events:none; }
  .coin-btn-face { width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%; background:radial-gradient(circle at 38% 32%, #efd98c, #c79a3e 60%, #8f6b2c); box-shadow:inset 0 2px 4px rgba(255,255,255,0.35), inset 0 -3px 5px rgba(0,0,0,0.25); }
  .coin-btn-face svg { display:block; width:100%; height:100%; }
  @keyframes coinFlip { 0%{transform:translateY(0) rotateY(0deg) scale(1);} 20%{transform:translateY(-42px) rotateY(720deg) scale(1.06);} 55%{transform:translateY(-10px) rotateY(1440deg) scale(1);} 100%{transform:translateY(2px) rotateY(2160deg) scale(.92);opacity:0;} }
  .coin-btn-wrap { display:flex; justify-content:center; }
  .note-close { position:absolute; top:4px; right:8px; background:transparent; border:none; cursor:pointer; color:var(--ink-soft); font-size:16px; line-height:1; padding:4px 6px; font-family:var(--serif); transition:color .15s ease; }
  .note-close:hover { color:var(--cinnabar); }
  .overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; animation:fadeIn .25s ease both; }
  .overlay[hidden] { display:none; }
  @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
  .overlay-oracle { z-index:999; background:rgba(var(--paper-rgb),0.96); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); flex-direction:column; gap:6px; cursor:pointer; }
  .overlay-oracle.closing { animation:fadeOut .35s ease both; }
  @keyframes fadeOut { from{opacity:1;} to{opacity:0;} }
  .oracle { position:relative; text-align:left; padding:32px 40px 28px; background:rgba(var(--paper-rgb),0.94); border:1px solid var(--line); border-radius:6px; box-shadow:0 24px 60px rgba(0,0,0,0.22); max-width:816px; width:94%; min-width:624px; min-height:780px; max-height:90vh; overflow-y:auto; }
  .oracle-cap { font-family:var(--kai); font-size:20px; letter-spacing:0.5em; color:var(--cinnabar); padding-left:.5em; text-align:center; }
  .oracle-coins { position:relative; height:0; margin:0; overflow:visible; pointer-events:none; }
  .coin { position:absolute; width:40px; height:40px; opacity:0; transform-origin:center; animation:coinToss 700ms cubic-bezier(.22,.61,.36,1) forwards; }
  .coin.c1 { left:calc(50% - 50px); top:30px; animation-delay:0ms; }
  .coin.c2 { left:50%; top:30px; transform:translateX(-50%); animation-delay:120ms; }
  .coin.c3 { left:calc(50% + 10px); top:30px; animation-delay:240ms; }
  @keyframes coinToss { 0%{opacity:0;transform:translateY(-90px) rotateY(0deg) scale(.5);} 25%{opacity:1;transform:translateY(-26px) rotateY(900deg) scale(1);} 60%{opacity:.9;transform:translateY(0) rotateY(1800deg) scale(1.05);} 78%{opacity:.8;transform:translateY(-4px) rotateY(1940deg) scale(1.02);} 100%{opacity:0;transform:translateY(20px) rotateY(2700deg) scale(.7);} }
  .oracle-yao-list { display:flex; flex-direction:column; gap:8px; margin:18px 0 6px; }
  .yao-line { padding:8px 12px; background:rgba(var(--paper-rgb),0.55); border:1px solid var(--line); border-radius:4px; opacity:0; transform:translateY(-6px); transition:opacity .35s ease, transform .35s ease; }
  .yao-line.in { opacity:1; transform:translateY(0); }
  .yao-line-head { display:flex; gap:10px; align-items:baseline; }
  .yao-pos { font-family:var(--kai); font-size:14px; color:var(--cinnabar); font-weight:600; min-width:38px; }
  .yao-text { flex:1; font-size:13.5px; color:var(--ink); line-height:1.6; }
  .yao-pct { font-family:var(--serif); font-size:13px; color:var(--jade); font-weight:600; min-width:42px; text-align:right; }
  .yao-line-body { display:flex; align-items:center; gap:10px; margin-top:5px; }
  .yao-bar { flex:0 0 80px; height:6px; background:rgba(29,29,31,0.10); border-radius:3px; overflow:hidden; }
  .yao-bar-fill { height:100%; background:var(--cinnabar); transition:width .5s ease; }
  .yao-fund { flex:1; font-size:11.5px; color:var(--ink-soft); line-height:1.5; }
  .oracle-foot { font-family:var(--kai); font-size:18px; letter-spacing:.5em; color:var(--ink-soft); margin-top:8px; padding-left:.5em; opacity:0; transition:opacity .35s ease; text-align:center; }
  .oracle-foot.in { opacity:1; }
  .oracle-result { position:relative; margin-top:20px; padding-top:18px; border-top:1px dashed var(--line); opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; }
  .oracle-result.in { opacity:1; transform:translateY(0); }
  .oracle-scenario { margin-top:16px; opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease; }
  .oracle-scenario.in { opacity:1; transform:translateY(0); }
  /* 文字淡入動畫 */
  .reveal { opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
  .reveal.show { opacity:1; transform:translateY(0); }
  .reveal:nth-child(1) { transition-delay: 0ms; }
  .reveal:nth-child(2) { transition-delay: 180ms; }
  .reveal:nth-child(3) { transition-delay: 360ms; }
  .reveal:nth-child(4) { transition-delay: 540ms; }
  .reveal:nth-child(5) { transition-delay: 720ms; }
  .result-head { display:flex; align-items:baseline; justify-content:center; gap:14px; margin-bottom:10px; flex-wrap:wrap; }
  .result-name { font-family:var(--kai); font-size:38px; letter-spacing:.3em; color:var(--cinnabar); text-shadow:0 2px 3px rgba(45,40,32,0.18); }
  .result-structure { font-size:13px; color:var(--ink-soft); letter-spacing:.1em; }
  .result-guaci { display:block; font-family:var(--serif); font-size:16px; letter-spacing:.05em; color:var(--ink); padding:8px 14px; border-left:3px solid var(--cinnabar); background:rgba(var(--paper-rgb),0.5); margin:6px 0 14px; line-height:1.7; text-align:left; }
  .result-section-title { font-family:var(--kai); font-size:13px; color:var(--ink-soft); letter-spacing:.3em; margin:14px 0 8px; }
  .result-fundamentals { list-style:none; padding:0; margin:0 0 6px; }
  .result-fundamentals li { font-size:13px; color:var(--ink); line-height:1.7; padding:2px 0 2px 16px; position:relative; }
  .result-fundamentals li::before { content:"·"; position:absolute; left:0; top:0; color:var(--cinnabar); font-weight:700; }
  /* .oracle-seal 已移除 */
  .md-toggle { display:inline-block; margin:14px auto 8px; font-family:var(--serif); font-size:12px; letter-spacing:.3em; padding:6px 18px; background:transparent; border:1px dashed var(--ink-soft); color:var(--ink-soft); cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
  .md-toggle:hover { background:rgba(168,50,58,0.08); color:var(--cinnabar); border-color:var(--cinnabar); }
  .md-toggle-block { text-align:center; }
  .oracle-md { text-align:left; padding:0 8px; margin:0; }
  .oracle-md[hidden] { display:none; }
  .scenario-list { display:flex; flex-direction:column; gap:10px; margin:8px 0 4px; }
  .scenario-item { background:rgba(var(--paper-rgb),0.6); border:1px solid var(--line); border-radius:4px; padding:10px 14px; }
  .scenario-head { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:4px; }
  .scenario-label { display:inline-block; min-width:22px; height:22px; line-height:22px; text-align:center; font-family:var(--kai); font-size:14px; font-weight:600; color:var(--paper); background:var(--cinnabar); border-radius:50%; padding:0 6px; }
  .scenario-name { flex:1; font-size:14px; color:var(--ink); font-weight:500; }
  .scenario-prob { font-size:13px; color:var(--ink); font-weight:600; }
  .scenario-combo { font-size:11px; color:var(--ink-soft); }
  .scenario-body { font-size:12.5px; color:var(--ink-soft); line-height:1.7; }
  .scenario-body > div { margin:1px 0; }
  .overall-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; margin:8px 0 4px; }
  .overall-card { background:rgba(var(--paper-rgb),0.6); border:1px solid var(--line); border-radius:4px; padding:8px 10px; }
  .overall-card.up { border-left:3px solid var(--jade); }
  .overall-card.flat { border-left:3px solid var(--gold); }
  .overall-card.down { border-left:3px solid var(--cinnabar); }
  .overall-head { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
  .overall-label { display:inline-block; min-width:18px; height:18px; line-height:18px; text-align:center; font-family:var(--kai); font-size:12px; font-weight:600; color:var(--paper); background:var(--ink); border-radius:50%; padding:0 5px; }
  .overall-cat { font-size:12px; color:var(--ink-soft); font-weight:500; }
  .overall-pct { font-size:18px; font-weight:600; color:var(--jade); margin:2px 0; }
  .overall-card.down .overall-pct { color:var(--cinnabar); }
  .overall-card.flat .overall-pct { color:var(--gold); }
  .overall-dir { font-size:11px; color:var(--ink-soft); margin-bottom:2px; }
  .overall-desc { font-size:11.5px; color:var(--ink-soft); line-height:1.5; }
  .oracle-result-hint { font-size:11px; color:var(--ink-soft); letter-spacing:.3em; opacity:.6; margin-top:6px; }
  /* 對卦辭的現代解讀 */
  .result-interpretation { font-size:13px; color:var(--ink-soft); line-height:1.7; margin-top:10px; padding:10px 14px; background:rgba(var(--paper-rgb),0.55); border-left:3px solid var(--gold); border-radius:0 4px 4px 0; }
  .result-interpretation .interp-label { display:inline-block; min-width:18px; height:18px; line-height:18px; text-align:center; font-family:var(--kai); font-size:12px; font-weight:600; color:var(--paper); background:var(--gold); border-radius:50%; padding:0 5px; margin-right:8px; vertical-align:middle; }
  /* 選中的 1 個 動爻 情景 */
  .picked-scenario { background:rgba(var(--paper-rgb),0.85); border:1px solid var(--cinnabar); border-radius:4px; padding:12px 16px; margin-top:6px; box-shadow:0 2px 8px rgba(168,50,58,0.10); }
  .picked-head { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
  .picked-scenario .scenario-label { display:inline-block; min-width:26px; height:26px; line-height:26px; text-align:center; font-family:var(--kai); font-size:16px; font-weight:600; color:var(--paper); background:var(--cinnabar); border-radius:50%; padding:0 8px; }
  .picked-scenario .scenario-name { flex:1; font-size:15.5px; color:var(--ink); font-weight:600; }
  .scenario-combo { flex:1; font-family:var(--kai); font-size:15px; color:var(--cinnabar); font-weight:600; }
  .picked-scenario .scenario-combo { font-family:var(--kai); font-size:16px; color:var(--cinnabar); font-weight:600; }
  .picked-body { font-size:13.5px; color:var(--ink); line-height:1.8; }
  .picked-body > div { margin:3px 0; }
  /* 方向爻尺（R3：以檔位替代百分比數字，避免誤讀為投資建議） */
  .trend-row { display:flex; align-items:center; gap:8px; }
  .trend-gauge { display:inline-flex; align-items:center; gap:8px; }
  .trend-gauge .tg-bars { display:inline-flex; gap:4px; }
  .trend-gauge .tg-bars i { width:16px; height:9px; border-radius:2px; background:rgba(29,29,31,0.14); }
  .trend-gauge .tg-bars i.on { background:var(--gold); }
  .trend-gauge.tg-pos .tg-bars i.on { background:var(--jade); }
  .trend-gauge.tg-neg .tg-bars i.on { background:var(--cinnabar); }
  .trend-gauge em { font-style:normal; font-family:var(--kai); font-size:14px; letter-spacing:.1em; color:var(--ink); }
  /* 變卦塊（v3：三爻動本卦+變卦共斷） */
  .picked-changing { margin-top:4px; padding:8px 10px; background:rgba(181,139,61,0.08); border-left:2px solid var(--gold); border-radius:2px; font-size:13.5px; color:var(--ink); line-height:1.7; }
  .picked-changing .chg-three { display:inline-block; margin-left:6px; font-style:normal; font-family:var(--kai); font-size:12px; color:var(--cinnabar); border:1px solid var(--cinnabar); border-radius:3px; padding:0 6px; letter-spacing:.08em; vertical-align:1px; }
  .picked-changing .chg-judgement { margin-top:3px; color:var(--ink-soft); }
  /* 我的卦史容量條（v4 主動記錄） */
  .rec-cap { font-family:var(--kai); font-size:13px; letter-spacing:.12em; color:var(--ink-soft); padding:8px 2px; border-bottom:1px solid rgba(181,139,61,0.35); margin-bottom:8px; }
  /* 得卦頁底部合規聲明 */
  .result-disclaimer { margin-top:14px; padding-top:10px; border-top:1px solid rgba(181,139,61,0.25); text-align:center; font-size:11.5px; letter-spacing:.05em; color:var(--ink-soft); line-height:1.6; }
  .colophon { text-align:center; margin-top:28px; font-size:11px; letter-spacing:.3em; color:var(--ink-soft); }
  .howto-entry { text-align:center; margin-top:18px; }
  .howto-entry .res-btn { display:inline-block; text-decoration:none; }

/* === 流動裝置適配 === */
@media (max-width: 640px) {
  .scroll { margin: 24px auto 40px; padding: 0 14px 40px; }
  .title-block h1 { font-size: 26px; }
  .sea { height: 260px; }
  .bottle { width: 52px; height: 94px; }
  .bottle:nth-child(1) { left: 6% !important; }
  .bottle:nth-child(3) { left: auto !important; right: 6%; }
  .note { width: 190px; }
  .oracle { padding: 22px 18px 20px; min-width: 0; min-height: 0; max-height: 92vh; }
  .result-name { font-size: 30px; }
}

  /* === 免責聲明閘門 === */
  .gate-overlay { position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(var(--paper-rgb),0.72); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:fadeIn .25s ease both; }
  .gate-overlay[hidden] { display:none; }
  .gate-overlay.closing { opacity:0; transition:opacity .3s ease; }
  .gate-card { max-width:430px; width:100%; background:rgba(var(--paper-rgb),0.98); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow-lg); padding:26px 26px 22px; text-align:center; font-family:var(--serif); }
  .gate-cap { font-family:var(--kai); font-size:18px; letter-spacing:.5em; padding-left:.5em; color:var(--cinnabar); margin-bottom:14px; }
  .gate-text { font-size:13.5px; line-height:1.9; color:var(--ink); margin:0 0 10px; text-align:left; }
  .gate-text.soft { font-size:12.5px; color:var(--ink-soft); text-align:center; margin-bottom:0; }
  .gate-text a, .gate-declined a { color:var(--cinnabar); text-decoration:underline; text-underline-offset:3px; }
  .gate-actions { display:flex; gap:12px; justify-content:center; margin-top:16px; }
  .gate-accept { font-family:var(--kai); font-size:14px; letter-spacing:.2em; padding:9px 22px; color:#f4f8f2; background:linear-gradient(160deg, #628f65, var(--jade) 52%, #3d5c40); border:1px solid #38523b; border-radius:4px; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 10px rgba(210,235,210,0.14), 0 2px 6px rgba(45,40,32,0.18); transition:box-shadow .2s ease, transform .15s ease, filter .2s ease; }
  .gate-accept:hover { transform:translateY(-1px); filter:brightness(1.06); box-shadow:inset 0 1px 0 rgba(255,255,255,0.32), inset 0 0 12px rgba(210,235,210,0.18), 0 4px 10px rgba(45,40,32,0.22); }
  .gate-decline { font-family:var(--serif); font-size:12.5px; letter-spacing:.1em; padding:9px 16px; color:var(--ink-soft); background:transparent; border:1px dashed var(--ink-soft); border-radius:4px; cursor:pointer; transition:color .2s ease, border-color .2s ease; }
  .gate-decline:hover { color:var(--cinnabar); border-color:var(--cinnabar); }
  .gate-declined { margin-top:14px; font-size:12px; color:var(--cinnabar-deep); line-height:1.8; }
  .oracle-result-hint.error { color:var(--cinnabar); }

  /* ==================== 氛圍動效層（P2） ==================== */

  /* 水紋漣漪：點瓶後瓶底雙圈擴散 */
  .bottle.open::before,
  .bottle.open::after {
    content:"";
    position:absolute;
    left:50%;
    bottom:12%;
    width:92px;
    height:24px;
    margin-left:-46px;
    border:2px solid rgba(255,255,255,0.7);
    box-shadow:0 0 8px rgba(255,255,255,0.25), inset 0 0 6px rgba(255,255,255,0.2);
    border-radius:50%;
    opacity:0;
    transform:scale(.4);
    pointer-events:none;
  }
  .bottle.open::before { animation:tapRipple .9s ease-out .05s; }
  .bottle.open::after  { animation:tapRipple .9s ease-out .35s; }
  @keyframes tapRipple {
    0%   { opacity:.9;  transform:scale(.35); }
    100% { opacity:0;   transform:scale(2); }
  }

  /* 墨跡落定：卦名如毛筆落墨，由左至右顯形後定住 */
  .oracle-result .result-name {
    -webkit-mask-image:linear-gradient(100deg,#000 42%,rgba(0,0,0,0) 55%);
            mask-image:linear-gradient(100deg,#000 42%,rgba(0,0,0,0) 55%);
    -webkit-mask-size:250% 100%;
            mask-size:250% 100%;
    -webkit-mask-repeat:no-repeat;
            mask-repeat:no-repeat;
    animation:inkReveal 1.2s ease-out .1s both;
  }
  @keyframes inkReveal {
    from { -webkit-mask-position:100% 0; mask-position:100% 0; filter:blur(3px); }
    62%  { filter:blur(1px); }
    to   { -webkit-mask-position:0% 0; mask-position:0% 0; filter:blur(0); }
  }

  /* 卦卡展開：宣紙揭開（微縮放 + 暈開） */
  .oracle-result.in {
    animation:paperOpen .6s ease-out both;
  }
  @keyframes paperOpen {
    from { opacity:0; transform:translateY(8px) scale(.98); filter:blur(2px); }
    60%  { filter:blur(0); }
    to   { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
  }

  /* 青煙/香霧：起卦 overlay 背景極淡青煙緩升（循環） */
  .overlay-oracle { overflow:hidden; }
  .overlay-oracle::before,
  .overlay-oracle::after {
    content:"";
    position:absolute;
    left:-20%;
    right:-20%;
    bottom:-30%;
    height:80%;
    pointer-events:none;
    background:
      radial-gradient(300px 180px at 28% 92%, rgba(79,122,82,0.10), transparent 70%),
      radial-gradient(380px 220px at 68% 96%, rgba(79,122,82,0.08), transparent 70%),
      radial-gradient(260px 160px at 50% 100%, rgba(181,139,61,0.07), transparent 70%);
    filter:blur(6px);
  }
  .overlay-oracle::before { animation:incense 11s ease-in-out infinite; }
  .overlay-oracle::after  { animation:incense 14s ease-in-out 5s infinite reverse; }
  @keyframes incense {
    0%   { transform:translateY(4%) translateX(0); opacity:.55; }
    50%  { transform:translateY(-7%) translateX(2.5%); opacity:.8; }
    100% { transform:translateY(4%) translateX(0); opacity:.55; }
  }

  /* 金塵粒子：海面上方金色微光浮動（6 粒，隨機相位；B2 §C 增強可見度） */
  .gold-dust { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
  .gold-dust span {
    position:absolute;
    width:6px; height:6px;
    border-radius:50%;
    background:radial-gradient(circle, #ffe9a8, rgba(224,180,88,0.85) 55%, rgba(181,139,61,0) 78%);
    box-shadow:0 0 12px rgba(240,208,130,0.85), 0 0 3px rgba(255,240,190,0.95);
    opacity:0;
    animation:dustFloat 9s linear infinite;
  }
  .gold-dust span:nth-child(1) { left:7%;  bottom:18%; animation-duration:8.5s; animation-delay:0s; }
  .gold-dust span:nth-child(2) { left:19%; bottom:10%; width:3.5px; height:3.5px; animation-duration:10.5s; animation-delay:1.6s; }
  .gold-dust span:nth-child(3) { left:31%; bottom:24%; animation-duration:7.8s; animation-delay:3.1s; }
  .gold-dust span:nth-child(4) { left:45%; bottom:8%;  width:4.5px; height:4.5px; animation-duration:11s; animation-delay:0.8s; }
  .gold-dust span:nth-child(5) { left:57%; bottom:20%; animation-duration:9.2s; animation-delay:4.4s; }
  .gold-dust span:nth-child(6) { left:68%; bottom:12%; width:3.5px; height:3.5px; animation-duration:8.1s; animation-delay:2.2s; }
  .gold-dust span:nth-child(7) { left:80%; bottom:26%; animation-duration:10s; animation-delay:5.3s; }
  .gold-dust span:nth-child(8) { left:92%; bottom:15%; width:4.5px; height:4.5px; animation-duration:8.8s; animation-delay:3.7s; }
  @keyframes dustFloat {
    0%   { transform:translate(0,0) rotate(0deg); opacity:0; }
    8%   { opacity:.95; }
    60%  { opacity:.55; }
    100% { transform:translate(16px,-175px) rotate(50deg); opacity:0; }
  }

  /* === step2：重刷 + 查這隻股 === */
  .refill-area { text-align:center; margin-top:18px; min-height:52px; }
  .refill-btn { font-family:var(--kai); font-size:15px; letter-spacing:.25em; padding:11px 34px; color:#f4f8f2;
    background:linear-gradient(160deg,#628f65,var(--jade) 52%,#3d5c40); border:1px solid #38523b; border-radius:4px; cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 10px rgba(210,235,210,0.14), 0 2px 6px rgba(45,40,32,0.18);
    transition:filter .2s ease, transform .15s ease; }
  .refill-btn:hover { filter:brightness(1.06); transform:translateY(-1px); }
  .refill-msg { font-size:13px; color:var(--ink-soft); letter-spacing:.05em; }
  .refill-msg a { color:var(--jade); text-decoration:underline; text-underline-offset:3px; }
  .result-cta { text-align:center; margin:10px 0 2px; }
  .result-cta a { display:inline-block; font-family:var(--kai); font-size:13.5px; letter-spacing:.15em; color:var(--jade); border-bottom:1px dashed var(--jade); padding-bottom:1px; }
  .result-cta a:hover { color:#3d5c40; }
  .bottle.spawn { animation:bottleIn .7s ease both; }
  @keyframes bottleIn { from { opacity:0; transform:translateY(24px) rotate(var(--tilt,0deg)); } to { opacity:1; transform:translateY(0) rotate(var(--tilt,0deg)); } }

  /* === 配額用完/抽卦失敗醒目錯誤卡 === */
  .oracle-error { text-align:center; padding:60px 30px 30px; }
  .oracle-error .oe-icon { font-size:44px; color:var(--gold); margin-bottom:14px; }
  .oracle-error .oe-msg { font-family:var(--kai); font-size:19px; color:var(--ink); letter-spacing:.1em; line-height:1.9; margin-bottom:22px; }
  .oracle-error .oe-cta { display:inline-block; font-family:var(--kai); font-size:14px; letter-spacing:.15em; padding:10px 26px;
    color:#f4f8f2; background:linear-gradient(160deg,#628f65,var(--jade) 52%,#3d5c40); border:1px solid #38523b; border-radius:4px;
    text-decoration:none; transition:filter .2s ease; }
  .oracle-error .oe-cta:hover { filter:brightness(1.08); }

  /* === 配額用盡：瓶卡提示（不出擲錢按鈕） === */
  .note-exhaust { font-size:12px; line-height:1.8; color:var(--ink-soft); padding:4px 0 8px; }
  .note-exhaust a { color:var(--jade); text-decoration:underline; text-underline-offset:3px; }

  /* === 測試期臨時：重置配額按鈕（上線前刪除） === */
  .quota-reset { position:fixed; left:14px; bottom:14px; z-index:400; font-family:var(--kai); font-size:15px; letter-spacing:.1em;
    padding:8px 14px; color:var(--ink-soft); background:rgba(var(--paper-rgb),0.7); border:1px dashed var(--line); border-radius:4px; cursor:pointer; opacity:.65; transition:opacity .15s ease; }
  .quota-reset:hover { opacity:1; color:var(--cinnabar); border-color:var(--cinnabar); }

  /* === Monetag 展示廣告位（banner / 頁內）佔位：防佈局跳 + adblock 留空 === */
  .ad-slot { width:100%; min-height:90px; margin:18px 0; display:flex; justify-content:center; align-items:center; background:rgba(var(--paper-rgb),0.4); border:1px dashed var(--line); border-radius:4px; overflow:hidden; }
  .ad-slot:empty::after { content:"廣告"; color:var(--ink-soft); font-size:11px; letter-spacing:.2em; opacity:.5; }