/* Chùa Bình An 3D — giao diện cho điện thoại và máy tính (sơn son thếp vàng) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@700;900&family=Be+Vietnam+Pro:wght@400;600;800&display=swap');
:root { --bg: #1a0a05; --panel: rgba(42, 16, 8, .9); --line: #8a5a24; --fg: #fbeed6; --mut: #d9b98a; --gold: #f0c050; --red: #a3231a;
  --serif: 'Noto Serif', Georgia, serif; --sans: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif; color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); font: 15px/1.45 var(--sans); }
#view, #view canvas { position: fixed; inset: 0; display: block; touch-action: none; }
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.nlabel { position: absolute; left: 0; top: 0; padding: 2px 8px; border-radius: 10px; font: 700 12px var(--sans); background: rgba(20, 8, 4, .65); color: #fff; white-space: nowrap; }
.nlabel.me { background: linear-gradient(90deg, #a3231a, #c98a1c); }
.nlabel.abbot { background: #6a3a10; color: #ffe08a; }
.nlabel.npc { opacity: .85; font-weight: 600; }
.nlabel.wishlbl { white-space: normal; max-width: 220px; text-align: center; font: 600 13px/1.35 var(--serif, Georgia, serif); color: #fff3c4; background: rgba(90, 20, 8, .72); border: 1px solid rgba(255, 190, 90, .6); box-shadow: 0 0 14px rgba(255, 160, 60, .55); padding: 5px 10px; border-radius: 12px; }
button { font-family: var(--sans); }
.btn { padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: #3a1a0c; color: var(--fg); font: 700 14px var(--sans); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn.gold { background: linear-gradient(#ffe08a, #e9b949); color: #2a1406; border-color: #c98a1c; }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn:focus-visible, .act:focus-visible, .ctx:focus-visible, .item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* góc trên */
.chip-p { position: fixed; z-index: 5; top: calc(10px + env(safe-area-inset-top, 0px)); left: max(10px, env(safe-area-inset-left, 0px)); display: flex; gap: 8px; align-items: center;
  padding: 6px 12px 6px 6px; border-radius: 30px; background: var(--panel); border: 1px solid var(--line); color: var(--fg); cursor: pointer; text-align: left; max-width: 46vw; }
.chip-p .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#c98a1c, #8a3a10); font: 900 18px var(--serif); flex: none; }
.chip-p .pt { display: grid; min-width: 0; } .chip-p b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-p small { font-size: 11px; color: var(--mut); white-space: nowrap; }
.chip-p .bar { height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .5); overflow: hidden; margin: 2px 0; } .chip-p .bar i { display: block; height: 100%; background: var(--gold); }
.tbox { position: fixed; z-index: 4; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; max-width: 40vw; }
.tbox b { display: block; font: 900 20px var(--serif); color: var(--gold); text-shadow: 0 2px 6px #000; white-space: nowrap; }
.tbox small { display: block; font-size: 12px; color: #fff; text-shadow: 0 1px 4px #000; }
.obj { margin-top: 4px; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 12px; background: rgba(20, 8, 4, .7); display: inline-block; }
.tr { position: fixed; z-index: 5; top: calc(10px + env(safe-area-inset-top, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); display: grid; gap: 6px; justify-items: center; }
.mini { position: relative; width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--gold); background: #2a1a0a; padding: 0; cursor: pointer; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.mini canvas { width: 100%; height: 100%; display: block; }
.mini span { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font: 800 10px var(--sans); background: rgba(20, 8, 4, .75); color: #fff; padding: 1px 6px; border-radius: 8px; }
.trow { display: flex; gap: 6px; align-items: center; }
.round { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: #fff; font-size: 18px; cursor: pointer; }
.pq { font: 700 12px var(--sans); padding: 4px 8px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.banner { position: fixed; z-index: 6; left: 50%; top: calc(96px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -20px); opacity: 0; transition: .5s; width: min(520px, calc(100vw - 32px));
  background: linear-gradient(rgba(255, 246, 222, .96), rgba(255, 228, 170, .96)); color: #3a1206; border: 2px solid var(--gold); border-radius: 16px; padding: 10px 16px; text-align: center; pointer-events: none; }
.banner.on { opacity: 1; transform: translate(-50%, 0); }
.banner small { display: block; font: 800 12px var(--sans); color: var(--red); letter-spacing: 1px; } .banner b { display: block; font: 900 22px var(--serif); color: #7a1410; } .banner span { display: block; font-size: 14px; margin-top: 2px; }
.toasts { position: fixed; z-index: 6; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; pointer-events: none; width: min(520px, calc(100vw - 32px)); }
.toast { background: rgba(30, 10, 4, .9); border: 1px solid var(--line); border-radius: 20px; padding: 7px 14px; font-size: 14px; animation: toast 4.2s forwards; text-align: center; }
@keyframes toast { 0% { opacity: 0; transform: translateY(10px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* dưới */
.joy { display: none; position: fixed; z-index: 5; left: max(18px, env(safe-area-inset-left, 0px)); bottom: calc(110px + env(safe-area-inset-bottom, 0px)); width: 124px; height: 124px; border-radius: 50%;
  background: radial-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border: 2px solid rgba(240, 192, 80, .5); touch-action: none; }
.joy div { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: radial-gradient(#ffe08a, #c98a1c); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
body.touch .joy { display: block; } body.touch .keyhint { display: none; }
.keyhint { position: fixed; z-index: 3; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); font-size: 12px; color: rgba(255, 244, 220, .75); text-shadow: 0 1px 3px #000; white-space: nowrap; pointer-events: none; }
.ctx { position: fixed; z-index: 6; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(108px + env(safe-area-inset-bottom, 0px)); padding: 14px 20px; border-radius: 30px; border: 2px solid #fff1c2;
  background: linear-gradient(#ffe08a, #e9b949); color: #2a1406; font: 800 16px var(--sans); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); cursor: pointer; animation: ctxIn .3s; }
@keyframes ctxIn { from { transform: scale(.8); opacity: 0; } }
.acts { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; justify-content: center; overflow-x: auto;
  padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
  background: linear-gradient(rgba(30, 10, 4, .75), rgba(20, 6, 2, .95)); border-top: 1px solid rgba(240, 192, 80, .45); }
@media (max-width: 640px) { .acts { justify-content: flex-start; } .tbox { left: max(10px, env(safe-area-inset-left, 0px)); transform: none; top: calc(80px + env(safe-area-inset-top, 0px)); text-align: left; max-width: calc(100vw - 130px); } .tbox b { font-size: 15px; white-space: normal; } .tbox small { display: none; } .mini { width: 92px; height: 92px; } .chip-p { max-width: calc(100vw - 124px); } .obj { font-size: 11.5px; } .banner { top: calc(130px + env(safe-area-inset-top, 0px)); } }
.act { flex: none; width: 74px; height: 66px; border-radius: 14px; border: 1px solid rgba(240, 192, 80, .45); background: linear-gradient(#5a1f10, #3a1208); color: #fff1c2; display: grid; place-content: center; justify-items: center; gap: 2px; cursor: pointer; }
.act:hover { border-color: #ffe08a; } .act .ic { font-size: 23px; line-height: 1; } .act .lb { font-size: 11.5px; font-weight: 700; white-space: nowrap; }

/* lớp phủ */
/* tụng kinh: khung dưới màn hình, lời kinh cuộn, mõ to để gõ */
.chant { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.chant > * { pointer-events: auto; }
.chant .back { position: absolute; top: calc(40px + env(safe-area-inset-top, 0px)); left: max(14px, env(safe-area-inset-left, 0px)); padding: 10px 18px; font-size: 15px; }
.cpanel { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: min(700px, calc(100vw - 24px)); display: grid; justify-items: center; gap: 6px; padding: 12px 12px 8px; border-radius: 20px;
  background: linear-gradient(rgba(25, 8, 3, .55), rgba(25, 8, 3, .82)); border: 1px solid rgba(240, 192, 80, .25); backdrop-filter: blur(3px); }
.ctabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ctabs button { border: 1px solid rgba(240, 192, 80, .55); background: rgba(42, 16, 8, .85); color: #ffe6a8; font: 700 13px var(--sans); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.ctabs button.on { background: linear-gradient(#ffd77a, #e3a63a); color: #3a0d05; border-color: #ffe9a8; box-shadow: 0 0 12px rgba(255, 200, 90, .5); }
.csub { color: #f3d79a; font: 600 12px var(--sans); text-shadow: 0 1px 2px #000; }
.cwin { position: relative; height: 196px; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.clines { position: absolute; left: 0; right: 0; top: 0; transition: transform .6s cubic-bezier(.3, .7, .3, 1); }
.clines p { margin: 0; height: 39px; line-height: 39px; text-align: center; font: 500 17px var(--serif, Georgia, serif); color: rgba(255, 241, 205, .42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; transition: color .4s, font-size .4s; }
.clines p.near { color: rgba(255, 241, 205, .72); }
.clines p.cur { color: #fff; font-weight: 800; font-size: 20px; text-shadow: 0 0 12px rgba(255, 200, 100, .8), 0 1px 2px #000; }
.mobig { border: 0; background: none; padding: 0; cursor: pointer; width: 160px; height: 108px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mobig canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.mobig.hit canvas { animation: moHit .22s ease; }
@keyframes moHit { 0% { transform: scale(1); } 35% { transform: scale(.92, .88); } 100% { transform: scale(1); } }
.ccount { position: absolute; left: max(14px, env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); color: #fff; text-shadow: 0 2px 6px #000; display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 6px; }
.ccount b { font: 800 34px var(--sans); } .ccount span { font: 600 16px var(--sans); opacity: .85; } .ccount small { grid-column: 1 / -1; font: 600 12px var(--sans); color: #ffe6a8; }
.copts { position: absolute; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 5px; justify-items: end; color: #fff; font: 600 13px var(--sans); text-shadow: 0 1px 3px #000; }
.copts label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.copts input[type=checkbox] { width: 16px; height: 16px; accent-color: #e3a63a; }
.copts input[type=range] { width: 110px; accent-color: #e3a63a; }
.copts small { font-size: 11px; color: #ffe6a8; max-width: 200px; text-align: right; }
@media (max-width: 640px) {
  .cpanel { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); padding: 8px 6px 6px; }
  .ctabs button { font-size: 11.5px; padding: 6px 10px; } .cwin { height: 160px; } .clines p { height: 32px; line-height: 32px; font-size: 14.5px; } .clines p.cur { font-size: 16.5px; }
  .mobig { width: 124px; height: 84px; }
  .ccount b { font-size: 26px; } .copts { font-size: 12px; } .copts small { display: none; }
}
.mo { width: 86px; height: 86px; border-radius: 50%; border: 3px solid var(--gold); background: radial-gradient(#8a4a1c, #4a1e08); color: #fff1c2; font: 800 14px var(--sans); cursor: pointer; }
.mo.hit { animation: moHit .2s; } @keyframes moHit { 50% { transform: scale(.88); } }
.med { position: fixed; inset: 0; z-index: 8; background: rgba(10, 4, 2, .55); display: grid; place-content: center; justify-items: center; gap: 12px; }
.breath { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(rgba(255, 236, 170, .9), rgba(233, 185, 73, .2) 70%); transform: scale(.7); transition: transform 4s ease-in-out; box-shadow: 0 0 60px rgba(255, 211, 107, .6); }
.breath.in { transform: scale(1.15); } .med b { font: 700 22px var(--serif); } .med span { font-variant-numeric: tabular-nums; }
.story { position: fixed; z-index: 7; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); width: min(620px, calc(100vw - 24px));
  background: linear-gradient(rgba(255, 246, 222, .97), rgba(255, 232, 186, .97)); color: #3a1206; border: 2px solid var(--gold); border-radius: 18px; padding: 12px 16px 14px; }
.shead { display: flex; gap: 10px; align-items: center; } .shead div { flex: 1; } .shead small { display: block; color: var(--red); font-weight: 800; font-size: 12px; } .shead b { font: 900 20px var(--serif); color: #7a1410; }
.shead span { font-size: 12px; font-weight: 800; background: var(--red); color: #fff; padding: 3px 10px; border-radius: 10px; }
.story p { font: 600 18px/1.5 var(--serif); margin: 8px 0; max-height: 34vh; overflow: auto; }
.story .x, .modal .x { background: none; border: 0; font-size: 20px; cursor: pointer; color: inherit; }
.opts { display: grid; gap: 6px; margin-bottom: 6px; }
.opt { text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid #c98a1c; background: #fff3d6; color: #3a1206; font: 600 15px var(--sans); cursor: pointer; }
.opt b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; margin-right: 6px; }
.opt.right { background: #2f8a55; color: #fff; } .opt.wrong { opacity: .5; }
.veil { position: fixed; inset: 0; z-index: 20; background: rgba(10, 4, 2, .6); display: grid; place-items: center; padding: 14px; }
.veil[hidden] { display: none; }
.modal { width: min(460px, 100%); max-height: calc(100vh - 28px); overflow: auto; background: #2a120a; border: 1px solid #c98a1c; border-radius: 18px; padding: 14px 18px 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.modal.wide { width: min(720px, 100%); }
.mhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; } .mhead h2 { margin: 0; font: 900 22px var(--serif); color: var(--gold); }
.modal h3 { font: 800 15px var(--serif); color: var(--gold); margin: 14px 0 6px; }
.modal input, .modal textarea, .modal select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #6a3a1a; background: #170905; color: var(--fg); font: 15px var(--sans); margin: 4px 0; }
.form { display: grid; gap: 6px; } .form label { font-size: 13px; color: var(--mut); font-weight: 700; margin-top: 4px; }
.pv { justify-self: center; width: 140px; height: 180px; border-radius: 14px; background: radial-gradient(#5a2a10, #2a0f06); }
.choice { display: flex; flex-wrap: wrap; gap: 6px; }
.choice button { padding: 8px 12px; border-radius: 10px; border: 1px solid #6a3a1a; background: #3a1a0c; color: var(--fg); font: 700 13px var(--sans); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.choice button.on { background: var(--red); border-color: var(--gold); } .choice i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); }
.err { color: #ff9a8a; font-size: 13px; min-height: 1em; } .note { font-size: 13px; color: var(--mut); margin: 8px 0 0; } .note.warn { color: #ffcf80; } .big { font: 700 18px var(--serif); margin: 4px 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.list { display: grid; gap: 8px; }
.item { text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid #6a3a1a; background: #3a1a0c; color: var(--fg); cursor: pointer; display: grid; gap: 2px; }
.item small { color: var(--mut); } .item.sm { padding: 7px 10px; margin: 4px 0; } .item.wait { opacity: .5; }
.modal details { background: #3a1a0c; border-radius: 10px; padding: 6px 10px; margin: 6px 0; } .modal summary { cursor: pointer; font-weight: 800; }
.tg { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-size: 14px; } .tg input { width: auto; margin-top: 3px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tabs button { padding: 6px 12px; border-radius: 16px; border: 1px solid var(--line); background: #3a1a0c; color: var(--fg); font: 700 13px var(--sans); cursor: pointer; } .tabs button.on { background: var(--gold); color: #2a1406; }
.tlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tcard { text-align: left; border-radius: 14px; border: 1px solid #6a3a1a; background: #3a1a0c; color: var(--fg); padding: 0 0 10px; cursor: pointer; overflow: hidden; display: grid; gap: 2px; }
.tcard.cur { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.tcard .timg { height: 96px; background: #5a2a10 center / cover; position: relative; } .tcard .timg span { position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(163, 35, 26, .9); }
.tcard b, .tcard small, .tcard em { padding: 0 10px; } .tcard b { font: 800 15px var(--serif); margin-top: 6px; } .tcard small { color: var(--mut); font-size: 12px; } .tcard em { font-style: normal; font-size: 12px; color: #ffd36b; } .tcard em.ok { color: #8fe0a8; }
.stats { list-style: none; padding: 0; margin: 0; } .stats li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed rgba(240, 192, 80, .2); } .stats b { color: var(--gold); }
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.stamp { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 8px; font: 700 11px var(--serif); border: 2px dashed #6a3a1a; color: #8a6a50; }
.stamp.on { border: 3px double #e05a40; color: #ffb0a0; background: radial-gradient(rgba(163, 35, 26, .4), transparent); transform: rotate(-8deg); }
.malabox { text-align: center; } .malawrap { position: relative; width: min(330px, 78vw); margin: 0 auto; cursor: pointer; touch-action: none; user-select: none; }
.mala { width: 100%; display: block; } .mala circle { fill: #4a2412; stroke: #1a0804; } .mala circle.on { fill: #e9b949; } .mala .guru { fill: #c98a1c; }
.malamid { position: absolute; inset: 0 0 6%; display: grid; place-content: center; pointer-events: none; } .malamid .cnt { font: 900 40px var(--serif); color: var(--gold); } .malamid .sub { font-size: 13px; color: var(--mut); } .malamid .say { font: 600 14px var(--serif); margin-top: 6px; }
#fade { position: fixed; inset: 0; z-index: 30; background: #000; opacity: 0; pointer-events: none; transition: opacity .6s; } #fade.on { opacity: 1; }
.loading { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--bg); font: 700 18px var(--serif); }
@media (prefers-reduced-motion: reduce) { .breath { transition: none; } .banner, .toast, .ctx { animation: none; transition: none; } }

/* ===== bố cục mới (bản 8) ===== */
.ticker { position: fixed; z-index: 6; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 28px; overflow: hidden; background: linear-gradient(90deg, #7a1a0e, #a3231a 50%, #7a1a0e); border-bottom: 1px solid #e0a93a; }
.ticker span { position: absolute; white-space: nowrap; top: 4px; font: 700 13px var(--sans); color: #fff1c2; animation: tick 22s linear infinite; }
@keyframes tick { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
.tl { position: fixed; z-index: 5; top: calc(36px + env(safe-area-inset-top, 0px)); left: max(10px, env(safe-area-inset-left, 0px)); display: grid; gap: 5px; justify-items: start; max-width: min(60vw, 360px); }
.tl .chip-p { position: static; max-width: 100%; }
.tname { font: 900 22px var(--serif); color: var(--gold); text-shadow: 0 2px 6px #000; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted rgba(240, 192, 80, .6); text-underline-offset: 5px; text-align: left; }
.tplace { font-size: 12px; color: #fff; text-shadow: 0 1px 4px #000; margin-top: -4px; }
.tl .obj { margin: 0; }
.pill-btn { padding: 7px 14px; border-radius: 20px; border: 1px solid var(--gold); background: rgba(30, 10, 4, .75); color: var(--fg); font: 700 13px var(--sans); cursor: pointer; }
.online { font-size: 12.5px; color: #fff; text-shadow: 0 1px 3px #000; display: flex; gap: 6px; align-items: center; }
.online i { width: 8px; height: 8px; border-radius: 50%; background: #5fe08a; box-shadow: 0 0 6px #5fe08a; }
.online .pq { background: none; border: 0; padding: 0; }
.side { position: fixed; z-index: 5; right: max(10px, env(safe-area-inset-right, 0px)); top: calc(40px + env(safe-area-inset-top, 0px)); display: grid; gap: 8px; }
.side button { width: 50px; height: 50px; border-radius: 14px; border: 1px solid rgba(240, 192, 80, .5); background: rgba(42, 16, 8, .85); color: #fff; font-size: 22px; cursor: pointer; padding: 0; overflow: hidden; box-shadow: 0 3px 10px rgba(0, 0, 0, .4); }
.side button canvas { width: 100%; height: 100%; display: block; border-radius: 13px; }
/* tên nhỏ dưới biểu tượng */
.side button { width: 56px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.side button .si { font-size: 22px; line-height: 1; }
.side button small { font: 700 9.5px/1.05 var(--sans); color: #ffe6a8; text-shadow: 0 1px 2px #000; text-align: center; padding: 0 2px; white-space: nowrap; }
.side #miniBtn { justify-content: flex-start; }
.side #miniBtn canvas { width: 100%; height: 42px; flex: 0 0 auto; border-radius: 13px 13px 4px 4px; object-fit: cover; }
.side #miniBtn small { margin-top: 1px; }
/* bảng xếp hạng công đức góc trái */
.rank { margin-top: 4px; width: 210px; max-width: 46vw; border-radius: 12px; background: rgba(42, 16, 8, .78); border: 1px solid rgba(240, 192, 80, .45); box-shadow: 0 3px 10px rgba(0, 0, 0, .35); overflow: hidden; }
.rank-h { all: unset; box-sizing: border-box; cursor: pointer; display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 6px 10px; font: 800 12.5px var(--sans); color: #ffd36b; background: linear-gradient(90deg, rgba(160, 40, 20, .7), rgba(90, 24, 10, .4)); }
.rank-h i { font-style: normal; transition: transform .2s; }
.rank.min .rank-h i { transform: rotate(-90deg); }
.rank.min ol { display: none; }
.rank ol { list-style: none; margin: 0; padding: 4px 6px 6px; display: grid; gap: 2px; }
.rank li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 6px; font: 600 12px var(--sans); color: #fff1c2; padding: 3px 4px; border-radius: 7px; }
.rank li b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 800 10.5px var(--sans); color: #3a0d05; background: #c9a888; }
.rank li:nth-child(1) b { background: #ffd36b; box-shadow: 0 0 6px #ffd36b; } .rank li:nth-child(2) b { background: #e6e6f0; } .rank li:nth-child(3) b { background: #f0b07a; }
.rank li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank li em { font-style: normal; color: #ffd36b; font-variant-numeric: tabular-nums; }
.rank li.me { background: rgba(240, 192, 80, .18); outline: 1px solid rgba(240, 192, 80, .5); }
.rank li.up { animation: rankUp 1.2s ease; }
@keyframes rankUp { 0% { background: rgba(255, 211, 107, .7); } 100% { background: transparent; } }
.zoom { position: fixed; z-index: 5; left: max(10px, env(safe-area-inset-left, 0px)); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; }
.zoom button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(240, 192, 80, .5); background: rgba(42, 16, 8, .8); color: #fff; font: 700 22px var(--sans); cursor: pointer; }
.acts { left: auto; right: max(10px, env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: none; border: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 74px); gap: 8px; overflow: visible; }
.act { width: 74px; height: 70px; background: rgba(42, 16, 8, .82); border-radius: 16px; backdrop-filter: blur(3px); }
.ctx { bottom: calc(170px + env(safe-area-inset-bottom, 0px)); }
.keyhint { left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 280px); white-space: normal; text-align: center; }
.toasts { bottom: calc(180px + env(safe-area-inset-bottom, 0px)); }
.banner { top: calc(40px + env(safe-area-inset-top, 0px)); }
.joy { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.tbox { display: none; }
@media (max-width: 640px) { .tname { font-size: 18px; } .acts { grid-template-columns: repeat(3, 64px); gap: 6px; } .act { width: 64px; height: 62px; } .act .lb { font-size: 10.5px; } .side button { width: 48px; height: 52px; font-size: 19px; } .side button .si { font-size: 19px; } .side button small { font-size: 8.5px; } .side #miniBtn canvas { height: 36px; } .rank { width: 170px; } .rank li { font-size: 11px; } .zoom { bottom: calc(270px + env(safe-area-inset-bottom, 0px)); } .story { bottom: calc(160px + env(safe-area-inset-bottom, 0px)); } .ctx { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); padding: 11px 16px; font-size: 14px; } }
body.focus .acts, body.focus .side, body.focus .zoom, body.focus .tl, body.focus .ctx, body.focus .joy, body.focus .keyhint { display: none !important; }
.malaui { position: fixed; inset: 0; z-index: 9; }
.malaui canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.malaui .back { position: absolute; z-index: 2; top: calc(40px + env(safe-area-inset-top, 0px)); left: max(14px, env(safe-area-inset-left, 0px)); padding: 10px 18px; font-size: 15px; }
.mcount { position: absolute; left: max(18px, env(safe-area-inset-left, 0px)); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); pointer-events: none; color: #fff; text-shadow: 0 2px 8px #000; display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 6px; }
.mcount b { font: 900 64px/1 var(--serif); font-variant-numeric: tabular-nums; } .mcount span { font: 600 24px var(--sans); } .mcount small { grid-column: 1 / -1; font-size: 14px; color: #ffe6b0; }
.mhint { position: absolute; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(32px + env(safe-area-inset-bottom, 0px)); text-align: right; color: #ffe6b0; font-size: 14px; text-shadow: 0 1px 4px #000; pointer-events: none; }
.mhint b { color: var(--gold); }

.fx2d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; }
/* thẻ thông tin chùa có khung cảnh 3D */
.tdetail { display: grid; gap: 8px; }
.td3d { position: relative; height: min(46vh, 340px); margin: 0 -18px; background: #3a1a0c center / cover; overflow: hidden; touch-action: none; }
.td3d canvas { display: block; width: 100% !important; height: 100% !important; }
.td3dhint { position: absolute; left: 10px; bottom: 8px; z-index: 2; font: 600 11px var(--sans); color: #fff; background: rgba(0, 0, 0, .45); padding: 3px 8px; border-radius: 8px; pointer-events: none; }
.tdnav { display: grid; grid-template-columns: 36px 1fr 36px 36px; gap: 8px; align-items: center; }
.tdnav h3 { margin: 0 !important; text-align: center; font: 800 20px var(--serif) !important; color: #ffe6a8 !important; }
.tdnav .rb { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #6a3a1a; background: #3a1a0c; color: #ffe6a8; font: 800 18px var(--sans); cursor: pointer; }
.tdchips { display: flex; gap: 6px; flex-wrap: wrap; }
.tdchips span { font: 700 12px var(--sans); padding: 3px 9px; border-radius: 999px; background: #3a1a0c; border: 1px solid #6a3a1a; color: #e8c99a; }
.tdchips span.on { color: #8fe0a8; border-color: #2f6b45; } .tdchips span.ok { color: #ffd36b; border-color: #c98a1c; }
.tdplace { margin: 0; font-size: 12.5px; color: var(--mut); }
.tdintro { margin: 0; font: 15px/1.55 var(--serif); }
.tdprog { display: grid; gap: 5px; padding: 10px 12px; border-radius: 12px; background: #3a1a0c; border: 1px solid #6a3a1a; }
.tdprog b { font-size: 13.5px; color: #ffd36b; } .tdprog small { font-size: 12px; color: var(--mut); }
.tdprog .bar { height: 6px; border-radius: 4px; background: #170905; overflow: hidden; } .tdprog .bar i { display: block; height: 100%; background: linear-gradient(90deg, #c98a1c, #ffd36b); }
.tdpois { display: flex; gap: 5px; flex-wrap: wrap; } .tdpois span { font-size: 11.5px; padding: 2px 8px; border-radius: 8px; background: #241008; color: #c9a888; } .tdpois span.ok { background: #2f5a3a; color: #dff5e6; }
.tdetail .row { display: flex; gap: 8px; flex-wrap: wrap; } .tdetail .row .btn { flex: 1; }

/* cửa hàng hoa sen & nạp */
.plotus { color: #ffb6c8 !important; font-weight: 700; }
.shopbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 8px; border-radius: 12px; background: linear-gradient(90deg, #4a1a2a, #3a1a0c); border: 1px solid #a3536a; }
.shopbar .lotus { flex: 1; font: 800 16px var(--sans); color: #ffd0dc; }
.shopitem { display: grid; grid-template-columns: 1fr auto; } .shopitem small { grid-column: 1; } .shopitem .price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font: 800 15px var(--sans); color: #ffd0dc; background: #4a1a2a; padding: 6px 10px; border-radius: 10px; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.pack { border: 1px solid #a3536a; background: linear-gradient(#4a1a2a, #2a0e14); color: #fff; border-radius: 14px; padding: 12px 6px; cursor: pointer; display: grid; gap: 2px; justify-items: center; }
.pack b { font: 800 17px var(--sans); color: #ffd0dc; } .pack small { color: #ffe6a8; font-weight: 700; } .pack:hover { border-color: #ffd0dc; }
.pay { display: grid; gap: 8px; justify-items: center; }
.pay .qr { width: min(260px, 70vw); border-radius: 12px; background: #fff; padding: 6px; }
.payinfo { width: 100%; display: grid; gap: 4px; }
.prow { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: #3a1a0c; font-size: 13px; }
.prow span { color: var(--mut); } .prow b { word-break: break-all; }
.reqs { display: grid; gap: 6px; }
.req { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: #3a1a0c; border: 1px solid #6a3a1a; }
.req small { color: var(--mut); font-size: 12px; } .req em { font-style: normal; font-weight: 700; font-size: 12.5px; }
.req.approved em { color: #8fe0a8; } .req.rejected em { color: #ff9a8a; } .req.pending em { color: #ffd36b; }
.req code { font: 700 13px monospace; color: #ffe6a8; background: #170905; padding: 2px 6px; border-radius: 6px; justify-self: start; }
.side button { position: relative; }
.side .badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: #e8452c; color: #fff; font: 800 11px/18px var(--sans); font-style: normal; text-align: center; padding: 0 4px; }
@media (max-width: 640px) { .packs { grid-template-columns: repeat(2, 1fr); } .prow { grid-template-columns: 90px 1fr auto; } }
.req > div:first-child { display: grid; gap: 3px; }
/* tài khoản */
.btn.ghost { background: transparent; border-style: dashed; color: var(--mut); margin-top: 10px; }
.acct { display: grid; gap: 6px; } .acct label { font-size: 13px; color: var(--mut); font-weight: 700; margin-top: 4px; }
.acct input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #1f0d06; color: var(--fg); font: 15px var(--sans); }
.acct .btn { margin-top: 6px; }
.isteps { margin: 6px 0 0 18px; padding: 0; display: grid; gap: 6px; font-size: 14px; }
/* hòm công đức */
.nlabel.merit { background: linear-gradient(90deg, #8e1a0e, #c98a1c); color: #fff3c4; border: 1px solid rgba(255, 210, 120, .7); }
.tiers .tier { border-color: var(--tc); position: relative; }
.tiers .tier .ti { font-size: 26px; line-height: 1; }
.tiers .tier small { color: var(--tc); font-weight: 700; }
.certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.cert { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--tc); background: rgba(255, 220, 150, .06); color: var(--fg); cursor: pointer; }
.cert .ti { grid-row: span 2; font-size: 28px; } .cert b { font: 700 14px var(--serif); color: var(--tc); } .cert small { color: var(--mut); font-size: 12px; }
.certimg { width: 100%; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
.mstats { border: 1px solid rgba(255, 200, 100, .35); border-radius: 12px; padding: 10px 12px; margin: 10px 0; background: rgba(255, 200, 100, .05); }
.mstats h3 { margin-top: 0; }
.mtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.mtile { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .25); }
.mtile small { color: var(--mut); font-size: 12px; } .mtile b { font: 800 22px var(--serif); color: #ffd36b; } .mtile span { font-size: 12px; color: var(--mut); }
.mcap { display: block; margin: 10px 0 4px; color: var(--mut); font-weight: 700; }
.mtable { display: grid; gap: 2px; font-size: 13px; } .mtable > div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 6px; border-bottom: 1px dashed rgba(255, 255, 255, .08); }
.mstats .btn { margin-top: 8px; }
.req.don { border-left: 4px solid #e9a23b; }
/* kênh máy chủ */
.nlabel.peer { background: rgba(30, 70, 110, .78); border: 1px solid rgba(140, 200, 255, .5); }
.chlist { display: grid; gap: 6px; margin: 10px 0; }
.chan { display: grid; grid-template-columns: 80px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: #2e1408; color: var(--fg); cursor: pointer; text-align: left; }
.chan.on { border-color: var(--gold); background: #4a2410; } .chan.full { opacity: .55; cursor: not-allowed; }
.chan small { color: var(--mut); font-size: 12px; }
.cbar { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .35); overflow: hidden; } .cbar i { display: block; height: 100%; background: #5fe08a; }
.chan.full .cbar i { background: #e35a3a; }