:root {
  --ink: #f3e7cf;
  --muted: #b9a585;
  --gold: #e8b84a;
  --gold-soft: rgba(232, 184, 74, .18);
  --panel: rgba(20, 13, 8, .72);
  --line: rgba(232, 184, 74, .22);
  --bg: #120c08;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; }
body { font-family: "Be Vietnam Pro", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }

/* Cổng */
.gate { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(18,12,8,.35), rgba(18,12,8,.88)); z-index: 10;
  transition: opacity .9s ease; }
.gate.fade { opacity: 0; pointer-events: none; }
.gate-card { text-align: center; max-width: 420px; }
.eyebrow { letter-spacing: .25em; text-transform: uppercase; font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.gate h1 { font-family: "Noto Serif", serif; font-weight: 500; font-size: clamp(36px, 9vw, 56px); margin: 0 0 12px; color: var(--gold); }
.lead { color: var(--ink); opacity: .9; line-height: 1.6; margin: 0 0 28px; }
.name-form { margin: 0 auto 22px; max-width: 300px; text-align: left; }
.name-form label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px 4px; }
.name-row { display: flex; gap: 6px; }
.name-row input { flex: 1; min-width: 0; background: rgba(20,13,8,.7); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); font: inherit; font-size: 16px; padding: 11px 14px; outline: none; }
.name-row input:focus { border-color: var(--gold); }
.suggest { background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; color: var(--muted); font-size: 13px; }
.enter { background: var(--gold); color: #2a1a0a; border: 0; border-radius: 999px; padding: 14px 30px; font-weight: 600; font-size: 16px;
  box-shadow: 0 0 40px rgba(232,184,74,.35); transition: transform .2s; }
.enter:hover { transform: translateY(-1px); }
.hint { color: var(--muted); font-size: 13px; margin-top: 18px; }

/* Thanh trên */
.top { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px; z-index: 7;   /* trên biển Tàng Kinh Các + bảng calo để menu chọn cảnh không bị che */
  background: linear-gradient(rgba(10,6,4,.7), transparent); }
.top .name { font-family: "Noto Serif", serif; color: var(--gold); font-size: 17px; }
.presence { color: var(--muted); font-size: 13px; flex: 1; }
.icon-btn { background: var(--panel); border: 1px solid var(--line); width: 36px; height: 36px; border-radius: 50%; }
.icon-btn.off { opacity: .45; text-decoration: line-through; }

/* Hành động */
.actions { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; gap: 6px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 5; max-width: calc(100% - 32px); flex-wrap: wrap; justify-content: center; }
.actions button { background: transparent; border: 0; border-radius: 12px; padding: 8px 10px; min-width: 76px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: background .2s; }
.actions button:hover, .actions button.on { background: var(--gold-soft); }
.actions .ic { font-size: 22px; line-height: 1.1; }
.actions .lb { font-size: 12px; color: var(--ink); }
.actions .ct { font-size: 11px; color: var(--gold); font-variant-numeric: tabular-nums; }
/* Dâng hương: biểu tượng nén hương vẽ bằng SVG; đang chờ 5 phút thì nút mờ đi và hiện đếm ngược */
.actions .ic .inc-ic { width: 1.15em; height: 1.15em; display: block; color: var(--ink); }
.actions button.cool { opacity: .6; }
.actions button.cool .lb { font-variant-numeric: tabular-nums; color: var(--gold); }
/* Thanh nút canh theo nội dung (left:50% làm trình duyệt chỉ cho rộng nửa màn hình -> 8 nút bị xuống dòng) */
.actions { width: max-content; }
/* Nút Cúng dường (thẻ <a>, mở trang riêng): cùng dáng nút, có vạch ngăn nhẹ với các nút nghi lễ */
.actions .act-link { border-radius: 12px; padding: 8px 10px; min-width: 76px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: background .2s;
  position: relative; margin-left: 7px; }
.actions .act-link::before { content: ""; position: absolute; left: -7px; top: 18%; bottom: 18%; border-left: 1px solid var(--line); }
.actions .act-link:hover, .actions .act-link:focus-visible { background: var(--gold-soft); }
.actions .act-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (max-width: 520px) {
  .actions { display: grid; grid-template-columns: repeat(4, 1fr); width: calc(100% - 24px); max-width: calc(100% - 24px); gap: 2px; padding: 4px; }
  .actions .lb { font-size: 11px; line-height: 1.2; text-align: center; }
  .actions button { min-width: 0; padding: 6px 4px; }
  .actions .act-link { min-width: 0; padding: 6px 4px; margin-left: 0; }
  .actions .act-link::before { display: none; }
  .actions .ic { font-size: 20px; }
  .presence { font-size: 12px; }
  .toast { bottom: 132px; }
}

/* Thiền */
.medi { position: fixed; top: 64px; right: 16px; text-align: center; z-index: 5;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 14px 10px; }
.medi .medi-time { font-size: 28px; margin-bottom: 4px; }
.medi-time { font-family: "Noto Serif", serif; font-size: 40px; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 20px rgba(0,0,0,.8); }
.ghost { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; color: var(--muted); font-size: 13px; }

/* Hộp thoại */
.dlg { background: #1f150d; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 20px; text-align: center; }
.dlg::backdrop { background: rgba(0,0,0,.55); }
.dlg p { margin: 0 0 14px; }
.dlg .row { display: flex; gap: 8px; margin-bottom: 12px; }
.dlg .row button { background: var(--gold-soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }

/* Chọn bài kinh */
.chant-dlg { width: min(420px, calc(100% - 32px)); padding: 16px; text-align: left; }
.chant-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.chant-head p { margin: 0; font-family: "Noto Serif", serif; color: var(--gold); font-size: 18px; }
.x { background: transparent; border: 0; color: var(--muted); font-size: 16px; padding: 4px 8px; }
.chant-list { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; display: grid; gap: 6px; }
.chant-item { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; }
.chant-item:hover { background: var(--gold-soft); }
.chant-item .t { font-size: 15px; }
.chant-item .n { grid-column: 1; font-size: 12px; color: var(--muted); }
.chant-item .st { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12px; color: var(--gold); }
.chant-item.selected { border-color: rgba(232,184,74,.45); }
.chant-item.playing { border-color: var(--gold); background: var(--gold-soft); }
.chant-list .empty { color: var(--muted); font-size: 14px; padding: 8px 2px; }
.chant-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.auto { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.auto input { accent-color: var(--gold); }
.auto.dim { opacity: .45; }
/* Lặp lại bài kinh */
.chant-rep { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.chant-rep .rl { font-size: 13px; color: var(--muted); }
.rep-opts { display: flex; gap: 6px; }
.rep-opts button { min-width: 40px; background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 10px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.rep-opts button:hover { background: var(--gold-soft); }
.rep-opts button.on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); }

/* Thông báo nhỏ */
.toast { position: fixed; left: 50%; bottom: 120px; transform: translate(-50%, 10px); background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; opacity: 0; transition: all .4s; pointer-events: none; z-index: 6; max-width: calc(100% - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Chuyển cảnh chánh điện <-> sân chùa */
.scene-btn { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; white-space: nowrap; }
.scene-btn:hover { background: var(--gold-soft); }
/* Mỗi phần tử có data-sc="hall yard walk" chỉ hiện ở các cảnh được liệt kê */
body.scene-hall [data-sc]:not([data-sc~="hall"]),
body.scene-yard [data-sc]:not([data-sc~="yard"]),
body.scene-walk [data-sc]:not([data-sc~="walk"]),
body.scene-mount [data-sc]:not([data-sc~="mount"]),
body.scene-garden [data-sc]:not([data-sc~="garden"]),
body.scene-entrance [data-sc]:not([data-sc~="entrance"]),
body.scene-release [data-sc]:not([data-sc~="release"]),
body.scene-river [data-sc]:not([data-sc~="river"]),
body.scene-alms [data-sc]:not([data-sc~="alms"]),
body.scene-trai [data-sc]:not([data-sc~="trai"]),
body.scene-khuon [data-sc]:not([data-sc~="khuon"]) { display: none !important; }
.fade-cover { position: fixed; inset: 0; background: #0b0705; opacity: 0; pointer-events: none; transition: opacity .45s ease; z-index: 4; }
.fade-cover.on { opacity: 1; }
canvas#scene.tap-water { cursor: pointer; }
@media (max-width: 520px) {
  .top { flex-wrap: wrap; row-gap: 2px; column-gap: 8px; }
  .top .name { order: 1; }
  .scene-wrap { order: 2; margin-left: auto; }
  .scene-btn { padding: 6px 10px; font-size: 12px; }
  .icon-btn { order: 3; }
  .top .presence { order: 4; flex-basis: 100%; }
  .medi { top: 84px; }
}

/* Dòng trạng thái bấm được để đổi chánh điện */
button.presence { background: transparent; border: 0; padding: 4px 6px; text-align: left; border-radius: 8px; cursor: pointer; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.presence::after { content: " ▾"; color: var(--gold); }
button.presence:hover { background: var(--gold-soft); color: var(--ink); }
.hall-sub { margin: -4px 0 12px; font-size: 13px; color: var(--muted); }
.chant-item .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 6px; }
.chant-item .bar i { display: block; height: 100%; background: var(--gold); }
.chant-item:disabled { opacity: .45; cursor: not-allowed; }

/* Chọn ngôn ngữ */
.lang-pick { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 18px; background: rgba(20,13,8,.6); border: 1px solid var(--line); border-radius: 999px; }
.lang-pick button { background: transparent; border: 0; border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--muted); }
.lang-pick button.on { background: var(--gold); color: #2a1a0a; font-weight: 600; }
.lang-btn { font-size: 11px; font-weight: 600; letter-spacing: .04em; }

/* Chữ trên thanh trên cùng dễ đọc cả khi trời sáng (sân chùa ban ngày) */
.top .name, .top .presence { text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 0 12px rgba(0,0,0,.45); }
body.scene-yard .top .presence { color: var(--ink); }

/* ===================== PHÒNG THỞ ===================== */
.breath { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; color: #fff; overflow: hidden;
  padding: max(10px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)); animation: brIn .6s ease; }
@keyframes brIn { from { opacity: 0; } to { opacity: 1; } }
.breath-bg { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 20% 10%, #2e5a5a 0%, transparent 55%),
              radial-gradient(ellipse at 85% 90%, #23415a 0%, transparent 60%),
              linear-gradient(160deg, #10282c 0%, #0c1c26 55%, #0a141c 100%);
  background-size: 160% 160%, 160% 160%, 100% 100%; animation: brDrift 28s ease-in-out infinite alternate; }
@keyframes brDrift { from { background-position: 0% 0%, 100% 100%, 0 0; } to { background-position: 60% 40%, 40% 60%, 0 0; } }
.breath-bg i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(190,235,230,.18), rgba(190,235,230,0) 70%);
  animation: brFloat 22s ease-in-out infinite alternate; }
.breath-bg i:nth-child(1) { width: 38vmax; height: 38vmax; left: -8vmax; top: 18%; }
.breath-bg i:nth-child(2) { width: 26vmax; height: 26vmax; right: -6vmax; top: -4vmax; animation-duration: 30s; }
.breath-bg i:nth-child(3) { width: 18vmax; height: 18vmax; left: 40%; bottom: -6vmax; animation-duration: 26s; }
.breath-bg i:nth-child(4) { width: 8px; height: 8px; left: 18%; top: 30%; background: rgba(230,255,240,.35); animation-duration: 18s; }
.breath-bg i:nth-child(5) { width: 6px; height: 6px; right: 22%; top: 62%; background: rgba(230,255,240,.3); animation-duration: 24s; }
.breath-bg i:nth-child(6) { width: 5px; height: 5px; left: 62%; top: 20%; background: rgba(230,255,240,.3); animation-duration: 20s; }
@keyframes brFloat { from { transform: translate(0, 0); } to { transform: translate(4vmax, -5vmax); } }

.breath-top { display: flex; align-items: center; gap: 12px; }
.breath-top h2 { margin: 0; flex: 1; text-align: center; font-family: "Noto Serif", serif; font-weight: 500; font-size: 18px; color: #e8f3f1; }
.br-back { color: #d8ebe8; border-color: rgba(255,255,255,.25); }
.br-stats { min-width: 90px; text-align: right; font-size: 13px; color: rgba(232,243,241,.75); font-variant-numeric: tabular-nums; }

.breath-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px 0; }
.breath-stage svg { width: min(100%, 560px); height: 100%; max-height: 62vh; overflow: visible; }
.br-side { stroke: #f2cf7a; stroke-width: 9; stroke-linecap: round; opacity: 0; transition: opacity .6s; }
.br-side.on { opacity: .9; }
.br-label { font-family: "Be Vietnam Pro", system-ui, sans-serif; font-weight: 700; font-size: 36px; fill: #fff; opacity: .55; transition: opacity .5s, fill .5s; }
.br-label.on { opacity: 1; fill: #ffe7a8; }
.br-phase { font-family: "Be Vietnam Pro", system-ui, sans-serif; font-weight: 600; font-size: 22px; fill: #24474a; }
.br-count { font-family: "Noto Serif", serif; font-size: 46px; fill: #1d3d40; }

.breath-ctl { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.br-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; font-size: 13px; color: #cfe3e0; }
.br-opts label { display: flex; align-items: center; gap: 6px; }
.br-opts select { font: inherit; color: #eaf5f3; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 10px; padding: 6px 8px; }
.br-opts select option { color: #111; }
.br-check input { accent-color: #f2cf7a; }
.br-start { min-width: 180px; }
.breath.running .br-opts { opacity: .35; pointer-events: none; }
@media (max-width: 520px) {
  .breath-top h2 { font-size: 16px; }
  .br-stats { min-width: 64px; font-size: 12px; }
  .breath-stage svg { max-height: 64vh; }
}
@media (prefers-reduced-motion: reduce) { .breath-bg, .breath-bg i { animation: none; } }

/* Menu ba cảnh */
.scene-wrap { position: relative; }
.scene-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: #1f150d; border: 1px solid var(--line);
  border-radius: 14px; padding: 6px; display: grid; gap: 2px; z-index: 7; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.scene-menu button { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: transparent; border: 0;
  border-radius: 10px; padding: 10px 12px; text-align: left; font-size: 14px; }
.scene-menu button:hover, .scene-menu button.on { background: var(--gold-soft); }
.scene-menu small { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Thống kê thiền hành ở góc trên bên trái */
.walk-stats { position: fixed; left: 16px; top: 64px; z-index: 5; display: grid; gap: 2px; text-align: left; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.walk-stats .ws-main b { font-size: 18px; color: #ffcf7a; font-weight: 600; }
.walk-stats .ws-row { display: flex; gap: 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.walk-stats .ws-meta { font-size: 11px; color: var(--muted); }
.pace-list { display: grid; gap: 6px; margin-bottom: 12px; }
.pace-list label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pace-list label:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.pace-list input { accent-color: var(--gold); margin-top: 3px; }
.pace-list span { display: grid; }
.pace-list small { color: var(--muted); font-size: 12px; }
.weight-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; font-size: 14px; }
.weight-row input { width: 90px; font: inherit; color: var(--ink); background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; }
@media (max-width: 520px) {
  .walk-stats { top: 86px; left: 12px; padding: 6px 10px; }
  .walk-stats .ws-main b { font-size: 16px; }
}

/* ===================== TÀNG KINH CÁC ===================== */
/* Lối vào: tấm biển gỗ treo ở góc trên trái chánh điện */
.doors { position: fixed; top: 70px; left: 16px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.lib-door { position: relative; display: flex; align-items: center; gap: 10px;
  padding: 7px 12px 7px 9px; border-radius: 6px; text-align: left; color: var(--ink);
  background: linear-gradient(180deg, #4a2414, #2c140b); border: 1px solid rgba(232,184,74,.55);
  box-shadow: inset 0 0 0 3px #2c140b, inset 0 0 0 4px rgba(232,184,74,.35), 0 6px 18px rgba(0,0,0,.5);
  transform-origin: 50% -26px; animation: ldSway 7s ease-in-out infinite; transition: filter .2s; }
.lib-door::before, .lib-door::after { content: ""; position: absolute; top: -24px; width: 1px; height: 24px; background: rgba(232,184,74,.45); }
.lib-door::before { left: 22%; } .lib-door::after { right: 22%; }
.lib-door:hover { filter: brightness(1.18); }
.lib-door .ld-ic { font-size: 19px; }
.lib-door .ld-tx { display: flex; flex-direction: column; line-height: 1.2; }
.lib-door b { font-family: "Noto Serif", serif; font-weight: 500; color: var(--gold); font-size: 14px; letter-spacing: .02em; }
.lib-door small { font-size: 11px; color: var(--muted); }
@keyframes ldSway { 0%, 100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } }
/* Điện thoại: biển nhỏ gọn, chỉ còn biểu tượng + tên */
@media (max-width: 520px) {
  .doors { top: 90px; left: 8px; gap: 16px; }
  .lib-door { padding: 3px 8px 3px 6px; gap: 5px; border-radius: 5px; transform-origin: 50% -16px;
    box-shadow: inset 0 0 0 2px #2c140b, inset 0 0 0 3px rgba(232,184,74,.3), 0 4px 10px rgba(0,0,0,.45); }
  .lib-door::before, .lib-door::after { top: -16px; height: 16px; }
  .lib-door b { font-size: 11.5px; }
  .lib-door small { display: none; }
  .lib-door .ld-ic { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .lib-door { animation: none; } }

/* Phòng */
.library { --paper: #efe2c4; --paper2: #e3d1a9; --ink2: #3b2616; --seal: #a3271c;
  position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; overflow: hidden; color: var(--ink);
  background: #160c06; padding: max(10px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)); animation: brIn .6s ease; }
.lib-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.lib-bg .flame { animation: flick 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes flick { 0%, 100% { opacity: .85; } 40% { opacity: 1; } 70% { opacity: .78; } }
.lib-motes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lib-motes i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,220,160,.55); filter: blur(.5px);
  animation: mote 22s linear infinite; }
.lib-motes i:nth-child(1) { left: 12%; top: 70%; } .lib-motes i:nth-child(2) { left: 28%; top: 40%; animation-duration: 28s; animation-delay: -6s; }
.lib-motes i:nth-child(3) { left: 46%; top: 80%; animation-duration: 25s; animation-delay: -12s; } .lib-motes i:nth-child(4) { left: 63%; top: 55%; animation-delay: -3s; }
.lib-motes i:nth-child(5) { left: 78%; top: 75%; animation-duration: 30s; animation-delay: -18s; } .lib-motes i:nth-child(6) { left: 88%; top: 35%; animation-duration: 26s; }
.lib-motes i:nth-child(7) { left: 36%; top: 20%; animation-duration: 32s; animation-delay: -9s; } .lib-motes i:nth-child(8) { left: 55%; top: 30%; animation-duration: 24s; animation-delay: -15s; }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .6; } 100% { transform: translate(40px, -180px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lib-motes { display: none; } .lib-bg .flame { animation: none; } }

.lib-top { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.lib-back { justify-self: start; }
/* Biển hiệu sơn mài treo giữa xà */
.lib-plaque { margin: 0; display: flex; flex-direction: column; align-items: center; padding: 6px 26px 7px; border-radius: 5px;
  background: linear-gradient(180deg, #2a1209, #170905); border: 2px solid #c9a24a;
  box-shadow: inset 0 0 0 4px #170905, inset 0 0 0 5px rgba(201,162,74,.5), 0 8px 22px rgba(0,0,0,.6); }
/* Tên biển bằng chữ Việt, viết hoa, to rõ */
.lib-plaque .pl-big { font-family: "Noto Serif", serif; font-weight: 600; font-size: 30px; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .12em; margin-right: -.12em; white-space: nowrap;
  color: var(--gold); text-shadow: 0 0 14px rgba(232,184,74,.35); }
.lib-plaque small { font-family: "Noto Serif", serif; font-size: 12px; letter-spacing: .14em; color: var(--muted); }
.lib-back { background: rgba(20,12,6,.7); color: var(--ink); }
.lib-count { justify-self: end; font-size: 12px; color: var(--muted); text-align: right; text-shadow: 0 1px 4px #000; }

.lib-body { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 360px) 1fr;
  gap: clamp(16px, 3vw, 40px); padding: 14px 0 0; }

/* Cuộn giấy chứa danh sách */
.lib-scroll { position: relative; display: flex; flex-direction: column; min-height: 0; margin: 14px 0; color: var(--ink2);
  background: linear-gradient(90deg, rgba(120,80,30,.12), transparent 8%, transparent 92%, rgba(120,80,30,.12)),
              linear-gradient(180deg, var(--paper), var(--paper2));
  border-left: 1px solid rgba(90,55,20,.35); border-right: 1px solid rgba(90,55,20,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.lib-scroll::before, .lib-scroll::after { content: ""; position: absolute; left: -12px; right: -12px; height: 16px; border-radius: 8px;
  background: linear-gradient(180deg, #7a3a1c, #4a1f0e 60%, #2e1308); box-shadow: 0 3px 8px rgba(0,0,0,.55); }
.lib-scroll::before { top: -12px; } .lib-scroll::after { bottom: -12px; }
.lib-tools { padding: 14px 14px 8px; display: grid; gap: 8px; border-bottom: 1px solid rgba(90,55,20,.25); }
.lib-tools input { width: 100%; font: inherit; font-size: 15px; color: var(--ink2); background: rgba(255,250,235,.7);
  border: 1px solid rgba(90,55,20,.35); border-radius: 8px; padding: 8px 12px; outline: none; }
.lib-tools input:focus { border-color: var(--seal); }
.lib-sort { display: flex; gap: 6px; }
.lib-sort button { flex: 1; background: transparent; border: 1px solid rgba(90,55,20,.35); border-radius: 999px; padding: 5px 10px;
  font-size: 13px; color: #6b4a2a; }
.lib-sort button.on { background: var(--seal); border-color: var(--seal); color: #fbeedd; }
.lib-list { list-style: none; margin: 0; padding: 6px 8px 14px; overflow-y: auto; flex: 1; min-height: 0;
  scrollbar-width: thin; scrollbar-color: rgba(90,55,20,.4) transparent; }
.lib-list .lib-h { font-family: "Noto Serif", serif; color: var(--seal); font-size: 13px; letter-spacing: .06em; padding: 12px 8px 4px;
  border-bottom: 1px dashed rgba(163,39,28,.3); margin-bottom: 2px; }
.lib-item { width: 100%; display: flex; align-items: baseline; gap: 8px; text-align: left; background: transparent; border: 0;
  border-radius: 6px; padding: 8px 8px; color: var(--ink2); font-size: 14.5px; line-height: 1.35; }
.lib-item:hover { background: rgba(163,39,28,.08); }
.lib-item .t { flex: 1; }
.lib-item .b { flex: 0 0 auto; font-size: 11px; color: var(--seal); }
.lib-item .b.soon { color: #8a6c48; font-style: italic; }
.lib-item.on { background: rgba(163,39,28,.14); box-shadow: inset 3px 0 0 var(--seal); }
.lib-list .empty { color: #8a6c48; font-size: 14px; padding: 14px 8px; }

/* Sân khấu giữa: khung video */
/* Căn giữa bằng margin auto (không dùng align-items: center): nội dung cao hơn khung thì bắt đầu từ mép trên và cuộn xuống được,
   không bị đẩy lên dưới thanh tiêu đề (trước đây trên laptop màn hình thấp, mép trên trình phát YouTube bị che) */
.lib-stage { min-height: 0; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; }
.lib-stage > * { margin-top: auto; margin-bottom: auto; }
.lib-empty { text-align: center; max-width: 420px; padding: 28px 24px; background: rgba(18,10,5,.72); border: 1px solid var(--line);
  border-radius: 14px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.lib-empty p { font-family: "Noto Serif", serif; font-size: 18px; margin: 16px 0 6px; color: var(--ink); }
.lib-empty small { color: var(--muted); font-size: 13px; }
.le-seal { display: inline-block; font-family: "Noto Serif", serif; font-weight: 600; font-size: 22px; line-height: 1.25;
  letter-spacing: .14em; color: #fbeedd; background: var(--seal); padding: 10px 6px; border-radius: 4px; box-shadow: 0 0 0 3px rgba(163,39,28,.3); }
.lib-view { width: min(100%, 940px, calc((100dvh - 420px) * 1.7778));   /* 420px: thanh trên + phần tóm tắt + nút Thử tài, để cả video lẫn chữ vừa một màn hình */ min-width: min(100%, 420px); display: flex; flex-direction: column; gap: 14px; }
.lib-tolist { display: none; align-self: flex-start; background: rgba(20,12,6,.7); color: var(--ink); }
.lib-frame { position: relative; padding: 12px; border-radius: 6px;
  background: linear-gradient(135deg, #6b3018, #3c180b 45%, #5a2814); box-shadow: inset 0 0 0 2px rgba(232,184,74,.55), inset 0 0 0 6px #2c120a, 0 20px 50px rgba(0,0,0,.7); }
.lib-video { position: relative; aspect-ratio: 16 / 9; background: #0b0604; border-radius: 2px; overflow: hidden; }
.lib-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lib-soon { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px; padding: 20px; color: var(--muted);
  background: radial-gradient(ellipse at center, #2a170c, #0b0604 75%); }
.lib-soon .ls-ic { font-size: 44px; filter: saturate(.8); }
.lib-meta { padding: 16px 20px 18px; border-radius: 10px; background: rgba(18,10,5,.78); border: 1px solid var(--line);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
/* Hạt sen: nghe truyện đủ 2 phút = 1 hạt sen (app.js: LIB, seedTick) */
.lib-seed { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 7px 12px; border-radius: 14px;
  background: rgba(232,184,74,.09); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.lib-seed .ls-ic { font-size: 16px; filter: grayscale(.7) opacity(.7); transition: filter .4s; }
.lib-seed.on .ls-ic { filter: none; }
.lib-seed .ls-n { color: var(--gold); font-weight: 600; }
.lib-seed .ls-bar { flex: 1 1 70px; min-width: 70px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.lib-seed .ls-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c9a24a, #f2cf7a); transition: width .9s linear; }
.lib-seed.pop { animation: seedPop .9s ease; }
@keyframes seedPop { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(242,207,122,.7); } 35% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(242,207,122,0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(242,207,122,0); } }
@media (max-width: 520px) { .lib-seed .ls-p { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .lib-seed.pop { animation: none; } .lib-seed .ls-bar i { transition: none; } }
.lib-tag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.lib-meta h3 { margin: 4px 0 8px; font-family: "Noto Serif", serif; font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--ink); }
.lib-meta p { margin: 0 0 14px; line-height: 1.6; color: #e4d6bb; font-size: 15px; }
.lib-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lib-nav .ghost { color: var(--ink); }
.lib-nav .ghost:disabled { opacity: .35; cursor: default; }
.lib-yt { color: var(--gold); font-size: 13px; text-decoration: none; }
.lib-yt:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .library { padding-left: 8px; padding-right: 8px; }
  .lib-top { grid-template-columns: auto 1fr; }
  .lib-count { display: none; }
  .lib-plaque { justify-self: end; padding: 4px 14px 5px; }
  .lib-plaque .pl-big { font-size: 20px; letter-spacing: .08em; }
  .lib-plaque small { font-size: 10px; }
  .lib-view { width: 100%; min-width: 0; }
  .lib-yt { order: 3; flex-basis: 100%; text-align: center; padding-top: 4px; }
  .lib-body { grid-template-columns: 1fr; padding-top: 8px; }
  .lib-scroll { margin: 14px 8px; }
  .lib-stage { display: none; align-items: flex-start; }
  .library.viewing .lib-scroll { display: none; }
  .library.viewing .lib-stage { display: flex; }
  .lib-tolist { display: inline-block; }
  .lib-frame { padding: 4px; }
  /* YouTube cần trình phát nhúng tối thiểu 200 x 200 px để tính lượt xem: điện thoại hẹp (360-393 px) trước đây chỉ cao 181-199 px */
  .lib-video { min-height: 200px; }
  .lib-meta { padding: 14px 14px 16px; }
  .lib-meta h3 { font-size: 18px; }
}

/* ===================== XIN XĂM ===================== */
/* Biển thứ hai: sơn đỏ thẫm, đung đưa lệch nhịp với biển Tàng Kinh Các */
.xam-door { background: linear-gradient(180deg, #6a1c12, #33100a); animation-delay: -2.3s; animation-duration: 8s; }

.xam { --paper: #f1e4c6; --paper2: #e2cfa4; --ink2: #3b2616; --seal: #a3271c;
  position: fixed; inset: 0; z-index: 9; overflow: hidden; color: var(--ink); background: #170b06;
  padding: max(10px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)); animation: brIn .6s ease; }
.xam-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.xam-bg .flame, .xam-scene .flame { animation: flick 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.xam-top { position: relative; z-index: 2; }

/* Ôn sư + bàn + ống xăm: luôn đứng giữa, đáy chạm mép dưới màn hình */
.xam-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.xam-scene { --sz: min(78vh, 78dvh, 104vw, 760px); position: absolute; left: 50%; bottom: 0; width: var(--sz); height: var(--sz);
  transform: translateX(-50%); overflow: visible; pointer-events: auto; }
.xam-scene .monk { animation: xmBreath 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.xam-scene .beard { animation: xmBeard 7s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes xmBreath { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.5px) scale(1.006); } }
@keyframes xmBeard { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.xam-cup { cursor: pointer; outline: none; }
.xam-cup .cup-glow { animation: xmGlow 2.6s ease-in-out infinite; }
.xam-cup:hover .cup-in, .xam-cup:focus-visible .cup-in { transform: translateY(-3px) rotate(-2deg); }
.xam-cup .cup-in { transition: transform .25s; transform-box: fill-box; transform-origin: 50% 100%; }
.xam-cup.away { opacity: 0; }
@keyframes xmGlow { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
.xam-smoke { animation: xmSmoke 6s linear infinite; transform-box: fill-box; }
.xam-smoke:nth-of-type(2) { animation-delay: -2s; } .xam-smoke:nth-of-type(3) { animation-delay: -4s; }
@keyframes xmSmoke { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: .5; } 100% { transform: translate(10px, -90px) scale(1.8); opacity: 0; } }

.xam-hint { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0;
  width: max-content; max-width: calc(100% - 32px); text-align: center; font-size: 13px; color: var(--ink); pointer-events: none;
  background: rgba(18,10,5,.72); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; }

/* Ống xăm phóng to + lắc */
.xam-shake { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(8,4,2,.62);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: brIn .4s ease; }
.xam-big { height: min(64vh, 64dvh, 560px); aspect-ratio: 140 / 330; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
.xam-big .xb-in { width: 100%; height: 100%; transform-origin: 50% 85%; }
.xam-big svg { width: 100%; height: 100%; overflow: visible; }
.xam-big .xb-in.shaking { animation: xmShake .42s ease-in-out infinite; }
@keyframes xmShake {
  0% { transform: rotate(0) translate(0, 0); } 20% { transform: rotate(-13deg) translate(-8px, -4px); }
  45% { transform: rotate(11deg) translate(7px, -8px); } 70% { transform: rotate(-8deg) translate(-4px, -2px); }
  100% { transform: rotate(0) translate(0, 0); } }
#xamStick { transition: transform .9s cubic-bezier(.2,.9,.25,1); }
#xamStick.up { transform: translateY(-118px) rotate(4deg); }
.xam-big .big-halo { opacity: 0; transition: opacity .8s; }
.xam-big.lit .big-halo { opacity: 1; }

/* Thẻ xăm: tờ giấy có trục gỗ trên dưới */
.xam-card { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 30px 16px; background: rgba(8,4,2,.55); }
.xc-paper { position: relative; width: min(460px, 100%); max-height: calc(100dvh - 80px); overflow-y: auto; color: var(--ink2);
  padding: 26px 26px 18px; text-align: center;
  background: linear-gradient(90deg, rgba(120,80,30,.13), transparent 9%, transparent 91%, rgba(120,80,30,.13)), linear-gradient(180deg, var(--paper), var(--paper2));
  box-shadow: 0 24px 60px rgba(0,0,0,.7); animation: xcIn .7s cubic-bezier(.2,.9,.25,1); }
.xam-card::before, .xam-card::after { content: none; }
@keyframes xcIn { from { opacity: 0; transform: translateY(40px) scale(.85); } to { opacity: 1; transform: none; } }
.xc-head { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.xc-no { font-family: "Noto Serif", serif; font-size: 22px; color: var(--seal); letter-spacing: .03em; }
.xc-lv { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #fbeedd; background: var(--seal); border-radius: 999px; padding: 3px 11px; }
.xc-lv.lv2 { background: #b4562a; } .xc-lv.lv3 { background: #7d6232; }
.xc-verse { font-family: "Noto Serif", serif; font-style: italic; font-size: 20px; line-height: 1.7; margin: 0 0 20px; padding: 14px 6px;
  border-top: 1px dashed rgba(163,39,28,.35); border-bottom: 1px dashed rgba(163,39,28,.35); }
.xc-verse span { display: block; }
.xc-btn { padding: 11px 26px; font-size: 15px; }
.xc-meaning { text-align: left; margin-top: 4px; animation: xcIn .5s ease; }
.xc-meaning h4 { margin: 0 0 6px; font-family: "Noto Serif", serif; font-weight: 500; color: var(--seal); font-size: 15px; }
.xc-meaning p { margin: 0; line-height: 1.65; font-size: 15px; }
.xc-foot { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.xc-foot .ghost { color: #6b4a2a; border-color: rgba(90,55,20,.4); }
.xc-foot .ghost:hover { background: rgba(163,39,28,.08); }
.xc-note { display: block; margin-top: 14px; font-size: 11.5px; color: #8a6c48; line-height: 1.5; }

@media (max-width: 760px) {
  .xam { padding-left: 12px; padding-right: 12px; }
  .xam-top { grid-template-columns: auto 1fr; }
  .xam-top .lib-plaque { justify-self: end; padding: 4px 14px 5px; }
  .xam-top .lib-plaque .pl-big { font-size: 20px; }
  .xam-top .lib-plaque small { font-size: 10px; }
  .xam-top .lib-count { display: none; }
  .xam-scene { --sz: min(70dvh, 112vw, 640px); }
  .xc-verse { font-size: 18px; }
  .xc-paper { padding: 22px 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .xam-scene .monk, .xam-scene .beard, .xam-cup .cup-glow, .xam-smoke { animation: none; }
  .xam-big .xb-in.shaking { animation-duration: 1.2s; }
}

/* ===================== HẬU SƠN · THÀNH TÂM BÁI PHẬT ===================== */
/* Biển gỗ treo trên cổng đá ở sân chùa (app.js đặt left/top theo cổng) */
.mount-door { position: fixed; z-index: 5; left: 0; top: 0; width: max-content; white-space: nowrap; transform-origin: 50% -26px;
  background: linear-gradient(180deg, #3e3a2a, #22200f); animation: mdSway 7.5s ease-in-out infinite; }
@keyframes mdSway { 0%, 100% { transform: translateX(-50%) rotate(-.6deg); } 50% { transform: translateX(-50%) rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { .mount-door { animation: none; transform: translateX(-50%); } }

.mount-plaque { position: fixed; z-index: 5; left: 50%; top: 62px; transform: translateX(-50%); pointer-events: none; }
.mount-plaque .pl-big { font-size: 24px; }
.mount-stats { position: fixed; left: 16px; top: 64px; z-index: 5; width: 210px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ms-count b { font-family: "Noto Serif", serif; font-size: 26px; color: #ffcf7a; font-weight: 500; font-variant-numeric: tabular-nums; }
.ms-count span { font-size: 13px; color: var(--muted); }
.ms-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; margin: 6px 0 6px; }
.ms-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c8892f, #ffd27a); transition: width .6s; }
.ms-bows { font-size: 13px; }
.ms-top { color: #ffd27a; font-size: 13px; }
.ms-group { list-style: none; margin: 8px 0 0; padding: 6px 0 0; border-top: 1px solid var(--line); display: grid; gap: 3px; font-size: 12px; }
.ms-group:empty { display: none; }
.ms-group li { display: flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-group li i { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #c8892f; }
.ms-restart { margin-top: 8px; background: transparent; border: 0; padding: 0; font-size: 12px; color: var(--muted); text-decoration: underline dotted; }
.ms-restart:hover { color: var(--ink); }
@media (max-width: 520px) {
  .mount-plaque { top: 84px; padding: 3px 12px 4px; }
  .mount-plaque .pl-big { font-size: 16px; letter-spacing: .06em; }
  .mount-plaque small { font-size: 10px; }
  .mount-stats { top: 136px; left: 10px; width: 170px; padding: 8px 10px; }
  .ms-count b { font-size: 22px; }
}

/* ===================== THẢ HOA ĐĂNG: CHỌN LỜI NGUYỆN ===================== */
.lantern-dlg .hall-sub { margin-top: 0; }
.wish-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 14px; }
.wish { display: flex; align-items: center; gap: 8px; text-align: left; background: rgba(255,255,255,.03);
  border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; font-size: 14px; line-height: 1.25; }
.wish .wi { font-size: 18px; flex: 0 0 auto; }
.wish:hover { background: var(--gold-soft); }
.wish.on { border-color: var(--wc, var(--gold)); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--wc, var(--gold)); }
.wish:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.wish-to { display: grid; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.wish-to input { font: inherit; font-size: 16px; color: var(--ink); background: rgba(255,255,255,.06); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; outline: none; min-width: 0; }
.wish-to input:focus { border-color: var(--gold); }
.lantern-note { margin: 8px 0 0; font-size: 12px; }
.lantern-foot { justify-content: center; }
@media (max-width: 360px) { .wish-opts { grid-template-columns: 1fr; } }

/* ===================== NHẬT KÝ LƯỢT VÀO CHÙA ===================== */
/* Huy hiệu vàng trên thanh trên cùng: lượt vào hôm nay + số người đang trong chùa; nảy lên khi có người mới vào */
.today { display: inline-flex; align-items: center; gap: 10px; padding: 5px 13px; border-radius: 999px; cursor: default;
  background: var(--panel); border: 1px solid rgba(232,184,74,.5); box-shadow: 0 0 16px rgba(232,184,74,.15);
  font-size: 13px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.today:empty { display: none; }
.today .tn { color: #ffd27a; font-weight: 600; }
.today .to { color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line); }
.today.pop { animation: todayPop .8s ease; }
@keyframes todayPop { 0% { transform: scale(1); } 30% { transform: scale(1.12); box-shadow: 0 0 28px rgba(232,184,74,.6); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .today.pop { animation: none; } }
@media (max-width: 520px) {
  .top .presence { flex: 1 1 calc(100% - 165px); flex-basis: calc(100% - 165px); }
  .today { order: 5; margin-left: auto; font-size: 11.5px; padding: 3px 10px; }
  .today .to { display: none; }
}
/* Cổng chùa: "Hôm nay đã có n lượt ghé chùa · m người đang ở đây" */
.gate-stats { margin: -12px 0 22px; font-size: 14px; color: var(--muted); min-height: 1.4em; font-variant-numeric: tabular-nums; }
.gate-stats b { color: #ffd27a; font-weight: 600; font-size: 16px; }

/* ===================== KHÓA LỄ CHUNG ===================== */
.ceremony { position: fixed; left: 50%; transform: translateX(-50%); bottom: 100px; z-index: 5;
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 24px); padding: 6px 7px 6px 14px;
  background: rgba(40,20,8,.88); border: 1px solid rgba(232,184,74,.55); border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 24px rgba(232,184,74,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cer-ic { font-size: 18px; }
.ceremony.live .cer-ic { animation: cerPulse 2.4s ease-in-out infinite; }
@keyframes cerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.cer-tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cer-tx b { font-family: "Noto Serif", serif; font-weight: 500; color: var(--gold); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cer-tx small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cer-btn { flex: 0 0 auto; padding: 5px 12px; color: var(--ink); }
.cer-btn:empty { display: none; }
body.cer-on .toast { bottom: 160px; }
@media (max-width: 520px) {
  .ceremony { bottom: 124px; padding: 5px 6px 5px 12px; gap: 8px; }
  .cer-tx b { font-size: 13px; }
  .cer-tx small { font-size: 11px; }
  body.cer-on .toast { bottom: 178px; }
}
@media (prefers-reduced-motion: reduce) { .ceremony.live .cer-ic { animation: none; } }


/* ===================== BẢN ĐỒ CHÙA ===================== */
/* Nút góc dưới trái; app.js tự nâng nút lên khi thanh hành động chiếm chỗ (điện thoại, màn hình hẹp) */
.map-wrap { position: fixed; left: 16px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 6; }
.map-btn { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 14px; text-align: left; color: var(--ink);
  background: linear-gradient(180deg, #4a2414, #2c140b); border: 1px solid rgba(232,184,74,.55);
  box-shadow: inset 0 0 0 3px #2c140b, inset 0 0 0 4px rgba(232,184,74,.35), 0 6px 18px rgba(0,0,0,.5); transition: filter .2s; }
.map-btn:hover, .map-btn[aria-expanded="true"] { filter: brightness(1.18); }
.map-btn .mb-ic { font-size: 24px; line-height: 1; }
.map-btn .mb-tx { display: flex; flex-direction: column; line-height: 1.2; }
.map-btn b { font-family: "Noto Serif", serif; font-weight: 500; color: var(--gold); font-size: 15px; }
.map-btn small { font-size: 11px; color: var(--muted); }
/* Nhấp nháy nhẹ cho người chưa từng mở bản đồ */
.map-btn.hint { animation: mapPulse 2.4s ease-in-out infinite; }
@keyframes mapPulse {
  0%, 100% { box-shadow: inset 0 0 0 3px #2c140b, inset 0 0 0 4px rgba(232,184,74,.35), 0 6px 18px rgba(0,0,0,.5), 0 0 0 0 rgba(232,184,74,.55); }
  50% { box-shadow: inset 0 0 0 3px #2c140b, inset 0 0 0 4px rgba(232,184,74,.35), 0 6px 18px rgba(0,0,0,.5), 0 0 0 12px rgba(232,184,74,0); } }
.map-panel { position: absolute; left: 0; bottom: calc(100% + 10px); width: min(330px, calc(100vw - 24px)); overflow-y: auto;
  background: #1f150d; border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.55);
  animation: mapIn .25s ease; }
@keyframes mapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.map-head { display: flex; align-items: center; justify-content: space-between; }
.map-head b { font-family: "Noto Serif", serif; font-weight: 500; color: var(--gold); font-size: 17px; }
.map-sub { margin: 2px 0 10px; font-size: 12.5px; color: var(--muted); }
.map-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.map-item { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 1px 10px; text-align: left;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; }
.map-item:hover { background: var(--gold-soft); }
.map-item.on { border-color: var(--gold); background: var(--gold-soft); }
.map-item .mi-ic { grid-row: 1 / span 2; font-size: 24px; text-align: center; }
.map-item .mi-t { font-size: 15px; font-weight: 500; }
.map-item .mi-d { grid-column: 2; font-size: 12px; color: var(--muted); line-height: 1.35; }
.map-item .mi-n { grid-column: 3; grid-row: 1 / span 2; font-size: 12px; color: var(--gold); white-space: nowrap; text-align: right; }
.map-sec { margin: 12px 0 6px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.map-rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.map-room { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: 1px solid var(--line);
  border-radius: 12px; background: transparent; font-size: 12px; line-height: 1.2; text-align: center; }
.map-room span { font-size: 20px; }
.map-room:hover { background: var(--gold-soft); }
@media (max-width: 520px) {
  .map-wrap { left: 10px; }
  .map-btn { padding: 6px 11px 6px 8px; gap: 7px; border-radius: 12px; }
  .map-btn .mb-ic { font-size: 20px; }
  .map-btn b { font-size: 13.5px; }
  .map-btn small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .map-btn.hint, .map-panel { animation: none; } }


/* ===================== THIỀN CẢNH ===================== */
body.scene-zen [data-sc]:not([data-sc~="zen"]) { display: none !important; }
.sm-sep { margin: 6px 8px 2px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.zen-stats { width: 230px; }
.zs-name { font-size: 15px; }
.zs-name b { font-family: "Noto Serif", serif; font-weight: 500; color: #ffd27a; font-size: 17px; }
.zs-desc { font-size: 12.5px; color: var(--ink); opacity: .85; margin: 3px 0 6px; line-height: 1.4; }
.zs-group { font-size: 12.5px; color: var(--muted); padding-top: 6px; border-top: 1px solid var(--line); }
.zs-vol { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.zs-vol input { flex: 1; min-width: 0; accent-color: var(--gold); }
.zs-tip { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); font-style: italic; }
.map-room small { font-size: 10.5px; color: var(--gold); min-height: 1em; }
.map-room.on { border-color: var(--gold); background: var(--gold-soft); }
/* Hộp ngồi thiền */
.medi-dlg { width: min(460px, calc(100% - 24px)); }
.zen-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 14px; }
.zen-opt { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 0 8px; text-align: left; padding: 9px 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; }
.zen-opt .zo-ic { grid-row: 1 / span 2; font-size: 22px; text-align: center; }
.zen-opt b { font-weight: 500; font-size: 14.5px; }
.zen-opt small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.zen-opt:hover { background: var(--gold-soft); }
.zen-opt.on { border-color: var(--gold); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); }
.medi-len { flex-wrap: wrap; margin-bottom: 0 !important; }
.medi-len button { flex: 1 1 auto; }
@media (max-width: 520px) {
  .zen-stats { width: 180px; }
  .zs-desc, .zs-tip { display: none; }
  .zen-opts { grid-template-columns: 1fr; }
}
.zs-kicker { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 520px) { .zen-stats { top: 86px; } }
@media (max-width: 520px) { .zs-vol { flex-wrap: wrap; gap: 2px 8px; } .zs-vol input { flex-basis: 100%; } }


/* ===================== TÀNG KINH CÁC: MỤC VĂN KHẤN ===================== */
.lib-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1px solid rgba(90,55,20,.35); border-radius: 10px; overflow: hidden; }
.lib-tabs button { background: transparent; border: 0; padding: 8px 4px; font-size: 12.5px; line-height: 1.25; color: #6b4a2a; font-weight: 500; }
.lib-tabs button + button { border-left: 1px solid rgba(90,55,20,.35); }
.lib-tabs button.on { background: var(--seal); color: #fbeedd; }
.library.khan-mode .lib-sort { display: none; }
.library.khan-mode .lib-stage { align-items: flex-start; padding-bottom: 14px; }
.library.khan-mode .lib-stage > * { margin-top: 0; margin-bottom: 0; }
.lib-khan { width: min(100%, 760px); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.kh-paper { position: relative; color: var(--ink2); padding: 22px clamp(18px, 4vw, 40px) 20px;
  background: linear-gradient(90deg, rgba(120,80,30,.12), transparent 7%, transparent 93%, rgba(120,80,30,.12)), linear-gradient(180deg, var(--paper), var(--paper2));
  box-shadow: 0 18px 40px rgba(0,0,0,.6); border-radius: 3px; }
.kh-paper .lib-tag { color: var(--seal); }
.kh-paper h3 { margin: 4px 0 12px; font-family: "Noto Serif", serif; font-weight: 600; font-size: 22px; line-height: 1.3; color: #4a1a10; }
.kh-meta { margin: 0 0 12px; display: grid; gap: 6px; font-size: 14px; }
.kh-meta dt { font-weight: 600; color: var(--seal); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.kh-meta dd { margin: 1px 0 0; line-height: 1.5; }
.kh-fill { margin: 0 0 14px; padding: 8px 12px; border: 1px dashed rgba(163,39,28,.4); border-radius: 8px; background: rgba(255,250,235,.45); font-size: 14px; }
.kh-fill summary { cursor: pointer; color: var(--seal); font-weight: 500; }
.kh-fill label { display: grid; gap: 3px; margin-top: 8px; font-size: 12.5px; color: #6b4a2a; }
.kh-fill input { font: inherit; font-size: 16px; color: var(--ink2); background: rgba(255,255,255,.75); border: 1px solid rgba(90,55,20,.35); border-radius: 7px; padding: 7px 10px; outline: none; }
.kh-fill input:focus { border-color: var(--seal); }
.kh-fill small { display: block; margin-top: 8px; color: #8a6c48; font-size: 12px; }
.kh-vinote { margin: 0 0 10px; font-size: 13px; font-style: italic; color: #8a6c48; }
.kh-vinote:empty { display: none; }
.kh-text { font-family: "Noto Serif", serif; font-size: 17px; line-height: 1.8; padding: 16px 0; border-top: 1px dashed rgba(163,39,28,.35); border-bottom: 1px dashed rgba(163,39,28,.35); }
.kh-text .kh-gap { height: .7em; }
.kh-text .ph { color: var(--seal); background: rgba(163,39,28,.08); border-radius: 4px; padding: 0 3px; font-style: italic; }
.kh-text .ph.ok { font-style: normal; font-weight: 600; background: rgba(232,184,74,.25); color: #4a1a10; }
.kh-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.kh-tools .ghost { color: #6b4a2a; border-color: rgba(90,55,20,.4); }
.kh-tools .ghost:hover { background: rgba(163,39,28,.08); }
.kh-fs { margin-left: auto; display: flex; gap: 6px; }
.kh-note { display: block; margin-top: 12px; font-size: 12px; color: #8a6c48; line-height: 1.5; }
#mapRooms { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
  .lib-khan { width: 100%; }
  .kh-paper h3 { font-size: 19px; }
  .kh-fs { margin-left: 0; }
}
@media (max-width: 360px) { #mapRooms { grid-template-columns: repeat(2, 1fr); } }


/* ===================== SÁM HỐI (karaoke) ===================== */
.sam-door { background: linear-gradient(180deg, #5a3a12, #2e1c08); animation-delay: -4.1s; animation-duration: 7.6s; }
.sam { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; overflow: hidden; color: var(--ink);
  background: radial-gradient(ellipse at 50% 18%, #3a2312 0%, #1a0e07 55%, #0c0604 100%);
  padding: max(10px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)); animation: brIn .6s ease; }
.sam-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sam-bg img { position: absolute; left: 50%; top: 9%; width: min(92vw, 900px); transform: translateX(-50%); opacity: .2; filter: blur(.5px) saturate(.8); }
.sam-glow { position: absolute; left: 50%; top: 22%; width: 70vmin; height: 70vmin; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,110,.22), rgba(255,160,60,0) 65%); animation: samGlow 6s ease-in-out infinite; }
@keyframes samGlow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.sam-top { position: relative; z-index: 2; }
.sam-start { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; place-items: center; overflow-y: auto; padding: 12px 0; }
.sam-card { width: min(520px, 100%); background: rgba(20,12,6,.82); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 14px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.sam-kicker { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sam-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.sam-item { width: 100%; text-align: left; display: grid; gap: 2px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.sam-item b { font-family: "Noto Serif", serif; font-weight: 500; font-size: 17px; color: var(--gold); }
.sam-item small { font-size: 12.5px; color: var(--muted); }
.sam-item.on { border-color: var(--gold); background: var(--gold-soft); }
.sam-opts { display: grid; gap: 8px; margin-bottom: 12px; }
.sam-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { background: transparent; border: 0; padding: 5px 12px; font-size: 13px; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--gold-soft); color: var(--gold); }
.sam-wish { display: grid; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.sam-wish textarea { font: inherit; font-size: 15px; color: var(--ink); background: rgba(255,255,255,.06); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px; resize: vertical; outline: none; }
.sam-wish textarea:focus { border-color: var(--gold); }
.sam-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; align-items: center; }
.sam-note { display: block; margin-top: 12px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }

.sam-run { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.sam-hud { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 8px 0 2px; font-size: 13px; }
.sam-sec { color: var(--gold); letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.sam-bows { color: #ffd27a; font-variant-numeric: tabular-nums; }
.sam-bows:empty { display: none; }
.sam-scroll { position: relative; flex: 1; min-height: 0; width: min(760px, 100%); overflow: hidden; cursor: pointer;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.sam-lines { --fs: 24px; position: absolute; left: 0; right: 0; top: 0; text-align: center; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.sam-line { font-family: "Noto Serif", serif; font-size: var(--fs); line-height: 1.45; padding: .32em 12px; color: rgba(243,231,207,.42);
  transition: color .5s, opacity .5s, transform .5s, text-shadow .5s; }
.sam-line.past { color: rgba(243,231,207,.22); }
.sam-line.cur { color: #ffe2a0; transform: scale(1.1); text-shadow: 0 0 24px rgba(255,200,110,.45); }
.sam-line.sam-wl { font-style: italic; color: rgba(255,226,160,.55); }
.sam-line.sam-wl.cur { color: #ffe2a0; }
.sam-line .w { display: inline-block; transition: color .25s; }
.sam-line.cur .w { color: rgba(255,226,160,.5); }
.sam-line.cur .w.on { color: #fff3cf; }
.sam-h { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); opacity: .65; padding: 1.2em 0 .3em; font-family: "Be Vietnam Pro", sans-serif; }
.sam-bar { width: min(560px, 90%); height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; margin: 8px 0; }
.sam-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c8892f, #ffd27a); transition: width .5s; }
.sam-ctl { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.sam-ctl .ghost { color: var(--ink); }
.sam-ctl .kh-fs { margin-left: 4px; }
.sam-play { min-width: 160px; padding: 11px 22px; }
.sam-taphint { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.sam-endcard { text-align: center; }
.sam-lotus { font-size: 44px; animation: samGlow 4s ease-in-out infinite; }
.sam-endcard h3 { font-family: "Noto Serif", serif; font-weight: 500; color: var(--gold); font-size: 22px; margin: 6px 0 8px; }
.sam-endcard p { margin: 0 0 10px; line-height: 1.6; }
.sam-endtxt { font-family: "Noto Serif", serif; font-style: italic; color: #e4d6bb; }
@media (max-width: 760px) {
  .sam { padding-left: 12px; padding-right: 12px; }
  .sam-top { grid-template-columns: auto 1fr; }
  .sam-top .lib-plaque { justify-self: end; padding: 4px 14px 5px; }
  .sam-top .lib-plaque .pl-big { font-size: 20px; }
  .sam-top .lib-plaque small { font-size: 10px; }
  .sam-top .lib-count { display: none; }
  .sam-play { min-width: 130px; }
}
@media (prefers-reduced-motion: reduce) { .sam-glow, .sam-lotus { animation: none; } .sam-lines { transition: none; } }


/* ===================== ĐIỆN THOẠI: THANH NÚT MỘT HÀNG, VUỐT NGANG ===================== */
/* Thay cho lưới 4 cột hai hàng: gọn hơn, chừa chỗ cho chỗ ngồi, thêm nút mới không làm thanh cao lên */
@media (max-width: 520px) {
  .actions { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden;
    width: calc(100% - 16px); max-width: calc(100% - 16px); gap: 0; padding: 3px; border-radius: 14px;
    bottom: max(8px, env(safe-area-inset-bottom)); scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .actions::-webkit-scrollbar { display: none; }
  .actions > :first-child { margin-left: auto; }        /* ít nút thì canh giữa, nhiều nút thì vuốt được từ đầu */
  .actions > :last-child { margin-right: auto; }
  .actions button, .actions .act-link { flex: 0 0 auto; min-width: 58px; padding: 9px 5px 4px; gap: 1px; position: relative; scroll-snap-align: start; border-radius: 10px; }
  .actions .act-link { margin-left: 0; }
  .actions .act-link > :first-child { margin-left: 0; }
  .actions .ic { font-size: 19px; line-height: 1.15; }
  .actions .lb { font-size: 10.5px; line-height: 1.15; white-space: nowrap; }
  /* số đếm (lạy 0/108, lần chuỗi) thành huy hiệu nhỏ ở góc, không làm nút cao thêm */
  .actions .ct { position: absolute; top: 1px; left: 50%; margin-left: 4px; font-size: 8.5px; line-height: 1; padding: 1px 4px; border-radius: 999px;
    background: rgba(20,13,8,.85); border: 1px solid var(--line); }
  .actions.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .actions.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
  .actions.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
}


/* ===================== CÁ NHÂN: HÔM NAY CỦA BẠN ===================== */
.me-btn { font-size: 15px; }
.me-dlg { width: min(560px, calc(100% - 20px)); max-height: calc(100dvh - 30px); overflow-y: auto; }
.me-who { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.me-who b { font-family: "Noto Serif", serif; font-weight: 500; font-size: 19px; color: #ffd27a; }
.me-who span { font-size: 12.5px; color: var(--muted); }
.me-total { margin: 0 0 12px !important; font-size: 13.5px; line-height: 1.5; padding: 8px 12px; border-radius: 10px;
  background: var(--gold-soft); border: 1px solid rgba(232,184,74,.35); }
.me-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.me-card { display: grid; grid-template-columns: 26px 1fr; gap: 1px 8px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); min-width: 0; }
.me-card.off { opacity: .5; }
.me-ic { grid-row: 1 / span 3; font-size: 20px; text-align: center; align-self: start; padding-top: 2px; }
.me-t { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.me-v { font-weight: 600; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.me-s { font-size: 11.5px; color: var(--muted); line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.me-note { display: block; margin-top: 12px; font-size: 11.5px; color: var(--muted); text-align: center; }
@media (max-width: 520px) {
  .me-dlg { padding: 12px; }
  .top .me-btn { order: 3; }
}
@media (max-width: 340px) { .me-grid { grid-template-columns: 1fr; } }
/* Thanh trên cùng trên điện thoại: thêm nút 👤 mà vẫn vừa một hàng */
@media (max-width: 520px) {
  .top { padding-left: 12px; padding-right: 10px; column-gap: 6px; }
  .top .name { font-size: 15.5px; }
  .top .icon-btn { width: 31px; height: 31px; font-size: 13px; padding: 0; }
  .top .me-btn { font-size: 14px; }
  .scene-btn { padding: 5px 9px; }
}

/* Văn khấn: biển hiệu thành ngày âm lịch hôm nay */
.lib-plaque.lunar .pl-big { letter-spacing: .06em; margin-right: -.06em; color: #ffd27a; }
.lib-plaque.lunar small { color: #e8c98a; }
.kh-lunar { font-weight: 600; color: #4a1a10; }
.kh-lcheck { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px; margin-top: 10px !important; font-size: 13.5px !important; color: var(--seal) !important; }
.kh-lcheck input { accent-color: var(--seal); width: 16px; height: 16px; }
@media (max-width: 760px) { .lib-plaque.lunar .pl-big { font-size: 17px; letter-spacing: .03em; } }

/* Hộp Tụng kinh: dòng giờ tụng kinh chung + đếm ngược */
.chant-cer { display: grid; gap: 2px; margin: -2px 0 12px !important; padding: 8px 12px; border-radius: 12px;
  background: var(--gold-soft); border: 1px solid rgba(232,184,74,.35); font-size: 13px; line-height: 1.45; }
.chant-cer .cc-times { color: var(--ink); }
.chant-cer .cc-next { color: #ffd27a; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Chánh điện: dòng "thời gian tĩnh lặng hôm nay" - chữ nhỏ, mờ, không phải bảng số */
.quiet { position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 4; margin: 0;
  width: max-content; max-width: calc(100% - 32px); text-align: center; pointer-events: none;
  font-family: "Noto Serif", serif; font-style: italic; font-size: 14px; color: rgba(243,231,207,.72);
  text-shadow: 0 1px 4px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.6); transition: opacity 1s; }
.quiet:empty, body.cer-on .quiet { opacity: 0; }
@media (max-width: 520px) { .quiet { bottom: 74px; font-size: 12.5px; } }

/* Nút Bản đồ gọn: chỉ còn chữ, không biểu tượng, không dòng phụ */
.map-btn { padding: 6px 12px; gap: 0; border-radius: 10px; }
.map-btn b { font-size: 13.5px; }
@media (max-width: 520px) {
  .map-btn { padding: 4px 10px; border-radius: 9px; }
  .map-btn b { font-size: 12.5px; }
}

/* Thiền cảnh trên điện thoại: bảng thu gọn thành một thanh nhỏ ở góc trên trái, không che chú tiểu ngồi trên mỏm đá */
.zs-group .zg-short { display: none; }
@media (max-width: 520px) {
  .zen-stats { top: 84px; left: 10px; width: auto; max-width: calc(100% - 20px); padding: 4px 6px 4px 10px; border-radius: 999px;
    display: flex; align-items: center; gap: 8px; }
  .zs-kicker, .zs-desc, .zs-tip { display: none !important; }
  .zs-name { font-size: 13px; white-space: nowrap; }
  .zs-name b { font-size: 14px; }
  .zs-group { border: 0; padding: 0; font-size: 12px; white-space: nowrap; }
  .zs-group .zg-long { display: none; }
  .zs-group .zg-short { display: inline; }
  .zs-vol { margin: 0; flex-wrap: nowrap; gap: 4px; }
  .zs-vol span { font-size: 0; }
  .zs-vol span::before { content: "🔊"; font-size: 13px; }
  .zs-vol input { flex: 0 0 72px; flex-basis: 72px; width: 72px; }
}


/* ===================== CÂY TRI ÂN ===================== */
/* Sân chùa, góc trên phải (bên trái là tán cây bồ đề nên không đặt biển ở đó) */
.yard-doors { position: fixed; top: 70px; right: 16px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 22px; }
.tree-tag { background: linear-gradient(180deg, #2f4a24, #18280f); animation-delay: -1.2s; animation-duration: 7.4s; }
.tree-tag small:empty { display: none; }
@media (max-width: 520px) {
  .yard-doors { top: 92px; right: 8px; gap: 16px; }
}
/* Lời nguyện khi chạm vào lá */
.leaf-tip { position: fixed; z-index: 6; left: 0; top: 0; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none;
  width: max-content; max-width: min(280px, calc(100vw - 24px)); text-align: center; padding: 8px 14px 9px; border-radius: 14px;
  background: rgba(20,12,6,.88); border: 1px solid var(--lc, var(--gold)); box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 18px var(--lg, rgba(232,184,74,.25));
  animation: leafIn .35s ease; }
.leaf-tip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
  background: rgba(20,12,6,.88); border-right: 1px solid var(--lc, var(--gold)); border-bottom: 1px solid var(--lc, var(--gold)); }
.leaf-tip b { display: block; font-family: "Noto Serif", serif; font-weight: 500; color: #ffe2a0; font-size: 15px; }
.leaf-tip span { display: block; font-size: 13px; color: var(--ink); margin-top: 2px; }
.leaf-tip small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
@keyframes leafIn { from { opacity: 0; transform: translate(-50%, calc(-100% - 4px)); } to { opacity: 1; } }

/* Phòng Hành lang bia */
.bia-room { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; overflow: hidden; color: var(--ink); background: #1b1610;
  padding: max(10px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom)); animation: brIn .6s ease; }
.bia-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.bia-bg .flame { animation: flick 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bia-top { position: relative; z-index: 2; }
.bia-stage { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; align-items: flex-end; }
.bia-row { display: flex; align-items: flex-end; gap: 6px; width: 100%; overflow-x: auto; overflow-y: hidden; padding: 30px 6vw 2vh;
  scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(232,184,74,.35) transparent; }
.bia-row > :first-child { margin-left: auto; }
.bia-row > :last-child { margin-right: auto; }
.bia { flex: 0 0 auto; width: 178px; display: flex; flex-direction: column; align-items: center; scroll-snap-align: center;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)); animation: biaUp .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes biaUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.bia-slab { position: relative; z-index: 1; width: 148px; min-height: 226px; margin-bottom: -30px; padding: 30px 12px 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px; color: #2f2a22;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.18), transparent 55%),
              linear-gradient(90deg, #6e695f 0%, #a19b8e 22%, #b8b2a5 48%, #9a9487 76%, #5f5a51 100%);
  border-radius: 74px 74px 6px 6px / 46px 46px 6px 6px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -10px 18px rgba(0,0,0,.25); }
.bia-slab::before { content: ""; position: absolute; inset: 9px 9px 30px; border: 1.5px solid rgba(40,34,26,.35);
  border-radius: 64px 64px 4px 4px / 38px 38px 4px 4px; pointer-events: none; }
.bia-slab::after { content: ""; position: absolute; left: 50%; top: 13px; width: 46px; height: 12px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(ellipse, rgba(var(--rgb, 232,184,74), .55), transparent 70%); }
.bia-ic { font-size: 22px; line-height: 1; margin-top: 6px; filter: grayscale(.2); }
.bia-h { font-family: "Noto Serif", serif; font-weight: 600; font-size: 14px; line-height: 1.3; text-transform: uppercase; letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(255,255,255,.35); overflow-wrap: anywhere; }
.bia-n { font-family: "Noto Serif", serif; font-weight: 600; font-size: 44px; line-height: 1.05; color: #2a241c;
  text-shadow: 0 1px 0 rgba(255,255,255,.4), 0 -1px 0 rgba(0,0,0,.25); font-variant-numeric: tabular-nums; margin-top: auto; }
.bia-s { font-size: 12.5px; line-height: 1.4; text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.bia-x { font-size: 11.5px; line-height: 1.35; opacity: .8; }
.bia-txt { font-family: "Noto Serif", serif; font-style: italic; font-size: 14px; line-height: 1.55; margin: auto 0; }
.bia-turtle { display: block; width: 178px; height: 84px; position: relative; z-index: 0; }
.bia-note { position: relative; z-index: 2; margin: 6px auto 0; max-width: 560px; text-align: center; font-size: 12px; color: var(--muted);
  text-shadow: 0 1px 3px #000; }
@media (max-width: 760px) {
  .bia-room { padding-left: 10px; padding-right: 10px; }
  .bia-top { grid-template-columns: auto 1fr; }
  .bia-top .lib-plaque { justify-self: end; padding: 4px 14px 5px; }
  .bia-top .lib-plaque .pl-big { font-size: 19px; letter-spacing: .07em; }
  .bia-top .lib-plaque small { font-size: 10px; }
  .bia-top .lib-count { display: none; }
  .bia { width: 150px; }
  .bia-slab { width: 128px; min-height: 206px; padding: 26px 9px 36px; }
  .bia-n { font-size: 38px; }
  .bia-h { font-size: 12.5px; }
  .bia-turtle { width: 150px; height: 71px; }
  .bia-row { padding-bottom: 1vh; }
}
@media (prefers-reduced-motion: reduce) { .bia { animation: none; } .leaf-tip { animation: none; } }
@media (max-width: 520px) {
  .yard-doors .tree-tag small { display: block; font-size: 10px; }   /* điện thoại: vẫn hiện số lá đang sáng */
}
/* Khung lời nguyện luôn nằm trên thanh trên cùng (z 7) và biển gỗ; lật xuống dưới lá khi lá ở sát mép trên */
.leaf-tip { z-index: 8; }
.leaf-tip.below { transform: translate(-50%, 0); animation-name: leafInBelow; }
.leaf-tip.below::after { top: -6px; bottom: auto; transform: translateX(-50%) rotate(225deg); }
@keyframes leafInBelow { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; } }

/* Hộp Tụng kinh: công tắc "Tiếng niệm Phật vọng xa" */
.hall-chant-opt { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }


/* ===================== HẬU SƠN: HAI BIỂN GỖ + VƯỜN RAU ===================== */
/* Trong Hậu sơn: hai biển ở góc trên phải; biển của khu đang đứng sáng viền vàng */
.hs-board { white-space: nowrap; background: linear-gradient(180deg, #3e3a2a, #22200f); }
.hs-board.garden-board { background: linear-gradient(180deg, #34502a, #1a2c12); animation-delay: -2.7s; animation-duration: 8.1s; }
.hs-board::before, .hs-board::after { top: -18px; height: 18px; }
.hs-doors { position: fixed; top: 70px; right: 16px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 22px; }
.hs-doors .hs-board.on { box-shadow: inset 0 0 0 3px #2c140b, inset 0 0 0 4px var(--gold), 0 0 18px rgba(232,184,74,.45); cursor: default; }
@media (max-width: 520px) {
  .hs-doors { top: 140px; right: 8px; gap: 16px; }
  .hs-board small { display: none; }
}
/* Hậu sơn, điện thoại, khi đã LEO TỚI ĐỈNH (body.mount-top): tượng Phật hiện rất lớn giữa màn hình,
   nên thu nhỏ và dời các ô chữ ra rìa để không che tượng:
   - biển tên cảnh: ẩn (tên cảnh đã có ở nút "Hậu sơn" trên đầu trang)
   - hai biển gỗ: chỉ còn biểu tượng nhỏ sát mép phải (chạm vào vẫn chuyển cảnh)
   - bảng đếm bậc: thành thanh nhỏ nằm dưới, cạnh nút Bản đồ */
@media (max-width: 520px) {
  body.scene-mount.mount-top .mount-plaque { display: none; }

  body.scene-mount.mount-top .hs-doors { top: 150px; right: 6px; gap: 8px; }
  body.scene-mount.mount-top .hs-board { padding: 4px 6px; border-radius: 8px; animation: none; transform: none; }
  body.scene-mount.mount-top .hs-board::before, body.scene-mount.mount-top .hs-board::after { display: none; }
  body.scene-mount.mount-top .hs-board .ld-tx { display: none; }
  body.scene-mount.mount-top .hs-board .ld-ic { font-size: 17px; }

  body.scene-mount.mount-top .mount-stats {
    top: auto; left: auto; right: 8px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 62px);
    width: calc(100% - 104px); max-width: 260px; padding: 5px 9px; border-radius: 10px;
    background: rgba(20, 14, 8, .72);
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  }
  body.scene-mount.mount-top .ms-count { flex: 1 1 auto; white-space: nowrap; }
  body.scene-mount.mount-top .ms-count b { font-size: 16px; }
  body.scene-mount.mount-top .ms-count span { font-size: 11px; }
  body.scene-mount.mount-top .ms-bar { order: 3; flex: 0 0 100%; height: 3px; margin: 2px 0; }
  body.scene-mount.mount-top .ms-bows { order: 4; flex: 0 0 100%; font-size: 10.5px; line-height: 1.25; }
  body.scene-mount.mount-top .ms-group { display: none; }
  body.scene-mount.mount-top .ms-restart { order: 2; margin: 0; font-size: 11px; white-space: nowrap; }
}

/* Bảng vườn rau (dùng chung khung .mount-stats) */
.garden-stats { width: 220px; }
.gs-name { font-size: 15px; }
.gs-name b { font-family: "Noto Serif", serif; font-weight: 500; color: #b9f0a0; font-size: 17px; }
.gs-group { font-size: 12.5px; color: var(--muted); margin: 3px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.gs-now { font-size: 12px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.gs-mode { font-size: 12px; color: #b9f0a0; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
/* Chế độ tự động: chú tiểu tự tưới liên tục, ẩn các nút làm bằng tay */
body.garden-auto #btnGardenWater, body.garden-auto #btnGardenBug, body.garden-auto #btnGardenFetch { display: none !important; }
.garden-plaque .pl-big { color: #c8f0a8; }
@media (max-width: 520px) {
  .garden-stats { width: 170px; }
  .gs-name b { font-size: 15px; }
}

/* Mobile: thu gọn bảng trạng thái vườn rau để không che luống rau và chú tiểu */
@media (max-width: 520px) {
  .garden-stats {
    top: 118px;
    left: 7px;
    width: 138px;
    max-width: 40vw;
    padding: 5px 7px;
    border-radius: 10px;
    background: rgba(20, 29, 18, .78);
  }
  .garden-stats .gs-name { font-size: 11px; line-height: 1.2; }
  .garden-stats .gs-name b { font-size: 12px; }
  .garden-stats .gs-group { font-size: 9.5px; line-height: 1.25; margin: 2px 0 3px; padding-bottom: 3px; }
  .garden-stats #gsWater { font-size: 10px; line-height: 1.2; }
  .garden-stats .gs-now { font-size: 10px; line-height: 1.25; margin-top: 2px; }
  .garden-stats .gs-mode { font-size: 10px; line-height: 1.25; margin-top: 3px; padding-top: 3px; }
}

/* Chánh điện: ngày tháng năm âm lịch hôm nay - khung nhỏ, xếp dọc sát mép phải, không che tượng */
.hall-lunar { position: fixed; z-index: 4; right: 10px; top: 64px; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 4px 8px; text-align: center; pointer-events: none; border-radius: 6px; line-height: 1.25;
  background: rgba(23,9,5,.55); border: 1px solid rgba(201,162,74,.55); box-shadow: 0 4px 12px rgba(0,0,0,.4);
  font-family: "Noto Serif", serif; color: #e8c98a; }
.hall-lunar .hl-k { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hall-lunar .hl-d { font-size: 14px; font-weight: 600; color: #ffd27a; white-space: nowrap; margin-top: 2px; }
.hall-lunar .hl-m, .hall-lunar .hl-y { font-size: 10.5px; white-space: nowrap; }
.hall-lunar .hl-y { color: var(--muted); }
@media (max-width: 520px) {
  .hall-lunar { right: 6px; top: 86px; width: 62px; padding: 5px 3px 6px; }
  .hall-lunar .hl-d { font-size: 12.5px; }
  .hall-lunar .hl-m, .hall-lunar .hl-y { font-size: 9.5px; }
}

/* ===================== HẬU SƠN: CHẾ ĐỘ CHẠM ĐỂ LEO ===================== */
/* Chế độ tự tay: mỗi lần chạm chú tiểu bước một bậc + lạy một lạy, nên không cần nút Tạm nghỉ */
body.mount-manual #btnMPause { display: none !important; }
body.scene-mount.mount-manual canvas#scene { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#btnMMode.on { background: var(--gold-soft); }

/* ===================== LẦN CHUỖI: CHUỖI HẠT PHÓNG TO ===================== */
.bead-overlay { position: fixed; inset: 0; z-index: 8; overflow: hidden; color: var(--ink); cursor: pointer;
  background: radial-gradient(ellipse at 50% 46%, rgba(70,38,14,.30), rgba(8,4,2,.80) 78%);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .55s ease;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.bead-overlay.show { opacity: 1; }
.bead-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bead-top { position: absolute; left: 0; right: 0; top: max(22px, calc(env(safe-area-inset-top) + 12px)); text-align: center; pointer-events: none; }
.bead-title { font-family: "Noto Serif", serif; font-size: 14px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); opacity: .85; }
.bead-count { margin-top: 2px; }
.bead-count b { font-family: "Noto Serif", serif; font-weight: 500; font-size: clamp(40px, 9vw, 64px); color: #ffd98a; text-shadow: 0 0 22px rgba(255,190,90,.45); font-variant-numeric: tabular-nums; }
.bead-count span { font-size: 14px; color: var(--muted); }
.bead-mala { min-height: 18px; margin-top: 2px; font-size: 13px; color: #f3d9a0; transition: opacity .5s; }
.bead-hint { position: absolute; left: 0; right: 0; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 62px); text-align: center; font-size: 13px; letter-spacing: .04em; color: var(--muted); pointer-events: none; animation: beadHint 3.2s ease-in-out infinite; }
@keyframes beadHint { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
.bead-close { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(18px, env(safe-area-inset-bottom));
  background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 9px 30px; font-size: 14px; cursor: pointer; }
.bead-close:hover { background: var(--gold-soft); }
@media (prefers-reduced-motion: reduce) { .bead-hint { animation: none; opacity: .7; } .bead-overlay { transition: none; } }

/* =====================================================================
   PHÒNG PHẬT TỬ (phòng riêng: bồ đoàn, tường ảnh tưởng niệm, bát hương) - app.js: const PH
   ===================================================================== */
body.in-phong .toast { z-index: 12; }
.phong { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; overflow: hidden; color: var(--ink);
  background: #261710; padding: max(10px, env(safe-area-inset-top)) 12px 0; animation: brIn .6s ease; }
.ph-top { position: relative; z-index: 3; flex: 0 0 auto; }

/* Tường + bàn thờ */
.ph-back { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0 -12px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 72px), linear-gradient(180deg, #2c1b10, #22140b); }
.ph-wall { flex: 1 1 auto; min-height: 0; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 8px; overflow-y: auto; padding-top: 10px; }
/* căn giữa bằng margin auto: thiếu chỗ thì khung ảnh bắt đầu từ mép trên (không bị thanh tiêu đề che) và cuộn được */
.ph-wall > :first-child { margin-top: auto; }
.ph-wall > :last-child { margin-bottom: auto; }
.ph-frames { --gap: clamp(6px, 1.3vw, 14px);
  --fh: max(54px, calc((100vh - 560px) / 2));                      /* dự phòng cho trình duyệt cũ */
  --fw: min(calc(var(--fh) * .8), calc((100vw - 56px) / 5 - 8px));
  display: grid; grid-template-columns: repeat(5, var(--fw)); gap: var(--gap); justify-content: center; }
@supports (height: 1cqh) {
  .ph-frames { --fh: max(48px, calc((100cqh - 54px - var(--gap)) / 2));
    --fw: min(calc(var(--fh) * .8), calc((100cqw - 24px - 4 * var(--gap)) / 5)); }
}
.ph-slot { position: relative; width: var(--fw); height: calc(var(--fw) * 1.25); padding: 0; overflow: hidden; cursor: pointer;
  border: 3px solid #7a5426; border-radius: 3px; background: #1a100a;
  box-shadow: inset 0 0 0 1px rgba(201,162,74,.45), 0 4px 10px rgba(0,0,0,.55); transition: transform .2s, box-shadow .2s; }
.ph-slot:hover, .ph-slot:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(201,162,74,.8), 0 6px 14px rgba(0,0,0,.6); outline: none; }
.ph-slot.empty { border-style: dashed; border-color: rgba(201,162,74,.38); background: rgba(10,6,3,.35); box-shadow: none; }
.ph-slot.empty::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(16px, 3vw, 26px); color: rgba(201,162,74,.5); }
.ph-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-slot .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 3px 2px; font-size: 10px; line-height: 1.2; color: #f3e7cf;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(transparent, rgba(0,0,0,.82)); }
.ph-hint { margin: 0; padding: 0 16px; font-size: 12px; color: var(--muted); text-align: center; text-shadow: 0 1px 4px #000; }

.ph-altar { flex: 0 0 auto; height: clamp(140px, 25vh, 260px); display: flex; justify-content: center; align-items: flex-end; position: relative; z-index: 1; }
.ph-altar svg { height: 100%; width: auto; max-width: 100%; overflow: visible; display: block; }

/* Sàn gỗ + Phật tử trên bồ đoàn */
.ph-floor { flex: 0 0 auto; margin: 0 -12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); position: relative; z-index: 2;
  border-top: 3px solid #120a05; box-shadow: 0 -8px 18px rgba(0,0,0,.45);
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 2px, transparent 2px 110px), linear-gradient(180deg, #3d2616, #170d07); }
.ph-figure { height: clamp(150px, 27vh, 280px); display: flex; justify-content: center; align-items: flex-end; margin-top: -26px; pointer-events: none; }
/* Phật tử vẽ bằng drawMonk (canvas), tỉ lệ khớp với khung vẽ 72 x 58 đơn vị trong PH.frameMonk */
.ph-figure canvas { height: 100%; width: auto; aspect-ratio: 72 / 58; max-width: 100%; display: block; }
.ph-bar { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 8px 12px 0; }
.ph-offer { padding: 12px 26px; font-size: 15px; }
.ph-offer:disabled { background: rgba(232,184,74,.22); color: var(--ink); box-shadow: none; cursor: default; transform: none; }
.ph-snd { background: rgba(20,12,6,.7); color: var(--ink); }

/* Hương: nén hương, đầu hương, khói */
.phong .stk { stroke: #8a3a1c; stroke-width: 3.4; }
.phong .ash { stroke: #a39d92; stroke-width: 3.4; }
.phong .ember { animation: phEmber 1.7s ease-in-out infinite alternate; }
.phong .glow { animation: phEmber 2.3s ease-in-out infinite alternate-reverse; }
.phong .smoke path { fill: none; stroke: rgba(240,240,232,.5); stroke-width: 1.8; stroke-linecap: round;
  transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: phSmoke 7s ease-out infinite; }
.phong .smoke path:nth-child(2) { animation-delay: -3.5s; }
.phong .ph-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: phFlick 2.6s ease-in-out infinite; }
@keyframes phEmber { from { opacity: .72; } to { opacity: 1; } }
@keyframes phSmoke { 0% { opacity: 0; transform: translateY(0) scaleX(.6); } 18% { opacity: .55; } 100% { opacity: 0; transform: translateY(-46px) scaleX(1.5); } }
@keyframes phFlick { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.94, 1.06) rotate(1.5deg); } 60% { transform: scale(1.04, .95) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { .phong *, .phong *::before { animation: none !important; } }

/* Hộp thông tin khung ảnh */
.ph-dlg { text-align: center; }
.ph-dprev { display: grid; place-items: center; margin: 4px 0 12px; }
.ph-dprev img { width: 136px; height: 170px; object-fit: cover; border: 4px solid #7a5426; border-radius: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.55); }
.ph-name { display: grid; gap: 6px; text-align: left; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.ph-name input { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--ink); font-size: 15px; }
.ph-drow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; }
.ph-done { padding: 9px 22px; font-size: 14px; }
.ph-note { display: block; margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }

@media (max-width: 760px) {
  .phong .lib-plaque .pl-big { font-size: 18px; letter-spacing: .06em; margin-right: -.06em; }
  .phong .lib-plaque small { display: none; }
  .ph-figure { margin-top: -18px; }
  .phong .ph-altar { height: clamp(120px, 21vh, 200px); }
  .phong .ph-figure { height: clamp(120px, 21vh, 220px); }
}

/* ===================== PHÓNG SINH CÁC (Hậu sơn) ===================== */
.hs-board.release-board { background: linear-gradient(180deg, #2f4258, #17222f); animation-delay: -4.1s; animation-duration: 8.7s; }
.rel-plaque .pl-big { color: #e9f1ff; }
.rel-stats { width: 210px; }
.rel-stats .ms-count span { color: var(--ink); }
.rs-group { font-size: 12.5px; color: var(--muted); margin: 6px 0 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.rs-tip { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.rel-stats .ms-restart { display: block; color: #ffd27a; }
.rel-stats .ms-restart.hidden { display: none; }
@media (max-width: 520px) {
  .rel-stats { top: 128px; left: 8px; width: 150px; max-width: 42vw; padding: 6px 8px; border-radius: 10px; }
  .rel-stats .ms-count b { font-size: 20px; }
  .rel-stats .ms-count span, .rel-stats .ms-bows { font-size: 11px; }
  .rs-group { font-size: 10.5px; margin: 4px 0 2px; padding-top: 4px; }
  .rs-tip { font-size: 10px; }
}

/* ===================== TÀNG KINH CÁC: THỬ TÀI ===================== */
.lib-quiz { margin: -4px 0 14px; color: var(--gold); border-color: rgba(232,184,74,.55); }
.lib-quiz:hover { background: var(--gold-soft); }
.quiz-dlg { max-width: 520px; }
.qz-story { margin: 0 0 4px; font-family: "Noto Serif", serif; color: var(--gold); font-size: 15px; }
.qz-note { display: block; color: var(--muted); font-size: 11.5px; margin-bottom: 6px; }
.qz-step { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 10px 0 4px; }
.qz-q { margin: 0 0 12px; font-size: 16.5px; line-height: 1.5; }
.qz-opts { display: grid; gap: 8px; }
.qz-opt { text-align: left; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
  font-size: 14.5px; line-height: 1.4; color: var(--ink); transition: background .2s, border-color .2s; }
.qz-opt:hover:not(:disabled) { background: var(--gold-soft); border-color: var(--gold); }
.qz-opt:disabled { cursor: default; opacity: .75; }
.qz-opt.right { opacity: 1; background: rgba(110,190,120,.2); border-color: #8fd39a; }
.qz-opt.right::after { content: " ✓"; color: #8fd39a; }
.qz-opt.wrong { opacity: 1; background: rgba(232,150,110,.14); border-color: #e0a07a; }
.qz-fb { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(232,184,74,.08); border: 1px solid var(--line); display: grid; gap: 6px; }
.qz-fb.ok { background: rgba(110,190,120,.1); }
.qz-fb b { font-weight: 600; color: #f2cf7a; }
.qz-fb.ok b { color: #a8e3b0; }
.qz-ans { font-size: 13.5px; }
.qz-why { font-size: 13.5px; color: #e4d6bb; line-height: 1.55; }
.qz-next { justify-self: end; margin-top: 4px; padding: 8px 18px; font-size: 14px; }
.qz-end { text-align: center; padding: 10px 0 4px; }
.qz-lotus { font-size: 34px; }
.qz-score { font-family: "Noto Serif", serif; font-size: 20px; color: var(--gold); margin: 6px 0 4px; }
.qz-msg { margin: 0 0 14px; color: #e4d6bb; line-height: 1.5; }
.qz-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.qz-row .enter { padding: 9px 18px; font-size: 14px; }

/* ===================== PHÓNG SINH CÁC: ĐIỆN THOẠI ===================== */
/* Điện thoại: bỏ ba biển gỗ (đã có Bản đồ), bảng góc trái thu thành một dải nhỏ: 🌰 n · 🕊️ n · 👥 n/10 */
.rs-short { display: none; }
@media (max-width: 520px) {
  body.scene-release .hs-doors { display: none !important; }
  .rel-plaque { top: 78px; }
  .rel-stats { top: 122px; left: 8px; width: auto; max-width: calc(100% - 16px); padding: 4px 10px; border-radius: 999px;
    background: rgba(20,14,8,.62); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
  .rel-stats .ms-count b { font-size: 15px; }
  .rel-stats .rs-long, .rel-stats .rs-tip { display: none; }
  .rel-stats .rs-short { display: inline; }
  .rel-stats .ms-bows, .rs-group { font-size: 12px; margin: 0; padding: 0; border: 0; color: var(--ink); }
  .rel-stats .ms-restart { margin: 0; font-size: 11.5px; }
}

/* ===================== NHÀ TƯỞNG NIỆM (phòng chung) - app.js: const NIEM ===================== */
/* Dùng lại khung .phong (sàn gỗ, bàn thờ, nén hương, Phật tử) của Phòng Phật Tử; chỉ thêm tường bài vị */
.niem { background: #1d0f0a; }
.nm-back { background: radial-gradient(ellipse at 50% 30%, rgba(255,170,80,.12), transparent 60%),
  repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 72px), linear-gradient(180deg, #2a140c, #1c0d07); }
.nm-wall { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; container-type: size; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-content: safe center;
  gap: 18px clamp(12px, 3vw, 34px); padding: 10px 16px 4px; }
.nm-wall::-webkit-scrollbar { display: none; }
/* Bài vị: tấm gỗ sơn son, đầu tròn vòm, viền vàng, đặt trên đế gỗ */
.nm-tab { position: relative; width: clamp(112px, 12vw, 140px); min-height: clamp(140px, 24vh, 205px); min-height: max(96px, min(205px, calc(100cqh - 36px))); padding: 22px 9px 18px; margin-bottom: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  font-family: "Noto Serif", serif; color: #f3d58c;
  background: radial-gradient(ellipse at 35% 18%, rgba(255,255,255,.12), transparent 50%), linear-gradient(180deg, #8a1f12, #5a120a 60%, #3e0b06);
  border: 3px solid #c9a24a; border-radius: 50% 50% 6px 6px / 20% 20% 6px 6px;
  box-shadow: inset 0 0 0 5px #3e0b06, inset 0 0 0 6px rgba(201,162,74,.55), 0 10px 22px rgba(0,0,0,.6); transition: box-shadow 1.2s; }
.nm-tab::before { content: "❀"; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); font-size: 14px; color: #e0b45a; opacity: .85; }
.nm-tab.lit { box-shadow: inset 0 0 0 5px #3e0b06, inset 0 0 0 6px rgba(201,162,74,.55), 0 10px 22px rgba(0,0,0,.6), 0 0 34px rgba(255,180,90,.35); }
.nm-top { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #e8c98a; opacity: .85; }
.nm-title { font-size: 14px; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; color: #ffe2a0;
  text-shadow: 0 1px 0 rgba(0,0,0,.5); text-wrap: balance; overflow-wrap: anywhere; }
.nm-line { font-size: 13px; line-height: 1.35; text-wrap: balance; overflow-wrap: anywhere; }
.nm-sub { font-size: 12px; font-style: italic; line-height: 1.35; color: #f0d79c; text-wrap: balance; }
.nm-note { font-size: 11px; color: #d9b98a; opacity: .85; }
.nm-base { position: absolute; left: -12px; right: -12px; bottom: -16px; height: 16px; border-radius: 3px;
  background: linear-gradient(180deg, #7a4a24, #3a200e); box-shadow: 0 4px 8px rgba(0,0,0,.5); }
.nm-empty { color: var(--muted); font-size: 14px; }
.nm-today { margin: 2px 12px 0; text-align: center; font-size: 13px; color: #f0d79c; text-shadow: 0 1px 3px #000; }
@media (max-width: 520px) {
  .nm-wall { gap: 14px 10px; padding: 8px 8px 4px; }
  .nm-tab { width: 104px; min-height: 150px; min-height: max(96px, min(150px, calc(100cqh - 48px))); padding: 22px 7px 20px; }
  .nm-top { font-size: 9.5px; letter-spacing: .06em; }
  .nm-title { font-size: 12px; } .nm-line { font-size: 11.5px; } .nm-sub { font-size: 10.5px; }
  .nm-today { font-size: 12px; }
}

/* ===== LỜI CHÚC: bảng chọn khi chạm vào chú tiểu khác (chánh điện + sân chùa) ===== */
.wish-menu { position: fixed; z-index: 60; min-width: 210px; max-width: calc(100vw - 16px); padding: 10px; border-radius: 14px;
  background: rgba(28,16,9,.96); border: 1px solid rgba(214,170,90,.55); box-shadow: 0 12px 30px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 6px; animation: wishIn .18s ease-out; }
.wish-menu[hidden] { display: none; }
.wish-h { font-size: 13px; color: #f2cf7a; padding: 2px 30px 4px 4px; font-weight: 600; }
.wish-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent;
  color: #d9c39a; font-size: 14px; cursor: pointer; }
.wish-menu button[data-k]:not(.wish-x) { text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(214,170,90,.25);
  background: rgba(255,230,170,.06); color: #f3e7cf; font: inherit; font-size: 14px; cursor: pointer; }
.wish-menu button[data-k]:not(.wish-x):hover, .wish-menu button[data-k]:not(.wish-x):focus-visible { background: rgba(242,207,122,.18); border-color: rgba(242,207,122,.6); outline: none; }
@keyframes wishIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===================== DÒNG SÔNG ===================== */
.river-stats .rv-seeds { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 520px) { .river-stats .rv-seeds { display: none; } }

/* ===================== TRAI ĐƯỜNG (nhà ăn cơm chay chung, 25 chỗ) ===================== */
.trai-stats { width: 236px; display: grid; gap: 3px; }
.tr-meal { font-family: "Noto Serif", serif; font-size: 15px; color: #ffd27a; }
.tr-next { font-size: 12px; color: var(--muted); line-height: 1.35; }
.tr-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.trai-stats .ms-bar { margin: 3px 0 2px; }
.tr-sched, .tr-rule { font-size: 11px; color: var(--muted); line-height: 1.35; }
@media (max-width: 520px) {
  .trai-stats { top: 128px; width: auto; max-width: calc(100% - 20px); right: auto; padding: 6px 10px; gap: 1px; }
  .tr-meal { font-size: 13px; }
  .tr-next { font-size: 11px; }
  .tr-row { font-size: 12px; margin-top: 2px; }
  .tr-sched, .tr-rule { display: none; }
}

/* ===================== TOÀN CẢNH CHÙA (đi dạo khuôn viên, bản đồ nhỏ) ===================== */
body.scene-khuon canvas#scene { touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
body.scene-khuon canvas#scene:active { cursor: grabbing; }
.kh-stats { width: 230px; }
.kh-mini-wrap { position: fixed; right: 16px; top: 64px; z-index: 5; padding: 4px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.kh-mini { display: block; width: 210px; height: 134px; border-radius: 8px; cursor: pointer; touch-action: none; }
#btnKMe.on { color: #ffd27a; }
@media (max-width: 520px) {
  .kh-stats .kh-tip, .kh-stats .zs-name, .kh-stats .zs-kicker { display: none !important; }
  .kh-mini-wrap { top: 128px; right: 8px; padding: 3px; }
  .kh-mini { width: 124px; height: 79px; }
}

/* ===================== TẾT NGUYÊN ĐÁN (29 Chạp - mùng 5 Giêng, ?tet để thử) ===================== */
.gate-tet { margin: 4px auto 8px; padding: 6px 14px; width: fit-content; max-width: 100%; border-radius: 999px; font-family: "Noto Serif", serif;
  background: linear-gradient(180deg, #c8241a, #8e100c); color: #ffd76a; border: 1px solid #f2c94c; font-size: 14px; box-shadow: 0 4px 14px rgba(160,20,10,.35); }