/* 靜月之光 · 立體層次與交接導引 / 20261021depth29
 * 只加一層：不覆寫各房間的版面、顏色變數與既有動畫，只補「按下去有深度、卡片有厚度、步驟有層次」。
 * 全部位移類效果都受 prefers-reduced-motion 保護；hover 只在真的有滑鼠的裝置啟用。 */

:root{
  --jy-depth-gold:#e4c994;
  --jy-depth-gold-soft:#c9a84c;
  --jy-depth-ink:#050a11;
  --jy-depth-rim:#ffebcb2e;
  --jy-depth-ease:cubic-bezier(.2,.8,.2,1);
}

/* ── 探索之門：有厚度的卡，按下去會往桌面沉 ── */
.jy-atelier .at-tool{
  transform-style:preserve-3d;
  transition:transform .32s var(--jy-depth-ease),box-shadow .32s var(--jy-depth-ease),border-color .32s;
  will-change:transform;
}
.jy-atelier .at-tool::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(118deg,#fff0 30%,#ffffff12 48%,#fff0 60%);
  opacity:0;transition:opacity .35s;
}
.jy-atelier .at-tool .at-art{transition:transform .4s var(--jy-depth-ease);transform:translateZ(14px)}
/* 20261023：工具名稱不再放到 3D 深度層。Android Chrome 在 preserve-3d 容器裡，文字層夾在 art(z=14) 與底層之間時會被整層吃掉，首頁 03 以後的卡片名稱因此消失；文字留在基準面，深度只給圖。 */
.jy-atelier .at-tool strong{transform:none;position:relative;z-index:2;display:block}
.jy-atelier .at-tool .at-tool-arrow{transition:transform .3s var(--jy-depth-ease),background .3s,color .3s}
.jy-atelier .at-tool:active{
  transform:translateY(3px) scale(.985);
  box-shadow:0 2px 0 var(--jy-depth-ink),0 3px 0 #7c6c513d,0 8px 14px #0005,inset 0 1px 0 var(--jy-depth-rim);
}
@media (hover:hover){
  .jy-atelier .at-tool:hover{transform:translateY(-4px) rotateX(2.5deg);border-color:#e8d2a86a;
    box-shadow:0 10px 0 var(--jy-depth-ink),0 11px 0 #7c6c514a,0 30px 40px #0006,0 0 0 1px #ffe8bd14,inset 0 1px 0 #ffebcb48}
  .jy-atelier .at-tool:hover::after{opacity:1}
  .jy-atelier .at-tool:hover .at-art{transform:translateZ(22px) scale(1.04)}
  .jy-atelier .at-tool:hover .at-tool-arrow{transform:translate(2px,-2px);background:#e4c99420;color:#fff}
}

/* ── 主按鈕：金色實心鍵帽，按下去真的會沉 ── */
.jy-atelier :is(.at-primary,.btn-primary,.btn-gold,.btn-cta-pulse,.ln-ai-copy-btn,.mhx-ai-copy-btn,.bzx-ai-copy-btn,.orc-ai-copy-btn,.at-dock-action,#tarot-dock-action,.jy-flow-next,[data-flow-next]){
  position:relative;isolation:isolate;
  transition:transform .18s var(--jy-depth-ease),box-shadow .18s var(--jy-depth-ease),filter .18s;
}
.jy-atelier :is(.at-primary,.btn-primary,.btn-gold,.btn-cta-pulse,.ln-ai-copy-btn,.mhx-ai-copy-btn,.bzx-ai-copy-btn,.orc-ai-copy-btn,#tarot-dock-action):active{
  transform:translateY(3px) scale(.99)!important;
  box-shadow:inset 0 1px 0 #fff8,0 1px 0 #766044,0 4px 10px #d2a96722!important;
  filter:saturate(1.08);
}
.jy-atelier :is(.at-primary,.btn-primary,.btn-gold,.ln-ai-copy-btn,.mhx-ai-copy-btn,.bzx-ai-copy-btn,.orc-ai-copy-btn)::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,#fff0 35%,#ffffff33 50%,#fff0 65%);
  background-size:220% 100%;background-position:120% 0;opacity:0;transition:opacity .3s;
}
@media (hover:hover){
  .jy-atelier :is(.at-primary,.btn-primary,.btn-gold,.ln-ai-copy-btn,.mhx-ai-copy-btn,.bzx-ai-copy-btn,.orc-ai-copy-btn):hover::after{
    opacity:1;animation:jy-depth-sheen 1.1s var(--jy-depth-ease) forwards;
  }
}
@keyframes jy-depth-sheen{from{background-position:120% 0}to{background-position:-20% 0}}

/* ── 次要／選項按鈕：薄浮雕，被選中時往內亮 ── */
.jy-atelier :is(.ln-spread-btn,.mhx-method-btn,.bzx-gbtn,.bzx-dbtn,.zw-in-pill,.bzs-chip,.bzs-choice-btn,.bzs-tab,.radio-pill,.btn-outline,.dim-tab,.result-tab,.at-quick button){
  transition:transform .16s var(--jy-depth-ease),box-shadow .16s,background .2s,border-color .2s;
  box-shadow:0 2px 0 #0007,inset 0 1px 0 #ffffff10;
}
.jy-atelier :is(.ln-spread-btn,.mhx-method-btn,.bzx-gbtn,.bzx-dbtn,.zw-in-pill,.bzs-chip,.bzs-choice-btn,.bzs-tab,.radio-pill,.btn-outline,.dim-tab,.result-tab,.at-quick button):active{
  transform:translateY(2px);box-shadow:0 0 0 #0007,inset 0 2px 4px #0006;
}
.jy-atelier :is(.ln-spread-btn,.mhx-method-btn,.bzx-gbtn,.bzx-dbtn,.zw-in-pill,.bzs-chip,.bzs-choice-btn,.bzs-tab,.radio-pill,.dim-tab,.result-tab):is(.active,.on,.selected,.sel,[aria-pressed=true],[aria-selected=true]){
  box-shadow:inset 0 0 0 1px #e4c99466,inset 0 -2px 0 #e4c99433,0 0 18px #c9a84c2a,0 2px 0 #0007;
}

/* ── AI 捷徑：像一排可以按下去的鍵 ── */
.jy-atelier :is(.bzx-ai-sc,.ln-ai-sc,.mhx-ai-sc,.zw-ai-sc,.orc-ai-shortcut,.jy-ai-shortcut,.bzs-ai a,[data-action=ai]){
  transition:transform .16s var(--jy-depth-ease),box-shadow .16s,border-color .2s;
  box-shadow:0 3px 0 #050d18,0 6px 12px #0004,inset 0 1px 0 #ffffff14!important;
}
.jy-atelier :is(.bzx-ai-sc,.ln-ai-sc,.mhx-ai-sc,.zw-ai-sc,.orc-ai-shortcut,.jy-ai-shortcut,.bzs-ai a,[data-action=ai]) img{transition:transform .25s var(--jy-depth-ease);filter:drop-shadow(0 3px 4px #0008)}
.jy-atelier :is(.bzx-ai-sc,.ln-ai-sc,.mhx-ai-sc,.zw-ai-sc,.orc-ai-shortcut,.jy-ai-shortcut,.bzs-ai a,[data-action=ai]):active{transform:translateY(3px);box-shadow:0 0 0 #050d18,inset 0 2px 5px #0007!important}
@media (hover:hover){
  .jy-atelier :is(.bzx-ai-sc,.ln-ai-sc,.mhx-ai-sc,.zw-ai-sc,.orc-ai-shortcut,.jy-ai-shortcut,.bzs-ai a,[data-action=ai]):hover{transform:translateY(-2px);border-color:#e4c99466!important;box-shadow:0 5px 0 #050d18,0 12px 20px #0005,inset 0 1px 0 #ffffff1c!important}
  .jy-atelier :is(.bzx-ai-sc,.ln-ai-sc,.mhx-ai-sc,.zw-ai-sc,.orc-ai-shortcut,.jy-ai-shortcut,.bzs-ai a,[data-action=ai]):hover img{transform:translateY(-2px) scale(1.08)}
}

/* ── 牌卡：有厚度、翻開時輕微立體傾斜，點選時沉下 ── */
.jy-atelier :is(.ln-card,.tarot-deck-card,.at-recent-face,.ootk-card,.jy-card-face){transform-style:preserve-3d;backface-visibility:hidden}
.jy-atelier .ln-card{transition:transform .22s var(--jy-depth-ease),box-shadow .22s,border-color .22s}
.jy-atelier .ln-card:active{transform:translateY(2px) scale(.985);box-shadow:0 2px 0 #050d18,0 5px 10px #0005,inset 0 1px 0 #fff2!important}
.jy-atelier .ln-card .ln-card-img{box-shadow:0 1px 0 #fff2,0 6px 14px #0007;transition:transform .3s var(--jy-depth-ease)}
@media (hover:hover){
  .jy-atelier .ln-card:hover{transform:translateY(-4px) rotateX(3deg);border-color:#e4c99466!important;box-shadow:0 9px 0 #050d18,0 18px 28px #0006,0 0 22px #c9a84c22,inset 0 1px 0 #fff2!important}
  .jy-atelier .ln-card:hover .ln-card-img{transform:translateZ(10px)}
}
.jy-atelier .ln-spread-board{perspective:900px}
.jy-atelier .at-card-position{text-shadow:0 1px 0 #000a}

/* ── 步驟導引：目前步驟像浮起來的印章 ── */
.jy-atelier .at-flow-guide span{transition:transform .25s var(--jy-depth-ease),color .25s}
.jy-atelier .at-flow-guide span[aria-current=step],.jy-atelier .at-flow-guide span.is-current{color:#fff;transform:translateY(-1px)}
.jy-atelier .at-flow-guide b{box-shadow:0 1px 0 #000}
.jy-atelier :is(.jy-flow-steps,.at-flow-steps) button[aria-current=step]{box-shadow:0 4px 0 #050a11,0 10px 18px #0005,inset 0 1px 0 #ffebcb40,0 0 0 1px #e4c99455}

/* ── 玻璃卡片的邊光：讓區塊之間有前後距離 ── */
.jy-atelier :is(.bzx-section,.ln-section,.mhx-section,.zw-in-sec,.bzs-card,.card,.ln-ai-card,.mhx-ai-card,.bzx-ai-card){
  box-shadow:0 1px 0 #ffffff0d inset,0 -1px 0 #0006 inset,0 14px 30px -12px #000b;
}
.jy-atelier :is(.ln-ai-card,.mhx-ai-card,.bzx-ai-card){
  background-image:radial-gradient(ellipse at 20% 0%,#c9a84c1a,transparent 55%);
}

/* ── 鍵盤／輔助焦點：所有可按元件統一金色描邊 ── */
.jy-atelier :is(button,a,[role=button],summary,input,select,textarea):focus-visible{
  outline:2px solid #e4c994;outline-offset:2px;box-shadow:0 0 0 5px #c9a84c33;
}

/* ── 交接導引：複製成功後的底部卡 ── */
.jy-handoff{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center;
  padding:0 0 env(safe-area-inset-bottom,0);background:#02060dcc;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .25s var(--jy-depth-ease)}
.jy-handoff.is-open{opacity:1}
.jy-handoff-sheet{box-sizing:border-box;width:min(560px,100%);max-height:88dvh;overflow:auto;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0));
  border:1px solid #e4c99455;border-bottom:0;border-radius:22px 22px 0 0;color:#e8e2d5;
  background:linear-gradient(170deg,#1b2a40,#0e1726 70%,#0a1220);
  box-shadow:0 -1px 0 #ffebcb30 inset,0 -24px 60px #0009,0 0 0 1px #ffe8bd10;
  font:15px/1.65 var(--f-body,"Noto Sans TC",sans-serif);
  transform:translateY(24px);transition:transform .3s var(--jy-depth-ease)}
.jy-handoff.is-open .jy-handoff-sheet{transform:none}
@media (min-width:640px){.jy-handoff{align-items:center;padding:16px}.jy-handoff-sheet{border-radius:22px;border-bottom:1px solid #e4c99455;transform:translateY(12px) scale(.98)}}
.jy-handoff-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.jy-handoff-head b{display:block;font:600 1.05rem/1.4 var(--f-display,"Noto Serif TC",serif);color:#f3e6c9}
.jy-handoff-head small{display:block;color:#a9b6c8;font-size:.86rem;margin-top:2px}
.jy-handoff-check{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;color:#1c160c;font-weight:700;
  background:linear-gradient(135deg,#f9e7c3,#cfac6c);box-shadow:0 3px 0 #766044,0 8px 16px #d2a96744,inset 0 1px 0 #fffc}
.jy-handoff-close{margin-left:auto;flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid #ffffff22;background:#ffffff0a;color:#d4dfed;font-size:14px;cursor:pointer}
.jy-handoff-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.jy-handoff-steps li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;border:1px solid #ffffff12;background:#ffffff07;
  box-shadow:0 2px 0 #050a11,inset 0 1px 0 #ffffff10}
.jy-handoff-steps li i{display:grid;place-items:center;flex-shrink:0;width:26px;height:26px;border-radius:50%;font:600 13px/1 var(--f-body,sans-serif);font-style:normal;color:#1c160c;
  background:linear-gradient(135deg,#f3dfb5,#c9a84c);box-shadow:0 2px 0 #5d4a2c,inset 0 1px 0 #fffb}
.jy-handoff-steps li b{display:block;color:#f3e6c9;font-weight:600;font-size:.98rem}
.jy-handoff-steps li span{display:block;color:#b7c3d4;font-size:.88rem;margin-top:2px}
.jy-handoff-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.jy-handoff-mute{display:inline-flex;align-items:center;gap:8px;color:#9fb0c6;font-size:.84rem;cursor:pointer}
.jy-handoff-mute input{accent-color:#c9a84c;width:16px;height:16px}
.jy-handoff-ok{margin-left:auto;min-width:132px;min-height:46px;padding:10px 22px;border:1px solid #ffe8bdc9;border-radius:12px;color:#282319;
  background:linear-gradient(115deg,#f9e7c3 0%,#ddbb7e 78%,#cfac6c 100%);font:600 .98rem/1 var(--f-body,sans-serif);cursor:pointer;
  box-shadow:inset 0 1px 0 #fffc,0 4px 0 #766044,0 12px 26px #d2a96722;transition:transform .16s var(--jy-depth-ease),box-shadow .16s}
.jy-handoff-ok:active{transform:translateY(3px);box-shadow:inset 0 1px 0 #fffc,0 1px 0 #766044,0 4px 10px #d2a96722}

/* ── 動態減量：所有位移與光掃都關掉，深度只留陰影 ── */
@media (prefers-reduced-motion:reduce){
  .jy-atelier .at-tool,.jy-atelier .at-tool .at-art,.jy-atelier .ln-card,.jy-atelier .ln-card .ln-card-img,
  .jy-handoff,.jy-handoff-sheet,.jy-handoff-ok,
  .jy-atelier :is(.at-primary,.btn-primary,.btn-gold,.btn-cta-pulse,.ln-ai-copy-btn,.mhx-ai-copy-btn,.bzx-ai-copy-btn,.orc-ai-copy-btn,.ln-spread-btn,.mhx-method-btn,.bzx-gbtn,.bzx-dbtn,.zw-in-pill,.bzs-chip,.bzs-choice-btn,.bzs-tab,.radio-pill,.btn-outline,.bzx-ai-sc,.ln-ai-sc,.mhx-ai-sc,.zw-ai-sc,.orc-ai-shortcut,.jy-ai-shortcut){
    transition:none!important;animation:none!important;transform:none!important;
  }
  .jy-handoff{opacity:1}
}

/* ════════ 最終權威層 · 可讀性與狀態一致（20261021 走查） ════════
 * 根因：同一元件被 atelier-ui → flow-refinement → reading-depth → immersive-experience 多層 !important 疊寫，
 * 底色與字色分別來自不同年代的設計，於是出現「深字印在深底」。這裡把每個受影響元件的「底＋字」一次定案，
 * 之後任何舊層都無法只改其中一半。 */

/* 1. 共用步驟條（雷諾曼、八字、合盤、紫微、梅花）：目前步驟的數字圈 */
.jy-atelier .jc-flow-steps button b{
  display:grid!important;place-items:center;width:30px!important;height:30px!important;margin:0 auto 6px!important;
  border-radius:50%!important;border:1px solid #c5b38c55!important;background:#132735!important;color:#d9ccb0!important;
  font:600 12px/1 var(--f-body,sans-serif)!important;letter-spacing:.5px!important;box-shadow:inset 0 1px 0 #ffffff10!important;
  transition:transform .25s var(--jy-depth-ease),background .25s,color .25s;
}
.jy-atelier .jc-flow-steps button[aria-current=step] b{
  background:linear-gradient(135deg,#f6e6c3,#d2ad6c)!important;color:#1d1810!important;border-color:#f6e2bb!important;
  box-shadow:0 3px 0 #6b5434,0 6px 16px #d2ad6c44,inset 0 1px 0 #fffc!important;transform:translateY(-1px);
}
.jy-atelier .jc-flow-steps button[aria-current=step] span{color:#f3e3c2!important}
.jy-atelier .jc-flow-steps button:not([aria-current=step]) span{color:#aebdcb!important}

/* 2. 選中狀態一律「深色發光底＋淺字」，說明小字跟著變淺（原本 #484438 鎖死 → 選中後消失） */
.jy-atelier :is(.ln-spread-btn,.mhx-method-btn).active :is(span,small),
.jy-atelier :is(.bzs-choice-btn,.bzx-gbtn,.zw-in-pill).on :is(span,small){color:#eadcbf!important;opacity:.92!important}

/* 3. 六爻／易經：歷次手機修補把字縮到 .5–.6rem（8–9.6px），設可讀下限 */
.gw-room .gw-eyebrow,.gw-room[data-phase] .gw-eyebrow,.gw-room .gw-hex-card .gw-eyebrow{font-size:max(10.5px,.67rem)!important;letter-spacing:.14em}
.gw-room .gw-footer{font-size:max(10.5px,.66rem)!important}
.gw-room .gw-stage-heading,.gw-room[data-phase] .gw-stage-heading{font-size:max(12px,.8rem)!important}
.gw-room .gw-scene-instruction,.gw-room[data-phase] .gw-scene-instruction{font-size:max(12px,.75rem)!important;color:#c9d6d6!important}
.gw-room[data-phase] .gw-stage-summary,.gw-room[data-phase] .gw-progress-row>span:last-child{font-size:max(12px,.75rem)!important}
.gw-room[data-phase=casting] .gw-actions .gw-primary{font-size:max(14px,.875rem)!important}
.gw-room[data-phase=casting] .gw-actions .gw-quiet{font-size:max(13px,.8rem)!important}
.gw-room .gw-steps b{font-size:12px!important}
.gw-room :is(.gw-line-label,.gw-line-state,.gw-legend,.gw-legend *,.gw-yarrow-step,.gw-yarrow-step *){font-size:max(11.5px,1em)}
.gw-room .gw-room-ai :is(a,button) :is(span,b,small),.gw-room [data-ai] :is(span,b,small){font-size:max(12px,1em)}
.jy-foley-button{font-size:max(12px,.8rem)!important}

/* 4. 牌名、AI 捷徑名稱 */
.jy-atelier .ln-card-name{font-size:11.5px!important;line-height:1.35}
.jy-atelier :is(.ln-ai-sc,.mhx-ai-sc,.bzx-ai-sc,.zw-ai-sc,.orc-ai-shortcut,.jy-ai-shortcut) :is(span,b,small,div){font-size:max(12px,1em)}
/* 3b. 擲錢逐爻進度、揲蓍側欄說明（原 8.8–10.4px） */
.gw-room .gw-progress-row>span,.gw-room[data-phase=casting] .gw-progress-row>span:last-child{font-size:max(12px,.75rem)!important;line-height:1.45}
.gw-room .gw-yarrow-action :is(p,span),.gw-room .gw-yarrow-progress span{font-size:max(12px,.75rem)!important;line-height:1.5}
.gw-room .gw-yarrow-progress span.is-current{color:#f3dfb4!important}
/* 4b. 牌位標籤、牌名、儀式進度字：舊層用更高權重鎖在 9–10px */
body.jy-atelier .at-card-position,body.jy-atelier [class*=spread] .at-card-position{font-size:11.5px!important;letter-spacing:.04em}
body.jy-atelier .ln-card .ln-card-name,body.jy-atelier [class*=ln-] .ln-card-name{font-size:11.5px!important}
body.jy-atelier .jr-progress :is(span,li,b),body.jy-atelier [class*=jr-] .is-current{font-size:max(11.5px,1em)!important}
/* 5. 合盤提示框：膠囊圓角＋left:50% 無寬度，長訊息被擠成一顆球蓋住按鈕 */
.bzs-toast{width:max-content!important;max-width:min(92vw,520px)!important;box-sizing:border-box;border-radius:14px!important;
  padding:12px 16px!important;font-size:14px!important;line-height:1.6!important;text-align:left;
  bottom:calc(24px + env(safe-area-inset-bottom,0px))!important;box-shadow:0 12px 30px #0008}
/* 6. 西洋／姓名／六壬：按鈕與內容文字 9–10px（走查 walk33） */
body.jy-atelier :is(.wx-quiet,.lr-secondary,.lr-replay){font-size:max(13px,.85rem)!important;min-height:40px;padding-left:14px;padding-right:14px}
body.jy-atelier :is(#wx-ceremony-label,[class*=wx-ceremony] .on,[class*=wx-ceremony] span){font-size:max(11.5px,1em)!important}
body.jy-atelier #wx-city-zone{font-size:12px!important}
body.jy-atelier #western-page details>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
body.jy-atelier :is(.nm-char-data,.nm-formula,.nm-await){font-size:max(12px,.8rem)!important;line-height:1.55}
body.jy-atelier #lr-status .lr-status,body.jy-atelier #lr-scene-label{font-size:max(12px,.8rem)!important}
/* 7. 靈籤三次未允杯後的次要出口 */
.orc-tc-alt{display:block;margin:12px auto 0;min-height:46px;padding:10px 20px;border-radius:12px;border:1px solid #e4c99455;background:#ffffff0c;color:#efe2c4;font:500 15px/1.4 var(--f-body,sans-serif);cursor:pointer;box-shadow:0 3px 0 #0007,inset 0 1px 0 #ffffff14;transition:transform .16s,box-shadow .16s}
.orc-tc-alt:active{transform:translateY(2px);box-shadow:inset 0 2px 4px #0007}
.orc-tc-alt-note{margin:8px auto 0;text-align:center;font-size:13px;color:#c7cdd6;opacity:.9}
/* 8. 六壬欄位白話說明 */
.lr-field-hint{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:#b9c6c9}