:root{
  --ink:#f3e7d3; --dim:#cbb79a; --wood:#2a1d14; --wood2:#3b2a1d; --gold:#e8b04a; --gold2:#f5d28a; --red:#8c2f22;
  --font: "Noto Serif CJK SC","Noto Serif SC","Songti SC","Source Han Serif SC",Georgia,serif;
}
:lang(zh-Hant){ --font:"Noto Serif CJK TC","Noto Serif TC","Songti TC","Source Han Serif TC","PMingLiU",Georgia,serif; }
:lang(en){ --font:Georgia,"Noto Serif","Times New Roman","Noto Serif CJK SC",serif; }
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#1a120c;color:var(--ink);font-family:var(--font);overflow:hidden;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
canvas#hall{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer}
#top{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;background:linear-gradient(#1a120ccc,#1a120c00);pointer-events:none;z-index:5}
#top>*{pointer-events:auto}
.brand{display:flex;gap:10px;align-items:baseline;font-size:18px;letter-spacing:.08em;white-space:nowrap}
.pill{white-space:nowrap}
.room{font-size:12px;color:var(--dim);letter-spacing:0}
.right{display:flex;gap:8px;align-items:center}
.pill{background:#00000066;border:1px solid #e8b04a55;border-radius:999px;padding:4px 10px;font-size:13px;color:var(--gold2)}
select{font:inherit;font-size:13px;background:#2a1d14;color:var(--ink);border:1px solid #e8b04a55;border-radius:8px;padding:4px 6px}
#bar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;gap:6px;overflow-x:auto;justify-content:center;
  padding:8px 10px calc(env(safe-area-inset-bottom) + 10px);background:linear-gradient(#1a120c00,#1a120cee 40%);scrollbar-width:none}
#bar::-webkit-scrollbar{display:none}
#bar button{flex:0 0 auto;min-width:58px;padding:8px 10px;border-radius:12px;background:#3b2a1dcc;border:1px solid #e8b04a44;font-size:14px;line-height:1.2}
#bar button.on{background:#8c2f22;border-color:var(--gold)}
#bar button:active{transform:scale(.96)}
@media (max-width:760px){ #bar{justify-content:flex-start} #bar button{font-size:13px;min-width:54px;padding:8px} .brand{font-size:15px;flex-direction:column;gap:0;letter-spacing:.02em} .room{font-size:11px} .pill{font-size:12px;padding:3px 8px} select{font-size:12px;max-width:110px} }
#toasts{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 76px);transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;z-index:6;pointer-events:none;width:min(92vw,520px)}
.toast{background:#1a120cdd;border:1px solid #e8b04a55;border-radius:12px;padding:7px 14px;font-size:14px;animation:fade 4.2s forwards;text-align:center}
@keyframes fade{0%{opacity:0;transform:translateY(-4px)}8%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
.overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#0d0906ee;padding:16px}
.overlay[hidden]{display:none}
.card{background:linear-gradient(#33241a,#251a12);border:1px solid #e8b04a55;border-radius:18px;box-shadow:0 20px 60px #000a;max-width:560px;width:100%;
  max-height:calc(100vh - 32px);overflow:auto;padding:22px 22px 18px;position:relative}
.gate{text-align:center}
.gate .mark{width:56px;height:56px;color:var(--gold)}
.gate h1{margin:6px 0 2px;font-size:30px;letter-spacing:.15em;font-weight:600}
.sub{color:var(--dim);margin:0 0 14px}
.gate p{line-height:1.75}
.name b{font-size:20px;color:var(--gold2)}
.primary{background:var(--red);border:1px solid var(--gold);border-radius:999px;padding:10px 34px;font-size:17px;letter-spacing:.1em}
.primary:disabled{opacity:.5}
.hint{font-size:13px;color:var(--dim)}
.gate-lang{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}
.gate-lang button{background:none;border:1px solid #e8b04a44;border-radius:999px;padding:3px 10px;font-size:13px}
.gate-lang button.on{border-color:var(--gold);color:var(--gold2)}
.x{position:absolute;right:10px;top:8px;background:none;border:0;font-size:26px;color:var(--dim)}
.sheet h2{margin:0 0 4px;font-size:22px;letter-spacing:.08em}
.sheet h3{margin:16px 0 6px;font-size:15px;color:var(--gold2);font-weight:600}
.sheet p{line-height:1.8;margin:6px 0}
.verse{font-family:"Noto Serif CJK TC","Noto Serif CJK SC",serif;font-size:19px;line-height:1.9;letter-spacing:.12em;text-align:center;margin:6px 0}
.verse.hans{font-family:"Noto Serif CJK SC",serif}
.note{overflow-wrap:anywhere;font-size:12.5px;color:var(--dim);line-height:1.7}
.sutra{font-family:"Noto Serif CJK SC",serif;font-size:16px;line-height:2;letter-spacing:.06em}
.sutra.hant{font-family:"Noto Serif CJK TC",serif}
.mantra{font-style:italic;color:var(--gold2)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.btn{background:#3b2a1d;border:1px solid #e8b04a55;border-radius:999px;padding:7px 16px}
.btn.on{background:var(--red);border-color:var(--gold)}
.tube{display:block;margin:14px auto;width:96px;height:150px}
.tube.shake{animation:shake .14s 9 alternate}
@keyframes shake{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.signno{text-align:center;font-size:26px;letter-spacing:.2em;color:var(--gold2);margin:4px 0}
.center{text-align:center}
/* v2 */
.room.total{color:#e8b04acc}
.plink{color:var(--dim);font-size:13px;text-decoration:underline;text-underline-offset:3px}
details.src{margin-top:6px}
details.src summary{cursor:pointer;color:var(--dim);font-size:13px;display:inline-block;list-style:none;border-bottom:1px dotted #cbb79a88}
details.src summary::-webkit-details-marker{display:none}
details.src a{color:var(--gold2)}

/* 供养箱 label: sits above the wooden box at the right side of the hall; quiet, never over the Buddha */
#support{position:fixed;left:0;top:0;z-index:4;display:flex;flex-direction:column;align-items:center;gap:1px;max-width:150px;padding:5px 9px;border-radius:9px;background:#1a120ccc;border:1px solid #c9a24a55;color:#f3e2c0;text-decoration:none;font-size:12px;line-height:1.3;text-align:center;will-change:transform}
#support[hidden]{display:none}
#support .s1{font-weight:600;color:#f5d28a}
#support .s2{opacity:.8;font-size:11px}

/* v2.1 — panels never cover the Buddha: side panel on desktop, bottom drawer on phones, light dim with the face left clear.
   --fx/--fy/--frx/--fry (face centre and size) and --drawer-max are set every frame by game.js (placeDim). */
.overlay{display:block;padding:0;
  background:radial-gradient(var(--frx,140px) var(--fry,170px) at var(--fx,50%) var(--fy,22%),rgba(13,9,6,0) 72%,rgba(13,9,6,.3) 100%)}
.overlay.nodim{background:none}
.card.panel{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(420px,42vw);max-width:none;max-height:none;border-radius:18px 0 0 18px;
  border-right:0;padding:calc(env(safe-area-inset-top) + 22px) 22px calc(env(safe-area-inset-bottom) + 18px);
  overscroll-behavior:contain;animation:slideL .26s ease-out;box-shadow:-12px 0 40px #0008}
@keyframes slideL{from{transform:translateX(100%)}to{transform:none}}
.gate.panel{display:flex;flex-direction:column}
.gate.panel>*{flex:0 0 auto}
.gate.panel>:first-child{margin-top:auto}.gate.panel>:last-child{margin-bottom:auto}
@media (max-width:759px) and (orientation:portrait){ /* upright phone: bottom drawer (game.js drawerMode) */
  .card.panel{top:auto;left:0;right:0;width:auto;max-height:var(--drawer-max,60vh);border-radius:18px 18px 0 0;border-right:1px solid #e8b04a55;border-bottom:0;
    padding-top:26px;animation:slideU .26s ease-out;box-shadow:0 -12px 40px #0008}
  .card.panel::before{content:"";position:absolute;left:50%;top:9px;width:42px;height:4px;margin-left:-21px;border-radius:2px;background:#e8b04a55}
  .gate.panel{display:block}
  .gate .mark{width:40px;height:40px}
  .gate h1{font-size:24px}
}
@keyframes slideU{from{transform:translateY(100%)}to{transform:none}}
.qty{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 6px}
.qbtn{flex:1 1 30%;text-align:center;text-decoration:none;color:var(--ink);font-size:15px;padding:10px 8px;white-space:nowrap}
a.qbtn:hover{border-color:var(--gold)}
.qbtn.off{opacity:.55;cursor:default}
.privacy h1{font-size:22px;margin:0 0 6px;color:var(--gold)}
.privacy h2{font-size:16px;margin:16px 0 4px;color:var(--gold2)}
.privacy ul{padding-left:1.2em;margin:0}
.privacy li,.privacy p{line-height:1.75;font-size:14.5px}
.privacy .upd{color:var(--dim);font-size:12.5px}
.privacy code{background:#3b2a1d;padding:1px 5px;border-radius:4px;font-size:.9em}
#support{font-family:inherit;cursor:pointer}
#support:hover{border-color:#e8b04a}
#gate:not([hidden]) ~ #modal{background:none} /* privacy opened from the gate: one dim layer, not two */