/* =========================================================
   Chùa Mây — giao diện kiểu game 3D (vàng · nâu · son, kính mờ)
   ========================================================= */
:root{
  --ink0:#0f0a07; --bg:#140d09;
  --panel:rgba(26,17,11,.66); --panel-solid:#1e140d; --panel-2:rgba(42,28,18,.86);
  --line:rgba(222,176,96,.42); --line-soft:rgba(222,176,96,.18);
  --gold:#dcae5c; --gold-2:#f6dc9a; --gold-3:#a8772e;
  --son:#a8322a; --son-2:#cc4a3a; --jade:#7fae8e;
  --text:#f4e8d2; --muted:#b8a283; --dim:#8a765e;
  /* tương thích tên cũ (main.js chèn style="color:var(--muted)") */
  --card:#1e140d; --ink:#f4e8d2; --red:#cc4a3a; --glass:var(--panel); --glass-ink:var(--text);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --gut:14px; --mm:140px; --hb:36px; --act:60px;
  --blur:blur(10px) saturate(1.2);
  --i-online:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='9' cy='8' r='3.2'/><path d='M3 20c0-3.6 2.7-6 6-6s6 2.4 6 6'/><circle cx='17' cy='9' r='2.5'/><path d='M16.5 14.2c2.8.3 4.5 2.4 4.5 5.3'/></svg>");
  --i-lotus:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'><path d='M12 3.5c2.2 2.6 2.8 5.8 0 9.5-2.8-3.7-2.2-6.9 0-9.5z'/><path d='M12 13c-2.6-.4-5.5-2.1-7.2-5.2C4.6 12.5 7.4 15.5 12 15.5s7.4-3 7.2-7.7C17.5 10.9 14.6 12.6 12 13z'/><path d='M5 19.5h14'/></svg>");
  --i-link:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'><path d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/><path d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/></svg>");
  --i-bell:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'><path d='M6 16v-5a6 6 0 0 1 12 0v5l1.5 2h-15z'/><path d='M10 20.5a2 2 0 0 0 4 0'/><path d='M12 3v2'/></svg>");
  --i-bell-off:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'><path d='M6 16v-5a6 6 0 0 1 12 0v5l1.5 2h-15z'/><path d='M10 20.5a2 2 0 0 0 4 0'/><path d='M3 3l18 18'/></svg>");
  --i-map:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'><path d='M2.5 19.5 9 8l4 6.5 2.5-3.5 6 8.5z'/><path d='M7.3 11 9 12.4l1.7-1.5'/><circle cx='18' cy='5' r='1.8'/></svg>");
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:0;color:inherit;background:none}
button:focus-visible,input:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.screen{position:fixed;inset:0;display:none}
.screen.show{display:block}

/* ---------- nút chung ---------- */
.ghost{background:rgba(255,240,210,.04);border:1px solid var(--line);border-radius:10px;padding:8px 14px;color:var(--text);transition:background .2s,border-color .2s}
.ghost:hover{background:rgba(255,230,180,.1);border-color:var(--gold)}
.ghost.wide{width:100%}
.primary{position:relative;width:100%;padding:13px;border-radius:12px;color:#fff6e4;font-size:17px;font-weight:700;letter-spacing:.4px;
  background:linear-gradient(180deg,#d4573f 0%,#a8322a 55%,#86241f 100%);
  border:1px solid #f0b46a;box-shadow:inset 0 1px 0 rgba(255,220,170,.5),inset 0 -2px 0 rgba(0,0,0,.25),0 6px 20px rgba(150,40,30,.45);
  text-shadow:0 1px 1px rgba(0,0,0,.4);transition:filter .15s,transform .15s}
.primary:hover{filter:brightness(1.1)}
.primary:active{transform:translateY(1px)}
.primary[disabled]{background:#4a3a2c;border-color:#6b5843;color:#a99480;box-shadow:none;cursor:default}
input{flex:1;min-width:0;font:inherit;font-size:16px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(10,6,4,.55);color:var(--text);transition:border-color .2s,box-shadow .2s}
input::placeholder{color:var(--dim)}
input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(220,174,92,.18)}
.row{display:flex;gap:8px}
.err{color:#ff8f7a;font-size:13px;text-align:left;min-height:18px;margin-top:6px}
.hint{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center}


/* =========================================================
   LOBBY
   ========================================================= */
#lobby{display:none;align-items:center;justify-content:center;padding:calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));overflow:auto}
#lobby.show{display:flex}
.sky{position:fixed;inset:0;overflow:hidden;background:
  radial-gradient(ellipse 60% 40% at 72% 58%,rgba(255,196,110,.55),transparent 70%),
  linear-gradient(180deg,#1a0f0b 0%,#3b1d15 34%,#7a3a22 58%,#c47a3e 72%,#e8b066 80%,#5a3424 100%)}
.sun{position:absolute;left:72%;top:52%;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;
  background:radial-gradient(circle,#fff1c9 0%,#ffd27e 30%,rgba(255,170,80,.35) 55%,transparent 70%);animation:sunPulse 8s ease-in-out infinite}
@keyframes sunPulse{50%{transform:scale(1.08);opacity:.9}}
.clouds{position:absolute;left:0;right:0;height:220px;background-repeat:repeat-x;opacity:.75;will-change:background-position}
.clouds.c1{top:14%;opacity:.35;animation:drift 120s linear infinite;
  background-image:radial-gradient(ellipse 140px 26px at 120px 60px,rgba(255,214,170,.55),transparent 70%),radial-gradient(ellipse 220px 30px at 520px 110px,rgba(255,200,150,.45),transparent 70%),radial-gradient(ellipse 160px 22px at 860px 50px,rgba(255,220,180,.4),transparent 70%);background-size:1100px 220px}
.clouds.c2{top:48%;opacity:.55;animation:drift 80s linear infinite reverse;
  background-image:radial-gradient(ellipse 260px 34px at 200px 90px,rgba(255,226,190,.6),transparent 70%),radial-gradient(ellipse 200px 28px at 700px 140px,rgba(255,210,170,.55),transparent 70%);background-size:1000px 220px}
.clouds.c3{bottom:-40px;height:260px;opacity:.95;animation:drift 60s linear infinite;
  background-image:radial-gradient(ellipse 320px 70px at 160px 170px,rgba(246,222,196,.85),transparent 70%),radial-gradient(ellipse 280px 60px at 560px 200px,rgba(236,206,176,.8),transparent 70%),radial-gradient(ellipse 340px 80px at 940px 180px,rgba(246,222,196,.85),transparent 70%);background-size:1200px 260px}
@keyframes drift{to{background-position:1200px 0}}
.peaks{position:absolute;left:0;right:0;bottom:0;width:100%;height:62%}
.peaks .p3{fill:#6a3826;opacity:.55}
.peaks .p2{fill:#3e2018;opacity:.85}
.peaks .p1{fill:#1f110c}
.peaks .pagoda{fill:#2a1510}
.motes i{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;background:#ffd98a;box-shadow:0 0 10px 3px rgba(255,190,90,.6);opacity:0;animation:rise 14s linear infinite}
.motes i:nth-child(1){left:8%;animation-delay:0s}.motes i:nth-child(2){left:22%;animation-delay:4s;animation-duration:18s}
.motes i:nth-child(3){left:37%;animation-delay:8s}.motes i:nth-child(4){left:55%;animation-delay:2s;animation-duration:16s}
.motes i:nth-child(5){left:68%;animation-delay:6s}.motes i:nth-child(6){left:80%;animation-delay:10s;animation-duration:20s}
.motes i:nth-child(7){left:91%;animation-delay:3s}.motes i:nth-child(8){left:46%;animation-delay:12s;animation-duration:17s}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}100%{transform:translate(40px,-100vh);opacity:0}}
@media (prefers-reduced-motion:reduce){.clouds,.motes i,.sun{animation:none}}

.lobby-panel{position:relative;width:100%;max-width:460px;padding:26px 26px 20px;border-radius:18px;margin:auto;
  background:linear-gradient(180deg,rgba(34,22,14,.82),rgba(20,13,9,.88));border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 4px rgba(0,0,0,.25),inset 0 0 0 5px var(--line-soft);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);animation:panelIn .6s cubic-bezier(.2,.8,.2,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.98)}}
.lobby-panel::before,.lobby-panel::after,.modal .card::before,.modal .card::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--gold);pointer-events:none;opacity:.85}
.lobby-panel::before,.modal .card::before{left:8px;top:8px;border-right:0;border-bottom:0;border-top-left-radius:6px}
.lobby-panel::after,.modal .card::after{right:8px;bottom:8px;border-left:0;border-top:0;border-bottom-right-radius:6px}
.brand{text-align:center;margin-bottom:18px}
.seal{width:52px;height:52px;margin:0 auto 6px;border-radius:12px;display:grid;place-items:center;font-size:30px;color:#fff3dc;
  background:linear-gradient(160deg,#c9463a,#86241f);border:1px solid #f0b46a;box-shadow:0 4px 16px rgba(160,40,30,.5),inset 0 1px 0 rgba(255,210,160,.5);transform:rotate(-4deg)}
.logo-text{font-size:44px;font-weight:800;letter-spacing:1px;line-height:1.1;
  background:linear-gradient(180deg,#fff2cc 0%,#f2cf82 45%,#b98236 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(240,180,90,.25))}
.tagline{color:var(--muted);font-size:13.5px;margin-top:6px;line-height:1.5}
.lb-section{margin-top:14px}
.lb-label{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;font-weight:600}
.lb-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.gender{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gender button{position:relative;display:flex;flex-direction:column;align-items:center;padding:10px 8px 12px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,230,180,.06),rgba(0,0,0,.25));border:1px solid var(--line-soft);transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}
.gender button:hover{transform:translateY(-2px);border-color:var(--line)}
.gender button.sel{border-color:var(--gold);background:linear-gradient(180deg,rgba(240,190,100,.2),rgba(80,40,20,.35));
  box-shadow:0 0 0 1px var(--gold),0 8px 26px rgba(220,160,70,.25),inset 0 0 30px rgba(255,200,110,.12)}
.gender button.sel::after{content:"✓";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#2a1a0e;background:var(--gold-2)}
.gender .fig{display:block;width:100%;height:150px;border-radius:10px;
  background:radial-gradient(ellipse 50% 60% at 50% 45%,rgba(255,200,120,.35),transparent 70%)}
.gender button.sel .fig{background:radial-gradient(ellipse 55% 65% at 50% 45%,rgba(255,206,120,.6),transparent 72%)}
.gender .fig svg{width:100%;height:100%}
.gender .g-name{font-size:17px;font-weight:700;margin-top:4px;color:var(--gold-2)}
.gender .g-sub{font-size:12px;color:var(--muted)}
.icon-btn{display:grid;place-items:center;width:48px;padding:0}
.icon-btn svg{width:20px;height:20px}
.big-cta{margin-top:16px;padding:16px;font-size:19px;border-radius:14px;overflow:hidden}
.big-cta span{position:relative;z-index:1}
.big-cta::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,240,200,.35),transparent);transform:skewX(-20deg);animation:shine 4s ease-in-out infinite}
@keyframes shine{0%,60%{left:-40%}100%{left:130%}}
#lobbyCount::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#6fd08c;box-shadow:0 0 8px #6fd08c;margin-right:7px;vertical-align:1px}

/* =========================================================
   MAP (bản đồ núi)
   ========================================================= */
#map{background:radial-gradient(ellipse at 50% 20%,#f3e3c3 0%,#d8bf93 60%,#a88a5c 100%)}
.mapwrap{position:absolute;inset:0}
#mapSvg{width:100%;height:100%}
.poi-dot{cursor:pointer}
.poi-dot circle{transition:r .15s}
.poi-dot:hover circle.main{r:16}
.poi{position:absolute;left:calc(16px + var(--safe-l));bottom:calc(16px + var(--safe-b));max-width:360px;width:calc(100% - 32px);background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 14px 40px rgba(0,0,0,.45);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.poi.hidden{display:none}
.poi h2{font-size:19px;margin-bottom:2px;color:var(--gold-2)}
.poi .alt{font-size:12px;color:var(--muted);margin-bottom:8px}
.poi p{font-size:14px;line-height:1.5;margin-bottom:6px}
.poi .how{font-size:13px;background:rgba(255,230,180,.08);border:1px solid var(--line-soft);border-radius:8px;padding:8px 10px;margin:8px 0}
.poi .primary{margin-top:8px;padding:10px}
.poi .x{position:absolute;right:10px;top:8px;font-size:22px;color:var(--muted)}
.poi .count{display:inline-block;background:rgba(127,174,142,.18);color:#bfe3c9;border-radius:999px;padding:2px 10px;font-size:12px;margin-bottom:6px}
.back{position:absolute;right:calc(16px + var(--safe-r));bottom:calc(16px + var(--safe-b));background:var(--panel-2);backdrop-filter:var(--blur)}
.legend{position:absolute;right:calc(16px + var(--safe-r));top:calc(16px + var(--safe-t));background:var(--panel-2);color:var(--text);border:1px solid var(--line-soft);border-radius:10px;padding:8px 12px;font-size:12px;display:flex;gap:14px}
.legend i{display:inline-block;width:22px;height:0;vertical-align:middle;margin-right:6px}
.l-walk{border-top:3px dotted #e0b070}
.l-cable{border-top:3px dashed #e05a44}

/* =========================================================
   HUD trong game
   ========================================================= */
#c{display:block;width:100%;height:100%;touch-action:none;outline:none}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 60%,rgba(10,5,2,.45) 100%)}
#temple>*:not(#c){-webkit-user-select:none;user-select:none}

/* -- tên vùng (trái trên) -- */
.hud-zone{position:absolute;left:calc(var(--gut) + var(--safe-l));top:calc(var(--gut) + var(--safe-t));pointer-events:none;max-width:min(46vw,380px);
  padding:8px 16px 9px 18px;border-radius:4px 14px 14px 4px;background:linear-gradient(90deg,rgba(20,12,8,.72),rgba(20,12,8,.25) 85%,transparent);
  border-left:3px solid var(--gold)}
.zone-orn{position:absolute;left:-3px;top:-6px;bottom:-6px;width:3px;background:linear-gradient(transparent,var(--gold-2),transparent)}
#roomInfo{font-size:22px;font-weight:700;letter-spacing:.4px;line-height:1.2;color:var(--gold-2);text-shadow:0 2px 6px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#roomSub{font-size:12px;color:var(--text);opacity:.8;margin-top:2px;letter-spacing:.3px;text-shadow:0 1px 3px rgba(0,0,0,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#roomSub:empty{display:none}

/* -- cụm phải trên: nút + minimap -- */
.hud-right{position:absolute;right:calc(var(--gut) + var(--safe-r));top:calc(var(--gut) + var(--safe-t));display:flex;gap:10px;align-items:flex-start;pointer-events:none}
.hud-right>*{pointer-events:auto}
.hud-btns{display:flex;flex-direction:column;gap:7px;padding-top:2px}
.hb{position:relative;width:var(--hb);height:var(--hb);border-radius:50%;display:grid;place-items:center;font-size:0;color:var(--gold-2);cursor:pointer;
  background:radial-gradient(circle at 50% 30%,rgba(70,46,28,.92),rgba(22,14,9,.88));border:1px solid var(--line);
  box-shadow:0 3px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,220,160,.18);transition:transform .15s,border-color .15s,color .15s;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.hb:hover{transform:scale(1.08);border-color:var(--gold);color:#fff3d0}
.hb:active{transform:scale(.95)}
.hb::before{content:"";position:absolute;inset:22%;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
#online{--ic:var(--i-online)}
#merit{--ic:var(--i-lotus);cursor:default}
#linkBtn{--ic:var(--i-link)}
#soundBtn{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'><path d='M4 9.5h4l5-4v13l-5-4H4z'/><path d='M16.5 9a4 4 0 0 1 0 6'/><path d='M19 6.5a7.5 7.5 0 0 1 0 11'/></svg>")}
#soundBtn[data-off]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'><path d='M4 9.5h4l5-4v13l-5-4H4z'/><path d='M16.5 9.5l5 5M21.5 9.5l-5 5'/></svg>");color:var(--dim)}
/* nút tiếng đọc kinh (cuốn kinh mở); gạch chéo khi tắt */
#chantBtn{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'><path d='M3 6.5c3-1.5 6-1.5 9 .5 3-2 6-2 9-.5V19c-3-1.5-6-1.5-9 .5-3-2-6-2-9-.5z'/><path d='M12 7v12.5'/></svg>")}
#chantBtn[data-off]{--ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'><path d='M3 6.5c3-1.5 6-1.5 9 .5 3-2 6-2 9-.5V19c-3-1.5-6-1.5-9 .5-3-2-6-2-9-.5z'/><path d='M3 3l18 18'/></svg>");color:var(--dim)}
/* thanh âm lượng: hiện khi rê chuột / chạm giữ vào nút loa */
.vol-wrap{position:relative;display:flex;align-items:center}
.vol-pop{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);display:none;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(30,20,12,.82);border:1px solid rgba(217,164,65,.35);backdrop-filter:blur(6px);white-space:nowrap;color:#f3e3c4;font-size:12px}
.vol-wrap:hover .vol-pop,.vol-wrap.open .vol-pop{display:flex}
.vol-pop input{width:110px;accent-color:#d9a441}
#toMap{--ic:var(--i-map)}
.hb[data-n]:not([data-n=""])::after{content:attr(data-n);position:absolute;left:-9px;top:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  font-size:10.5px;font-weight:700;line-height:18px;text-align:center;color:#2a170b;background:linear-gradient(#ffe7a8,#dca94e);box-shadow:0 1px 4px rgba(0,0,0,.5);font-variant-numeric:tabular-nums}
#merit[data-n]::after{background:linear-gradient(#ffd0a0,#e07a4a)}
#linkBtn[data-on]::after{content:"";position:absolute;right:1px;top:1px;width:9px;height:9px;border-radius:50%;background:#6fd08c;box-shadow:0 0 6px #6fd08c;border:1px solid #1a0f08}

.mm-wrap{position:relative;width:var(--mm);height:var(--mm);border-radius:50%;cursor:pointer;
  padding:4px;background:conic-gradient(from 0deg,#8a5d26,#f2d48a,#8a5d26,#e6c070,#8a5d26);box-shadow:0 6px 20px rgba(0,0,0,.55)}
.mm-wrap::after{content:"";position:absolute;inset:4px;border-radius:50%;box-shadow:inset 0 0 14px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.6);pointer-events:none}
#minimap{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,#3b2c1d,#1d140c)}
.mm-n{position:absolute;left:50%;top:-3px;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:800;line-height:18px;text-align:center;color:#fff3dc;background:var(--son);border:1px solid var(--gold-2);pointer-events:none}

/* -- tooltip -- */
.hud-tip{position:fixed;left:0;top:0;z-index:50;padding:5px 10px;border-radius:6px;font-size:12px;white-space:nowrap;color:var(--text);background:rgba(16,10,6,.94);border:1px solid var(--line);
  box-shadow:0 4px 14px rgba(0,0,0,.5);pointer-events:none;opacity:0;transition:opacity .12s}
.hud-tip.show{opacity:1}

/* -- gợi ý -- */
.tip{position:absolute;top:calc(var(--gut) + var(--safe-t) + 4px);left:50%;transform:translateX(-50%);max-width:min(560px,calc(100% - 2 * var(--mm) - 120px));
  padding:7px 16px;border-radius:999px;font-size:12.5px;line-height:1.4;text-align:center;color:var(--text);
  background:linear-gradient(90deg,transparent,rgba(20,12,8,.78) 15%,rgba(20,12,8,.78) 85%,transparent);transition:opacity 1s;pointer-events:none;text-shadow:0 1px 2px #000}
.tip:empty{display:none}

/* -- bảng công đức (trái, dưới tên vùng) -- */
.merit{position:absolute;left:calc(var(--gut) + var(--safe-l));top:calc(var(--gut) + var(--safe-t) + 122px);width:236px;border-radius:12px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line-soft);box-shadow:0 8px 24px rgba(0,0,0,.35);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);font-size:12px;
  transition:width .25s}
.merit-head{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;text-align:left;color:var(--gold-2);font-size:13px;font-weight:700;
  background:linear-gradient(90deg,rgba(168,50,42,.35),transparent);border-bottom:1px solid var(--line-soft)}
.mh-ic{flex:0 0 18px;height:18px;background:var(--gold-2);-webkit-mask:var(--i-lotus) center/contain no-repeat;mask:var(--i-lotus) center/contain no-repeat}
.mh-title{flex:1;white-space:nowrap}
.chev{width:8px;height:8px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s}
.merit.collapsed{width:auto}
.merit.collapsed .merit-head{border-bottom-color:transparent}
.merit.collapsed .chev{transform:rotate(-45deg)}
.merit.collapsed .merit-body{display:none}
.merit-head.ping{animation:ping 1.2s ease}
@keyframes ping{30%{background:rgba(240,190,100,.55)}}
.merit-body{padding:8px 10px 6px}
.merit .tot{display:flex;gap:6px;margin-bottom:6px}
.merit .tot .t{flex:1;text-align:center;padding:4px 2px;border-radius:6px;background:rgba(255,230,180,.06);color:var(--muted);font-size:10.5px;line-height:1.25}
.merit .tot b{display:block;font-size:15px;color:var(--gold-2);font-weight:700;font-variant-numeric:tabular-nums}
.merit ul{list-style:none;max-height:168px;overflow:hidden;-webkit-mask:linear-gradient(#000 75%,transparent);mask:linear-gradient(#000 75%,transparent)}
.merit li{padding:4px 0;border-top:1px solid rgba(255,230,180,.07);color:var(--text);animation:tin .4s ease}
.merit li:first-child{border-top:0}
.merit li b{color:#ffd98a;font-weight:600}

/* -- thanh hành động (dưới giữa) -- */
.bar{position:absolute;left:50%;bottom:calc(var(--gut) + var(--safe-b));transform:translateX(-50%);display:flex;gap:12px;align-items:flex-end;padding:8px 14px 6px;
  background:radial-gradient(ellipse 60% 100% at 50% 100%,rgba(16,10,6,.6),transparent 75%)}
.bar button{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text);font-size:11px;font-weight:500;letter-spacing:.2px;text-shadow:0 1px 3px #000;width:calc(var(--act) + 8px)}
.bar .ic{position:relative;display:grid;place-items:center;width:var(--act);height:var(--act);border-radius:50%;
  background:radial-gradient(circle at 50% 28%,#5c3c22 0%,#2a1a10 70%,#1a0f09 100%);border:2px solid var(--gold-3);
  box-shadow:0 0 0 2px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,220,160,.25),inset 0 -6px 14px rgba(0,0,0,.4);transition:transform .12s,border-color .15s,box-shadow .15s}
.bar .ic::after{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid rgba(255,220,150,.18);pointer-events:none}
.bar .ic svg{width:46%;height:46%;fill:none;stroke:var(--gold-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.bar button:hover .ic{border-color:var(--gold-2);transform:translateY(-2px);box-shadow:0 0 0 2px rgba(0,0,0,.55),0 8px 22px rgba(0,0,0,.55),0 0 18px rgba(240,190,100,.35),inset 0 2px 0 rgba(255,220,160,.3)}
.bar button:active .ic{transform:scale(.93)}
.bar button[data-a="lay"] .ic{background:radial-gradient(circle at 50% 28%,#b0463a 0%,#6e1f1a 70%,#45120f 100%);border-color:#e9b36a}
.bar button[disabled]{cursor:default;opacity:.4}
.bar button[disabled] .ic{transform:none;filter:grayscale(.6)}
.bar span{white-space:nowrap}

/* -- toast -- */
#toasts{position:absolute;left:50%;top:calc(var(--gut) + var(--safe-t) + 52px);transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100% - 32px)}
.toast{position:relative;padding:8px 22px;font-size:13.5px;font-weight:500;color:#fff3dc;text-align:center;
  background:linear-gradient(90deg,transparent,rgba(30,18,10,.9) 14%,rgba(30,18,10,.9) 86%,transparent);text-shadow:0 1px 2px #000;animation:tin .35s ease}
.toast::before,.toast::after{content:"";position:absolute;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.toast::before{top:0}.toast::after{bottom:0}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}}

/* -- chat -- */
.chat{position:absolute;left:50%;bottom:calc(var(--gut) + var(--safe-b) + var(--act) + 34px);transform:translateX(-50%);display:flex;gap:6px;width:min(440px,calc(100% - 32px));
  padding:5px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.5);backdrop-filter:var(--blur)}
.chat.hidden{display:none}
.chat input{border-radius:999px;border:0;background:rgba(0,0,0,.35);padding:10px 16px;font-size:15px}
.chat button{border-radius:999px;padding:0 18px;color:#fff6e4;font-weight:700;background:linear-gradient(180deg,#d4573f,#8f2a22);border:1px solid #f0b46a}

/* -- cabin / chuyển cảnh -- */
.fade{position:absolute;inset:0;z-index:30;background:radial-gradient(ellipse at center,#2a1a10,#0c0705);display:flex;align-items:center;justify-content:center;color:var(--gold-2);font-size:18px;letter-spacing:.5px;transition:opacity .5s;opacity:1}
.fade.hidden{opacity:0;pointer-events:none}
.ride{position:absolute;left:0;right:0;bottom:calc(var(--gut) + var(--safe-b) + var(--act) + 34px);display:flex;justify-content:center;pointer-events:none;padding:0 16px}
.ride.hidden{display:none}
.ride-box{background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:10px 16px;min-width:min(300px,100%);max-width:480px;text-align:center;font-size:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);pointer-events:auto}
.ride-bar{height:6px;background:rgba(255,255,255,.1);border-radius:3px;margin:8px 0;overflow:hidden;border:1px solid var(--line-soft)}
.ride-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-3),var(--gold-2))}
.ride-box .ghost{padding:4px 12px;font-size:13px}

/* -- hộp thoại kiểu cửa sổ game -- */
.modal{position:absolute;inset:0;z-index:40;background:radial-gradient(ellipse at center,rgba(10,6,3,.45),rgba(10,6,3,.78));display:flex;align-items:center;justify-content:center;
  padding:calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));backdrop-filter:blur(2px)}
.modal.hidden{display:none}
.modal .card{position:relative;width:100%;max-width:440px;max-height:100%;overflow:auto;text-align:left;color:var(--text);padding:24px 22px 20px;border-radius:14px;
  background:linear-gradient(180deg,rgba(40,26,17,.96),rgba(22,14,9,.97));border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.65),inset 0 0 0 4px rgba(0,0,0,.25),inset 0 0 0 5px var(--line-soft);animation:panelIn .25s ease}
.modal h2{font-size:20px;font-weight:700;color:var(--gold-2);padding:0 30px 10px 0;margin-bottom:12px;border-bottom:1px solid var(--line-soft);position:relative}
.modal h2::after{content:"";position:absolute;left:0;bottom:-1px;width:60px;height:2px;background:var(--son-2)}
.modal .sub{color:var(--muted);font-size:13.5px;line-height:1.55;margin-bottom:12px}
.modal .x{position:absolute;right:12px;top:12px;z-index:1;width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;color:var(--gold-2);
  background:rgba(0,0,0,.35);border:1px solid var(--line);transition:background .15s}
.modal .x:hover{background:var(--son)}
.code{font-size:34px;font-weight:800;letter-spacing:4px;text-align:center;color:var(--gold-2);padding:12px;border-radius:10px;user-select:all;-webkit-user-select:all;
  background:linear-gradient(180deg,rgba(168,50,42,.35),rgba(80,20,15,.35));border:1px dashed var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.6)}
.steps{font-size:14px;line-height:1.65;margin:14px 0 14px 20px;color:var(--text)}
.steps b{color:var(--gold-2)}
.linked{font-size:13px;color:var(--muted);border-top:1px solid var(--line-soft);padding-top:10px}
.linked b{color:var(--text)}
.opts{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.opts button{padding:12px 14px;border-radius:10px;text-align:left;font-size:15px;color:var(--text);background:rgba(255,230,180,.05);border:1px solid var(--line-soft);transition:background .15s,border-color .15s}
.opts button:hover{background:rgba(240,190,100,.14);border-color:var(--gold)}
.opts button small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.tabs{display:flex;gap:4px;margin:0 0 10px;padding:3px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid var(--line-soft)}
.tabs button{flex:1;padding:8px;border-radius:8px;color:var(--muted);font-weight:600;font-size:14px}
.tabs button.sel{color:#2a170b;background:linear-gradient(#f6dc9a,#c9963f)}
.tabpane.hidden{display:none}
.tabpane{max-height:55vh;overflow:auto}
.stat-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px;border-bottom:1px solid rgba(255,230,180,.08)}
.stat-row .nm{flex:0 0 46%}
.stat-row .bar2{flex:1;height:8px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden}
.stat-row .bar2 i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-3),var(--gold-2))}
.stat-row .n{min-width:36px;text-align:right;font-variant-numeric:tabular-nums;color:var(--gold-2)}
.stat-h{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin:14px 0 4px;font-weight:600}
.stat-big{font-size:30px;font-weight:800;color:var(--gold-2)}
.attr{font-size:11px;color:var(--dim);margin-top:10px}
.rooms{display:none}

/* -- cần điều khiển ảo -- */
.joy-zone{display:none}
html.touch .joy-zone{display:block;position:absolute;left:0;bottom:0;width:46%;height:52%;z-index:2;touch-action:none}
.joy{position:absolute;left:calc(26px + var(--safe-l));bottom:calc(var(--gut) + var(--safe-b) + var(--act) + 44px);width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,18,10,.25) 40%,rgba(30,18,10,.55) 100%);border:2px solid rgba(222,176,96,.5);
  box-shadow:0 0 0 6px rgba(0,0,0,.12),inset 0 0 20px rgba(0,0,0,.35);transition:opacity .2s;opacity:.75}
.joy::before{content:"";position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(222,176,96,.3)}
.joy.active{opacity:1;transition:none}
.joy-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:radial-gradient(circle at 40% 32%,#f6dc9a,#b9853a 60%,#7a5220);border:2px solid #fff0c8;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.joy-zone.off{display:none !important}

/* =========================================================
   ĐIỆN THOẠI (≤ 640px)
   ========================================================= */
@media (max-width:640px){
  :root{--gut:10px;--mm:96px;--hb:32px;--act:50px}
  .logo-text{font-size:36px}
  .lobby-panel{padding:20px 16px 16px}
  .gender .fig{height:118px}
  .gender{gap:10px}
  .hud-zone{max-width:calc(100vw - var(--mm) - var(--hb) - 48px);padding:6px 12px 7px 12px}
  #roomInfo{font-size:17px}
  #roomSub{font-size:11px}
  .hud-btns{gap:5px}
  .merit{top:calc(var(--gut) + var(--safe-t) + 58px);width:200px;font-size:11px}
  .merit ul{max-height:96px}
  .merit-head{padding:6px 9px;font-size:12px}
  .tip{top:calc(var(--gut) + var(--safe-t) + var(--mm) + 92px);max-width:calc(100% - 24px);white-space:normal;border-radius:10px;background:rgba(20,12,8,.72)}
  .tip{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding:6px 12px;max-height:calc(2.8em + 12px)}
  #toasts{top:calc(var(--gut) + var(--safe-t) + var(--mm) + 156px)}
  .bar{gap:6px;padding:6px 8px 4px}
  .bar button{font-size:10px;width:calc(var(--act) + 6px)}
  .modal .card{padding:20px 16px 16px}
  .code{font-size:28px}
}
@media (max-width:360px){
  :root{--act:44px}
  .bar{gap:3px}
}
/* màn cảm ứng nằm ngang, thấp */
@media (max-height:480px) and (orientation:landscape){
  :root{--mm:90px;--hb:30px;--act:46px}
  .merit{display:none}
  .joy{bottom:calc(var(--gut) + var(--safe-b) + 10px)}
}
/* lớp HUD luôn nằm trên vùng joystick */
.hud-zone,.hud-right,.merit,.bar,.chat,.ride,#toasts,.tip{z-index:3}