:root{
  --bg:#1a1410;
  --ink:#f3e9d8;
  --gold:#d8b46a;
  --gold-soft:#e7cf9a;
  --wood:#3a2a1c;
  --wood-2:#4a3526;
  --panel:rgba(28,20,14,.86);
  --shadow:0 8px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;user-select:none}
#scene{position:fixed;inset:0;z-index:0}
#scene canvas{display:block;width:100%;height:100%}

/* screens */
.screen{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#2b2018,#120d09);transition:opacity .8s}
.loading-inner{text-align:center;padding:24px}
.lotus{font-size:64px;animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}
.loading-text{margin-top:18px;font-size:22px;letter-spacing:.12em;color:var(--gold-soft)}
.loading-sub{margin-top:10px;font-size:14px;color:#b9a98c;opacity:.85}
.hidden{display:none!important}

/* HUD */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none}
#hud>*{pointer-events:auto}
#topLeft{position:absolute;top:14px;left:14px}
#nameBadge{background:var(--panel);border:1px solid rgba(216,180,106,.35);border-radius:999px;
  padding:8px 16px;font-size:15px;color:var(--gold-soft);box-shadow:var(--shadow);backdrop-filter:blur(6px)}
#nameBadge #dharmName{font-weight:600}
.online{margin-top:8px;font-size:12px;color:#9c8c6f;padding-left:6px}
#topRight{position:absolute;top:14px;right:14px;display:flex;gap:8px;align-items:center}
.lang-btn{background:var(--panel);color:var(--ink);border:1px solid rgba(216,180,106,.3);
  border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer}
.lang-btn.active{background:var(--gold);color:#2a1d10;border-color:var(--gold);font-weight:700}
.icon-btn{background:var(--panel);border:1px solid rgba(216,180,106,.3);border-radius:8px;
  width:38px;height:34px;font-size:16px;cursor:pointer;color:var(--ink)}
.view-btn{background:linear-gradient(180deg,#e6bd63,#c89a35);color:#2a1d10;border:1px solid #f0d487;
  border-radius:8px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.3);letter-spacing:.5px}
.view-btn:hover{filter:brightness(1.1)}
.view-btn:active{transform:translateY(1px)}

.hint{position:absolute;top:64px;left:50%;transform:translateX(-50%);
  font-size:13px;color:#cdbb98;background:rgba(20,14,9,.6);padding:6px 14px;border-radius:999px;
  opacity:0;transition:opacity .4s;text-align:center;max-width:90vw}
.hint.show{opacity:1}

#actionBar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;gap:8px;padding:10px 12px;background:var(--panel);border:1px solid rgba(216,180,106,.25);
  border-radius:18px;box-shadow:var(--shadow);backdrop-filter:blur(8px);max-width:96vw;overflow-x:auto}
.act{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:58px;
  background:linear-gradient(180deg,var(--wood-2),var(--wood));color:var(--ink);
  border:1px solid rgba(216,180,106,.2);border-radius:14px;padding:9px 8px;cursor:pointer;
  transition:transform .12s,background .2s}
.act:active{transform:scale(.93)}
.act.on{background:linear-gradient(180deg,var(--gold),#c79f55);color:#2a1d10;border-color:var(--gold)}
.act .ico{font-size:22px;line-height:1}
.act .lbl{font-size:12px;letter-spacing:.04em}

/* modals */
.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(8,5,3,.66);backdrop-filter:blur(3px);padding:18px}
.modal-card{width:min(420px,92vw);background:var(--panel);border:1px solid rgba(216,180,106,.3);
  border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.modal-head{display:flex;justify-content:space-between;align-items:center;font-size:17px;color:var(--gold-soft);margin-bottom:14px}
.close-x{background:none;border:none;color:#bdae8e;font-size:18px;cursor:pointer}
.modal-tip{margin-top:12px;font-size:13px;color:#b9a98c;text-align:center;line-height:1.6}

#beadsWrap{position:relative;display:flex;align-items:center;justify-content:center;height:300px}
#beadsSvg{width:300px;height:300px;cursor:pointer}
#beadCount{position:absolute;font-size:20px;color:var(--gold-soft);font-weight:700;letter-spacing:.05em}
.bead{fill:#5a4326;stroke:#2c2013;stroke-width:1.5;transition:fill .2s}
.bead.done{fill:var(--gold);stroke:#9c7a35}

.side-panel{position:fixed;top:0;right:0;height:100%;width:min(380px,92vw);z-index:40;
  background:var(--panel);border-left:1px solid rgba(216,180,106,.3);box-shadow:var(--shadow);
  display:flex;flex-direction:column;padding:18px}
.panel-head{display:flex;justify-content:space-between;align-items:center;font-size:17px;color:var(--gold-soft);margin-bottom:12px}
.sutra{overflow-y:auto;flex:1;font-size:15px;line-height:2.0;color:#e9dcc2;white-space:pre-wrap;padding-right:6px}
.panel-foot{padding-top:12px;border-top:1px solid rgba(216,180,106,.2)}
.mini-btn{background:var(--wood-2);color:var(--ink);border:1px solid rgba(216,180,106,.3);
  border-radius:10px;padding:9px 14px;cursor:pointer;font-size:14px}
.mini-btn.on{background:var(--gold);color:#2a1d10;font-weight:700}

.offer-body p{font-size:14px;line-height:1.7;color:#d9ccb2}
.offer-amounts{display:flex;gap:10px;margin:14px 0}
.amt{flex:1;background:var(--wood-2);color:var(--ink);border:1px solid rgba(216,180,106,.3);
  border-radius:10px;padding:12px 0;font-size:16px;cursor:pointer}
.amt.active{background:var(--gold);color:#2a1d10;font-weight:700}
.primary-btn{width:100%;background:linear-gradient(180deg,var(--gold),#c79f55);color:#2a1d10;
  border:none;border-radius:12px;padding:13px;font-size:16px;font-weight:700;cursor:pointer}
.offer-note{margin-top:10px;font-size:12px;color:#9c8c6f;text-align:center}

.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:50;
  background:rgba(20,14,9,.92);color:var(--gold-soft);border:1px solid rgba(216,180,106,.35);
  padding:10px 18px;border-radius:999px;font-size:14px;box-shadow:var(--shadow);transition:opacity .3s,transform .3s}

/* editable name */
#nameBadge.editable{cursor:pointer;transition:border-color .2s,transform .12s}
#nameBadge.editable:hover{border-color:rgba(216,180,106,.7)}
#nameBadge.editable:active{transform:scale(.96)}
#nameBadge input{background:transparent;border:none;outline:none;color:var(--gold-soft);
  font:inherit;font-weight:600;width:8em;text-align:center}

/* chant tracks */
.chant-tracks{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.chant-track{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  background:var(--wood-2);color:var(--ink);border:1px solid rgba(216,180,106,.25);
  border-radius:12px;padding:10px 12px;cursor:pointer;transition:background .2s,border-color .2s}
.chant-track:hover{border-color:rgba(216,180,106,.55)}
.chant-track.active{background:linear-gradient(180deg,var(--gold),#c79f55);color:#2a1d10;border-color:var(--gold);font-weight:700}
.chant-track .ct-title{font-size:15px}
.chant-track .ct-note{font-size:12px;opacity:.8}
.chant-track.active .ct-note{opacity:.85}

/* chat */
.chat-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px;margin-bottom:12px}
.chat-empty{color:#9c8c6f;font-size:13px;text-align:center;margin-top:20px;line-height:1.7}
.chat-msg{display:flex;flex-direction:column;gap:3px;max-width:88%}
.chat-msg.me{align-self:flex-end;align-items:flex-end}
.chat-name{font-size:11px;color:#9c8c6f}
.chat-msg.me .chat-name{color:var(--gold-soft)}
.chat-bubble{background:var(--wood-2);border:1px solid rgba(216,180,106,.2);border-radius:12px;
  padding:8px 12px;font-size:14px;line-height:1.5;color:#ece0c8;word-break:break-word;white-space:pre-wrap}
.chat-msg.me .chat-bubble{background:linear-gradient(180deg,var(--gold),#c79f55);color:#2a1d10;border-color:var(--gold)}
.chat-input-row{display:flex;gap:8px;padding-top:12px;border-top:1px solid rgba(216,180,106,.2)}
#chatInput{flex:1;background:rgba(20,14,9,.6);border:1px solid rgba(216,180,106,.3);border-radius:10px;
  padding:10px 12px;color:var(--ink);font-size:14px;outline:none}
#chatInput:focus{border-color:rgba(216,180,106,.6)}

@media (max-width:520px){
  .act{min-width:50px;padding:8px 6px}
  .act .ico{font-size:19px}
  .act .lbl{font-size:11px}
}