/* Font nhúng sẵn (Noto Serif, giấy phép OFL, đã cắt gọn) để máy nào cũng hiển thị giống nhau, không phụ thuộc font hệ thống */
@font-face { font-family: "Noto Serif Local"; src: url("../fonts/NotoSerif-vi.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Serif TC Local"; src: url("../fonts/NotoSerifTC-subset.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF, U+2190-2193, U+25A0-25FF, U+2600-26FF, U+2713; }
:root {
  color-scheme: light;
  --bg0: #3b0c09; --bg1: #5c120d; --bg2: #8a2218;
  --panel: #fbf0d2; --paper2: #f4e2b4; --inset: rgba(160, 100, 40, .08);
  --ink: #3a2418; --head: #7a1812; --muted: #6b5444; --line: rgba(160, 100, 30, .45);
  --gold: #8f5a0c; --gold-deco: #d9992a; --gold-hi: #fbe7a8; --gold-lo: #a5660f;
  --jade: #17725f; --moving: #c0392b; --seal: #b3261e; --seal-ink: #fff6ee;
  --danger: #a32119; --focus: #1a56c8; --lotus: #e58aa0; --smoke: 235, 225, 210;
  --cream: #fffaf0; --gold-soft: rgba(246, 212, 122, .4);
  --yang: #b8741a; --coin: #e0b04a; --coin-hi: #fbe7a8; --coin-lo: #9a6d1c; --coin-ink: #2b1d05;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; overflow-wrap: anywhere; color: var(--ink); background: var(--bg0);
  font: 16px/1.65 "Noto Serif Local", "Noto Serif TC Local", Georgia, "Times New Roman", "Noto Serif", serif;
}
/* nền là một lớp cố định riêng (không dùng background-attachment: fixed, vì nó khiến cả trang vẽ lại mỗi khi có chuyển động) */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  repeating-linear-gradient(45deg, rgba(217, 153, 42, .045) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, rgba(217, 153, 42, .045) 0 2px, transparent 2px 26px),
    radial-gradient(1000px 640px at 50% -6%, var(--bg2) 0%, var(--bg1) 45%, var(--bg0) 100%);
  transform: translateZ(0); }
.bar { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
main { position: relative; z-index: 1; margin: 0; padding: 0; }

.han { font-family: "Noto Serif TC Local", "Noto Serif CJK TC", "Noto Serif TC", "Songti TC", "PingFang TC", "Hiragino Mincho ProN", "MS Mincho", serif; }
.skip { position: absolute; left: -999px; top: 0; background: var(--head); color: #fff; padding: 8px 12px; z-index: 20; }
.skip:focus { left: 8px; top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---- Đầu trang ---- */
h1 {
  margin: 0; font-size: clamp(1.8rem, 6vw, 2.5rem); line-height: 1.2; letter-spacing: .06em; font-weight: 700; color: var(--head);
  text-shadow: 0 2px 0 rgba(212, 162, 60, .4), 0 0 24px rgba(212, 162, 60, .3);
}
.brand-name { font-size: 1.2rem; font-weight: 700; letter-spacing: .05em; color: var(--gold-hi); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.mini-altar { width: 62px; flex: none; overflow: visible; }
.mini-altar svg { display: block; width: 100%; }
.tagline { margin: 4px 0 0; color: var(--muted); font-style: italic; }
.tagline .han { color: var(--gold); font-style: normal; letter-spacing: .3em; }

/* ---- Khung nội dung ---- */
.panel {
  position: relative; border-radius: 16px;
  background: linear-gradient(180deg, #fff6dc, var(--panel) 40%, var(--paper2));
  padding: 20px 18px; margin: 0 0 20px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}
h2 { font-size: 1.25rem; margin: 0 0 14px; color: var(--head); letter-spacing: .04em; display: flex; align-items: center; gap: 10px; }
h2::before, h2::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--line)); }
h2::before { flex: 0 0 18px; background: var(--gold-deco); opacity: .8; }
h3 { font-size: 1.05rem; margin: 0 0 6px; }
label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--head); }
textarea {
  width: 100%; font: inherit; line-height: 28px; color: var(--ink); border: 0;
  border-radius: 10px; padding: 6px 14px; resize: vertical; transition: box-shadow .2s;
  background: repeating-linear-gradient(180deg, #fff9e6 0 27px, rgba(179, 38, 30, .16) 27px 28px);
  background-attachment: local; box-shadow: inset 0 1px 4px rgba(120, 70, 20, .16);
}
textarea::placeholder { color: #9a7a60; }
textarea:focus { box-shadow: 0 0 0 3px rgba(212, 162, 60, .45); outline: none; }
button {
  font: inherit; min-height: 44px; padding: 8px 18px; border-radius: 999px; cursor: pointer;
  border: 0; background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(80, 40, 10, .18);
  transition: transform .15s, box-shadow .2s, background .2s;
}
button:hover:not([disabled]) { background: #fff1d6; }
button.primary {
  min-width: 190px; font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; color: var(--gold-hi);
  border: 0;
  background: linear-gradient(180deg, #c8372d, #8a1d15);
  box-shadow: 0 0 0 1px rgba(255, 240, 200, .4) inset, 0 6px 18px rgba(120, 20, 10, .45);
  animation: breathe 3.2s ease-in-out infinite;
}
button.primary:hover:not([disabled]) { transform: translateY(-1px); background: linear-gradient(180deg, #d9453a, #9b2118); box-shadow: 0 0 0 1px rgba(255, 240, 200, .6) inset, 0 8px 24px rgba(160, 30, 15, .55); }
@keyframes breathe { 50% { box-shadow: 0 0 0 1px rgba(255, 240, 200, .5) inset, 0 6px 26px rgba(217, 153, 42, .7); } }
button.danger { color: var(--danger); background: #fdecea; }
button.small { min-height: 36px; padding: 4px 14px; font-size: .9rem; }
button[disabled] { opacity: .6; cursor: not-allowed; animation: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus-visible { outline: none; } /* tiêu đề trang chỉ nhận focus bằng mã để đọc màn hình */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
#cast-btn { width: 100%; }
.muted { color: var(--muted); }

/* ---- Sân khấu gieo ---- */
@keyframes glow { from { opacity: .5; transform: scale(.92); } to { opacity: 1; transform: scale(1.06); } }
.coins { position: relative; display: flex; gap: 20px; justify-content: center; perspective: 700px; height: 118px; padding: 20px 0 10px; }
.coins::before { content: ""; position: absolute; left: 50%; bottom: 0; width: min(330px, 92%); height: 78px; transform: translateX(-50%); border-radius: 50%; z-index: 0;
  background: radial-gradient(ellipse at 50% 40%, #8a5a2c 0%, #6b4220 55%, #4a2a12 100%); box-shadow: 0 8px 16px rgba(0,0,0,.4), inset 0 4px 10px rgba(0,0,0,.45); }
.coin { z-index: 1; margin-top: 8px; }
.coin {
  position: relative; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, var(--coin-hi), var(--coin) 48%, var(--coin-lo));
  border: 3px solid var(--coin-lo); box-shadow: 0 6px 16px rgba(90, 60, 20, .35), inset 0 0 0 3px rgba(255, 240, 190, .35);
  color: var(--coin-ink); font-weight: 800; font-size: 1.15rem;
}
.coin::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px solid rgba(80, 50, 5, .5); }
.coin span { position: absolute; font-size: .95rem; bottom: 9px; letter-spacing: 0; }
.coin::after { content: ""; width: 20px; height: 20px; background: #3b1b10; border: 2px solid var(--coin-lo); box-shadow: inset 0 0 4px rgba(0, 0, 0, .7); transform: translateY(-4px); }
.coin.flip { animation: flip .75s cubic-bezier(.3, .1, .3, 1); }
.coin:nth-child(2).flip { animation-delay: .05s; }
.coin:nth-child(3).flip { animation-delay: .1s; }
@keyframes flip { 0% { transform: rotateX(0) translateY(0); } 50% { transform: rotateX(540deg) translateY(-26px); } 100% { transform: rotateX(1080deg) translateY(0); } }
.progress { position: relative; display: flex; flex-direction: column-reverse; align-items: center; margin-top: 10px; }
.progress .slot { height: 26px; width: 150px; display: flex; align-items: center; justify-content: center; background: rgba(150, 105, 30, .05); margin-bottom: 2px; border-radius: 4px; }
.progress .row { opacity: 0; transform: translateY(8px) scale(.96); animation: appear .45s forwards; }
@keyframes appear { to { opacity: 1; transform: none; } }

/* ---- Hình quẻ ---- */
.hex-line { stroke: var(--yang); stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 1px 2px rgba(150, 105, 30, .35)); }
.hex-line.mv { stroke: var(--moving); filter: drop-shadow(0 1px 3px rgba(192, 57, 43, .45)); }
.hex-mark { fill: none; stroke: var(--moving); stroke-width: 3; }
.hex-mark-x { stroke: var(--moving); stroke-width: 3; stroke-linecap: round; }
.figures { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.arrow { font-size: 1.8rem; color: var(--gold); flex: none; }
.fig {
  flex: 1 1 0; min-width: 0; position: relative; text-align: center; padding: 14px 8px 12px; border-radius: 14px;
  background: radial-gradient(circle at 50% 30%, rgba(246, 212, 122, .4), transparent 65%), var(--cream);
  box-shadow: 0 0 0 1px rgba(160, 100, 30, .3);
}
.fig svg { display: block; margin: 8px auto; width: min(120px, 100%); height: auto; overflow: visible; }
.fig .sub { color: var(--muted); font-size: .92rem; }
.fig .name { font-weight: 700; font-size: 1.1rem; color: var(--head); }
.fig .name .han { font-size: 1.5rem; margin-right: 6px; color: var(--gold); }
.fig .hex-line { animation: lineIn .6s both; }
.fig .hex-line.l0 { animation-delay: .05s; } .fig .hex-line.l1 { animation-delay: .15s; } .fig .hex-line.l2 { animation-delay: .25s; }
.fig .hex-line.l3 { animation-delay: .35s; } .fig .hex-line.l4 { animation-delay: .45s; } .fig .hex-line.l5 { animation-delay: .55s; }
@keyframes lineIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- Kết quả ---- */
.question { font-style: italic; color: var(--muted); margin: 0 0 6px; text-align: center; font-size: 1.05rem; }
.question:empty { display: none; }
.item { border-radius: 14px; margin: 16px 0; overflow: hidden; background: var(--cream); box-shadow: 0 0 0 1px rgba(160, 100, 30, .3); animation: rise .5s both; }
.item.main { box-shadow: 0 0 0 2px var(--seal), 0 8px 20px rgba(179, 38, 30, .16); }
.item.main > header { background: linear-gradient(90deg, rgba(179, 38, 30, .16), var(--gold-soft)); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hintIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.item > header { padding: 10px 14px; background: linear-gradient(90deg, rgba(246, 212, 122, .5), rgba(246, 212, 122, .1)); font-weight: 700; color: var(--head); }
.item .badge { display: inline-block; font-size: .74rem; font-weight: 700; padding: 1px 9px; border-radius: 10px; background: var(--head); color: #fff; margin-left: 8px; vertical-align: middle; }
.tier { padding: 12px 14px; }
.tier + .tier { padding-top: 4px; }
.tag { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 9px; margin-bottom: 6px; }
.tag.orig { background: var(--seal); color: var(--seal-ink); border-radius: 3px; box-shadow: 0 0 0 2px rgba(179, 38, 30, .25); transform: rotate(-1.5deg); }
.tag.interp { background: var(--gold-soft); color: var(--gold); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--gold-deco); }
.tier .zh { font-size: 1.45rem; line-height: 1.8; margin: 0; color: #4a1d12; letter-spacing: .06em; }
.tier .hv { margin: 0; color: var(--muted); font-style: italic; }
.tier .modern { margin: 0; }
.note { margin: 8px 0 0; font-size: .86rem; padding: 6px 10px; background: rgba(160, 100, 40, .08); border-radius: 8px; color: var(--muted); }

/* ---- Lịch sử, cách đọc ---- */
.history { list-style: none; margin: 0; padding: 0; }
.history li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; }
.history li + li { border-top: 1px solid var(--line); }
.history .meta { flex: 1 1 200px; min-width: 0; }
.how p, .how li { font-size: .95rem; }
.how strong { color: var(--head); }
.history .meta > div:first-child { font-weight: 600; color: var(--head); }


/* ---- Thanh trên cùng ---- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; position: absolute; top: 0; left: 0; right: 0; max-width: none; z-index: 30; pointer-events: none; }
.bar > * { pointer-events: auto; }
.brand { display: none; }
.count { display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: 999px; background: var(--seal); color: #fff; font-size: .78rem; line-height: 1.5; text-align: center; }
.opt { font-weight: 400; color: var(--muted); font-size: .88rem; }

/* ---- Bố cục theo trạng thái: start → casting → result ---- */
.layout { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); padding: 0; max-width: none; align-content: start; }

/* start + casting: khối câu hỏi nằm giữa màn hình */

/* result: khối câu hỏi thu thành một thanh gọn */
.result-body { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .result-body { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
  .figures { position: sticky; top: 16px; flex-direction: column; margin: 0; }
  .figures .arrow { transform: rotate(90deg); }
  .fig { width: 100%; flex: none; }
}
@media (min-width: 900px) { .result-body.safe { display: block; max-width: 640px; margin-inline: auto; } }
.result-body #reading > .verdict:first-child { margin-top: 0; }

/* ---- Lời đọc ---- */
.verdict {
  position: relative; text-align: center; margin: 14px 0; padding: 14px 16px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(246, 212, 122, .38), rgba(246, 212, 122, .1));
}
.verdict-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--head); letter-spacing: .06em; }
.verdict-title .han { display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--seal); color: var(--seal-ink); border-radius: 4px; font-size: 1.1rem; transform: rotate(-3deg); }
.verdict-rule { margin: 6px 0 0; font-size: 1.05rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 0; padding: 0; }
.chips li { padding: 3px 12px; border-radius: 999px; background: var(--cream); color: var(--moving); font-size: .9rem; font-weight: 600; box-shadow: inset 0 0 0 1px var(--gold-deco); }

/* ---- Các trang (tab) ---- */


/* ---- Luận giải & tín hiệu ---- */
.tone { display: inline-block; font-size: .76rem; font-weight: 700; padding: 1px 10px; border-radius: 999px; margin-left: 8px; vertical-align: middle; background: rgba(160, 100, 30, .1); color: var(--head); box-shadow: inset 0 0 0 1px rgba(160, 100, 30, .35); }
.t-tl { background: linear-gradient(180deg, var(--gold-hi), var(--gold-deco)); color: #3b0c09; box-shadow: none; }
.t-dk { background: rgba(246, 212, 122, .7); color: #5a3205; box-shadow: inset 0 0 0 1px var(--gold-deco); }
.t-ct { background: rgba(179, 38, 30, .1); color: var(--seal); box-shadow: inset 0 0 0 1px rgba(179, 38, 30, .45); }
.t-bl { background: var(--seal); color: var(--seal-ink); box-shadow: none; }
.luan { border-radius: 14px; background: var(--cream); margin: 0 0 16px; padding: 0 0 6px; box-shadow: inset 5px 0 0 var(--gold-deco), 0 0 0 1px rgba(160, 100, 30, .3); animation: rise .5s both; }
.luan > header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; padding: 12px 16px; }
.luan > header h3 { margin: 0; color: var(--head); font-size: 1.1rem; }
.luan > header .tone { margin-left: auto; }
.luan-echo { margin: 0; padding: 10px 18px 0; font-style: italic; color: var(--muted); }
.luan-meta { margin: 6px 18px 8px; padding-top: 4px; font-size: .88rem; color: var(--muted); }
/* các phương án khi hỏi "A hay B" */
.choice { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 10px 18px 2px; }
.choice li { padding: 5px 14px; border-radius: 999px; background: var(--cream); color: var(--muted); box-shadow: inset 0 0 0 1px rgba(160, 100, 30, .35); }
.choice li.picked { background: linear-gradient(180deg, #c8372d, #8a1d15); color: var(--gold-hi); font-weight: 700; box-shadow: 0 2px 8px rgba(120, 20, 10, .35); }
/* lời thầy: các đoạn văn liền mạch */
.luan-body { padding: 4px 0 2px; }
.luan-p { margin: 0; padding: 10px 18px; font-size: 1.06rem; line-height: 1.8; }
.luan-p.lead { background: linear-gradient(90deg, rgba(246, 212, 122, .6), rgba(246, 212, 122, .16)); font-size: 1.12rem; font-weight: 600; color: #4a1d12; }
.luan-p.end { font-style: italic; color: var(--head); }

/* ---- Ống nhang, người thắp hương, đèn lồng ---- */
.person { opacity: 0; }
.altar svg.praying .person { animation: pSlide 6.9s ease both; }
@keyframes pSlide {
  0% { opacity: 0; transform: translateX(-130px); }
  9% { opacity: 1; transform: translateX(0); }
  88% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(34px); }
}
.torso { transform-box: fill-box; transform-origin: 50% 100%; }
.altar svg.praying .torso { animation: bow 3.6s ease-in-out 1.7s both; }
@keyframes bow {
  0%, 28%, 56%, 84%, 100% { transform: none; }
  14%, 42%, 70% { transform: translateY(5px) scaleY(.87); }
}
.held { opacity: 0; }
.altar svg.praying .held { animation: held 5.4s linear both; }
@keyframes held { 0% { opacity: 0; } 11% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }
.stick.drop { animation: stickDrop .9s ease-out both; }
@keyframes stickDrop { from { transform: translateY(-36px); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
.lantern .lglow { animation: lglow 3.4s ease-in-out infinite alternate; }
@keyframes lglow { from { opacity: .65; } to { opacity: 1; } }
.lantern .swing { transform-box: fill-box; transform-origin: 50% 0%; animation: swing 4.6s ease-in-out infinite alternate; }
.lantern:nth-of-type(odd) .swing { animation-delay: -2.2s; }
@keyframes swing { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
body.state-casting .incense-hint { display: none; }

/* ---- Lời thầy nhắn hôm nay ---- */
.daily { display: flex; gap: 12px; align-items: stretch; text-align: left; border-radius: 12px; background: linear-gradient(180deg, #fffaf0, #f6e7bf); padding: 10px 14px 10px 10px; }
.daily.mini { margin: 12px 0 4px; }
.daily.big { padding: 18px 20px 18px 16px; gap: 16px; }
.dq-seal { flex: none; width: 38px; height: 38px; display: grid; place-items: center; background: var(--seal); color: var(--seal-ink); border-radius: 4px; font-size: 1.35rem; transform: rotate(-4deg); box-shadow: 0 0 0 2px rgba(179, 38, 30, .25); align-self: flex-start; }
.daily.big .dq-seal { width: 52px; height: 52px; font-size: 1.9rem; }
.dq-body { min-width: 0; }
.dq-date { margin: 0 0 2px; font-size: .8rem; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.dq-text { margin: 0; font-style: italic; color: var(--head); line-height: 1.55; font-size: 1.02rem; }
.daily.big .dq-text { font-size: 1.35rem; line-height: 1.6; }
.dq-hex { margin: 6px 0 0; font-size: .86rem; color: var(--muted); }
.dq-hex .han { color: var(--gold); font-weight: 700; }
.dq-advice { margin: 12px 0 0; font-size: 1.04rem; }
.daily-note { margin: 12px 4px 0; font-size: .9rem; }
body.state-casting .daily.mini { display: none; }

/* ---- Rèm lay động nhẹ ---- */
.drape-in { transform-origin: 0 0; animation: drapeSway 7s ease-in-out infinite alternate; }
@keyframes drapeSway { 0% { transform: skewX(-1.1deg) scaleX(1); } 100% { transform: skewX(1.1deg) scaleX(1.03); } }
.valance { animation: valanceWave 6s ease-in-out infinite alternate; }
@keyframes valanceWave { from { transform: translateY(-.8px) scaleX(1); } to { transform: translateY(2.4px) scaleX(1.004); } }
.tassel { transform-box: fill-box; transform-origin: 50% 0; animation: tasselSwing 4.2s ease-in-out infinite alternate; }
.tassel.small { animation-duration: 3.4s; }
@keyframes tasselSwing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

/* ---- Bồ tát ---- */
.bodhi .arms { transform-box: fill-box; transform-origin: 50% 100%; animation: armPulse 5.5s ease-in-out infinite alternate; }
@keyframes armPulse { from { transform: scale(.975); } to { transform: scale(1.03); } }
.pedestal, .bodhi { pointer-events: none; }

/* ---- Bàn thờ ---- */
.altar-wrap { width: 100%; position: relative; overflow: hidden; } /* nhốt các dòng chỉ-dành-cho-trình-đọc-màn-hình, nếu không chúng làm trang cao hơn màn hình và hiện thanh cuộn thừa */
.altar { width: 100%; margin: 0; display: flex; justify-content: center; }
.altar svg { display: block; width: 100%; height: auto; overflow: hidden; transform: translateZ(0); }
.altar.fill { height: 100vh; height: 100svh; }
.altar.fill svg { height: 100%; }
.altar .han { font-family: "Noto Serif TC Local", "Noto Serif CJK TC", "Noto Serif TC", "Songti TC", "PingFang TC", "Hiragino Mincho ProN", "MS Mincho", serif; font-weight: 700; }
.rays { transform-box: fill-box; transform-origin: center; animation: spin 26s linear infinite; }
.rays line { stroke: var(--gold-deco); stroke-width: 2; stroke-linecap: round; }
.aura { fill: rgba(251, 231, 168, .28); stroke: var(--gold-deco); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: breathe2 2.8s ease-in-out infinite alternate; }
/* Hào quang sau lưng Phật phát sáng nhẹ, thở chậm (chỉ đổi độ sáng và kích thước, không dùng bộ lọc làm mờ) */
.halo { transform-box: fill-box; transform-origin: center; animation: haloGlow 4.6s ease-in-out infinite alternate; }
@keyframes haloGlow { from { opacity: .5; transform: scale(.93); } to { opacity: 1; transform: scale(1.08); } }
.rays line { animation: rayShimmer 3.2s ease-in-out infinite alternate; }
.rays line:nth-child(even) { animation-delay: -1.6s; }
@keyframes rayShimmer { from { opacity: .55; } to { opacity: 1; } }
@keyframes breathe2 { from { transform: scale(.94); opacity: .75; } to { transform: scale(1.05); opacity: 1; } }
.flame { fill: #ff9a2e; transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.1s ease-in-out infinite alternate; }
.flame-glow { fill: rgba(255, 190, 80, .35); transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.4s ease-in-out infinite alternate-reverse; }
.flame-core { fill: #fff3b0; transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .9s ease-in-out infinite alternate; }
@keyframes flicker { 0% { transform: scale(1, 1) skewX(-3deg); } 50% { transform: scale(.92, 1.08) skewX(2deg); } 100% { transform: scale(1.05, .94) skewX(4deg); } }
.ember { fill: #ff7a45; animation: ember 1.6s ease-in-out infinite alternate; }
@keyframes ember { from { opacity: .55; } to { opacity: 1; } }
/* khói và sương: lớp HTML riêng, chỉ transform + opacity => do card đồ họa dựng, không làm vẽ lại bức tranh SVG */
.altar { position: relative; }
.fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; contain: strict; }
.fx .stick-smoke { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.fx .puff, .fx .haze { position: absolute; opacity: 0; will-change: transform, opacity; backface-visibility: hidden; background-repeat: no-repeat; background-size: 100% 100%;
  background-image: radial-gradient(closest-side, rgba(255, 246, 236, .3), rgba(255, 246, 236, 0)); }
.fx .puff { transform-origin: 50% 50%; animation: puffd calc(var(--dur, 26s) * var(--speed, 1)) linear infinite; }
.fx .haze { animation: hazed calc(var(--dur, 20s) * var(--speed, 1)) ease-in-out infinite; }
/* khói nhang bay chậm: sợi mảnh gần như thẳng ở đoạn đầu, lên cao mới nở ra, gợn sang hai bên nhẹ nhàng rồi tan dần */
@keyframes puffd {
  0% { transform: translate3d(0, 0, 0) scale(.16); opacity: 0; }
  7% { opacity: .5; }
  28% { transform: translate3d(calc(var(--a, 10px) * .08), calc(var(--dy, -150px) * .27), 0) scale(.34); opacity: .46; }
  52% { transform: translate3d(calc(var(--a, 10px) * .6), calc(var(--dy, -150px) * .52), 0) scale(.78); opacity: .36; }
  76% { transform: translate3d(calc(var(--a, 10px) * -.5), calc(var(--dy, -150px) * .77), 0) scale(1.35); opacity: .2; }
  100% { transform: translate3d(calc(var(--a, 10px) * 1.05), var(--dy, -150px), 0) scale(2.1); opacity: 0; }
}
@keyframes hazed {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(.6); opacity: 0; }
  30% { opacity: var(--op, .5); }
  100% { transform: translate3d(var(--dx, 80px), var(--dy, -70px), 0) rotate(var(--rot, 6deg)) scale(1.5); opacity: 0; }
}
.fx .veil { position: absolute; inset: 0; background: #fff6ec; opacity: 0; will-change: opacity; animation: veil 9s ease-in-out infinite alternate; }
/* (các quy tắc dưới đây là cho khói của biểu tượng nhỏ trên thanh trên, vẽ bằng SVG) khói: sợi khói gần bát hương nhẹ và thưa; sương khói lan ra hai bên rồi phủ nhẹ cả bàn thờ */
.puff { fill: url(#ag-puff); transform-box: fill-box; transform-origin: center; opacity: 0; animation: puff calc(var(--dur, 8s) * var(--speed, 1)) ease-out infinite; }
@keyframes puff {
  0% { transform: translate(0, 0) scale(.5); opacity: 0; }
  14% { opacity: .62; }
  60% { transform: translate(calc(var(--dx, 10px) * .6), calc(var(--h, 70px) * -.6)) scale(2.4); opacity: .38; }
  100% { transform: translate(var(--dx, 10px), calc(var(--h, 70px) * -1)) scale(3.6); opacity: 0; }
}
.smoke { fill: none; stroke: rgba(255, 248, 240, .42); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; animation: smoke calc(10s * var(--speed, 1)) ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes smoke {
  0% { stroke-dashoffset: 100; opacity: 0; transform: translateX(0) scaleX(1); }
  18% { opacity: .5; }
  70% { stroke-dashoffset: 0; opacity: .26; transform: translateX(10px) scaleX(1.7); }
  100% { stroke-dashoffset: 0; opacity: 0; transform: translateX(-8px) scaleX(2.2); }
}
.haze { fill: url(#ag-hz); opacity: 0; transform-box: fill-box; transform-origin: center; animation: haze calc(var(--dur, 20s) * var(--speed, 1)) ease-in-out infinite; }
@keyframes haze {
  0% { transform: translate(0, 0) scale(.5); opacity: 0; }
  30% { opacity: var(--op, .1); }
  100% { transform: translate(var(--dx, 80px), var(--dy, -70px)) scale(2.5); opacity: 0; }
}
/* sương phủ bàn thờ đậm dần theo số nhang đang cháy (--v: 0..1) */
@keyframes veil { from { opacity: calc(var(--v, 0) * .08); } to { opacity: calc(var(--v, 0) * .2); } }
.mini-altar:not(.lit) .puff, .mini-altar:not(.lit) .smoke { display: none; }
body.state-casting { --speed: .8; }
body.state-casting .flame, body.state-casting .flame-core { animation-duration: .35s; }
body.state-casting .flame-glow { fill: rgba(255, 200, 90, .55); animation-duration: .5s; }
.ritual-text { margin: 4px 0 0; text-align: center; color: var(--head); font-style: italic; letter-spacing: .08em; animation: textfade 1.3s ease-in-out infinite alternate; }
@keyframes textfade { from { opacity: .55; } to { opacity: 1; } }

.petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; border-radius: 16px; }
.petal {
  position: absolute; top: -18px; width: 12px; height: 16px; background: linear-gradient(160deg, #f6b3c4, var(--lotus));
  border-radius: 0 100% 0 100%; opacity: 0; animation: petal 4.6s ease-in forwards;
}
.petal.gold { background: linear-gradient(160deg, #fbe7a8, #e0a93a); }
@keyframes petal {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  12% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--sway, 20px), 420px) rotate(420deg); }
}

/* ---- Menu một biểu tượng ---- */
.bar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.menu { position: relative; }
.fs-btn[hidden] { display: none; }
.fs-btn .fs-out { display: none; }
.fs-btn[aria-pressed="true"] .fs-in { display: none; }
.fs-btn[aria-pressed="true"] .fs-out { display: inline; }
.menu-btn { position: relative; width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%; background: #fbf0d2; color: var(--head); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.menu-btn svg { width: 24px; height: 24px; fill: currentColor; }
.menu-btn[aria-expanded="true"] { background: linear-gradient(180deg, var(--gold-hi), var(--gold-deco)); color: #3b0c09; }
.menu-btn .count { position: absolute; top: -3px; right: -3px; margin: 0; }
.menu-list { position: absolute; right: 0; top: 54px; min-width: 190px; padding: 8px; border-radius: 14px; background: linear-gradient(180deg, #fff6dc, var(--paper2)); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); display: grid; gap: 2px; animation: rise .22s both; }
.menu-list button { width: 100%; justify-content: flex-start; text-align: left; border-radius: 10px; background: transparent; box-shadow: none; min-height: 42px; padding: 8px 14px; color: var(--head); font-size: 1rem; }
.menu-list button:hover { background: rgba(217, 153, 42, .22); }
.menu-list button[aria-current="page"] { background: rgba(179, 38, 30, .12); font-weight: 700; }

/* ---- Tờ giấy lời khấn (popup, không phủ tối nền) ---- */
.ask-pop { position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.ask-pop { transform: translateZ(0); }
.ask-card { will-change: transform, opacity; backface-visibility: hidden; width: min(540px, 100%); margin: auto; animation: unroll .38s cubic-bezier(.2, .8, .2, 1) both; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); padding: 22px 20px 22px; }
@keyframes unroll { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.ask-close { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.5rem; line-height: 1; background: rgba(160, 100, 40, .14); color: var(--head); box-shadow: none; }
.ask-card .tagline { margin-top: 2px; }
.ask-card .ask { display: block; margin-top: 12px; }
.ask-card textarea { margin-bottom: 12px; }
.ask-card #cast-btn { width: 100%; }

/* ---- Rê chuột vào ống nhang / giấy bút: chỉ làm sáng chính món đồ, không có vòng tròn ---- */
.hot { cursor: pointer; outline: none; }
.hot .hit { fill: transparent; pointer-events: all; }
.hot .obj { transition: filter .18s; }
.hot:hover .obj, .hot:focus-visible .obj { filter: brightness(1.28) saturate(1.12) drop-shadow(0 0 5px rgba(255, 226, 150, .85)); }
.hot.nudge .obj { animation: nudge 1.1s ease-in-out 5; }
@keyframes nudge { 0%, 100% { filter: none; } 50% { filter: brightness(1.35) drop-shadow(0 0 6px rgba(255, 226, 150, .95)); } }
.altar svg.praying .hot { pointer-events: none; }
.haze-layer, .smoke-layer, .curtains, .frame, .person, .veil { pointer-events: none; }

/* ---- Khu gieo quẻ và thanh Gieo lại (nằm ngoài tờ giấy) ---- */
.incense-hint { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 35; width: calc(100% - 32px); max-width: 560px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .progress .row, .item { opacity: 1; transform: none; }
  .smoke, .puff, .haze, .veil, .petals { display: none; }
}

@media (max-width: 520px) {
  .brand .tagline { display: none; }
  .item .tier .zh { font-size: 1.3rem; }
}

/* ---- Mõ: gõ một tiếng, dùi nhấc lên đập xuống, thân mõ nảy nhẹ và có vòng sóng ---- */
.mo .mo-body { transform-box: fill-box; transform-origin: 50% 100%; }
.mo .mallet { transform-box: fill-box; transform-origin: 50% 100%; }
.mo .ring { fill: none; stroke: #ffe39a; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.mo.knock .mo-body { animation: moBounce .34s ease-out; }
.mo.knock .mallet { animation: malletTap .34s ease-in-out; }
.mo.knock .ring { animation: moRing .6s ease-out; }
@keyframes moBounce { 0% { transform: none; } 22% { transform: scale(1.06, .92); } 55% { transform: scale(.985, 1.03); } 100% { transform: none; } }
@keyframes malletTap { 0% { transform: none; } 30% { transform: rotate(-38deg); } 55% { transform: rotate(-30deg); } 100% { transform: none; } }
@keyframes moRing { from { opacity: .85; transform: scale(.9); } to { opacity: 0; transform: scale(1.7); } }

/* ---- Radio kinh: đèn báo sáng, kim dò đài đung đưa, nốt nhạc bay lên khi đang phát ---- */
.radio .led { fill: #5a1a14; }
.radio.playing .led { fill: #ff6a3d; animation: ledGlow 1.1s ease-in-out infinite alternate; }
.radio .needle { transform-box: fill-box; transform-origin: 50% 100%; }
.radio.playing .needle { animation: needleSway 3.4s ease-in-out infinite alternate; }
.radio .note { opacity: 0; }
.radio.playing .note { animation: noteUp 2.6s ease-out infinite; }
.radio.playing .note:nth-of-type(2) { animation-delay: -1.3s; }
@keyframes ledGlow { from { opacity: .55; } to { opacity: 1; } }
@keyframes needleSway { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
@keyframes noteUp { 0% { opacity: 0; transform: translate(0, 4px); } 18% { opacity: .95; } 100% { opacity: 0; transform: translate(6px, -16px); } }

.radio-panel { position: fixed; right: 14px; bottom: 14px; z-index: 30; width: min(272px, calc(100vw - 28px)); padding: 8px 8px 6px; border-radius: 12px; background: linear-gradient(180deg, #fff6dc, var(--paper2)); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); animation: unroll .3s cubic-bezier(.2, .8, .2, 1) both; }
.radio-panel[hidden] { display: none; }
.radio-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.radio-title { flex: 1; min-width: 0; font-size: .82rem; font-weight: 700; color: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbtn { min-height: 30px; padding: 3px 10px; border-radius: 999px; border: 0; font: inherit; font-size: .78rem; cursor: pointer; background: rgba(160, 100, 40, .16); color: var(--head); box-shadow: none; }
.rbtn:hover { background: rgba(217, 153, 42, .32); }
.radio-frame { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #1a0d06; }
.radio-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.radio-yt { display: block; margin-top: 5px; font-size: .74rem; text-align: center; color: var(--head); }
.radio-card { width: min(460px, 100%); }
.radio-pop-t { margin: 0 0 10px; font-size: 1.15rem; color: var(--head); }
.radio-list { display: grid; gap: 6px; margin-bottom: 14px; }
.radio-list label { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(160, 100, 40, .1); cursor: pointer; line-height: 1.35; }
.radio-list label:hover { background: rgba(217, 153, 42, .22); }
.radio-list input { flex: none; width: 18px; height: 18px; accent-color: var(--danger); }
.radio-url-l { display: block; margin: 4px 0 6px; font-weight: 600; }
#radio-url { width: 100%; font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(160, 100, 40, .45); background: #fffaf0; color: var(--ink); margin-bottom: 8px; }
.radio-err { margin: 0 0 10px; color: var(--danger); font-weight: 600; font-size: .9rem; }
.radio-card .primary { width: 100%; margin-top: 4px; }

/* ---- Nước trong chén long lanh nhẹ (chỉ đổi độ sáng và vị trí, chậm và êm) ---- */
.cup-water .glint { opacity: .4; animation: glintSlide 3.8s ease-in-out infinite alternate; }
.cup-water .ripple { fill: none; stroke: #eefaff; stroke-width: .35; opacity: 0; transform-box: fill-box; transform-origin: center; animation: waterRipple 4.8s ease-out infinite; }
.cup-water .spark { opacity: 0; transform-box: fill-box; transform-origin: center; animation: twinkle 3.4s ease-in-out infinite; }
@keyframes glintSlide { from { transform: translateX(-2.8px); opacity: .22; } 50% { opacity: .85; } to { transform: translateX(3.2px); opacity: .3; } }
@keyframes waterRipple { 0% { opacity: 0; transform: scale(.2); } 14% { opacity: .75; } 100% { opacity: 0; transform: scale(1); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 42% { opacity: .8; transform: scale(1); } 58% { opacity: .3; transform: scale(.75); } }

/* ---- Cửa sổ nổi trên trang bàn thờ (kết quả, hôm nay, lịch sử, cách đọc; không chuyển trang) ---- */
body.win-open { overflow: hidden; }
.win-pop { position: fixed; inset: 0; z-index: 26; display: flex; align-items: center; justify-content: center; padding: 16px; transform: translateZ(0); }
.win-card { --w: 760px; display: flex; flex-direction: column; width: min(var(--w), 100%); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); margin: 0; padding: 0; overflow: hidden; border-radius: 18px; will-change: transform, opacity; backface-visibility: hidden; animation: unroll .34s cubic-bezier(.2, .8, .2, 1) both; box-shadow: 0 0 0 1px rgba(251, 231, 168, .55), 0 26px 64px rgba(0, 0, 0, .65); }
.win-sm { --w: 520px; } .win-md { --w: 640px; } .win-lg { --w: 1000px; }
.win-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 14px 8px 22px; }
.win-head h2 { flex: 1; margin: 0; }
.win-close { position: static; flex: none; }
.win-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px 22px; }
.win-foot { flex: none; display: flex; justify-content: center; gap: 10px; padding: 12px 22px 14px; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--gold-soft), rgba(246, 212, 122, .14)); }
.win-foot .primary { min-width: 170px; animation: none; }
.win-card .petals { border-radius: 18px; }
@media (max-width: 560px) { .win-pop { padding: 8px; } .win-card { max-height: calc(100svh - 16px); border-radius: 14px; } .win-scroll { padding: 4px 14px 18px; } .win-head { padding-left: 16px; } }

/* ================= Bàn nhỏ, kéo thả, mèo, người đọc kinh ================= */
.xdrag { cursor: grab; touch-action: none; }
.xdrag.dragging { cursor: grabbing; }
.xdrag.lifted .obj { filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .45)); }
#sutra-shelf { cursor: pointer; }
.shelf-books.glow { filter: brightness(1.28) saturate(1.1) drop-shadow(0 0 4px rgba(255, 226, 150, .85)); }
.altar svg.busy-x .xdrag, .altar svg.busy-x #sutra-shelf { pointer-events: none; }
.cup.cup-hot { filter: drop-shadow(0 0 3px rgba(255, 236, 160, .95)); }
.cup-empty { opacity: 0; }
.xfx, .xactors { pointer-events: none; }

/* mèo anh lông xám: mỗi lúc chỉ hiện một dáng; chuyển động mềm (thở, vẫy đuôi, bước chân, thân nhún nhẹ) */
.cat .p-sit, .cat .p-walk, .cat .p-lie { display: none; }
.cat.sit .p-sit, .cat.walk .p-walk, .cat.lie .p-lie { display: inline; }
.cat .cf { fill: #9aa4b0; stroke: #606b78; stroke-width: .5; stroke-linejoin: round; }
.cat .cfl { fill: #9aa4b0; stroke: none; }
.cat .cl { fill: #d6dce2; stroke: #aab3bd; stroke-width: .3; }
.cat .ear-in, .cat .cn { stroke: none; }
.cat .cs { stroke: #6b7684; fill: none; }
.cat .tail { transform-box: view-box; }
.cat .tail .cs { opacity: .8; }
.cat .tl-sit { animation: tailWag 1.7s ease-in-out infinite alternate; }
.cat .tl-lie { animation: tailWag 2.2s ease-in-out infinite alternate; }
.cat .tl-walk { animation: tailSway 2.4s ease-in-out infinite alternate; }
@keyframes tailWag { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }
@keyframes tailSway { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
.cat .breath { transform-box: fill-box; transform-origin: 50% 100%; animation: catBreath 3.4s ease-in-out infinite alternate; }
@keyframes catBreath { from { transform: scale(1, 1); } to { transform: scale(1.012, 1.03); } }
.cat .leg { transform-box: fill-box; transform-origin: 50% 8%; }
.cat .far .cf { fill: #838d99; }
.cat .far .cl { fill: #bcc3cb; }
/* chu kỳ bước 0.9 giây: chân chạm đất trượt ra sau (đều), rồi nhấc lên, đưa về phía trước (cong lên) và đặt xuống */
.cat.walk .leg { animation: catStride .9s linear infinite; }
.cat.walk .lg-a { animation-delay: 0s; } .cat.walk .lg-b { animation-delay: -.225s; }
.cat.walk .lg-c { animation-delay: -.45s; } .cat.walk .lg-d { animation-delay: -.675s; }
@keyframes catStride {
  0% { transform: rotate(-24deg) translateY(0); }
  52% { transform: rotate(24deg) translateY(0); }
  64% { transform: rotate(16deg) translateY(-1.7px); }
  80% { transform: rotate(-6deg) translateY(-2px); }
  92% { transform: rotate(-20deg) translateY(-.5px); }
  100% { transform: rotate(-24deg) translateY(0); }
}
.cat .walk-head { animation: none; }
.cat.walk .walk-head { transform-box: fill-box; transform-origin: 20% 80%; animation: catHead .9s ease-in-out infinite; }
@keyframes catHead { 0%, 50%, 100% { transform: translate(0, 0) rotate(0deg); } 25%, 75% { transform: translate(.25px, -.5px) rotate(-1.4deg); } }

.cat.walk .walk-bob { animation: catBob .45s ease-in-out infinite alternate; }
@keyframes catBob { from { transform: translateY(0) rotate(-.7deg); } to { transform: translateY(-1px) rotate(.7deg); } }

/* người ngồi đọc kinh: thân nhún nhẹ, đầu gật, lật trang, chữ vàng bay lên */
.reader .reader-up { transform-box: fill-box; transform-origin: 50% 100%; }
.reader .reader-head { transform-box: fill-box; transform-origin: 40% 100%; }
.reader .page-flip { transform-box: fill-box; transform-origin: 0% 100%; transform: scaleY(-.31); opacity: 0; }
.reader .reader-arm { transform-box: view-box; transform-origin: 3.4px -33.6px; }
.reader .leaf-shade { opacity: 0; }
.reader.reading .leaf-shade { animation: leafShade 4.4s ease-in-out infinite; }
.reader .glyph { opacity: 0; }
.reader.reading .reader-up { animation: readSway 3.6s ease-in-out infinite alternate; }
.reader.reading .reader-head { animation: readNod 2.2s ease-in-out infinite alternate; }
.reader.reading .page-flip { animation: pageFlip 4.4s ease-in-out infinite; }
.reader.reading .reader-arm { animation: armFlip 4.4s ease-in-out infinite; }
.reader.reading .glyph { animation: glyphUp 4.2s ease-out infinite; }
.reader.reading .glyph:nth-child(2) { animation-delay: -.7s; }
.reader.reading .glyph:nth-child(3) { animation-delay: -1.4s; }
.reader.reading .glyph:nth-child(4) { animation-delay: -2.1s; }
.reader.reading .glyph:nth-child(5) { animation-delay: -2.8s; }
.reader.reading .glyph:nth-child(6) { animation-delay: -3.5s; }
@keyframes readSway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.6deg); } }
@keyframes readNod { from { transform: rotate(-2deg); } to { transform: rotate(5deg); } }
@keyframes pageFlip { 0%, 49% { opacity: 0; transform: scaleY(-.31); } 50% { opacity: 1; transform: scaleY(-.31); } 61% { opacity: 1; transform: scaleY(-.03); } 73% { opacity: 1; transform: scaleY(1); } 88% { opacity: 1; transform: scaleY(.31); } 90% { opacity: 1; transform: scaleY(.31); } 91%, 100% { opacity: 0; transform: scaleY(.31); } }
@keyframes leafShade { 0%, 55% { opacity: 0; } 73% { opacity: .22; } 88%, 100% { opacity: 0; } }
@keyframes armFlip { 0%, 47% { transform: rotate(0deg); } 56% { transform: rotate(-6deg); } 74% { transform: rotate(-6deg); } 90%, 100% { transform: rotate(0deg); } }
@keyframes glyphUp { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .95; } 100% { opacity: 0; transform: translate(6px, -26px); } }

/* ---- Danh sách kinh ---- */
.kinh-lead { margin: 0 0 12px; font-size: .92rem; }
.kinh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kinh-item { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 10px 14px; border-radius: 14px; background: var(--cream); box-shadow: inset 0 0 0 1px rgba(160, 100, 30, .35); }
.kinh-item:hover { background: var(--gold-soft); }
.kinh-glyph { flex: none; display: grid; place-items: center; width: 44px; height: 54px; border-radius: 4px; font-size: 1.6rem; color: var(--gold-hi); background: linear-gradient(180deg, #b3261e, #7a1812); box-shadow: inset 0 0 0 2px rgba(251, 231, 168, .55); }
.kinh-meta { display: grid; gap: 2px; min-width: 0; }
.kinh-meta b { color: var(--head); font-size: 1.05rem; }
.kinh-meta span { color: var(--muted); font-size: .88rem; }

/* ---- Quyển sách ---- */
.win-book-card { --w: 720px; position: relative; overflow: visible; background: none; box-shadow: none; max-height: none; }
.book { --pg-h: min(560px, calc(100svh - 100px)); margin: 4px 0 12px; }
.book-cover { padding: 14px; border-radius: 14px; background: linear-gradient(180deg, #8a1d15, #5c120d); box-shadow: inset 0 0 0 2px rgba(251, 231, 168, .55), 0 10px 24px rgba(0, 0, 0, .35); }
.spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; perspective: 1900px; border-radius: 6px; background: #fff6dc; box-shadow: 0 0 0 1px rgba(160, 100, 30, .4), 3px 3px 0 -1px #f0e2bd, 6px 6px 0 -2px #e4d3a8; overflow: hidden; }
.spread::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 38px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(120, 70, 20, .22) 46%, rgba(120, 70, 20, .32) 50%, rgba(120, 70, 20, .22) 54%, transparent); pointer-events: none; }
.bk-page { position: relative; box-sizing: border-box; height: var(--pg-h); padding: 24px 22px 32px; min-width: 0; overflow-y: auto; overscroll-behavior: contain; background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(160, 100, 30, .1) 31px 32px); }
.bk-l { display: flex; justify-content: center; align-items: flex-start; padding-right: 30px; }
.bk-r { padding-left: 30px; overflow-wrap: anywhere; }
.bk-han { writing-mode: vertical-rl; font-size: clamp(1.25rem, 3.4vw, 1.75rem); line-height: 2; letter-spacing: .12em; color: #3a1a10; max-height: calc(var(--pg-h) - 60px); font-weight: 600; }
.bk-title-han { font-size: clamp(1.7rem, 5vw, 2.4rem); color: var(--head); }
.bk-seal { position: absolute; top: 18px; left: 22px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 4px; font-size: 1.7rem; color: var(--seal-ink); background: var(--seal); transform: rotate(-4deg); box-shadow: 0 0 0 2px rgba(179, 38, 30, .25); }
.bk-hvt { margin: 0 0 8px; color: var(--head); font-size: 1.25rem; }
.bk-hv { margin: 0 0 10px; font-size: 1.12rem; font-weight: 600; color: var(--head); }
.bk-sa { margin: 0 0 10px; font-style: italic; color: var(--muted); font-size: .95rem; }
.bk-vi { margin: 6px 0 10px; line-height: 1.75; }
.bk-src { margin: 12px 0 0; font-size: .82rem; color: var(--muted); }
.book-pos { position: absolute; z-index: 1; right: 30px; bottom: 8px; font-size: .78rem; color: var(--muted); pointer-events: none; }
/* mép trái và mép phải quyển sách là vùng bấm để lật trang; rê chuột vào thì mép sách hơi sáng lên như góc trang sắp lật */
.bk-edge { position: absolute; z-index: 2; top: 0; bottom: 0; width: 13%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; transition: background .2s; }
.bk-edge-l { left: 0; }
.bk-edge-r { right: 0; }
.bk-edge-l:not(:disabled):hover, .bk-edge-l:not(:disabled):focus-visible { background: linear-gradient(90deg, rgba(120, 70, 20, .2), transparent); }
.bk-edge-r:not(:disabled):hover, .bk-edge-r:not(:disabled):focus-visible { background: linear-gradient(270deg, rgba(120, 70, 20, .2), transparent); }
.bk-edge:disabled { cursor: default; }
/* lật trang: tờ giấy quay quanh gáy sách (3D), mặt trước là trang cũ, mặt sau là trang mới; dưới tờ giấy là trang mới lộ dần */
.bk-veil, .bk-leaf { position: absolute; z-index: 4; top: 0; bottom: 0; width: 50%; pointer-events: none; }
.bk-veil { background: #fff6dc; overflow: hidden; z-index: 3; }
.bk-veil.lt { left: 0; }
.bk-veil.rt { left: 50%; }
.bk-veil > .bk-page, .bk-leaf-f > .bk-page, .bk-leaf-b > .bk-page { position: absolute; inset: 0; height: 100%; overflow: hidden; background-color: #fff6dc; }
.bk-leaf { transform-style: preserve-3d; will-change: transform; }
.bk-leaf.next { left: 50%; transform-origin: left center; animation: leafNext .72s cubic-bezier(.5, .05, .3, 1) forwards; }
.bk-leaf.prev { left: 0; transform-origin: right center; animation: leafPrev .72s cubic-bezier(.5, .05, .3, 1) forwards; }
.bk-leaf-f, .bk-leaf-b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #fff6dc; }
.bk-leaf-b { transform: rotateY(180deg); }
.bk-leaf-f::after, .bk-leaf-b::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; animation: leafShade .72s ease-in-out forwards; }
.bk-leaf.next .bk-leaf-f::after { background: linear-gradient(90deg, rgba(90, 50, 10, .45), rgba(90, 50, 10, 0) 70%); }
.bk-leaf.next .bk-leaf-b::after { background: linear-gradient(270deg, rgba(90, 50, 10, .45), rgba(90, 50, 10, 0) 70%); animation-direction: reverse; }
.bk-leaf.prev .bk-leaf-f::after { background: linear-gradient(270deg, rgba(90, 50, 10, .45), rgba(90, 50, 10, 0) 70%); }
.bk-leaf.prev .bk-leaf-b::after { background: linear-gradient(90deg, rgba(90, 50, 10, .45), rgba(90, 50, 10, 0) 70%); animation-direction: reverse; }
@keyframes leafNext { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes leafPrev { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@keyframes leafShade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 640px) {
  .spread { grid-template-columns: 1fr; }
  .book { --pg-h: auto; }
  .bk-veil, .bk-leaf { display: none; }
  .spread::after { display: none; }
  .bk-page { height: auto; overflow: visible; }
  .bk-l { padding-right: 22px; border-bottom: 1px solid var(--line); }
  .bk-r { padding-left: 22px; }
  .bk-han { writing-mode: horizontal-tb; max-height: none; line-height: 1.8; }
  .bk-seal { position: static; margin-bottom: 8px; }
  .bk-title-vi { margin-top: 8px; }
}
.kinh-group { margin: 8px 2px 0; font-size: .82rem; letter-spacing: .02em; color: var(--muted); }
.kinh-group:first-child { margin-top: 0; }
/* sách kinh chữ Việt: hai trang chữ, mỗi trang cao cố định (nội dung đã chia trang sẵn; dôi ra thì cuộn trong trang) */
.bk-text { background: none; font-size: 1rem; line-height: 1.6; }
.bk-l.bk-text { display: block; }
.bk-text .bk-h { margin: .2em 0 .55em; font-size: 1.04rem; line-height: 1.4; text-align: center; color: var(--head); }
.bk-p { margin: 0 0 .6em; }
.bk-v { margin: 0 0 .7em; padding-left: 1.1em; text-indent: -1.1em; white-space: pre-line; }
.bk-title-vi { margin: 90px 4px 0; text-align: center; font-size: clamp(1.4rem, 3.6vw, 2rem); line-height: 1.35; font-weight: 700; color: var(--head); }
.bk-author { margin: 0 0 6px; font-size: .9rem; color: var(--muted); }
.bk-toc { display: grid; gap: 1px; margin-top: 4px; }
.bk-toc-item { display: block; width: 100%; min-height: 0; padding: 4px 8px; font-weight: 400; border-radius: 6px; text-align: left; font-size: .92rem; line-height: 1.4; color: var(--ink); background: none; box-shadow: none; }
.bk-toc-item:hover, .bk-toc-item:focus-visible { background: var(--gold-soft); }
.bk-toc-g { margin-top: 8px; font-weight: 700; color: var(--head); }
@media (pointer: coarse) { .bk-toc-item { min-height: 40px; } }
.bk-toc-btn { position: absolute; z-index: 3; left: 30px; bottom: 6px; min-height: 0; padding: 2px 10px; border-radius: 12px; font-size: .78rem; color: var(--head); background: rgba(255, 246, 220, .9); box-shadow: inset 0 0 0 1px rgba(160, 100, 30, .4); }
.bk-toc-btn:hover { background: var(--gold-soft); }
.book.is-text .bk-edge { width: 14%; }
.bk-src a, .kinh-lead a { color: var(--head); text-decoration-color: var(--gold-deco); }