/* 藥師問事 素面樣式（頁面實作批 2 派工單 D10）。無字型載入、無外部資源；圖片只有同源 /art/*.webp（首頁與彈窗 2026-11-05 R-20；佛堂、筊杯、結果鈕字 R-22；見檔末）。
   色標色值為指揮官擬（取審閱稿 p15 文字：輕＝青藍淺、中＝金、重＝紅細邊），Codex 定案後換。 */

:root {
  --sev-light: #cfe8f3;
  --sev-mid: #e6c35a;
  --sev-heavy: #744536;
  --ink: #43342d;
  --muted: #635246;
  --line: #ddd;
  --accent: #324c56;
  --gold: #b8912f;
  --trail: #c9d6ea; /* 跑格軌跡淡色（指揮官擬，Codex 定案後換） */
  --warn: #744536;
  --home-meadow: #465744;
  --shrine-floor: #9d3d33;
}

* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
@media (min-width: 768px) { html { font-size: 112%; } }
body { margin: 0; color: var(--ink); background: #f7ecd7; font-family: system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; line-height: 1.7; }
body:has(.home:not([hidden])) { background-color: var(--home-meadow); }
body:has(.chant:not([hidden])) { background-color: var(--shrine-floor); }
.app { max-width: 430px; margin: 0 auto; padding: 1.25rem 1rem 2.5rem; }
[hidden] { display: none !important; }
[data-t] { white-space: pre-line; }

h1, h2, h3 { line-height: 1.4; }
.title { font-size: 1.6rem; text-align: center; margin: .5rem 0; }
.subtitle { text-align: center; color: var(--muted); }

.rules { border: 2px solid var(--warn); border-radius: 8px; padding: .75rem 1rem; margin: 1rem 0; background: #fff; }
.rules-title { font-size: 1.1rem; margin: 0 0 .5rem; color: var(--warn); }
.rule { margin: .4rem 0; }
.tag { display: inline-block; background: var(--warn); color: #fff; font-size: .85rem; padding: 0 .4rem; border-radius: 4px; margin-right: .4rem; }
.medical { font-size: .9rem; color: var(--muted); }
.scroll-hint { text-align: center; color: var(--muted); font-size: .9rem; }
.background { margin: 1rem 0; }
.bg-part { background: #fff; border-left: 4px solid var(--accent); padding: .5rem .75rem; }

.btn { display: block; width: 100%; margin: 1rem 0; padding: .8rem 1rem; font: inherit; font-size: 1.05rem; border: 1px solid var(--accent); border-radius: 8px; background: #fff; color: var(--accent); text-align: center; text-decoration: none; cursor: pointer; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.small { display: inline-block; width: auto; margin: .25rem 0 0; padding: .3rem .8rem; font-size: .9rem; }

.name { font-size: 1.4rem; text-align: center; letter-spacing: .1em; margin: 1rem 0; }
.beads { display: flex; justify-content: center; gap: .6rem; margin: 1rem 0 .25rem; }
.bead { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--gold); background: #fff; }
.bead.on { background: var(--gold); }
.count { text-align: center; }

.cast-name { font-size: 1.6rem; text-align: center; margin: 1rem 0; }

.ask-list { padding-left: 1.5rem; }
.ask-list li { margin: .4rem 0; }
.ask-list li::marker { color: var(--accent); font-weight: bold; }
.ask-list li.gold::marker { color: var(--gold); }
.example { background: #f1f4f8; border-radius: 6px; padding: .75rem; }

.digits { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin: .5rem 0; }
.digit { font: inherit; padding: .5rem 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.digit.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.chosen .n { font-weight: bold; font-size: 1.2rem; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: .4rem; margin: .75rem 0; aspect-ratio: 1 / 1; }
.cell { position: relative; font: inherit; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.cell[data-pos="左上"] { grid-area: 1 / 1; }
.cell[data-pos="中上"] { grid-area: 1 / 2; }
.cell[data-pos="右上"] { grid-area: 1 / 3; }
.cell[data-pos="左中"] { grid-area: 2 / 1; }
.cell[data-pos="正中"] { grid-area: 2 / 2; }
.cell[data-pos="右中"] { grid-area: 2 / 3; }
.cell[data-pos="左下"] { grid-area: 3 / 1; }
.cell[data-pos="中下"] { grid-area: 3 / 2; }
.cell[data-pos="右下"] { grid-area: 3 / 3; }
/* 跑格狀態優先序（v1.1 P4）：.stop > .lit > .trail > .start，同特異度以出現順序定 */
.cell { transition: background-color .15s ease, border-color .15s ease; }
.cell.start { border-color: var(--accent); }
.start-mark { position: absolute; top: .2rem; left: .3rem; font-size: .8rem; color: var(--accent); }
.cell.trail { background: var(--trail); border-color: var(--trail); }
.cell.lit { background: var(--accent); border-color: var(--accent); }
.cell.lit .start-mark { color: #fff; }
.cell.stop { background: var(--gold); border-color: var(--gold); }
.cell.stop .start-mark { color: #fff; }
@media (prefers-reduced-motion: reduce) { .cell { transition: none; } }
.stop-note { text-align: center; }

/* 畫面六、七一屏放下（九宮格一屏與跑格動畫派工單 A、v1.1 P2）：只作用於 section.layer。
   以負邊距抵銷 .app 上下 padding，section 自身 min-height 100dvh（退 100vh）、flex column，按鈕貼底。 */
.layer { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; margin: -1.25rem 0 -2.5rem; padding: .5rem 0; }
.layer p { margin: .2rem 0; }
.layer-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.layer-head h2 { font-size: 1.2rem; margin: .2rem 0; }
.step-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.layer .chosen { white-space: nowrap; }
.layer .digits { grid-template-columns: repeat(9, 1fr); gap: .25rem; margin: .3rem 0; }
.layer .digit { font-size: 1rem; padding: .3rem 0; }
.layer .grid { width: min(100%, 40vh); width: min(100%, 40dvh); margin: .4rem auto; gap: .3rem; }
.layer .btn { margin: auto 0 .5rem; }

.card { background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: 1rem; margin: 1rem 0; }
.vid { font-size: 1.3rem; font-weight: bold; margin: 0; }
.sev { display: inline-block; font-size: .9rem; padding: 0 .5rem; border-radius: 4px; vertical-align: middle; }
.sev-light { background: var(--sev-light); }
.sev-mid { background: var(--sev-mid); }
.sev-heavy { background: #fff; border: 1px solid var(--sev-heavy); color: var(--sev-heavy); }
.asked { color: var(--muted); font-size: .9rem; margin: .25rem 0; }
.id-note { font-size: .85rem; color: var(--muted); }
.verdict-part { margin: .75rem 0; }
.part-label { font-size: 1rem; margin: 0; color: var(--accent); }
.part-body { margin: .25rem 0 0; white-space: pre-line; }

.services { display: grid; gap: .5rem; }
.service-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; }
.service-name { display: block; }
.prajna { margin: 1rem 0; }

/* 老冷谷寺首頁：三個原生畫幅，品牌和操作區獨立於底圖。 */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.home {
  --stage-w: 961; --stage-h: 1636;
  --stage-img: url("/art/home-mobile.webp");
  --sky: #efcba1; --meadow: var(--home-meadow);
  --brand-top: 15%; --brand-width: 72%;
  position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(var(--sky) 50%, var(--meadow) 50%);
}
.home-stage {
  position: relative; container-type: inline-size;
  aspect-ratio: var(--stage-w) / var(--stage-h);
  width: min(100vw, calc(100vh * var(--stage-w) / var(--stage-h)));
  width: min(100vw, calc(100dvh * var(--stage-w) / var(--stage-h)));
  background: var(--stage-img) center / contain no-repeat;
}
@media (min-aspect-ratio: 961/1636) {
  .home {
    background:
      linear-gradient(#eecaa2, #f2d0a8 20%, #f0cea6 40%, #526e7c 60%, #958847 80%, #445642) left / 50% 100% no-repeat,
      linear-gradient(#f2cea3, #f3d0a7 20%, #6e7b6d 40%, #727547 60%, #9c893a 80%, #435441) right / 50% 100% no-repeat;
  }
}
@media (min-width: 600px) and (orientation: portrait) {
  .home {
    --stage-w: 1122; --stage-h: 1402;
    --stage-img: url("/art/home-tablet.webp");
    --sky: #ecceaa; --meadow: #4f5c49;
    --brand-top: 10.8%; --brand-width: 66%;
    background: linear-gradient(var(--sky) 50%, var(--meadow) 50%);
  }
}
@media (min-width: 600px) and (min-aspect-ratio: 1122/1402) and (orientation: portrait) {
  .home {
    background:
      linear-gradient(#eccea9, #eecfab 20%, #ecceaa 40%, #516870 60%, #8f8550 80%, #4d5947) left / 50% 100% no-repeat,
      linear-gradient(#eccea9, #eed0ac 20%, #617067 40%, #9f8d4b 60%, #9f8f4b 80%, #4c5847) right / 50% 100% no-repeat;
  }
}
@media (orientation: landscape) {
  .home {
    --stage-w: 1672; --stage-h: 941;
    --stage-img: url("/art/home-desktop.webp");
    --sky: #efcba1; --meadow: #52604a;
    --brand-top: 6.5%; --brand-width: 36%;
    background: linear-gradient(var(--sky) 50%, var(--meadow) 50%);
  }
}
@media (min-aspect-ratio: 1672/941) {
  .home {
    background:
      linear-gradient(#efcca3, #efcca5 20%, #f6dcc0 40%, #486066 60%, #a28e43 80%, #4d5d49) left / 50% 100% no-repeat,
      linear-gradient(#f0cda1, #778175 20%, #5c6f64 40%, #a48c42 60%, #9b8a43 80%, #505e47) right / 50% 100% no-repeat;
  }
}
.home-brand {
  position: absolute; top: var(--brand-top); left: 50%; transform: translateX(-50%);
  width: min(var(--brand-width), 560px); text-align: center;
  font-family: "Songti TC", "Noto Serif TC", "PMingLiU", serif;
}
.home-wordmark { aspect-ratio: 3; background: url("/art/home-wordmark.webp") center / contain no-repeat; }
.home-subtitle {
  display: flex; align-items: center; justify-content: center; gap: .75em; margin: .18em 0 0;
  color: #43342d; font-size: clamp(14px, 4cqw, 28px); font-weight: 600; letter-spacing: .24em; text-indent: .24em;
}
.home-subtitle::before, .home-subtitle::after { content: ""; width: .22em; height: .22em; background: #986745; transform: rotate(45deg); }
.home-actions {
  position: absolute; bottom: max(3.6%, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  width: min(89%, 540px); display: grid; grid-template-columns: 1fr 1.48fr 1fr; align-items: center; gap: clamp(5px, 1.5cqw, 12px);
}
.plaque {
  min-width: 0; height: clamp(44px, 9cqw, 61px); padding: 0; border: 0; border-radius: 4px;
  background: url("/art/button-blank.webp") center 47.8% / 102% 220% no-repeat;
  color: #f7ecd7; font: 600 clamp(12px, 3.4cqw, 18px)/1 "Songti TC", "Noto Serif TC", "PMingLiU", serif;
  letter-spacing: .07em; text-indent: .07em; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.plaque-start {
  height: clamp(52px, 11cqw, 73px); font-size: clamp(15px, 4.25cqw, 23px); letter-spacing: .16em; text-indent: .16em;
}
.plaque:focus { outline: none; }
.plaque:focus-visible { outline: 2px solid #f7ecd7; outline-offset: 2px; box-shadow: 0 0 0 5px #324c56; }

/* ============ 首頁彈窗（使用規範／說明；派工單 §3.2） ============
   邊框 dialog-frame.webp（1122×1402，透明外緣：左右 58px、上 75px、下 76px；邊帶不透明至距邊 118px（左右）、144px（上下））。
   border-image-slice 量測（node 自解 PNG 逐列／欄分類色）：四角方折紋（靛藍／青綠＋米白）最遠延伸至距左右邊 180px、
   距上下邊約 170px，故 slice＝上 180、右 190、下 180、左 190（角區完整含角飾，四角不被拉伸；中段為均勻邊帶，stretch）。
   邊寬：左右＝--fb、上下＝--fb×180/190，四邊同一縮放倍率（角飾等比、不變形）；--fb 隨視窗寬 clamp(30px, 8vw, 44px)
   （320 寬 30px、≥550 寬 44px）。
   內底紙色 #f1e5d0：取自佛堂壁畫定調的暖紙色。
   紙色只鋪到邊帶不透明處之下（左右距框外緣 --fb×90/190、上下 --fb×110/190，皆落在朱紅邊帶內），不溢出到框外透明區。平面啞光，無陰影光澤。 */
body.modal-open { overflow: hidden; }
.modal {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.modal-mask { position: absolute; inset: 0; background: rgba(22, 32, 39, .55); }
.modal-box {
  --fb: clamp(30px, 8vw, 44px);
  --paper: #f1e5d0;
  position: relative; display: flex; flex-direction: column; width: 100%;
  max-height: min(90vh, 100%); max-height: min(90dvh, 100%);
  border-style: solid; border-width: calc(var(--fb) * 180 / 190) var(--fb);
  border-image: url("/art/dialog-frame.webp") 180 190 180 190 / calc(var(--fb) * 180 / 190) var(--fb) / 0 stretch;
  background-image: linear-gradient(var(--paper), var(--paper));
  background-origin: border-box; background-clip: border-box; background-repeat: no-repeat; background-position: center;
  background-size: calc(100% - var(--fb) * 180 / 190) calc(100% - var(--fb) * 220 / 190);
  color: var(--ink); padding: .25rem .25rem .5rem;
  font-family: "Songti TC", "Noto Serif TC", "PMingLiU", serif;
}
.modal-box:focus { outline: none; }
@media (min-width: 768px) { .modal-box { max-width: 600px; } }
@media (min-width: 1024px) { .modal-box { max-width: 700px; } }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .25rem .5rem; line-height: 1.85; }
.modal-body:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal-body .rules { margin: .25rem 0 1rem; background: #f8efde; }
.modal-body .subtitle { margin: .25rem 0 .75rem; }
.modal-title { font-size: 1.2rem; color: var(--warn); text-align: center; margin: .5rem 0; }
.modal-body .bg-part { margin: .75rem 0; background: #f8efde; }
/* 關閉鈕：空白牌框 button-blank.webp（2172×724）作背景、contain 不變形；上放 HTML 字「關閉」（一#10），米白粗體置中。
   （外觀為指揮官推定，使用者未看過；派工單 §3.2） */
.modal-close {
  flex: none; align-self: center; width: min(100%, 13rem); aspect-ratio: 2172 / 724; min-height: 44px; margin: .5rem 0 0; padding: 0 0 3px;
  border: 0; background: url("/art/button-blank.webp") center / contain no-repeat;
  color: #fff3d6; font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2; letter-spacing: .3em; text-indent: .3em; cursor: pointer;
}
.modal-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 佛堂壁畫維持原始比例，念誦帶從供碗下方開始覆蓋經本。 */
.chant {
  --shrine-ratio: 1024 / 1536;
  --band-at: 0.853;
  --floor-at: 0.816;
  --vh: 100vh;
  --art-h: min(var(--vh), calc(100vw * 1536 / 1024));
  --art-top: calc((var(--vh) - var(--art-h)) / 2);
  position: fixed; inset: 0; overflow: hidden; color: #fff0c9;
  display: grid; align-content: start; padding-bottom: env(safe-area-inset-bottom, 0px);
  grid-template-rows: minmax(0, calc(var(--art-top) + var(--art-h) * var(--band-at))) auto;
  background: linear-gradient(to bottom, #efd6b9 0, #efd6b9 calc(var(--art-top) + var(--art-h) * var(--floor-at)), var(--shrine-floor) calc(var(--art-top) + var(--art-h) * var(--floor-at)), var(--shrine-floor) 100%);
}
@supports (height: 100dvh) { .chant { --vh: 100dvh; } }
.shrine {
  position: absolute; left: 50%; top: var(--art-top); height: var(--art-h); width: calc(var(--art-h) * 1024 / 1536);
  aspect-ratio: var(--shrine-ratio); transform: translateX(-50%);
  background: url("/art/medicine-buddha-shrine.webp") center / contain no-repeat;
}
.band {
  position: relative; grid-row: 2; min-height: 54px;
  touch-action: manipulation;
  background: rgb(50 76 86 / .93); border-top: 1px solid #b69763; border-bottom: 1px solid #b69763;
}
.chant-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; min-height: 54px; margin: 0; padding: 4px 7px; border: 0; border-radius: 0;
  background: transparent; color: inherit; font-family: "Songti TC", "Noto Serif TC", "PMingLiU", serif; line-height: 1.35;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.chant-btn:disabled { cursor: default; }
.chant-btn:focus { outline: none; }
.chant-btn:focus-visible { outline: 2px solid #fff0c9; outline-offset: -3px; }
.chant .name {
  display: block; max-width: 100%; margin: 0; white-space: nowrap; letter-spacing: 0;
  font-family: "Songti TC", "Noto Serif TC", "PMingLiU", serif; font-weight: 400; font-size: clamp(16px, 4.8vw, 24px); line-height: 1.35;
}
.chant .glyph { display: inline-block; }
.chant-note { display: block; white-space: nowrap; font-size: clamp(11px, 2.8vw, 14px); line-height: 1.4; letter-spacing: .015em; }
.chant .progress { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 15px; }
.chant .beads { display: flex; align-items: center; gap: clamp(9px, 2.6vw, 16px); margin: 0; }
.chant .bead { display: block; width: clamp(10px, 2.3vw, 14px); height: auto; aspect-ratio: 1; border: 1.3px solid #e1bc79; border-radius: 50%; background: transparent; }
.chant .bead.on { background: #edc671; animation: bead-fill .25s ease-out; }
.chant .count { font-family: system-ui, sans-serif; font-size: clamp(11px, 2.6vw, 14px); line-height: 1.4; font-variant-numeric: tabular-nums; color: #f5deac; white-space: nowrap; }
@media (min-width: 768px) {
  .chant .name { font-size: clamp(16px, 4.8vw, 28px); }
  .chant-note, .chant .count { font-size: clamp(11px, 2.6vw, 16px); }
  .chant .bead { width: clamp(10px, 2vw, 18px); }
  .chant .beads { gap: clamp(9px, 2vw, 18px); }
  .chant-btn { gap: 4px; padding: 6px 7px; }
}
/* 香霧（純 CSS 漸層） */
.mist { position: absolute; left: 30%; top: 0; width: 40%; height: 100%; pointer-events: none; opacity: 0; }
.mist span { position: absolute; border-radius: 50%; background: radial-gradient(ellipse, rgba(247, 238, 213, .72), rgba(247, 238, 213, .15) 50%, transparent 72%); filter: blur(6px); }
.mist span:nth-child(1) { width: 70%; height: 105%; left: 5%; top: 0; }
.mist span:nth-child(2) { width: 70%; height: 100%; left: 30%; top: 5%; }
.mist span:nth-child(3) { width: 90%; height: 65%; left: 10%; top: 25%; }
.mist span:nth-child(4) { width: 55%; height: 100%; left: 25%; top: -10%; }
/* 筊杯鈕：帶上覆蓋（帶左筊杯、右提示）；筊杯為待機圖，以背景圖裁框 [259,89,1484,843]（顯示比 1225:754）。
   裁切以 background-size／position 百分比表達，公式同 integration.json 之 mask 公式（§八-6）：
     size＝W/(x1−x0)×100% H/(y1−y0)×100%；position＝x0/(W−(x1−x0))×100% y0/(H−(y1−y0))×100%（W×H＝1774×887）。 */
.cast-pair {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 18px);
  width: 100%; margin: 0; padding: 1px 8px; border: 0; border-radius: 0; background: transparent; color: #fff0c9;
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cast-pair:disabled { cursor: default; }
.cast-pair:focus { outline: none; }
.cast-pair:focus-visible { outline: 2px solid #fff0c9; outline-offset: -3px; }
.pair {
  --pair-bg-size: 144.816327% 117.639257%;
  --pair-bg-pos: 47.176685% 66.917293%;
  display: block; flex-shrink: 0; width: clamp(80px, 20vw, 128px); aspect-ratio: 1225 / 754;
  background-image: url("/art/jiaobei-pair.webp"); background-repeat: no-repeat;
  background-size: var(--pair-bg-size);
  background-position: var(--pair-bg-pos);
}
.cast-pair .prompt { font-family: "Songti TC", "Noto Serif TC", serif; font-weight: 400; font-size: clamp(14px, 3.4vw, 19px); line-height: 1.5; letter-spacing: .1em; white-space: nowrap; }
/* 相態動畫（section[data-phase]；曲線沿用原型 tc-*） */
.chant[data-phase="fusing"] .glyph { animation: glyph-fuse 1.15s cubic-bezier(.55, .05, .7, 1) both; }
.chant[data-phase="fusing"] .chant-note,
.chant[data-phase="fusing"] .progress { animation: chant-fade .25s ease-out both; }
.chant[data-phase="fusing"] .mist { animation: mist-appear 2.8s .5s both; }
.chant[data-phase="fusing"] .cast-pair { opacity: 0; animation: pair-form .9s 1.35s ease-out both; }
.chant[data-phase="fusing"] .cast-pair .prompt { visibility: hidden; }
.chant[data-phase="ready"] .chant-btn,
.chant[data-phase="casting"] .chant-btn,
.chant[data-phase="result"] .chant-btn { visibility: hidden; }
.chant[data-phase="ready"] .cast-pair .prompt { animation: prompt-breathe 1.8s ease-in-out infinite; }
.chant[data-phase="casting"] .pair { animation: toss 1.15s ease-in-out both; }
.chant[data-phase="casting"] .cast-pair .prompt { visibility: hidden; }
@keyframes bead-fill { 50% { transform: scale(1.18); } }
@keyframes glyph-fuse {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  68% { transform: translate(var(--fx, 0), 0) scale(.36); opacity: .7; filter: blur(.5px); }
  100% { transform: translate(var(--fx, 0), 0) scale(.04); opacity: 0; filter: blur(3px); }
}
@keyframes chant-fade { to { opacity: 0; transform: translateY(-3px); } }
@keyframes pair-form { from { opacity: 0; transform: translateY(4px) scale(.6); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes mist-appear { 0% { opacity: 0; transform: scale(.4); } 28% { opacity: .9; transform: scale(1); } 65% { opacity: .6; transform: scale(1.12) translateY(-3px); } 100% { opacity: 0; transform: scale(1.25) translateY(-6px); } }
@keyframes prompt-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes toss { 0% { transform: none; opacity: 1; } 34% { transform: translateY(-65%) rotate(-28deg) scale(.85); opacity: 1; } 72% { transform: translateY(-18%) rotate(47deg) scale(.9); opacity: 1; } 100% { transform: translateY(10%) rotate(-7deg) scale(.98); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-screen="chant"] *, [data-screen="chant"] *::before, [data-screen="chant"] *::after { animation: none !important; transition: none !important; }
}

/* ============ 畫面三 統一結果彈窗（派工單 §3.3） ============
   沿用首頁 .modal／.modal-box（邊框 dialog-frame.webp、焦點限制）；.modal-box 首頁規則不動，只以 .modal-result 加寬度與排版。
   無「關閉」鈕；不以 Escape、遮罩關閉（app.js LOCKED_MODALS）。
   主按鈕：空白牌框 button-blank.webp（同 .modal-close）；按鈕字以 ::after 之 alpha 遮罩（result-button-labels.webp，1536×1024）染 #fff0c9，
   不顯示原 RGB；遮罩 size／position 依 integration.json 公式由裁框算出（下一步 [183,74,1359,454]、再念誦 [152,565,1372,967]）。
   按鈕原文字（下一步／再念誦）保留為可及文字，以本身 CSS 視覺隱藏（透明字、1px 字級）。 */
.modal-result .modal-box { width: min(88%, 390px); text-align: center; padding: .5rem .5rem .75rem; font-family: "Songti TC", "Noto Serif TC", serif; color: #43342d; }
@media (min-width: 768px) { .modal-result .modal-box { width: min(86%, 440px); } }
@media (min-width: 1024px) { .modal-result .modal-box { width: min(84%, 480px); } }
.cast-title { margin: .25rem 0 .75rem; color: #744536; font-size: clamp(26px, 8vw, 32px); line-height: 1.4; font-weight: 500; letter-spacing: .14em; text-indent: .14em; }
.cast-body { margin: 0 0 .9rem; font-size: 17px; line-height: 1.9; }
.result-btn {
  position: relative; display: block; width: min(100%, 15rem); aspect-ratio: 2172 / 724; min-height: 44px; margin: .25rem auto .25rem; padding: 0;
  border: 0; background: url("/art/button-blank.webp") center / contain no-repeat;
  color: transparent; font-size: 1px; line-height: 1; text-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.result-btn::after {
  content: ""; position: absolute; left: 50%; top: 48.3%; width: 27%; transform: translate(-50%, -50%);
  background: #fff0c9; -webkit-mask-image: url("/art/result-button-labels.webp"); mask-image: url("/art/result-button-labels.webp");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.label-next { --label-next-size: 130.612245% 269.473684%; --label-next-pos: 50.833333% 11.490683%; }
.label-next::after { aspect-ratio: 1176 / 380; -webkit-mask-size: var(--label-next-size); mask-size: var(--label-next-size); -webkit-mask-position: var(--label-next-pos); mask-position: var(--label-next-pos); }
.label-again { --label-again-size: 125.901639% 254.726368%; --label-again-pos: 48.101266% 90.836013%; }
.label-again::after { aspect-ratio: 1220 / 402; -webkit-mask-size: var(--label-again-size); mask-size: var(--label-again-size); -webkit-mask-position: var(--label-again-pos); mask-position: var(--label-again-pos); }
.result-btn:focus { outline: none; }
.result-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ============ 檢查模式面板（R-24；派工單 §3.4） ============
   只在網址帶 ?qa=1（或 #qa）時由 app.js 建立；工具用語，非讀者文字。z-index 高於 .modal（10）。 */
.qa-panel { position: fixed; right: 4px; bottom: 4px; z-index: 1000; max-width: calc(100vw - 8px); padding: 4px; border-radius: 6px; background: rgba(0, 0, 0, .82); color: #fff; font: 12px/1.4 ui-monospace, Menlo, monospace; }
.qa-panel button, .qa-panel select { font: inherit; margin: 1px; padding: 2px 5px; }
.qa-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 2px 0; }
.qa-state { margin: 2px 0 0; white-space: normal; word-break: break-all; }

/* ============ 畫面四 問事（畫面四問事改版派工單 §二＋§七，2026-11-05，R-25） ============
   風格同首頁彈窗／結果彈窗：佛堂暗淡背景＋米白紙卡（dialog-frame 朱紅赭金邊框）＋牌框「詢問」鈕。
   背景層：section.ask::before 為 position: fixed 偽元素（不用 background-attachment，iOS Safari 不支援；§七），
     佛堂圖 contain 置中（同畫面二 .chant 之 --art-h／--art-top 算式）＋牆色 #efd6b9／地色 #9d3d33 延伸，上覆 rgba(17,28,34,.52) 暗淡層；捲動時不動。
   紙卡 .ask-card：自帶一份 border-image／紙色規則，和 .modal-box 共用暖紙色 #f1e5d0。
     寬 min(92vw, 640px)：.app 內容寬上限 430px，卡以左右負外距（以 .app 內容寬為基準置中）伸出 .app，
     768／1440 寬達 640px（§七-2；首頁／畫面二舞台以 position: fixed 脫離 .app，本卡須隨頁捲動，故改用負外距）。卡隨頁面捲動、卡內不捲。
   七件事：ol 原生序號改 CSS counter 圓號（赭金 #a28659、數字紙色）；第 7 項 li.gold 朱紅 #744536、1.1 倍、600（§七-4，指揮官擬：審閱稿 p6 為第 7 金、其餘藍）。
   應避免／範例：標頭為節點文字首行，以 ::first-line 著色（fillTexts 以 textContent 覆寫，不加子元素）。
   「詢問」鈕：同 .modal-close 作法（button-blank 背景、HTML 字）。
   R-26 小修（同派工單 §八，使用者裁「乙」）：一屏放下、不出現頁面捲動——section 以負邊距抵銷 .app 上下 padding（同 .layer 作法），
     高 100dvh（退 100vh）、flex 置中；卡 max-height＝calc(100dvh − 1rem)，卡內 flex column。
     應避免／範例改兩個小牌（.ask-tab，指揮官擬：朱紅 1px 細框、米白底、朱紅字、圓角 4px、高 40px、並排各約 48%），點開為首頁同款 .modal。
     七件事字級 clamp(14px, 3.9vw, 17px)、行高 1.45、項距 .35rem；視窗矮時依序縮項距 → 行高 → 字級（最小 14px），見 @media (max-height)。
     .ask-card overflow-y: auto 僅為比 375×667 更矮之視窗的保底（實測五視窗皆不觸發）。 */
.ask {
  --vh: 100vh;
  --art-h: min(var(--vh), calc(100vw * 1536 / 1024));
  --art-top: calc((var(--vh) - var(--art-h)) / 2);
}
@supports (height: 100dvh) { .ask { --vh: 100dvh; } }
.ask:not([hidden]) {
  --ask-space: .5rem;
  display: flex; flex-direction: column; justify-content: center;
  height: 100vh; height: 100dvh; margin: -1.25rem 0 -2.5rem;
  padding: max(var(--ask-space), env(safe-area-inset-top, 0px)) 0 max(var(--ask-space), env(safe-area-inset-bottom, 0px));
}
.ask::before {
  content: ""; position: fixed; left: 0; top: 0; width: 100%; height: var(--vh); z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(17, 28, 34, .52), rgba(17, 28, 34, .52)),
    url("/art/medicine-buddha-shrine.webp") center / contain no-repeat,
    linear-gradient(to bottom, #efd6b9 0, #efd6b9 calc(var(--art-top) + var(--art-h) * 0.816), var(--shrine-floor) calc(var(--art-top) + var(--art-h) * 0.816), var(--shrine-floor) 100%);
}
.ask-card {
  --fb: clamp(30px, 8vw, 44px);
  --paper: #f1e5d0;
  --ask-ink: #43342d;
  --ochre: #a28659;
  --cinnabar: #744536;
  width: min(92vw, 640px); margin: 0 calc(50% - min(46vw, 320px));
  max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); overflow-y: auto;
  display: flex; flex-direction: column;
  border-style: solid; border-width: calc(var(--fb) * 180 / 190) var(--fb);
  border-image: url("/art/dialog-frame.webp") 180 190 180 190 / calc(var(--fb) * 180 / 190) var(--fb) / 0 stretch;
  background-image: linear-gradient(#f1e5d0, #f1e5d0);
  background-origin: border-box; background-clip: border-box; background-repeat: no-repeat; background-position: center;
  background-size: calc(100% - var(--fb) * 180 / 190) calc(100% - var(--fb) * 220 / 190);
  padding: .25rem 1rem .5rem; color: var(--ask-ink);
  font-family: "Songti TC", "Noto Serif TC", "PMingLiU", serif; line-height: 1.85;
}
.ask-card > * { flex: none; }
.ask-card .ask-title { margin: 0 0 .25rem; color: #744536; text-align: center; font-size: clamp(22px, 6vw, 30px); font-weight: 600; letter-spacing: .08em; }
.ask-card .ask-sub { margin: 0 0 .15rem; line-height: 1.45; color: var(--ask-ink); font-size: clamp(16px, 4.5vw, 19px); font-weight: 600; }
.ask-card .ask-list { list-style: none; counter-reset: ask; margin: 0 0 .5rem; padding: 0; }
.ask-card .ask-list li {
  counter-increment: ask; position: relative; margin: 0; padding: .35rem 0 .35rem 2.3em; border-top: 1px solid rgb(162 134 89 / .2);
  font-size: clamp(14px, 3.9vw, 17px); line-height: 1.45;
}
.ask-card .ask-list li:first-child { border-top: 0; }
.ask-card .ask-list li::before {
  content: counter(ask); position: absolute; left: 0; top: calc(.35rem + (1.45em - 1.6em) / 2);
  width: 1.6em; height: 1.6em; border-radius: 50%; background: #a28659; color: #f1e5d0;
  font-family: system-ui, sans-serif; font-size: 1em; font-weight: 600; line-height: 1.6em; text-align: center; font-variant-numeric: tabular-nums;
}
.ask-card .ask-list li.gold { color: #744536; font-size: 1.1em; font-weight: 600; }
.ask-card .ask-list li.gold::before { background: #744536; }
.ask-card .ask-tabs { display: flex; justify-content: space-between; gap: 4%; margin: 0 0 .35rem; }
.ask-tab {
  flex: 0 0 48%; height: 40px; margin: 0; padding: 0 .25rem;
  border: 1px solid #744536; border-radius: 4px; background: #fff8ea;
  color: #744536; font: inherit; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ask-tab:focus { outline: none; }
.ask-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ask-card .ask-note { margin: 0; text-align: center; color: rgb(75 53 37 / .8); line-height: 1.45; }
.ask .ask-modal-title { margin: 0 0 .25rem; color: #744536; text-align: center; font-size: 1.15rem; font-weight: 600; font-family: "Songti TC", "Noto Serif TC", "PMingLiU", serif; }
.ask .ask-modal-text { margin: .25rem 0; white-space: pre-line; color: #43342d; font-family: "Songti TC", "Noto Serif TC", "PMingLiU", serif; }
.ask .ask-modal-text.example { background: #f1e2c6; border-left: 3px solid #a28659; padding: .75rem; border-radius: 4px; }
.ask-btn {
  display: block; width: min(100%, 13rem); aspect-ratio: 2172 / 724; min-height: 44px; margin: .35rem auto 0; padding: 0 0 3px;
  border: 0; background: url("/art/button-blank.webp") center / contain no-repeat;
  color: #fff3d6; font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2; letter-spacing: .3em; text-indent: .3em; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ask-btn:focus { outline: none; }
.ask-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* R-26 矮視窗遞減（依序：項距 → 行高 → 字級，最小 14px；小牌字在窄視窗 14px 以免標頭折行）。 */
@media (max-width: 400px) { .ask-tab { font-size: 14px; letter-spacing: 0; } }
@media (max-height: 760px) {
  .ask:not([hidden]) { --ask-space: .25rem; }
  .ask-card { max-height: calc(100vh - .5rem); max-height: calc(100dvh - .5rem); padding-top: 0; padding-bottom: .25rem; }
  .ask-card .ask-list { margin-bottom: .35rem; }
  .ask-card .ask-list li { padding-top: .2rem; padding-bottom: .2rem; }
  .ask-card .ask-list li::before { top: calc(.2rem + (1.45em - 1.6em) / 2); }
}
@media (max-height: 720px) {
  .ask-card .ask-list li { line-height: 1.3; }
  .ask-card .ask-list li::before { top: calc(.2rem + (1.3em - 1.6em) / 2); }
}
@media (max-height: 700px) { .ask-card .ask-list li { font-size: 14px; } .ask-card .ask-sub { font-size: 16px; } }
@media (max-height: 680px) {
  .ask-card .ask-list li { padding-top: .1rem; padding-bottom: .1rem; line-height: 1.25; }
  .ask-card .ask-list li::before { top: calc(.1rem + (1.25em - 1.6em) / 2); }
}

/* ============ 畫面五 結果分流／畫面九 當日提醒 彈窗（畫面五九彈窗化派工單 §2.4＋§七，2026-11-05，R-27） ============
   沿用 .modal／.modal-box（dialog-frame 邊框、暖紙底）與畫面三 .modal-result 寬度。
   畫面五背景＝暗淡的問事卡（ask 節保持可見＋inert，上覆既有 .modal-mask 暗層）；畫面九背景＝首頁舞台（home 節保持可見＋inert）。
   牌框鈕 .plaque-btn：同 .modal-close 作法（button-blank.webp 背景 contain、aspect-ratio 2172/724、HTML 字 #fff3d6 粗體字距 .3em、最小高 44px）；
     按鈕區 .result-actions 直排置中、間距 .5rem（「無關」頁不設導流按鈕，R-31）。
   標題 .result-title／正文 .result-text：值同畫面四彈窗 .ask .ask-modal-title／.ask .ask-modal-text，不帶 .ask 作用域（§七-7）。 */
.result-title { margin: 0 0 .25rem; color: #744536; text-align: center; font-size: 1.15rem; font-weight: 600; font-family: "Songti TC", "Noto Serif TC", "PMingLiU", serif; }
.result-text { margin: .25rem 0; white-space: pre-line; color: #43342d; font-family: "Songti TC", "Noto Serif TC", "PMingLiU", serif; }
[data-screen="reminder"] .result-text { text-align: left; }
.result-actions { flex: none; display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: .5rem 0 0; }
.result-actions .modal-close { margin: 0; }
.result-actions .plaque-btn { padding-bottom: 2px; font-size: clamp(14px, 3.85vw, .95rem); }
.plaque-btn {
  flex: none; width: min(100%, 13rem); aspect-ratio: 2172 / 724; min-height: 44px; margin: 0; padding: 0 0 3px;
  border: 0; background: url("/art/button-blank.webp") center / contain no-repeat;
  color: #fff3d6; font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2; letter-spacing: .3em; text-indent: .3em; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.plaque-btn:focus { outline: none; }
.plaque-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 九#2「查看今天的判詞」七字在字距 .3em 時字寬貼齊牌框紅底內緣、壓到兩端角飾（M8 實測 375×667：字 113.6～266.4、紅底估 108.5～266.5），
   依派工單 §七 建議縮字距 .3em→.12em。 */
.plaque-btn[data-t="九#2"] { letter-spacing: .12em; text-indent: .12em; }

/* ============ 畫面六、七 兩層九格（畫面六七八改版派工單 §2.2＋§七，2026-11-05，R-28） ============
   依 Codex 交接 reports/2026-11-05-兩層九格美術交接.md 與 design/handoffs/2026-11-05-layer-pages-v1/layout-reference.html 接入（只取版面與色值；
   不搬參考稿預覽專用部分）。由上而下：小佛龕 .layer-shrine → 層次標記＋主標 .layer-heading → 彩繪經頁 .layer-page → 牌框鈕 .layer-actions。
   主欄：寬 min(100vw, 450px)，以左右負外距（以 .app 內容寬為基準置中）伸出 .app 的 430px；上下負外距抵銷 .app padding，高 100dvh，一屏不捲動。
   頁底：section::before position: fixed 暖米白漸層（延伸到主欄外；同 .ask::before 作法）。
   小佛龕：參考稿口徑——高 clamp(116px, 100dvh − 598px, 236px)、圖寬＝高＋56px、頂端 9px、水平置中、底部 5% 漸隱（容器 mask）、
     左右 9px 漸隱（圖層 ::before 之 mask）；圖以 CSS background 鋪（不用 <img>）。
   經頁框：border-image（不拉伸角飾）。layer-page-frame.webp 1122×1402，邊帶不透明約距外緣 25～47px；四角角飾最遠延伸至距左右 155px、
     距上下 146px（PIL 讀 alpha＞40 量得），故 slice＝上下 150、左右 160（角區完整含角飾，中段為均勻邊帶 stretch）；
     邊寬＝slice×經頁寬/1122（四邊同一縮放倍率，角飾等比不變形）。框疊最上層（::after，pointer-events: none），
     層底色在框內（::before，inset 10px 落在邊帶下）。
   第一層經頁以深藍綠為底、走過格轉為較亮的沉綠；第二層以暖紙色為底、走過格轉為淺米白。
     §七「起」字：.lit 上 #492B1A；.stop 上第二層 #492B1A（對 #E8BF73 7.38）、第一層 #8B683E 底上 #492B1A 僅 2.52 不足 3:1，改用該層內文色 #FFF1D0（4.52）。
   優先序：.start < .trail < .lit < .stop（同特異度，後出者勝；終拍格同時 .lit.stop 取 .stop）。
   短屏 @media (max-height: 720px) 參考稿 :65-76；另因保留「所選數字」列（參考稿無），九格與間距依量測微調。 */
[data-screen="layer1"], [data-screen="layer2"] {
  --shrine-h: clamp(116px, calc(100vh - 598px), 236px);
  --grid-size: 244px;
  --col-pad: 14px;
  --page-w: calc(min(100vw, 450px) - var(--col-pad) * 2);
  --page-h: 437px;
  width: min(100vw, 450px); margin: -1.25rem calc(50% - min(50vw, 225px)) -2.5rem; padding: 0 var(--col-pad) 12px;
  min-height: 100vh; min-height: 100dvh; align-items: center;
  font-family: "Songti TC", "Noto Serif TC", "PMingLiU", serif;
}
@supports (height: 100dvh) {
  [data-screen="layer1"], [data-screen="layer2"] { --shrine-h: clamp(116px, calc(100dvh - 598px), 236px); }
}
[data-screen="layer1"] {
  --page-light: #42606a; --page: #324c56; --type: #fff1d0; --muted: #eed4a7;
  --num: #384f57; --num-edge: #7b9693; --tile: #42606a; --tile-edge: #a6b4af;
  --stop: #8b683e; --stop-edge: #f5cf7d; --trail: #59746d; --trail-edge: #b9a16a;
  --focus: #f5cf7d; --stop-mark: #fff1d0;
}
[data-screen="layer2"] {
  --page-light: #fff3d8; --page: #f3e3bf; --type: #49362b; --muted: #635246;
  --num: #f8ecd1; --num-edge: #7e9178; --tile: #e4d6b7; --tile-edge: #647365;
  --stop: #e8bf73; --stop-edge: #925323; --trail: #fff7e0; --trail-edge: #c9a86a;
  --focus: #925323; --stop-mark: #492b1a;
}
[data-screen="layer1"]::before, [data-screen="layer2"]::before, [data-screen="verdict"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(#ead8bb, #f7ecd7);
}
[data-screen="layer1"] .layer-shrine, [data-screen="layer2"] .layer-shrine {
  position: relative; flex: none; width: 100%; height: var(--shrine-h); overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 95%, transparent); mask-image: linear-gradient(#000 95%, transparent);
}
[data-screen="layer1"] .layer-shrine::before, [data-screen="layer2"] .layer-shrine::before {
  content: ""; position: absolute; top: 9px; left: 50%; width: calc(var(--shrine-h) + 56px); height: var(--shrine-h); transform: translateX(-50%);
  background: url("/art/medicine-buddha-shrine.webp") center 40% / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9px, #000 calc(100% - 9px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9px, #000 calc(100% - 9px), transparent);
}
[data-screen="layer1"] .layer-heading, [data-screen="layer2"] .layer-heading { flex: none; width: 100%; height: 70px; text-align: center; }
[data-screen="layer1"] .layer-marker, [data-screen="layer2"] .layer-marker {
  display: flex; justify-content: center; align-items: center; gap: 9px; margin: 0;
  color: #834d2e; font-size: 12px; line-height: 1.5; letter-spacing: .14em;
}
[data-screen="layer1"] .layer-marker::before, [data-screen="layer2"] .layer-marker::before { content: ""; width: 24px; height: 1px; background: #c29762; }
[data-screen="layer1"] .seals, [data-screen="layer2"] .seals { display: inline-flex; gap: 5px; }
[data-screen="layer1"] .seal, [data-screen="layer2"] .seal { display: block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #ae7748; }
[data-screen="layer1"] .seal.filled, [data-screen="layer2"] .seal.filled { background: #ac512f; border-color: #ac512f; }
[data-screen="layer1"] .layer-heading h2, [data-screen="layer2"] .layer-heading h2 {
  margin: 5px 0 0; color: #744536; font-family: "Songti TC", "Noto Serif TC", "PMingLiU", serif; font-weight: 600; font-size: 28px; line-height: 1.32; letter-spacing: .06em;
}
[data-screen="layer1"] .layer-page, [data-screen="layer2"] .layer-page {
  position: relative; isolation: isolate; flex: none; display: flex; flex-direction: column; align-items: center;
  width: var(--page-w); height: var(--page-h); padding: 21px 25px 18px; color: var(--type);
}
[data-screen="layer1"] .layer-page::before, [data-screen="layer2"] .layer-page::before {
  content: ""; position: absolute; inset: 10px; z-index: -1;
  background: radial-gradient(ellipse at 44% 38%, var(--page-light), var(--page));
}
[data-screen="layer1"] .layer-page::after, [data-screen="layer2"] .layer-page::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-style: solid; border-width: calc(var(--page-w) * 150 / 1122) calc(var(--page-w) * 160 / 1122);
  border-image: url("/art/layer-page-frame.webp") 150 160 / calc(var(--page-w) * 150 / 1122) calc(var(--page-w) * 160 / 1122) / 0 stretch;
}
[data-screen="layer1"] .layer-page p, [data-screen="layer2"] .layer-page p { flex: none; margin: 0; }
[data-screen="layer1"] .step, [data-screen="layer2"] .step { text-align: center; font-size: 14px; line-height: 22px; }
[data-screen="layer1"] .digits, [data-screen="layer2"] .digits {
  flex: none; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; width: 100%; margin: 7px 0 4px;
}
[data-screen="layer1"] .digit, [data-screen="layer2"] .digit {
  display: grid; place-items: center; height: 34px; padding: 0; margin: 0;
  background: var(--num); border: 1px solid var(--num-edge); border-radius: 2px; color: var(--type);
  font-family: "Songti TC", "Noto Serif TC", serif; font-weight: 600; font-size: 17px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
[data-screen="layer1"] .digit.on, [data-screen="layer2"] .digit.on { background: #efc675; border-color: #f6d995; color: #492b1a; }
[data-screen="layer1"] .chosen, [data-screen="layer2"] .chosen { margin: 0 0 6px; text-align: center; white-space: nowrap; color: var(--muted); font-size: 13px; line-height: 20px; letter-spacing: .06em; }
[data-screen="layer1"] .chosen .n, [data-screen="layer2"] .chosen .n { color: var(--type); font-size: 15px; font-weight: 700; }
[data-screen="layer1"] .grid, [data-screen="layer2"] .grid { flex: none; width: min(100%, var(--grid-size)); gap: 7px; margin: 9px auto 8px; }
[data-screen="layer1"] .cell, [data-screen="layer2"] .cell {
  background: var(--tile); border: 1px solid var(--tile-edge); border-radius: 2px; box-shadow: inset 0 0 0 2px #ffffff0b; color: var(--type);
  -webkit-tap-highlight-color: transparent;
}
[data-screen="layer1"] .cell.start, [data-screen="layer2"] .cell.start { border-color: var(--trail-edge); }
[data-screen="layer1"] .cell.trail, [data-screen="layer2"] .cell.trail { background: var(--trail); border-color: var(--trail-edge); }
[data-screen="layer1"] .cell.lit, [data-screen="layer2"] .cell.lit { background: #efc675; border-color: #f6d995; }
[data-screen="layer1"] .cell.stop, [data-screen="layer2"] .cell.stop { background: var(--stop); border: 2px solid var(--stop-edge); box-shadow: inset 0 0 0 2px #ffffff40; }
[data-screen="layer1"] .start-mark, [data-screen="layer2"] .start-mark { top: 3px; left: 4px; font-size: .75em; line-height: 1; color: var(--type); }
[data-screen="layer1"] .cell.lit .start-mark, [data-screen="layer2"] .cell.lit .start-mark { color: #492b1a; }
[data-screen="layer1"] .cell.stop .start-mark, [data-screen="layer2"] .cell.stop .start-mark { color: var(--stop-mark); }
[data-screen="layer1"] .digit:focus-visible, [data-screen="layer1"] .cell:focus-visible,
[data-screen="layer2"] .digit:focus-visible, [data-screen="layer2"] .cell:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[data-screen="layer1"] .stop-note, [data-screen="layer2"] .stop-note { text-align: center; color: var(--muted); font-size: 13px; line-height: 20px; letter-spacing: .09em; }
[data-screen="layer1"] .layer-actions, [data-screen="layer2"] .layer-actions { flex: none; display: flex; justify-content: center; width: 100%; min-height: 49px; margin-top: 10px; }
[data-screen="layer1"] .layer-actions .plaque-btn, [data-screen="layer2"] .layer-actions .plaque-btn {
  width: 212px; height: 49px; aspect-ratio: auto; background-size: 104% auto; background-position: center 48.8%;
  padding-bottom: 1px; font-size: 16px; letter-spacing: .12em; text-indent: .12em;
}
@media (min-width: 600px) {
  [data-screen="layer1"], [data-screen="layer2"] { --col-pad: 19px; }
}
@media (max-height: 720px) {
  [data-screen="layer1"], [data-screen="layer2"] { --grid-size: clamp(142px, calc(100vh - 405px), 218px); --page-h: auto; padding-bottom: 8px; }
  [data-screen="layer1"] .layer-heading, [data-screen="layer2"] .layer-heading { height: 55px; }
  [data-screen="layer1"] .layer-heading h2, [data-screen="layer2"] .layer-heading h2 { font-size: 24px; }
  [data-screen="layer1"] .layer-page, [data-screen="layer2"] .layer-page { padding: 16px 21px; }
  [data-screen="layer1"] .step, [data-screen="layer2"] .step { font-size: 13px; line-height: 19px; }
  [data-screen="layer1"] .digits, [data-screen="layer2"] .digits { margin: 6px 0 3px; }
  [data-screen="layer1"] .digit, [data-screen="layer2"] .digit { height: 30px; }
  [data-screen="layer1"] .chosen, [data-screen="layer2"] .chosen { margin-bottom: 3px; line-height: 18px; }
  [data-screen="layer1"] .grid, [data-screen="layer2"] .grid { gap: 6px; margin: 6px auto; }
  [data-screen="layer1"] .stop-note, [data-screen="layer2"] .stop-note { line-height: 18px; }
  [data-screen="layer1"] .layer-actions, [data-screen="layer2"] .layer-actions { margin-top: 6px; min-height: 44px; }
  [data-screen="layer1"] .layer-actions .plaque-btn, [data-screen="layer2"] .layer-actions .plaque-btn { height: 44px; }
}
@supports (height: 100dvh) {
  @media (max-height: 720px) {
    [data-screen="layer1"], [data-screen="layer2"] { --grid-size: clamp(142px, calc(100dvh - 405px), 218px); }
  }
}

/* ============ 畫面八 判詞頁（畫面六七八改版派工單 §2.3＋§七，2026-11-05，R-28、R-29） ============
   沿用現有素材：判詞卡 .card 為紙卡（border-image 同 .ask-card 之 dialog-frame 規則值、紙色 #f1e5d0），一鍵下載／回首頁為牌框鈕 .plaque-btn；
   頁底同畫面六、七（section::before 暖米白漸層，position: fixed）。頁面可捲動（判詞長，不要求一屏）。
   判詞文字一字不改，只動呈現（app.js partBody）：cause／status 首行 .part-lead 粗體區塊、status「；輕重：X」.sev-inline 字色同色標；
     remedy 為 ul.remedy-list，行首「- 」包 .dash 並隱藏（§七-2 唯一隱藏例外），改以 ::before 赭金小菱形呈現（content 空字串，不注入讀者文字）。
     結構化段（.structured）white-space: normal（行間 "\n" 文字節點不多出空行）；退路段維持 pre-line。
   色標（§2.3 起點；§七 對比 ≥ 4.5:1 不足時同色相加深）：輕為沉綠、中為赭褐、重為暗朱紅，膠囊字與紙底均保持對比。
   主欄寬 min(100vw, 640px)（同 .ask-card 上限），以負外距伸出 .app；正文 1rem（≥ 16px）；就醫提醒八#2-2 不小於正文（§七）。 */
[data-screen="verdict"] {
  --fb: clamp(30px, 8vw, 44px);
  width: min(100vw, 640px); margin: 0 calc(50% - min(50vw, 320px)); padding: 0 10px;
  color: #43342d; font-family: "Songti TC", "Noto Serif TC", "PMingLiU", serif;
}
[data-screen="verdict"] .card {
  margin: .25rem 0 .75rem; padding: .25rem .6rem .75rem; border-radius: 0;
  border-style: solid; border-width: calc(var(--fb) * 180 / 190) var(--fb);
  border-image: url("/art/dialog-frame.webp") 180 190 180 190 / calc(var(--fb) * 180 / 190) var(--fb) / 0 stretch;
  background-color: transparent; background-image: linear-gradient(#f1e5d0, #f1e5d0);
  background-origin: border-box; background-clip: border-box; background-repeat: no-repeat; background-position: center;
  background-size: calc(100% - var(--fb) * 180 / 190) calc(100% - var(--fb) * 220 / 190);
  color: #43342d; font-size: 1rem; line-height: 1.85;
}
[data-screen="verdict"] .vid { display: flex; justify-content: center; align-items: center; gap: .6rem; margin: .1rem 0 0; }
[data-screen="verdict"] .vid .id { color: #744536; font-size: clamp(1.75rem, 8.5vw, 2.25rem); font-weight: 700; line-height: 1.3; letter-spacing: .08em; }
[data-screen="verdict"] .sev {
  display: inline-block; padding: .05rem .75rem; border: 0; border-radius: 999px;
  color: #fff3d6; font-size: .95rem; font-weight: 700; line-height: 1.6; letter-spacing: .1em; text-indent: .1em;
}
[data-screen="verdict"] .sev.sev-light { background: #3c5348; }
[data-screen="verdict"] .sev.sev-mid { background: #5f4828; }
[data-screen="verdict"] .sev.sev-heavy { background: #783d33; }
[data-screen="verdict"] .asked { margin: .1rem 0 0; text-align: center; color: #635246; font-size: .875rem; line-height: 1.6; }
[data-screen="verdict"] .id-note {
  margin: .35rem 0 .25rem; padding: 0 .25rem .7rem; border-bottom: 1px solid #a28659;
  text-align: center; color: #635246; font-size: .875rem; line-height: 1.6;
}
[data-screen="verdict"] .verdict-part { margin: 1.1rem 0 0; }
[data-screen="verdict"] .part-label {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem;
  color: #744536; font-family: "Songti TC", "Noto Serif TC", "PMingLiU", serif; font-size: 1.05rem; font-weight: 700; line-height: 1.5;
}
[data-screen="verdict"] .part-label::after { content: ""; flex: 1 1 auto; height: 1px; background: rgb(162 134 89 / .55); }
[data-screen="verdict"] .part-body { margin: 0; white-space: pre-line; font-size: 1rem; }
[data-screen="verdict"] .part-body.structured { white-space: normal; }
[data-screen="verdict"] .part-lead { display: block; margin: 0 0 .1rem; font-weight: 700; }
[data-screen="verdict"] .sev-inline { padding: 0; border: 0; background: none; }
[data-screen="verdict"] .sev-inline.sev-light { color: #3c5348; }
[data-screen="verdict"] .sev-inline.sev-mid { color: #5f4828; }
[data-screen="verdict"] .sev-inline.sev-heavy { color: #783d33; }
[data-screen="verdict"] .remedy-list { list-style: none; margin: 0; padding: 0; }
[data-screen="verdict"] .remedy-list li { position: relative; margin: .45rem 0 0; padding-left: 1.15em; }
[data-screen="verdict"] .remedy-list li:first-child { margin-top: 0; }
[data-screen="verdict"] .remedy-list li::before {
  content: ""; position: absolute; left: .22em; top: calc(.925em - .21em); width: .42em; height: .42em;
  background: #a28659; transform: rotate(45deg);
}
[data-screen="verdict"] .dash { display: none; }
[data-screen="verdict"] .remedy-name { font-weight: 700; }
[data-screen="verdict"] .plaque-btn { display: block; margin: .75rem auto; }
[data-screen="verdict"] .services-title { margin: 1.25rem 0 .5rem; text-align: center; color: #744536; font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; }
[data-screen="verdict"] .services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 768px) { [data-screen="verdict"] .services { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
[data-screen="verdict"] .service-card {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .15rem; padding: .5rem .6rem;
  background: #f8efde; border: 1px solid #a28659; border-radius: 4px; text-align: center; color: #43342d; font-size: 1rem; line-height: 1.5;
}
[data-screen="verdict"] .service-name { display: block; font-weight: 600; }
[data-screen="verdict"] .service-open {
  width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; line-height: inherit; text-align: center;
  text-decoration: underline; text-decoration-color: #a28659; text-underline-offset: .25em;
  cursor: pointer; touch-action: manipulation;
}
[data-screen="verdict"] .service-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[data-screen="verdict"] .service-more { color: #744536; font-size: .875rem; }
[data-screen="verdict"] .prajna:not(:empty) {
  margin: 1rem 0 .5rem; padding: .75rem 1rem; background: #f8efde; border: 1px solid rgb(162 134 89 / .6); border-radius: 4px; text-align: center;
}
[data-screen="verdict"] .prajna p { margin: 0; font-size: 1rem; line-height: 1.75; color: #43342d; }
[data-screen="verdict"] .practice-btn {
  width: min(100%, 16rem); margin-bottom: 0; font-size: clamp(14px, 3.8vw, 17px);
  letter-spacing: .06em; text-indent: .06em;
}
.modal-service .modal-box { max-width: 640px; }
.modal-service .result-title { overflow-wrap: anywhere; }
.modal-service .service-prayer {
  display: block; width: 100%; height: clamp(16rem, 54dvh, 36rem); margin: .75rem 0 .25rem;
  border: 1px solid #a28659; border-radius: 4px; background: #fff;
}
.modal-service .service-links {
  display: grid; gap: .5rem; list-style: none; margin: .75rem 0 .25rem; padding: 0;
}
.modal-service .service-links a {
  display: flex; align-items: center; min-height: 44px; padding: .45rem .65rem;
  border: 1px solid #a28659; border-radius: 4px; background: #f8efde; color: #744536;
  line-height: 1.5; overflow-wrap: anywhere; text-underline-offset: .2em;
}
.modal-service .service-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-screen="verdict"] [data-t="八#2-2"] {
  margin: 1rem 0 .5rem; padding: .25rem 0 .25rem .75rem; border-left: 3px solid #744536;
  color: #43342d; font-size: 1rem; line-height: 1.75;
}
[data-screen="verdict"] .service-paren { display: block; white-space: nowrap; font-size: .88em; color: #7a5f45; }