/* Tông sơn mài: đỏ son, đen bóng, viền vàng */
:root {
  --lacquer: #1c0f0d;
  --lacquer2: #2a1512;
  --gold: #d4a94e;
  --gold-soft: rgba(212, 169, 78, 0.35);
  --red: #a8322a;
  --text: #f3e6c8;
  --muted: #b9a582;
  --exc: #5dff7a;
  --jewel: #c99bff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #10141a; color: var(--text); font-family: 'Be Vietnam Pro', system-ui, sans-serif; font-size: 14px; }
#game { position: fixed; inset: 0; display: block; filter: brightness(1.07) saturate(1.06) contrast(1.03); }
/* WebGL: cảnh vẽ trên #gl (đã chỉnh màu trong lúc vẽ), #game phía trên chỉ còn chữ, trong suốt */
#gl { position: fixed; left: 0; top: 0; display: block; pointer-events: none; }
body.gl #game { filter: none; background: transparent; }
button { font: inherit; cursor: pointer; }
code { font-family: ui-monospace, monospace; font-size: 12px; color: #e8cf8f; }
[hidden] { display: none !important; }

.btn { background: linear-gradient(#5a1f18, #3a120e); color: var(--text); border: 1px solid var(--gold-soft); border-radius: 6px; padding: 6px 12px; margin: 2px; }
.btn:hover:not(:disabled) { border-color: var(--gold); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.gold { background: linear-gradient(#e3bf68, #b48a35); color: #2a1408; font-weight: 700; border-color: #f5dc9a; }

/* ---------- Đăng nhập ---------- */
#login { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(30,12,8,0.35), rgba(10,6,5,0.88)), var(--login-bg, none) center / cover, #140a08; z-index: 50; padding: 16px; }
.login-box { width: min(560px, 100%); background: var(--lacquer); border: 2px solid var(--gold); border-radius: 12px; padding: 28px; text-align: center; box-shadow: 0 0 60px rgba(212,169,78,0.2); }
.login-box h1 { font-family: 'Noto Serif', serif; font-size: 40px; margin: 0; color: var(--gold); letter-spacing: 3px; }
.login-box h1 span { color: var(--text); font-size: 0.6em; letter-spacing: 6px; display: block; }
.sub { color: var(--muted); margin: 6px 0 20px; }
.continue { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--lacquer2); padding: 12px; border-radius: 8px; border: 1px solid var(--gold-soft); }
.or { color: var(--muted); font-size: 12px; margin: 12px 0; }
#inp-name { width: 100%; padding: 10px; background: #0e0706; border: 1px solid var(--gold-soft); color: var(--text); border-radius: 6px; font: inherit; font-size: 16px; text-align: center; }
.classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.cls { background: var(--lacquer2); border: 1px solid var(--gold-soft); border-radius: 8px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cls.sel { border-color: var(--gold); box-shadow: 0 0 12px var(--gold-soft); }
.cls small { color: var(--muted); font-size: 11px; }
.tip { color: var(--muted); font-size: 12px; margin-top: 16px; }

/* ---------- HUD ---------- */
#frame { position: fixed; left: 12px; top: 12px; width: 240px; background: rgba(28,15,13,0.88); border: 1px solid var(--gold-soft); border-radius: 10px; padding: 10px 12px; }
#frame-name { font-weight: 700; color: var(--gold); font-size: 16px; }
#frame-lv { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.bar { position: relative; height: 14px; background: #000a; border-radius: 7px; overflow: hidden; margin: 4px 0; }
.bar > div { height: 100%; transition: width 0.15s; }
.bar.hp > div { background: linear-gradient(#e0473a, #8e1f18); }
.bar.mp > div { background: linear-gradient(#4a8de0, #1f4f8e); }
.bar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 14px; text-shadow: 0 1px 2px #000; }
#gold { color: #ffd75e; font-size: 12px; margin-top: 4px; }

#topright { position: fixed; right: 12px; top: 12px; width: 220px; background: rgba(28,15,13,0.88); border: 1px solid var(--gold-soft); border-radius: 10px; padding: 8px 10px; text-align: center; }
#region-name { font-family: 'Noto Serif', serif; color: var(--gold); font-size: 15px; }
#minimap { width: 200px; height: 104px; margin: 4px 0; }
#coords { color: var(--muted); font-size: 11px; }
#net-info { text-align: left; font-size: 11px; color: var(--muted); border-top: 1px solid var(--gold-soft); margin-top: 6px; padding-top: 6px; line-height: 1.6; }
#net-info b { color: var(--text); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot.on { background: #4f4; } .dot.off { background: #f44; }

#menu { position: fixed; right: 12px; bottom: 30px; display: flex; gap: 6px; }
#menu button { width: 46px; height: 46px; background: rgba(28,15,13,0.9); border: 1px solid var(--gold-soft); border-radius: 8px; color: var(--text); font-size: 20px; position: relative; }
#menu button small { position: absolute; right: 3px; bottom: 1px; font-size: 9px; color: var(--muted); }
#menu button:hover { border-color: var(--gold); }

#chat { position: fixed; left: 12px; bottom: 30px; width: 380px; max-width: calc(100vw - 24px); }
#chat-log { height: 160px; overflow-y: auto; font-size: 12px; background: rgba(0,0,0,0.35); border-radius: 8px 8px 0 0; padding: 6px 8px; }
#chat-input { width: 100%; padding: 6px 8px; background: rgba(0,0,0,0.6); border: 1px solid var(--gold-soft); border-radius: 0 0 8px 8px; color: var(--text); font: inherit; font-size: 12px; }
.line { margin: 2px 0; text-shadow: 0 1px 2px #000; }
.line.sys { color: #e8d9a8; } .line.chain { color: #9fd8ff; } .line.exc { color: var(--exc); } .line.bad { color: #ff8a7a; }
.line.chat b { color: #9fd8ff; } .line.chat.mine b { color: var(--gold); }

#skillbar { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; gap: 6px; }
.slot { position: relative; width: 64px; height: 54px; background: rgba(28,15,13,0.92); border: 1px solid var(--gold-soft); border-radius: 8px; display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; user-select: none; }
.slot:hover { border-color: var(--gold); }
.slot .key { position: absolute; left: 4px; top: 2px; font-size: 10px; color: var(--gold); }
.slot .sk-name { font-size: 10px; line-height: 1.1; padding: 0 3px; }
.slot .cd { position: absolute; inset: 0; background: rgba(0,0,0,0.65); border-radius: 8px; display: grid; place-items: center; font-weight: 700; }
.slot .cnt { position: absolute; right: 3px; top: 3px; padding: 1px 4px; border-radius: 6px; background: rgba(10,5,4,0.7); font: 700 10px/1.1 "Be Vietnam Pro", sans-serif; color: #ffd75e; }
.slot.nomp { opacity: 0.55; }
#exp { position: fixed; left: 0; right: 0; bottom: 0; height: 13px; background: #000c; border-top: 1px solid var(--gold-soft); }
#exp-fill { height: 100%; background: linear-gradient(#b07aff, #6a3ab8); transition: width 0.3s; }
#exp-text { position: absolute; inset: 0; text-align: center; font-size: 9.5px; line-height: 13px; }

/* ---------- Panel ---------- */
.panel { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 180px); display: flex; flex-direction: column; background: linear-gradient(rgba(28,15,13,0.78), rgba(18,9,8,0.9)), var(--panel-tex, none) 0 0 / 256px, var(--lacquer); border: 2px solid var(--gold); border-radius: 12px; box-shadow: 0 10px 40px #000a; z-index: 20; }
#trade { top: 60px; padding-bottom: 10px; }
#trade h4, #trade .grid, #trade .trade-btns { margin-left: 14px; margin-right: 14px; }
.p-head { font-family: 'Noto Serif', serif; color: var(--gold); font-size: 17px; padding: 10px 14px; border-bottom: 1px solid var(--gold-soft); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(var(--lacquer2), var(--lacquer)); border-radius: 10px 10px 0 0; }
.p-close { background: none; border: none; color: var(--muted); font-size: 16px; }
.p-body { padding: 12px 14px; overflow-y: auto; }
.p-body p { line-height: 1.5; }
.p-body.split { display: flex; flex-direction: column; overflow: hidden; padding: 0; flex: 1 1 auto; min-height: 0; }
.p-top { flex: none; padding: 12px 14px 8px; border-bottom: 1px solid rgba(212,169,78,0.22); box-shadow: 0 6px 8px -6px rgba(0,0,0,0.6); position: relative; z-index: 1; }
.p-top > :first-child { margin-top: 0; }
.p-top .statline { margin-bottom: 2px; }
.p-list { flex: 1 1 auto; min-height: 60px; overflow-y: auto; padding: 10px 14px 12px; overscroll-behavior: contain; }
.p-bot { flex: none; padding: 7px 14px 10px; border-top: 1px solid rgba(212,169,78,0.22); }
.p-bot .note, .p-bot p { margin: 0; }
/* bảng giao dịch: chỉ ô chọn đồ cuộn, hai cột và nút luôn thấy */
#trade { overflow: hidden; }
#trade .trade-pick { flex: 1 1 auto; min-height: 60px; overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; }
#trade .trade-cols, #trade h4, #trade .trade-btns { flex: none; }
h4 { color: var(--gold); margin: 12px 0 6px; font-size: 13px; }
hr { border: none; border-top: 1px solid var(--gold-soft); }
.note { color: var(--muted); font-size: 12px; line-height: 1.5; }
.empty-note { color: var(--muted); grid-column: 1 / -1; padding: 12px; text-align: center; }

.equip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.eslot { min-height: 56px; background: #0e0706; border: 1px dashed var(--gold-soft); border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.eslot .empty { color: var(--muted); font-size: 11px; }
.eslot .item { border: none; background: none; width: 100%; }
.statline { margin: 10px 0; font-size: 12px; color: var(--muted); text-align: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.grid.small { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.item { position: relative; background: var(--lacquer2); border: 1px solid var(--gold-soft); border-radius: 8px; padding: 6px; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; text-align: center; }
.item:hover { border-color: var(--gold); }
.item .ic { font-size: 20px; }
.item.exc .nm { color: var(--exc); } .item.jewel .nm { color: var(--jewel); } .item.high .nm { color: #7fe0ff; }
.item.pending { opacity: 0.75; }
.item .pd { position: absolute; right: 3px; top: 2px; font-size: 10px; }
.item .qty { position: absolute; left: 4px; top: 4px; padding: 2px 5px; border-radius: 7px; background: rgba(10,5,4,0.72); border: 1px solid rgba(212,169,78,0.55); font: 700 11px/1 'Be Vietnam Pro', sans-serif; color: #fff4c8; }
.item.potion .nm { color: #b8f0a8; }
.item[data-sel] { border-color: var(--gold); box-shadow: 0 0 8px var(--gold-soft); background: #4a2418; }
.item.bad { color: #f88; border-color: #f44; }

.ch-name { font-size: 18px; color: var(--gold); font-weight: 700; }
.ch-name small { color: var(--muted); font-weight: 400; font-size: 13px; }
.pts { margin: 8px 0; }
.stat { display: flex; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(212,169,78,0.1); }
.stat span { flex: 1; color: var(--muted); }
.plus { margin-left: 10px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--gold); background: var(--red); color: #fff; }
.addr { word-break: break-all; }

.ledger .kv, .block .kv { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: 12px; }
.ledger .kv span { color: var(--muted); }
.mining { margin: 8px 0; padding: 6px 8px; background: #2a2010; border: 1px solid var(--gold-soft); border-radius: 6px; color: #ffd75e; font-size: 12px; }
.block { background: var(--lacquer2); border: 1px solid rgba(212,169,78,0.2); border-radius: 6px; margin: 4px 0; padding: 4px 8px; font-size: 12px; }
.block summary { cursor: pointer; }
.tx { font-size: 12px; padding: 3px 0 3px 8px; border-left: 2px solid var(--gold-soft); margin: 3px 0; }
.tx.pending { border-left-color: #9fd8ff; }
.tx i { color: #f0d080; font-style: normal; }
.ok { color: #6f6; } .fail { color: #f77; }
.shop-row { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid rgba(212,169,78,0.1); }
.shop-row span { flex: 1; }
.shop-row small { color: var(--muted); }
.help p { margin: 6px 0; }

.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 14px 0; }
.trade-cols > div { background: #0e0706; border-radius: 8px; padding: 6px 8px; min-height: 80px; display: flex; flex-direction: column; gap: 4px; }
.trade-cols h4 { margin: 0 0 4px; }
.warn { color: #ff8a7a; font-size: 12px; }
.trade-btns { margin-top: 10px; text-align: center; }

#ctxmenu { position: fixed; z-index: 40; background: var(--lacquer); border: 1px solid var(--gold); border-radius: 8px; padding: 4px; min-width: 170px; display: flex; flex-direction: column; box-shadow: 0 6px 20px #000a; }
#ctxmenu button { background: none; border: none; color: var(--text); text-align: left; padding: 6px 10px; border-radius: 4px; }
#ctxmenu button:hover { background: var(--lacquer2); color: var(--gold); }
.cm-title { font-weight: 700; color: var(--gold); padding: 4px 10px; border-bottom: 1px solid var(--gold-soft); font-size: 12px; }
.cm-sub { font-size: 11px; color: var(--muted); padding: 4px 10px 0; }

#confirm { position: fixed; top: 30%; left: 50%; transform: translateX(-50%); z-index: 45; background: var(--lacquer); border: 2px solid var(--gold); border-radius: 12px; padding: 16px 20px; text-align: center; }
#tooltip { position: fixed; z-index: 60; pointer-events: none; max-width: 300px; background: rgba(14,7,6,0.97); border: 1px solid var(--gold); border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.5; }
.tt-name { font-weight: 700; color: var(--gold); font-size: 13px; }
.tt-name.exc, #tooltip .exc { color: var(--exc); }
.tt-desc { color: var(--jewel); }
.tt-id { color: var(--muted); font-size: 10px; margin-top: 4px; }
.tt-hist { color: #9fd8ff; font-size: 11px; border-top: 1px solid var(--gold-soft); margin-top: 4px; padding-top: 4px; }

#death { position: fixed; top: 35%; left: 50%; transform: translateX(-50%); font-family: 'Noto Serif', serif; font-size: 32px; color: #ff6a5a; text-align: center; text-shadow: 0 2px 10px #000; pointer-events: none; }
#death small { font-size: 15px; color: var(--text); }

#banner { position: fixed; top: 18%; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; }
#banner.show { animation: banner 3.5s ease forwards; }
.b-name { font-family: 'Noto Serif', serif; font-size: 38px; color: var(--gold); text-shadow: 0 3px 12px #000; }
.b-lv { color: var(--text); text-shadow: 0 2px 6px #000; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, 10px); } 15%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

#toasts { position: fixed; top: 110px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 30; }
.toast { background: rgba(28,15,13,0.94); border: 1px solid var(--gold-soft); border-radius: 8px; padding: 6px 14px; font-size: 13px; animation: toast 3.5s forwards; }
.toast.good { border-color: #6c6; color: #bfffbf; } .toast.bad { border-color: #c55; color: #ffc0b8; }
@keyframes toast { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 760px) {
  #topright { width: 150px; } #minimap { width: 130px; height: 68px; }
  #chat { width: 260px; } #chat-log { height: 90px; }
  #frame { width: 190px; }
  .classes { grid-template-columns: 1fr; }
}

.slot.auto { border-color: rgba(120,200,255,0.4); }
.slot.auto.on { border-color: #7fe0ff; background: linear-gradient(#1d3a4a, #10202a); box-shadow: 0 0 12px rgba(127,224,255,0.45); animation: autoPulse 1.6s infinite; }
@keyframes autoPulse { 50% { box-shadow: 0 0 4px rgba(127,224,255,0.2); } }
.auto-cfg label { display: block; margin: 10px 0; font-size: 13px; }
.auto-cfg input[type=range] { width: 100%; accent-color: var(--gold); }
.auto-cfg .chk input { accent-color: var(--gold); margin-right: 6px; }

#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.22) 100%); }

.btn.sm { padding: 3px 8px; font-size: 12px; }
.p-head > span { display: flex; align-items: center; gap: 6px; }
.bulk { background: #2a1a10; border: 1px solid var(--gold-soft); border-radius: 8px; padding: 8px; margin-bottom: 10px; }
.bulk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0; font-size: 12px; }
.bulk-row span { flex: 1; }
.gold-t { color: #ffd75e; }
.item[data-sel]::after { content: '✓'; position: absolute; left: 4px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); color: #2a1408; font-size: 11px; font-weight: 700; line-height: 16px; }

/* Hình giao diện ComfyUI */
.login-box { background: linear-gradient(rgba(28,15,13,0.82), rgba(18,9,8,0.9)), var(--panel-tex, none) 0 0 / 256px, var(--lacquer); backdrop-filter: blur(2px); }
#frame, #topright { background-image: linear-gradient(rgba(28,15,13,0.86), rgba(18,9,8,0.9)), var(--panel-tex, none); background-size: auto, 256px; }
.item img.ic { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.7)); pointer-events: none; }
.eslot .item img.ic { width: 34px; height: 34px; }
.slot.art { background-size: cover; background-position: center; }
.slot.art .sk-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 2px; background: linear-gradient(transparent, rgba(0,0,0,0.85)); border-radius: 0 0 8px 8px; text-shadow: 0 1px 2px #000; }
.slot.art .key { text-shadow: 0 1px 2px #000; }
/* nút Auto: bánh răng là lớp riêng; khi bật thì quay tròn (nhịp theo đồng hồ nên vẽ lại thanh chiêu không bị giật) */
.slot.auto { overflow: hidden; }
.slot.auto .auto-gear { position: absolute; inset: 0; background-size: cover; background-position: center; border-radius: inherit; pointer-events: none; }
/* bánh răng là hình riêng (nét, nền trong suốt) đặt đúng giữa biểu tượng; chỉ nó quay, mặt trời bên ngoài đứng yên */
.slot.auto .auto-cog { position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; transform: translate(-50%, -50%); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; }
.slot.auto.on .auto-cog { animation: cogSpin 2.4s linear infinite; }
@keyframes cogSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.slot.auto .key, .slot.auto .sk-name { z-index: 1; }
@keyframes gearSpin { to { transform: rotate(360deg); } }
.slot .pot-ic { position: absolute; width: 38px; height: 38px; top: 2px; left: 50%; transform: translateX(-50%); object-fit: contain; pointer-events: none; }
.slot.pot .sk-name { position: absolute; bottom: 1px; left: 0; right: 0; text-shadow: 0 1px 2px #000; }
#menu button img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.7)); pointer-events: none; }
#tooltip .tt-ic { float: right; width: 56px; height: 56px; object-fit: contain; margin: 0 0 4px 8px; }

.slot.locked { filter: grayscale(1) brightness(0.55); }
.slot.locked .cd { font-size: 11px; color: #ffd75e; }
#buffs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.buff { font-size: 10px; border: 1px solid; border-radius: 10px; padding: 1px 6px; background: rgba(0,0,0,0.4); }

/* ---------- Khung rồng (khi đã có hình ComfyUI) ---------- */
#portrait { display: none; }

/* góc khung rồng mây cho các bảng */
.dragon-ui .panel::after, .dragon-ui #topright::after, .dragon-ui .login-box::after {
  content: ''; position: absolute; inset: -4px; pointer-events: none; z-index: 2;
  background: var(--c-tl) top left / 44px no-repeat, var(--c-tr) top right / 44px no-repeat,
              var(--c-bl) bottom left / 44px no-repeat, var(--c-br) bottom right / 44px no-repeat;
}
.dragon-ui #topright { position: fixed; }
/* lưỡng long chầu nguyệt trên đầu bảng */
.dragon-ui .panel::before, .dragon-ui .login-box::before {
  content: ''; position: absolute; left: 50%; top: 0; width: min(380px, 80%); height: 72px; transform: translate(-50%, -58%);
  background: var(--orn-header) center / contain no-repeat; pointer-events: none; z-index: 3; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
}
.dragon-ui .panel .p-head { padding-top: 22px; }
.dragon-ui .login-box { position: relative; padding-top: 44px; }
.dragon-ui .login-box h1::before {
  content: ''; display: block; width: 92px; height: 92px; margin: 0 auto 4px; background: var(--orn-emblem) center / contain no-repeat;
  filter: drop-shadow(0 0 12px rgba(255,200,80,0.45));
}
/* thanh chiêu đặt trên tấm sơn mài có đầu rồng */
.dragon-ui #skillbar {
  /* 3 phần: 2 đầu rồng giữ nguyên tỉ lệ (22% mỗi bên ảnh), chỉ tấm sơn mài ở giữa giãn ngang */
  box-sizing: border-box; height: 100px; padding: 38px 6px 8px; bottom: 16px;
  border-style: solid; border-color: transparent; border-width: 0 111px;
  border-image: var(--orn-bar) 0 22% fill / 0 111px / 0 stretch;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55));
}
.dragon-ui #skillbar .slot { border-color: rgba(255,210,120,0.6); box-shadow: inset 0 0 8px rgba(0,0,0,0.6), 0 0 6px rgba(255,200,90,0.15); }
.dragon-ui #chat { bottom: 124px; width: 340px; }
@media (max-width: 760px) { .dragon-ui #skillbar { border-width: 0 60px; height: 80px; padding: 26px 4px 6px; } }
.dragon-ui #menu { flex-direction: column; right: 10px; bottom: 26px; }

/* ---------- Khung nhân vật (góc trái trên) ---------- */
#lv-badge { display: none; }
.fr-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.fr-foot #gold { margin: 0; }
.fr-foot #buffs { margin: 0; }
.bar { border: 1px solid rgba(212,169,78,0.45); background: #120807; height: 15px; }
.bar > div { position: relative; border-radius: 7px; }
.bar > div::after { content: ''; position: absolute; left: 4px; right: 4px; top: 2px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.28); }
.bar span { line-height: 15px; font-weight: 600; }

.dragon-ui #frame { left: 14px; top: 12px; width: 340px; padding: 0; background: none; border: none; min-height: 112px; }
.dragon-ui #portrait { display: block; position: absolute; left: 0; top: 0; width: 112px; height: 112px; z-index: 2; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)); }
.dragon-ui #portrait .pic { position: absolute; inset: 15px; border-radius: 50%; background: #2a1210 center / cover no-repeat; box-shadow: inset 0 0 10px rgba(0,0,0,0.8); }
.dragon-ui #portrait .ring { position: absolute; inset: 0; background: var(--orn-ring) center / contain no-repeat; }
.dragon-ui #lv-badge {
  display: block; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); min-width: 34px; padding: 1px 8px;
  text-align: center; font-weight: 700; font-size: 13px; color: #2a1408; border-radius: 10px;
  background: linear-gradient(#f2d47e, #b48a35); border: 1px solid #fff0b8; box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.dragon-ui .fr-panel {
  position: relative; margin: 12px 0 0 56px; padding: 9px 16px 9px 66px; min-height: 88px;
  background: linear-gradient(90deg, rgba(18,9,8,0.95), rgba(32,16,13,0.9)), var(--panel-tex, none) 0 0 / 256px;
  border: 1px solid rgba(212,169,78,0.55); border-left: none; border-radius: 0 12px 12px 0;
  box-shadow: 0 6px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,220,150,0.12);
}
.dragon-ui .fr-panel::after {
  content: ''; position: absolute; inset: -4px -4px -4px auto; width: 50px; pointer-events: none;
  background: var(--c-tr) top right / 38px no-repeat, var(--c-br) bottom right / 38px no-repeat;
}
.dragon-ui #frame-name { font-family: 'Noto Serif', serif; font-size: 16px; letter-spacing: 0.5px; text-shadow: 0 1px 3px #000; }
.dragon-ui #frame-lv { margin-bottom: 4px; }
@media (max-width: 760px) { .dragon-ui #frame { width: 260px; } }

.shop-row .row-ic { width: 34px; height: 34px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6)); }
span.row-ic { width: 34px; text-align: center; font-size: 20px; }
.shop-row { gap: 10px; }

/* ---------- Nhiệm vụ ---------- */
.quest { background: rgba(0,0,0,0.25); border: 1px solid var(--gold-soft); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.q-title { font-family: 'Noto Serif', serif; color: var(--gold); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.q-ch { font-family: 'Be Vietnam Pro', sans-serif; font-size: 10px; background: var(--red); color: #fff; border-radius: 4px; padding: 1px 6px; }
.q-ch.side { background: #3a5a3a; }
.q-text { font-style: italic; color: #f0e2c0; line-height: 1.6; }
.q-text.done { color: #bfe8a8; }
.q-reward { font-size: 12px; color: var(--muted); margin: 6px 0 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.q-reward .q-ic { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; }
.q-prog { color: #9fd8ff; font-size: 13px; }
.qlog { border-bottom: 1px solid rgba(212,169,78,0.15); padding: 6px 0; }
.qlog summary { cursor: pointer; }
.qlog summary small { color: var(--muted); margin-left: 6px; }
.qlog.locked { opacity: 0.5; }
.qlog.done summary small { color: #8fd88f; }
.qlog.ready summary small { color: #ffd75e; }
#tracker { position: fixed; right: 12px; top: 296px; width: 220px; background: rgba(20,10,8,0.78); border: 1px solid var(--gold-soft); border-radius: 8px; padding: 6px 10px; font-size: 12px; }
.tr-h { color: var(--gold); font-family: 'Noto Serif', serif; font-size: 13px; margin-bottom: 4px; }
.tr-q { margin: 4px 0; display: flex; flex-direction: column; }
.tr-q span { color: #9fd8ff; }
.tr-q.ready span { color: #ffd75e; }
.dragon-ui #menu { bottom: 22px; }

.worldmap #bigmap { width: 100%; height: auto; max-height: calc(100vh - 250px); object-fit: contain; display: block; background: radial-gradient(ellipse, #2a1c12, #120a06); border-radius: 8px; }
.panel:has(.worldmap) { width: min(940px, calc(100vw - 32px)); top: 50px; max-height: calc(100vh - 70px); }
.locked-row { opacity: 0.6; }
/* khung nhân vật: tấm khung nằm giữa vòng rồng, viền trên/dưới đều chui vào vòng */
.dragon-ui #frame { min-height: 124px; }
.dragon-ui #portrait { width: 124px; height: 124px; }
.dragon-ui #portrait .pic { inset: 17px; }
.dragon-ui .fr-panel {
  box-sizing: border-box; height: 98px; min-height: 0; margin: 13px 0 0 62px;
  padding: 6px 16px 6px 72px; display: flex; flex-direction: column; justify-content: center;
}
.dragon-ui #frame-lv { margin-bottom: 2px; }
.dragon-ui .fr-panel .bar { margin: 3px 0; height: 14px; }
.dragon-ui .fr-panel .bar span { line-height: 14px; }
.dragon-ui .fr-foot { margin-top: 2px; }
.dragon-ui #lv-badge { bottom: -2px; }
.dragon-ui .fr-panel > * { flex-shrink: 0; }

.tr-q { cursor: pointer; border-radius: 6px; padding: 3px 5px; margin: 2px -5px; }
.tr-q:hover { background: rgba(212,169,78,0.15); }
.tr-q.nav { background: rgba(120,200,255,0.12); outline: 1px solid rgba(127,224,255,0.5); }
.tr-q.nav span { color: #7fe0ff; }
.qlog summary .btn.sm { float: right; margin-top: -2px; }

/* ================= Giao diện kiểu game ================= */
:root { --cur-sword: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M3%203%20L19%2019%20L17%2021%20L1%205%20Z%22%20fill%3D%22%23e8e2d0%22%20stroke%3D%22%233a2a10%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M3%203%20L19%2019%22%20stroke%3D%22%23fff%22%20stroke-width%3D%220.8%22/%3E%3Cpath%20d%3D%22M15%2023%20L23%2015%20L25%2017%20L17%2025%20Z%22%20fill%3D%22%23d4a94e%22%20stroke%3D%22%233a2a10%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M20%2022%20L27%2029%20L29%2027%20L22%2020%20Z%22%20fill%3D%22%237a3a20%22%20stroke%3D%22%232a1408%22%20stroke-width%3D%221.2%22/%3E%3Ccircle%20cx%3D%2228.5%22%20cy%3D%2228.5%22%20r%3D%222%22%20fill%3D%22%23d4a94e%22%20stroke%3D%22%233a2a10%22/%3E%3C/svg%3E") 1 1, auto; --cur-target: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%229%22%20fill%3D%22none%22%20stroke%3D%22%23ff4a3a%22%20stroke-width%3D%222.4%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%229%22%20fill%3D%22none%22%20stroke%3D%22%232a0805%22%20stroke-width%3D%220.8%22%20stroke-opacity%3D%220.7%22/%3E%3Cpath%20d%3D%22M16%202v8M16%2022v8M2%2016h8M22%2016h8%22%20stroke%3D%22%23ff4a3a%22%20stroke-width%3D%222.4%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%221.8%22%20fill%3D%22%23ffd75e%22/%3E%3C/svg%3E") 16 16, crosshair; --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M10%2030%20C6%2026%204%2020%206%2017%20L9%2015%20L9%205%20C9%203%2012%203%2012%205%20L12%2013%20L13%204%20C13%202%2016%202%2016%204%20L16%2013%20L17%205%20C17%203%2020%203%2020%205%20L20%2014%20L21%208%20C21%206%2024%206%2024%208%20L24%2020%20C24%2026%2021%2030%2017%2030%20Z%22%20fill%3D%22%23f0d9a8%22%20stroke%3D%22%233a2a10%22%20stroke-width%3D%221.3%22/%3E%3C/svg%3E") 10 2, pointer; }
html, body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
input, textarea { -webkit-user-select: text; user-select: text; cursor: text; }
::selection { background: rgba(212,169,78,0.4); color: #fff; }
img { -webkit-user-drag: none; }

/* thanh cuộn vàng đồng */
* { scrollbar-width: thin; scrollbar-color: #b48a35 rgba(0,0,0,0.35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.35); border-radius: 6px; box-shadow: inset 0 0 3px rgba(0,0,0,0.6); }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #8a6420, #e3bf68 45%, #8a6420); border-radius: 6px; border: 2px solid rgba(20,10,8,0.9); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #a07a30, #f5d88a 45%, #a07a30); }
::-webkit-scrollbar-corner { background: transparent; }

/* nút bấm */
.btn { position: relative; text-shadow: 0 1px 2px #000; box-shadow: inset 0 1px 0 rgba(255,220,150,0.18), 0 2px 4px rgba(0,0,0,0.4); transition: transform 0.06s, filter 0.12s, box-shadow 0.12s; }
.btn:hover:not(:disabled) { filter: brightness(1.18); box-shadow: inset 0 1px 0 rgba(255,220,150,0.3), 0 0 10px rgba(212,169,78,0.35); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); filter: brightness(0.95); }
.btn.gold { text-shadow: 0 1px 0 rgba(255,240,200,0.6); }
.btn:focus-visible { outline: 2px solid #ffd75e; outline-offset: 1px; }
#menu button { transition: transform 0.08s, box-shadow 0.12s; }
#menu button:hover { transform: translateY(-2px); box-shadow: 0 0 12px rgba(212,169,78,0.45); }
#menu button:active { transform: translateY(0) scale(0.95); }
.slot { transition: transform 0.06s, box-shadow 0.12s; }
.slot:hover { box-shadow: 0 0 10px rgba(255,215,94,0.45); }
.slot:active { transform: scale(0.94); }
.item { transition: transform 0.06s, box-shadow 0.12s; }
.item:hover { transform: translateY(-1px); box-shadow: 0 0 8px rgba(212,169,78,0.35); }

/* thanh trượt */
input[type=range] { -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; background: linear-gradient(#120807, #2a1612); border: 1px solid rgba(212,169,78,0.5); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2c0, #d4a94e 45%, #7a5418); border: 1px solid #3a2a10; box-shadow: 0 0 6px rgba(255,215,94,0.6); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2c0, #d4a94e 45%, #7a5418); border: 1px solid #3a2a10; }
/* ô tích */
input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; vertical-align: -4px; border: 1px solid #d4a94e; border-radius: 4px; background: #120807; position: relative; }
input[type=checkbox]:checked { background: linear-gradient(#e3bf68, #b48a35); }
input[type=checkbox]:checked::after { content: '✓'; position: absolute; inset: 0; text-align: center; line-height: 16px; font-weight: 900; color: #2a1408; font-size: 13px; }
/* ô nhập */
input[type=text], #inp-name, #chat-input { caret-color: #ffd75e; }
#inp-name:focus, #chat-input:focus { outline: none; border-color: #ffd75e; box-shadow: 0 0 10px rgba(255,215,94,0.3); }
/* mũi tên mở rộng */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '◆'; display: inline-block; color: #b48a35; font-size: 9px; margin-right: 6px; transition: transform 0.15s; vertical-align: 1px; }
details[open] > summary::before { transform: rotate(45deg); color: #ffd75e; }

/* hộp thoại */
.gdlg-wrap { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: radial-gradient(ellipse, rgba(0,0,0,0.35), rgba(0,0,0,0.7)); animation: gdlgIn 0.16s ease-out; }
.gdlg-wrap.out { animation: gdlgOut 0.16s ease-in forwards; }
.gdlg { position: relative; width: min(420px, calc(100vw - 32px)); padding: 30px 26px 20px; text-align: center; border: 2px solid var(--gold); border-radius: 12px;
  background: linear-gradient(rgba(28,15,13,0.94), rgba(18,9,8,0.97)), var(--panel-tex, none) 0 0 / 256px, var(--lacquer); box-shadow: 0 12px 50px #000c, 0 0 0 1px rgba(0,0,0,0.6) inset; animation: gdlgPop 0.2s cubic-bezier(.2,1.4,.5,1); }
.gdlg.danger { border-color: #d06040; }
.gdlg::before { content: ''; position: absolute; left: 50%; top: 0; width: 280px; height: 56px; transform: translate(-50%, -62%); background: var(--orn-header) center / contain no-repeat; pointer-events: none; }
.gdlg::after { content: ''; position: absolute; inset: -4px; pointer-events: none; background: var(--c-tl) top left / 40px no-repeat, var(--c-tr) top right / 40px no-repeat, var(--c-bl) bottom left / 40px no-repeat, var(--c-br) bottom right / 40px no-repeat; }
.gdlg-title { font-family: 'Noto Serif', serif; color: var(--gold); font-size: 19px; margin-bottom: 10px; text-shadow: 0 2px 4px #000; }
.gdlg-text { color: #f3e6c8; line-height: 1.6; font-size: 15px; }
.gdlg-warn { margin-top: 10px; color: #ffb09a; background: rgba(160,40,20,0.25); border: 1px solid rgba(255,120,90,0.4); border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.gdlg-btns { margin-top: 18px; display: flex; justify-content: center; gap: 12px; }
.gdlg-btns .btn { min-width: 110px; padding: 8px 16px; font-size: 14px; }
@keyframes gdlgIn { from { opacity: 0; } }
@keyframes gdlgOut { to { opacity: 0; } }
@keyframes gdlgPop { from { transform: scale(0.85); opacity: 0; } }
/* lời mời giao dịch (cùng kiểu hộp thoại) */
#confirm { top: 28%; padding: 26px 24px 18px; min-width: 320px; background: linear-gradient(rgba(28,15,13,0.95), rgba(18,9,8,0.97)), var(--panel-tex, none) 0 0 / 256px, var(--lacquer); box-shadow: 0 12px 40px #000c; z-index: 150; animation: gdlgPop 0.2s cubic-bezier(.2,1.4,.5,1); }
#confirm p { font-size: 15px; margin: 0 0 14px; }
#confirm::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #ffd75e, #b48a35); transform-origin: left; animation: cfTimer 15s linear forwards; }
@keyframes cfTimer { to { transform: scaleX(0); } }
/* thông báo nổi */
.toast { background: linear-gradient(rgba(36,18,14,0.95), rgba(20,10,8,0.95)); border: 1px solid rgba(212,169,78,0.6); box-shadow: 0 4px 14px rgba(0,0,0,0.5); font-weight: 600; text-shadow: 0 1px 2px #000; }

.ic-inline { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 3px; }
.buff .ic-inline { width: 14px; height: 14px; }
.eslot { position: relative; }
.eslot .sl-ghost { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; opacity: 0.28; pointer-events: none; }
.eslot .empty { position: relative; z-index: 1; }

/* ---------- Con trỏ tự vẽ ---------- */
html.soft-cursor, html.soft-cursor *, html.soft-cursor *:hover { cursor: none !important; }
#cursor { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; will-change: transform; opacity: 0; transition: opacity 0.15s; }
#cursor img { position: absolute; left: -3px; top: -2px; width: 34px; height: auto; filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.7)); transform-origin: 3px 2px; transition: transform 0.09s ease-out, opacity 0.1s; }
#cursor .c-blade { width: 40px; opacity: 0; transform: scale(0.6) rotate(-20deg); }
#cursor.mon .c-arrow { opacity: 0; transform: scale(0.6); }
#cursor.mon .c-blade { opacity: 1; transform: none; filter: drop-shadow(0 0 4px rgba(255,80,40,0.8)) drop-shadow(1px 2px 2px rgba(0,0,0,0.7)); }
#cursor.press .c-arrow { transform: scale(0.82) rotate(-6deg) translate(1px, 1px); }
#cursor.press .c-blade { transform: rotate(-28deg) scale(0.92); }
.click-fx { position: fixed; z-index: 9999; pointer-events: none; width: 0; height: 0; }
.click-fx i { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #ffd75e; box-shadow: 0 0 8px rgba(255,215,94,0.8), inset 0 0 6px rgba(255,215,94,0.6); animation: clickRing 0.45s ease-out forwards; }
.click-fx i + i { border-width: 1px; animation-delay: 0.08s; opacity: 0; }
.click-fx b { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #fff2b0; box-shadow: 0 0 6px #ffcf4a; animation: clickSpark 0.42s ease-out forwards; }
.click-fx.mon i { border-color: #ff6a3a; box-shadow: 0 0 10px rgba(255,90,40,0.9); }
.click-fx.mon b { background: #ffb08a; box-shadow: 0 0 6px #ff5a2a; }
@keyframes clickRing { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes clickSpark { from { transform: rotate(var(--a)) translateX(4px); opacity: 1; } to { transform: rotate(var(--a)) translateX(24px) scale(0.3); opacity: 0; } }

/* ---------- Khung trò chuyện trong suốt ---------- */
#chat, .dragon-ui #chat { width: 380px; bottom: 124px; }
#chat-log {
  height: 170px; padding: 8px 10px 4px; font-size: 12.5px; line-height: 1.45; background: none !important; border-radius: 0;
  -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%);
  scrollbar-width: none; transition: background 0.25s;
}
#chat-log::-webkit-scrollbar { width: 0; }
#chat:hover #chat-log, #chat:focus-within #chat-log {
  background: linear-gradient(90deg, rgba(14,7,5,0.55), rgba(14,7,5,0.15)) !important; scrollbar-width: thin; border-radius: 10px 10px 0 0;
  -webkit-mask-image: none; mask-image: none;
}
#chat:hover #chat-log::-webkit-scrollbar { width: 6px; }
.line { margin: 1px 0; padding: 1px 4px; border-radius: 4px; text-shadow: 0 1px 2px #000, 0 0 3px #000; transition: opacity 1.2s; display: flex; gap: 6px; align-items: baseline; }
.line.old { opacity: 0.35; }
#chat:hover .line.old, #chat:focus-within .line.old { opacity: 1; }
.line time { color: rgba(240,225,190,0.45); font-size: 10px; flex: none; }
.line .tag { flex: none; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 3px; border: 1px solid; line-height: 15px; }
.line .msg { flex: 1; }
.line.sys .tag, .line.good .tag { color: #e8cf8f; border-color: rgba(232,207,143,0.5); background: rgba(80,60,20,0.35); }
.line.chain .tag { color: #9fd8ff; border-color: rgba(159,216,255,0.5); background: rgba(20,50,80,0.35); }
.line.exc .tag { color: #6dff8a; border-color: rgba(109,255,138,0.5); background: rgba(20,70,30,0.35); }
.line.bad .tag { color: #ff9a8a; border-color: rgba(255,154,138,0.5); background: rgba(90,20,15,0.35); }
.line.chat .tag { color: #fff; border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.08); }
.line.chat b { color: #9fd8ff; flex: none; } .line.chat b::after { content: ':'; color: #ddd; }
.line.chat.mine b { color: var(--gold); }
.line.chat .msg { color: #fff; }
.line.chat:hover, #chat:hover .line:hover { background: rgba(255,255,255,0.05); }
#chat-input {
  height: 30px; padding: 4px 12px; font-size: 12.5px; color: #fff; border-radius: 15px;
  background: rgba(10,5,4,0.35); border: 1px solid rgba(212,169,78,0.35); backdrop-filter: blur(3px);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
#chat-input::placeholder { color: rgba(240,225,190,0.45); }
#chat-input:focus { background: rgba(14,7,5,0.8); border-color: #ffd75e; box-shadow: 0 0 12px rgba(255,215,94,0.3); }
@media (max-width: 760px) { #chat, .dragon-ui #chat { width: 280px; } #chat-log { height: 100px; } }

/* tab khung chat */
#chat-tabs { display: flex; gap: 4px; padding: 0 4px 3px; opacity: 0.75; transition: opacity 0.2s; }
#chat:hover #chat-tabs, #chat:focus-within #chat-tabs { opacity: 1; }
#chat-tabs button { position: relative; font-size: 11px; padding: 2px 10px; border-radius: 10px; color: #e8d9b8; text-shadow: 0 1px 2px #000;
  background: rgba(14,7,5,0.45); border: 1px solid rgba(212,169,78,0.3); }
#chat-tabs button:hover { border-color: rgba(255,215,94,0.7); }
#chat-tabs button.on { color: #2a1408; text-shadow: none; font-weight: 700; background: linear-gradient(#f2d47e, #b48a35); border-color: #fff0b8; }
#chat-tabs button.unread::after { content: ''; position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: #ff5a3a; box-shadow: 0 0 5px #ff5a3a; }
#chat-log[data-tab="vung"] .line:not([data-ch="vung"]), #chat-log[data-tab="he"] .line:not([data-ch="he"]), #chat-log[data-tab="so"] .line:not([data-ch="so"]) { display: none; }
/* bớt làm mờ phía trên để tin dài không bị mất nửa đầu */
#chat-log { -webkit-mask-image: linear-gradient(transparent, #000 10%); mask-image: linear-gradient(transparent, #000 10%); padding-top: 14px; }

#sound-btn { font-size: 20px; }
#sound-btn.off { opacity: 0.55; }
#menu #q-btn { font: 800 12px/1 'Be Vietnam Pro', sans-serif; color: #f2d27a; letter-spacing: 0.5px; padding-bottom: 8px; }
#menu #q-btn small { left: 0; right: 0; bottom: 3px; text-align: center; font-size: 8px; font-weight: 600; }
#menu #q-btn.dim { opacity: 0.6; color: #b9a47a; }
#menu #q-btn.on { color: #ffd75e; text-shadow: 0 0 6px rgba(255,215,94,0.6); border-color: var(--gold); }
/* chơi qua internet (máy chủ công khai): ẩn nút dev */
body.nodev #menu #dev-btn { display: none; }
#menu #dev-btn { font: 700 11px/1 'Be Vietnam Pro', sans-serif; letter-spacing: 1px; color: #b9a47a; opacity: 0.7; }
body.dev #menu #dev-btn { color: #2a1408; opacity: 1; background: linear-gradient(#9cf08a, #3f9a34); border-color: #e0ffd0; box-shadow: 0 0 10px rgba(120,255,100,0.6); }

/* ---------- Màn hình tải ---------- */
#loading { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(20,8,5,0.35), rgba(8,4,3,0.92)), var(--login-bg, none) center / cover, #120806; transition: opacity 0.4s; }
#loading.out { opacity: 0; pointer-events: none; }
.ld-box { width: min(460px, calc(100vw - 40px)); text-align: center; }
.ld-emblem { width: 110px; height: 110px; margin: 0 auto 8px; background: var(--orn-emblem) center / contain no-repeat; filter: drop-shadow(0 0 18px rgba(255,200,80,0.5)); animation: ldSpin 6s linear infinite; }
@keyframes ldSpin { 50% { transform: scale(1.06); filter: drop-shadow(0 0 28px rgba(255,210,90,0.8)); } }
.ld-title { font-family: 'Noto Serif', serif; font-size: 34px; letter-spacing: 6px; color: var(--gold); text-shadow: 0 3px 10px #000; }
.ld-text { color: #f3e6c8; margin: 6px 0 14px; text-shadow: 0 1px 4px #000; }
.ld-bar { position: relative; height: 16px; border-radius: 9px; overflow: hidden; border: 1px solid #d4a94e; background: rgba(10,5,4,0.75); box-shadow: 0 0 14px rgba(0,0,0,0.6), inset 0 2px 4px rgba(0,0,0,0.6); }
.ld-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(#f5d88a, #c89a3e 55%, #8a6420); transition: width 0.25s ease-out; box-shadow: 0 0 10px rgba(255,215,94,0.7); }
.ld-glow { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); width: 30%; animation: ldShine 1.4s linear infinite; }
@keyframes ldShine { from { transform: translateX(-120%); } to { transform: translateX(400%); } }
.ld-pct { margin-top: 6px; color: #e8cf8f; font-weight: 700; font-size: 13px; text-shadow: 0 1px 3px #000; }
.ld-tip { margin-top: 18px; color: #d8c8a8; font-size: 13px; font-style: italic; text-shadow: 0 1px 3px #000; min-height: 20px; }

/* ================= Điện thoại / máy tính bảng ================= */
html, body { overscroll-behavior: none; }
#game { touch-action: none; }
#joy, #chat-toggle { display: none; }
body.touch #joy {
  display: block; position: fixed; left: calc(6px + env(safe-area-inset-left)); bottom: 18px; width: 120px; height: 120px; border-radius: 50%; z-index: 30; touch-action: none;
  background: radial-gradient(circle, rgba(20,10,8,0.25), rgba(20,10,8,0.55)); border: 2px solid rgba(212,169,78,0.55); box-shadow: inset 0 0 18px rgba(0,0,0,0.5);
}
body.touch #joy .joy-knob {
  position: absolute; left: 34px; top: 34px; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff2c0, #d4a94e 45%, #7a5418); border: 1px solid #3a2a10; box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  transition: transform 0.08s;
}
body.touch #joy.on .joy-knob { transition: none; }
body.touch #joy.on { border-color: #ffd75e; }
body.touch #chat-toggle {
  display: block; position: fixed; left: calc(132px + env(safe-area-inset-left)); bottom: 18px; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; z-index: 30;
  background: rgba(20,10,8,0.7); border: 1px solid rgba(212,169,78,0.6); color: #fff;
}
body.touch #frame { transform: scale(0.6); transform-origin: top left; left: calc(2px + env(safe-area-inset-left)) !important; top: 2px !important; }
body.touch #topright { transform: scale(0.52); transform-origin: top right; right: calc(2px + env(safe-area-inset-right)); top: 2px; }
body.touch #tracker { transform: scale(0.72); transform-origin: top right; top: 146px; right: calc(2px + env(safe-area-inset-right)); }
body.touch #menu, body.touch.dragon-ui #menu { flex-direction: row; transform: scale(0.7); transform-origin: top right; right: calc(132px + env(safe-area-inset-right)); top: 2px; bottom: auto; gap: 4px; }
body.touch #skillbar, body.touch.dragon-ui #skillbar {
  border: none; border-image: none; background: none; filter: none; height: auto; padding: 0; gap: 5px;
  left: auto; right: calc(4px + env(safe-area-inset-right)); bottom: 16px; transform: none; flex-wrap: wrap-reverse; justify-content: flex-end; max-width: 300px;
}
body.touch #skillbar .slot { width: 54px; height: 54px; border-radius: 50%; }
body.touch #skillbar .slot .sk-name { font-size: 8px; border-radius: 0 0 27px 27px; }
body.touch #skillbar .slot .cd { border-radius: 50%; }
body.touch #chat, body.touch.dragon-ui #chat { display: none; left: calc(4px + env(safe-area-inset-left)); bottom: 146px; width: min(320px, 50vw); }
body.touch.chat-open #chat { display: block; }
body.touch #chat-log { height: 110px; }
body.touch #exp { height: 9px; border-top-width: 0.5px; } body.touch #exp-text { line-height: 9px; font-size: 7.5px; letter-spacing: 0.2px; }
/* điện thoại: thu nhỏ đồng đều cả bảng (chữ, nút, icon); kích thước khung chia lại cho hệ số zoom để vẫn vừa màn hình */
body.touch .panel { --pz: 0.74; zoom: var(--pz); top: calc(8px / var(--pz)); max-height: calc((100vh - 18px) / var(--pz)); width: min(640px, calc((100vw - 20px) / var(--pz))); }
body.touch .gdlg { zoom: 0.8; }
body.touch .dragon-ui .panel::before, body.touch .panel::before { height: 48px; }
body.touch #banner { top: 22%; }
body.touch #banner .b-name { font-size: 18px; }
body.touch #banner .b-lv { font-size: 11px; }
/* thông báo hệ thống nhỏ gọn trên điện thoại */
body.touch #toasts { top: 52px; gap: 3px; }
body.touch .toast { font-size: 10px; padding: 2px 9px; border-radius: 6px; font-weight: 600; max-width: 60vw; text-align: center; }
body.touch #chat-log { font-size: 11px; }
body.touch .gdlg-btns .btn { min-height: 42px; }
body.touch .btn { min-height: 34px; }
body.touch #cursor { display: none; }
/* màn đăng nhập trên màn hình thấp (điện thoại xoay ngang) */
@media (max-height: 520px) {
  #login { align-items: start; overflow-y: auto; }
  .login-box { padding: 14px 18px; }
  .dragon-ui .login-box { padding-top: 26px; }
  .dragon-ui .login-box h1::before { width: 54px; height: 54px; }
  .login-box h1 { font-size: 28px; }
  .classes { margin: 8px 0; }
  .cls canvas { width: 70px; height: 70px; }
  .ld-emblem { width: 70px; height: 70px; }
}
/* điện thoại dựng đứng: gợi ý xoay ngang */
#rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 600px) {
  body.touch.playing #rotate-hint { display: grid; position: fixed; inset: 0; z-index: 900; place-items: center; text-align: center; padding: 30px;
    background: rgba(10,5,4,0.92); color: #f3e6c8; font-size: 18px; }
}
/* màn đăng nhập trên máy tính cửa sổ thấp: thu gọn hộp cho vừa, và luôn cuộn được thay vì bị lẹm khung */
#login { overflow-y: auto; place-items: safe center; }
@media (min-height: 521px) and (max-height: 760px) {
  #login { padding: 22px 16px 10px; }
  .dragon-ui .login-box { padding: 34px 26px 16px; }
  .dragon-ui .login-box h1::before { width: 62px; height: 62px; margin-bottom: 2px; }
  .login-box h1 { font-size: 32px; }
  .login-box .sub { margin: 4px 0 10px; }
  .classes { margin: 10px 0; }
  .cls { padding: 6px; }
  .cls canvas { width: 64px; height: 64px; }
  .login-box .tip { margin: 8px 0 0; }
}
@media (min-height: 521px) and (max-height: 620px) {
  .cls small, .login-box .tip { display: none; }
  .dragon-ui .login-box h1::before { width: 48px; height: 48px; }
  .login-box h1 { font-size: 28px; }
}
#cls-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 58; }
/* nút toàn màn hình + gợi ý iPhone ở màn đăng nhập */
.fs-btn { position: fixed; top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); z-index: 60; width: 40px; height: 40px; border-radius: 8px;
  background: rgba(20,10,8,0.75); border: 1px solid var(--gold); color: var(--gold); font-size: 22px; line-height: 1; }
.ios-tip { margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: rgba(255,215,94,0.1); border: 1px solid rgba(212,169,78,0.4); color: #f3e6c8; font-size: 12px; }
/* điện thoại: màn đăng nhập phủ kín màn hình (không còn hộp nhỏ giữa nền) */
@media (max-height: 520px) {
  #login { padding: 0; place-items: stretch; align-items: stretch; }
  .login-box { width: 100% !important; max-width: none; min-height: 100%; border-radius: 0; border-left: none; border-right: none; border-top: none; border-bottom: none;
    display: flex; flex-direction: column; justify-content: center; padding: 14px calc(24px + env(safe-area-inset-right)) 14px calc(24px + env(safe-area-inset-left)) !important;
    background: radial-gradient(ellipse at center, rgba(18,9,8,0.55), rgba(10,5,4,0.25)) !important; backdrop-filter: none; box-shadow: none; }
  .login-box > .btn, .login-box .continue .btn { align-self: center; width: auto; min-width: 200px; }
  /* khung rồng phủ theo mép màn hình: viền vàng kép + 4 góc rồng mây + đôi rồng chầu trên đầu */
  .dragon-ui .login-box { padding-top: 40px !important; }
  .dragon-ui .login-box::after { inset: 4px; z-index: 2;
    background: var(--c-tl) top left / 58px no-repeat, var(--c-tr) top right / 58px no-repeat,
                var(--c-bl) bottom left / 58px no-repeat, var(--c-br) bottom right / 58px no-repeat;
    border: 2px solid rgba(212,169,78,0.85); border-radius: 6px;
    box-shadow: inset 0 0 0 4px rgba(20,10,8,0.6), inset 0 0 0 5px rgba(212,169,78,0.35), inset 0 0 40px rgba(0,0,0,0.5); }
  .fs-btn { top: calc(16px + env(safe-area-inset-top)); right: calc(20px + env(safe-area-inset-right)); width: 34px; height: 34px; font-size: 18px; }
  .dragon-ui .login-box::before { top: 2px; height: 46px; width: min(320px, 50%); transform: translateX(-50%); }
  .login-box .classes { max-width: 760px; margin-left: auto; margin-right: auto; width: 100%; }
  .login-box #inp-name, .login-box .continue { max-width: 760px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; }
}
@media (max-height: 520px) {
  .login-box { width: min(620px, 100%); }
  .login-box .sub, .login-box .tip, .cls small { display: none; }
  .login-box h1 span { display: inline; font-size: 0.5em; margin-left: 8px; }
  .dragon-ui .login-box h1::before { display: none; }
  .classes { gap: 6px; }
  .cls { flex-direction: row; padding: 4px 8px; justify-content: center; }
  .cls canvas { width: 56px; height: 56px; }
  #inp-name { padding: 7px; }
  .continue { padding: 6px 10px; }
  .or { margin: 6px 0; }
}

/* ---------- Sổ nhiệm vụ: lọc chương · Đố sử · Sử Ký ---------- */
.ph-btns { display: inline-flex; align-items: center; gap: 8px; }
.ph-btns .btn.sm { font-family: 'Be Vietnam Pro', sans-serif; font-size: 12px; padding: 3px 10px; }
.q-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.q-tabs .btn.on { background: linear-gradient(#e8c060, #b88a2c); color: #2a1408; border-color: #ffe39a; }
.quest.quiz .qz-q { margin: 8px 0; font-size: 15px; line-height: 1.5; color: #fff3d6; }
.quest.quiz .qz-n { display: inline-block; font-size: 11px; padding: 1px 8px; margin-right: 6px; border-radius: 10px; background: rgba(212,169,78,0.2); border: 1px solid var(--gold-soft); color: var(--gold); }
.quest.quiz .qz-a { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.quest.quiz .qz-btn { text-align: left; white-space: normal; line-height: 1.35; padding: 7px 10px; }
.quest.quiz .qz-btn.bad { border-color: #c55; background: rgba(160,40,30,0.35); }
.quest.quiz .qz-ok { margin: 4px 0; padding: 6px 8px; border-radius: 6px; background: rgba(60,140,60,0.18); border: 1px solid rgba(110,200,110,0.4); color: #c9f5c9; font-size: 13px; line-height: 1.5; }
.quest.quiz .qz-hint { margin: 4px 0; padding: 6px 8px; border-radius: 6px; background: rgba(160,40,20,0.2); border: 1px solid rgba(255,120,90,0.4); color: #ffd2c4; font-size: 13px; line-height: 1.5; }
@media (max-width: 560px) { .quest.quiz .qz-a { grid-template-columns: 1fr; } }
.lore { position: relative; padding: 8px 10px 8px 14px; margin: 0 0 8px; border-left: 3px solid var(--gold); background: rgba(0,0,0,0.22); border-radius: 0 8px 8px 0; }
.lore::before { content: ''; position: absolute; left: -7px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(255,215,94,0.6); }
.lore .lore-when { display: block; font-size: 11px; letter-spacing: 0.5px; color: var(--gold); text-transform: uppercase; }
.lore b { font-family: 'Noto Serif', serif; font-size: 15px; color: #fff0c8; }
.lore p { margin: 4px 0; font-size: 13px; line-height: 1.6; color: #f0e2c4; }
.lore small { color: var(--muted); } .lore small.ok { color: #9be39b; }
.lore.locked { border-left-color: #6b5a3c; opacity: 0.7; }
.lore.locked::before { background: #6b5a3c; box-shadow: none; }

/* ================= Bảng kiểu tờ giấy dó cũ (sử thư) ================= */
/* Nền giấy dó ố vàng, mép sẫm như giấy cũ; chữ mực nâu đen, tiêu đề son đỏ; giữ khung rồng mây có sẵn */
.panel {
  --text: #2e1d10; --muted: #6b5233; --gold: #8a5a1c; --gold-soft: rgba(110, 70, 25, 0.35);
  --lacquer2: rgba(120, 82, 36, 0.10); --exc: #1d7a2e; --jewel: #7a3fb8; --ink-red: #9a2418;
  color: var(--text);
  background: radial-gradient(ellipse at center, rgba(255, 248, 225, 0.25) 40%, rgba(120, 78, 30, 0.28) 100%), url(/assets/ui/paper.webp) center / cover, #e9dcae;
  border: none; border-radius: 3px;
  box-shadow: inset 0 0 26px rgba(110, 66, 20, 0.45), inset 0 0 3px rgba(80, 45, 10, 0.6), 0 14px 40px rgba(0, 0, 0, 0.6);
  margin-top: 14px; overflow: visible;
}
.panel > * { position: relative; }
.p-head { color: var(--ink-red); background: none; border-bottom: 1px solid rgba(120, 70, 20, 0.35); font-weight: 700; letter-spacing: 0.5px; padding-top: 14px; }
.panel .p-close { color: #6b4a2a; }
.panel .p-top { border-bottom-color: rgba(120, 70, 20, 0.3); box-shadow: 0 6px 8px -7px rgba(80, 45, 10, 0.45); }
.panel .p-bot { border-top-color: rgba(120, 70, 20, 0.3); padding-bottom: 14px; }
.panel h4, .panel .ch-name { color: var(--ink-red); }
.panel hr { border-top-color: rgba(120, 70, 20, 0.3); }
.panel .note, .panel .statline { color: var(--muted); }
.panel code { color: #7a3a10; }
/* nút trên giấy: như con dấu son */
.panel .btn { background: linear-gradient(#a8402a, #7a2414); color: #fff3d8; border-color: #5e1a10; }
.panel .btn.gold { background: linear-gradient(#e3bf68, #b48a35); color: #2a1408; border-color: #8a6220; }
/* ô đồ: khung mực mảnh trên giấy */
.panel .item { background: rgba(255, 250, 230, 0.35); border-color: rgba(110, 70, 25, 0.4); color: var(--text); }
.panel .item:hover { border-color: #8a5a1c; background: rgba(255, 250, 230, 0.6); }
.panel .item[data-sel] { background: rgba(212, 169, 78, 0.35); border-color: #8a5a1c; box-shadow: 0 0 6px rgba(138, 90, 28, 0.5); }
.panel .item.high .nm { color: #1a5f8a; } .panel .item.potion .nm { color: #3f6e22; }
.panel .item.bad { color: #a01818; border-color: #a01818; }
.panel .item img.ic { filter: drop-shadow(0 2px 2px rgba(60, 35, 10, 0.45)); }
.panel .eslot { background: rgba(110, 70, 25, 0.10); border-color: rgba(110, 70, 25, 0.45); }
.panel .stat, .panel .shop-row, .panel .qlog { border-bottom-color: rgba(110, 70, 25, 0.2); }
.panel .plus { background: var(--ink-red); border-color: #5e1a10; }
.panel .block, .panel .bulk, .panel .mining, .panel .trade-cols > div { background: rgba(110, 70, 25, 0.10); border-color: rgba(110, 70, 25, 0.3); color: var(--text); }
.panel .mining, .panel .gold-t, .panel .tx i { color: #8a5a00; }
.panel .ok { color: #1d7a2e; } .panel .fail, .panel .warn { color: #a01818; }
.panel .tx.pending { border-left-color: #1a5f8a; }
.panel .quest { background: rgba(255, 250, 230, 0.3); border-color: rgba(110, 70, 25, 0.35); }
.panel .q-text { color: #3a2614; } .panel .q-text.done { color: #2e6a1e; }
.panel .q-prog { color: #1a5f8a; }
.panel .qlog.done summary small { color: #2e6a1e; } .panel .qlog.ready summary small { color: #8a5a00; }
.panel .q-ch.side { background: #4a6a3a; }
.panel .empty-note { color: var(--muted); }
.panel input, .panel select, .panel textarea { background: rgba(255, 250, 230, 0.6); color: var(--text); border: 1px solid rgba(110, 70, 25, 0.45); }
.panel ::-webkit-scrollbar-thumb { background: #a07a40; }
.panel * { scrollbar-color: #a07a40 rgba(110, 70, 25, 0.12); }
/* Sử Ký trên giấy: mỗi trang như một mục ghi chép, chấm son bên lề */
.panel .lore { background: rgba(255, 250, 230, 0.28); border-left-color: var(--ink-red); }
.panel .lore::before { background: var(--ink-red); box-shadow: none; }
.panel .lore .lore-when { color: var(--ink-red); }
.panel .lore b { color: #2a1608; }
.panel .lore p { color: #3a2614; }
.panel .lore small.ok { color: #1d7a2e; }
.panel .lore.locked { background: rgba(110, 70, 25, 0.06); border-left-color: rgba(110, 70, 25, 0.4); opacity: 0.75; }
.panel .lore.locked::before { background: rgba(110, 70, 25, 0.45); }

/* Khung nhân vật & khung bản đồ nhỏ: cùng bộ giấy dó với các bảng */
#topright, .dragon-ui #topright, .dragon-ui .fr-panel {
  --text: #2e1d10; --muted: #6b5233; --gold: #8a5a1c;
  color: var(--text);
  background: radial-gradient(ellipse at center, rgba(255, 248, 225, 0.2) 35%, rgba(120, 78, 30, 0.32) 100%), url(/assets/ui/paper.webp) center / 360px, #e9dcae;
  border: 1px solid #7a2414;
  box-shadow: inset 0 0 18px rgba(110, 66, 20, 0.45), 0 0 0 2px rgba(168, 64, 42, 0.55), 0 6px 16px rgba(0, 0, 0, 0.5);
}
.dragon-ui .fr-panel { border-left: none; }
#region-name { color: #9a2418; font-weight: 700; letter-spacing: 0.5px; }
.dragon-ui #frame-name { color: #9a2418; text-shadow: none; }
.dragon-ui #frame-lv, #coords, #net-info { color: #6b5233; }
#net-info b, #net-info strong { color: #2e1d10; }
#minimap { filter: drop-shadow(0 2px 3px rgba(80, 45, 10, 0.45)); }
.dragon-ui .fr-panel #gold, #frame #gold { color: #8a5a00; font-weight: 700; }
.dragon-ui .fr-panel .bar span, #frame .bar span { color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }

/* Dễ đọc trên giấy: mực đậm hơn, nét chữ dày vừa, cỡ chữ lớn hơn */
.panel, #topright, .dragon-ui #topright, .dragon-ui .fr-panel { --text: #1e1309; --muted: #4f3a22; }
.panel { font-weight: 500; font-size: 14px; letter-spacing: 0.1px; }
.panel .p-head { font-size: 19px; }
.panel h4 { font-size: 14.5px; font-family: 'Noto Serif', serif; }
.panel .note, .panel .statline, .panel .empty-note { font-size: 13px; }
.panel .item { font-size: 12.5px; font-weight: 600; }
.panel .stat, .panel .shop-row { font-size: 14px; }
.panel .block, .panel .tx { font-size: 13px; }
.panel .q-text { font-style: normal; font-size: 14.5px; }
.panel .q-prog { font-size: 14px; font-weight: 600; }
.panel .qlog summary small, .panel .q-ch { font-size: 11.5px; }
.panel .lore p { font-size: 14.5px; }
.panel .lore .lore-when { font-size: 12px; font-weight: 700; }
.panel .lore b { font-size: 16px; }
.panel .btn { font-weight: 600; }
#topright { font-weight: 500; }
#region-name { font-size: 16px; }
#coords, #net-info { font-size: 12.5px; }
.dragon-ui #frame-lv { font-weight: 500; font-size: 13px; }
.panel .qlog.locked { opacity: 0.78; }
.panel .locked-row { opacity: 0.8; }
.panel .qlog summary small { font-size: 12.5px; }
.panel .lore small { font-size: 13px; }
.panel .lore.locked { opacity: 0.88; }

/* ================= Màn đăng nhập: giấy dó + 2 tab ================= */
.login-box, .dragon-ui .login-box {
  --text: #1e1309; --muted: #4f3a22; --gold: #8a5a1c; --gold-soft: rgba(110, 70, 25, 0.35); --lacquer2: rgba(255, 250, 230, 0.35);
  color: var(--text); font-weight: 500;
  background: radial-gradient(ellipse at center, rgba(255, 248, 225, 0.25) 40%, rgba(120, 78, 30, 0.3) 100%), url(/assets/ui/paper.webp) center / cover, #e9dcae;
  border: none; border-radius: 3px; backdrop-filter: none;
  box-shadow: inset 0 0 30px rgba(110, 66, 20, 0.5), inset 0 0 3px rgba(80, 45, 10, 0.6), 0 16px 50px rgba(0, 0, 0, 0.7);
}
.login-box h1 { color: #9a2418; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6); }
.login-box h1 span { color: #2e1d10; }
.login-box .sub, .login-box .tip, .login-box .or { color: var(--muted); }
.login-box code { color: #7a3a10; }
.login-box .btn { background: linear-gradient(#a8402a, #7a2414); color: #fff3d8; border-color: #5e1a10; font-weight: 600; }
.login-box .btn.gold { background: linear-gradient(#e3bf68, #b48a35); color: #2a1408; border-color: #8a6220; }
.login-box #inp-name { background: rgba(255, 250, 230, 0.7); color: var(--text); border: 1px solid rgba(110, 70, 25, 0.5); font-weight: 600; caret-color: #9a2418; }
.login-box #inp-name:focus { border-color: #9a2418; box-shadow: 0 0 8px rgba(154, 36, 24, 0.3); }
.login-box #inp-name::placeholder { color: #8a7050; }
.login-box .cls { background: rgba(255, 250, 230, 0.35); border-color: rgba(110, 70, 25, 0.4); }
.login-box .cls.sel { border-color: #9a2418; box-shadow: 0 0 0 1px #9a2418, 0 4px 12px rgba(120, 40, 20, 0.25); background: rgba(255, 245, 215, 0.6); }
.login-box .cls b { color: #9a2418; font-family: 'Noto Serif', serif; }
.login-box .cls small { color: var(--muted); font-size: 12px; }
/* tab */
.lg-tabs { display: flex; justify-content: center; gap: 0; margin: 14px 0 12px; border-bottom: 2px solid rgba(110, 70, 25, 0.35); }
.lg-tab { background: none; border: none; padding: 7px 18px 6px; font: 700 15px 'Noto Serif', serif; color: #7a6040; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.lg-tab.on { color: #9a2418; border-bottom-color: #9a2418; }
.lg-tab:hover:not(.on) { color: #4a3018; }
/* thẻ nhân vật hiện tại */
.lg-char { display: flex; align-items: center; gap: 14px; text-align: left; }
#lg-hero { width: 165px; height: 180px; flex: none; }
.lg-info { flex: 1; min-width: 0; }
.lg-name { font: 700 24px 'Noto Serif', serif; color: #9a2418; line-height: 1.15; }
.lg-sub { color: var(--muted); margin: 2px 0 8px; font-size: 14px; }
.lg-sub b { color: var(--text); }
.lg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; font-size: 13px; color: var(--muted); padding: 6px 0; border-top: 1px solid rgba(110, 70, 25, 0.25); border-bottom: 1px solid rgba(110, 70, 25, 0.25); }
.lg-stats span { display: flex; justify-content: space-between; }
.lg-stats b { color: var(--text); }
.lg-stats .gold-t { color: #8a5a00; }
.lg-eq { margin-top: 8px; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.login-box .eslot { min-height: 52px; background: rgba(110, 70, 25, 0.08); border-color: rgba(110, 70, 25, 0.45); }
.login-box .eslot .item { background: none; border: none; padding: 2px; color: var(--text); font-size: 11px; font-weight: 600; }
.login-box .eslot .item img.ic { width: 32px; height: 32px; filter: drop-shadow(0 2px 2px rgba(60, 35, 10, 0.45)); }
.login-box .eslot .empty { color: #8a7050; font-size: 10.5px; }
.lg-go { margin-top: 14px !important; min-width: 220px; font-size: 16px !important; padding: 9px 20px !important; }
@media (max-width: 520px) { .lg-char { flex-direction: column; text-align: center; } .lg-eq { grid-template-columns: repeat(3, 1fr); } }
@media (max-height: 520px) { #lg-hero { width: 120px; height: 130px; } .lg-name { font-size: 20px; } .lg-tabs { margin: 6px 0 8px; } .lg-go { margin-top: 8px !important; } }
/* điện thoại (đăng nhập phủ kín màn hình): cũng là tờ giấy dó */
@media (max-height: 520px) {
  .login-box, .dragon-ui .login-box {
    background: radial-gradient(ellipse at center, rgba(255, 248, 225, 0.2) 45%, rgba(120, 78, 30, 0.35) 100%), url(/assets/ui/paper.webp) center / cover, #e9dcae !important;
    box-shadow: inset 0 0 40px rgba(110, 66, 20, 0.5) !important;
  }
  .lg-char { gap: 10px; }
}
.login-box .ios-tip { background: rgba(154, 36, 24, 0.08); border-color: rgba(154, 36, 24, 0.35); color: #3a2614; }

/* khung theo dõi nhiệm vụ: nằm bên trái cột nút (không bị đè), cùng kiểu giấy dó */
body:not(.touch) #tracker { right: 66px; }
#tracker {
  --text: #1e1309; --muted: #4f3a22; color: var(--text); font-weight: 500;
  background: radial-gradient(ellipse at center, rgba(255, 248, 225, 0.2) 35%, rgba(120, 78, 30, 0.3) 100%), url(/assets/ui/paper.webp) center / 300px, #e9dcae;
  border: 1px solid #7a2414; border-radius: 3px; box-shadow: inset 0 0 14px rgba(110, 66, 20, 0.4), 0 4px 12px rgba(0, 0, 0, 0.45);
}
#tracker .tr-q span { color: #1a5f8a; } #tracker .tr-q.ready span { color: #8a5a00; }
#tracker .tr-q.nav { background: rgba(26, 95, 138, 0.1); outline: 1px solid rgba(26, 95, 138, 0.45); }
#tracker .tr-q.nav span { color: #1a5f8a; }
#tracker .tr-q:hover { background: rgba(138, 90, 28, 0.12); }
#tracker .tr-q b { color: #1e1309; }
#tracker .tr-h { color: #9a2418; font-weight: 700; }
/* điểm tiềm năng chưa cộng: nhãn nhỏ cạnh tên phái (không làm khung nhân vật xuống dòng) */
#frame-lv { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pts-badge { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 8px; background: #9a2418; color: #fff3d8; font-size: 11px; font-weight: 700; line-height: 16px; vertical-align: 1px; animation: ptsGlow 1.6s ease-in-out infinite; cursor: pointer; }
@keyframes ptsGlow { 50% { box-shadow: 0 0 6px rgba(154, 36, 24, 0.7); } }

/* đố sử trên giấy: câu hỏi mực đậm, gợi ý/đáp đúng dễ đọc */
.panel .quest.quiz .qz-q { color: #1e1309; font-weight: 600; }
.panel .quest.quiz .qz-n { background: rgba(154, 36, 24, 0.1); border-color: rgba(154, 36, 24, 0.4); color: #9a2418; font-weight: 700; }
.panel .quest.quiz .qz-btn.bad { background: rgba(160, 40, 30, 0.12); border-color: #a01818; color: #a01818; text-decoration: line-through; }
.panel .quest.quiz .qz-hint { background: rgba(160, 40, 20, 0.08); border-color: rgba(160, 40, 20, 0.4); color: #6e1a10; }
.panel .quest.quiz .qz-ok { background: rgba(40, 120, 40, 0.1); border-color: rgba(40, 120, 40, 0.4); color: #1d5a1d; }
/* thông báo nổi: dưới giữa màn hình (không che tiêu đề các bảng) */
#toasts { top: auto; bottom: 118px; flex-direction: column-reverse; }
body.touch #toasts { top: auto; bottom: 64px; }

/* hộp thoại chung (thông báo, xác nhận, lời kết): tờ giấy dó như các bảng */
.gdlg {
  background: radial-gradient(ellipse at center, rgba(255, 248, 225, 0.25) 40%, rgba(120, 78, 30, 0.3) 100%), url(/assets/ui/paper.webp) center / cover, #e9dcae;
  border: none; border-radius: 3px;
  box-shadow: inset 0 0 26px rgba(110, 66, 20, 0.45), inset 0 0 3px rgba(80, 45, 10, 0.6), 0 14px 50px rgba(0, 0, 0, 0.7);
}
.gdlg-title { color: #9a2418; text-shadow: none; font-weight: 700; }
.gdlg-text { color: #1e1309; font-weight: 500; }
.gdlg-warn { color: #6e1a10; background: rgba(160, 40, 20, 0.08); border-color: rgba(160, 40, 20, 0.4); }
.gdlg .btn { background: linear-gradient(#a8402a, #7a2414); color: #fff3d8; border-color: #5e1a10; font-weight: 600; }
.gdlg .btn.gold { background: linear-gradient(#e3bf68, #b48a35); color: #2a1408; border-color: #8a6220; }
.gdlg.danger { box-shadow: inset 0 0 26px rgba(140, 30, 20, 0.5), 0 0 0 2px #a01818, 0 14px 50px rgba(0, 0, 0, 0.7); }
#tracker .tr-home { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(110, 70, 25, 0.25); font-size: 11.5px; color: #6b4a2a; cursor: pointer; text-align: right; }
#tracker .tr-home:hover { color: #9a2418; }
/* bản đồ lớn: phóng to / kéo / bấm để tự đi */
.bm-wrap { position: relative; }
.worldmap #bigmap { cursor: crosshair; touch-action: none; }
.bm-ctl { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; }
.bm-ctl button { width: 32px; height: 32px; border-radius: 6px; border: 1px solid #5e1a10; background: linear-gradient(#a8402a, #7a2414); color: #fff3d8; font: 700 18px/1 'Be Vietnam Pro', sans-serif; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
.bm-ctl button:hover { filter: brightness(1.15); }

/* ================= Hành trang kiểu MU ================= */
/* đồ đang mặc: ô đặt đúng chỗ trên người, hình nhân vật mờ phía sau */
.doll { position: relative; height: 300px; margin: 2px auto 6px; max-width: 420px; }
.doll-hero { position: absolute; left: 50%; top: 4px; width: 200px; height: 220px; transform: translateX(-50%); opacity: 0.5; pointer-events: none; filter: sepia(0.35) contrast(0.9); }
.doll .eslot { position: absolute; transform: translateX(-50%); min-height: 0; width: 60px; height: 60px; padding: 0; border-radius: 6px; display: grid; place-items: center; }
.doll .es-helm { left: 50%; top: 0; }
.doll .es-amulet { left: calc(50% + 62px); top: 48px; width: 50px; height: 50px; }
.doll .es-armor { left: 50%; top: 92px; width: 76px; height: 88px; }
.doll .es-weapon { left: calc(50% - 132px); top: 70px; width: 66px; height: 128px; }
.doll .es-ring { left: calc(50% + 100px); top: 134px; width: 50px; height: 50px; }
.doll .es-boots { left: 50%; top: 214px; width: 66px; height: 62px; }
.doll .eslot .empty { font-size: 10px; line-height: 1.1; text-align: center; position: absolute; bottom: 3px; left: 0; right: 0; }
.doll .eslot .sl-ghost { width: 60%; height: 60%; object-fit: contain; opacity: 0.35; }
.doll .eslot.on { border-style: solid; background: rgba(255, 245, 215, 0.55); box-shadow: inset 0 0 8px rgba(138, 90, 28, 0.35); }
.doll .eslot .item { width: 100%; height: 100%; padding: 2px; justify-content: center; background: none; border: none; }
.doll .eslot .item .nm { display: none; }
.doll .eslot .item img.ic { width: 82%; height: 82%; max-height: 100%; }
.doll .es-weapon .item img.ic { width: 90%; height: 92%; }
.doll .eslot.exc-on, .doll .eslot:has(.item.exc) { box-shadow: 0 0 10px rgba(29, 122, 46, 0.6), inset 0 0 8px rgba(29, 122, 46, 0.35); border-color: #1d7a2e; }

/* đồ chưa mặc: ô nhỏ chỉ có hình (rê chuột / chạm để xem tên) */
.grid.bag { grid-template-columns: repeat(auto-fill, 52px); gap: 5px; justify-content: start; }
.grid.bag .item { width: 52px; height: 52px; padding: 3px; justify-content: center; gap: 0; border-radius: 6px; }
.grid.bag .item .nm { display: none; }
.grid.bag .item img.ic { width: 40px; height: 40px; }
.grid.bag .item .qty { left: auto; right: 2px; top: auto; bottom: 2px; padding: 1px 4px; font-size: 10px; }
.grid.bag .item .pd { right: 2px; top: 1px; font-size: 9px; }
.grid.bag .item.exc { box-shadow: 0 0 6px rgba(29, 122, 46, 0.55); border-color: #1d7a2e; }
.grid.bag .item.jewel { border-color: #7a3fb8; }
.grid.bag .item.high { border-color: #1a5f8a; }
.grid.bag .item[data-sel]::after { left: 2px; top: 2px; width: 14px; height: 14px; font-size: 10px; }
/* màn hình thấp (điện thoại xoay ngang): trang bị bên trái, túi đồ bên phải */
@media (max-height: 520px) {
  .p-body.split:has(.doll) { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; }
  .p-body.split:has(.doll) > .p-top { grid-row: 1; grid-column: 1; border-bottom: none; border-right: 1px solid rgba(120, 70, 20, 0.3); box-shadow: none; width: 300px; }
  .p-body.split:has(.doll) > .p-list { grid-row: 1; grid-column: 2; }
  .p-body.split:has(.doll) > .p-bot { grid-row: 2; grid-column: 1 / -1; }
  .doll { zoom: 0.82; }
}

/* ================= Hòm đồ bằng gỗ (thay giấy dó), trang bị trái – túi đồ phải ================= */
.panel:has(.doll) {
  --text: #f3e6c8; --muted: #cdb68e; --gold: #d4a94e; --ink-red: #f0c860; --gold-soft: rgba(212, 169, 78, 0.4);
  color: var(--text);
  background: radial-gradient(ellipse at center, rgba(255, 200, 140, 0.08) 30%, rgba(20, 8, 2, 0.45) 100%), url(/assets/ui/wood.webp) center / cover, #4a1f10;
  box-shadow: inset 0 0 0 2px #b08a3e, inset 0 0 0 4px rgba(40, 18, 6, 0.8), inset 0 0 30px rgba(10, 4, 0, 0.6), 0 14px 40px rgba(0, 0, 0, 0.7);
  width: min(720px, calc(100vw - 32px));
}
.panel:has(.doll) .p-head { color: #f0c860; border-bottom-color: rgba(212, 169, 78, 0.35); text-shadow: 0 1px 2px #000; }
.panel:has(.doll) .p-close { color: #e8d5a8; }
.panel:has(.doll) .note, .panel:has(.doll) .statline { color: #e0cc9f; text-shadow: 0 1px 1px #000; }
.panel:has(.doll) .p-top, .panel:has(.doll) .p-bot { border-color: rgba(212, 169, 78, 0.3); }
/* hốc gỗ khoét sâu cho ô trang bị */
.panel:has(.doll) .doll .eslot { background: rgba(15, 6, 2, 0.5); border: 1px solid rgba(212, 169, 78, 0.55); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7); }
.panel:has(.doll) .doll .eslot.on { background: rgba(30, 14, 6, 0.55); border-style: solid; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 6px rgba(212, 169, 78, 0.35); }
.panel:has(.doll) .doll .eslot .empty { color: #bfa77a; }
.panel:has(.doll) .doll .eslot .sl-ghost { opacity: 0.4; filter: brightness(1.8); }
.panel:has(.doll) .doll-hero { opacity: 0.4; filter: sepia(0.6) brightness(1.3); }
/* túi đồ: ô nhỏ 40px, hốc tối */
.panel:has(.doll) .grid.bag { grid-template-columns: repeat(auto-fill, 40px); gap: 4px; }
.panel:has(.doll) .grid.bag .item { width: 40px; height: 40px; padding: 2px; background: rgba(15, 6, 2, 0.5); border: 1px solid rgba(212, 169, 78, 0.4); box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.65); color: var(--text); }
.panel:has(.doll) .grid.bag .item:hover { border-color: #f0c860; background: rgba(60, 30, 10, 0.6); }
.panel:has(.doll) .grid.bag .item img.ic { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)); }
.panel:has(.doll) .grid.bag .item .qty { font-size: 9px; padding: 0 3px; }
.panel:has(.doll) .grid.bag .item.exc { border-color: #5dff7a; box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.6), 0 0 6px rgba(93, 255, 122, 0.45); }
.panel:has(.doll) .grid.bag .item.jewel { border-color: #c99bff; }
.panel:has(.doll) .grid.bag .item.high { border-color: #7fe0ff; }
.panel:has(.doll) .grid.bag .item[data-sel] { background: rgba(212, 169, 78, 0.35); border-color: #f0c860; }
.panel:has(.doll) .empty-note { color: #cdb68e; }
.panel:has(.doll) .bulk { background: rgba(15, 6, 2, 0.45); border-color: rgba(212, 169, 78, 0.4); color: var(--text); }
/* luôn chia ngang: trang bị bên trái, túi đồ bên phải */
.p-body.split:has(.doll) { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; }
.p-body.split:has(.doll) > .p-top { grid-row: 1; grid-column: 1; border-bottom: none; border-right: 1px solid rgba(212, 169, 78, 0.3); box-shadow: none; width: 320px; }
.p-body.split:has(.doll) > .p-list { grid-row: 1; grid-column: 2; padding-top: 12px; }
.p-body.split:has(.doll) > .p-bot { grid-row: 2; grid-column: 1 / -1; }
@media (max-width: 600px) { .p-body.split:has(.doll) { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; } .p-body.split:has(.doll) > .p-top { width: auto; border-right: none; } .p-body.split:has(.doll) > .p-list { grid-row: 2; grid-column: 1; } .p-body.split:has(.doll) > .p-bot { grid-row: 3; } }
.doll .es-weapon { left: calc(50% - 98px); }
.doll .es-ring { left: calc(50% + 92px); }
.doll .es-amulet { left: calc(50% + 58px); }
.p-body.split:has(.doll) > .p-top { width: 330px; }

/* ô đồ đang mặc: lưới gọn 3 cột kiểu MU (bùa – mũ – nhẫn / vũ khí – áo / giày) */
.doll { display: grid; grid-template-columns: 62px 76px 62px; grid-template-rows: 62px 80px 60px; gap: 7px; justify-content: center; align-content: start; height: auto; padding: 4px 0 2px; max-width: none; }
.doll .eslot { position: relative; left: auto !important; top: auto !important; transform: none; width: auto !important; height: auto !important; }
.doll .es-amulet { grid-column: 1; grid-row: 1; width: 50px !important; height: 50px !important; justify-self: end; align-self: end; }
.doll .es-helm { grid-column: 2; grid-row: 1; }
.doll .es-ring { grid-column: 3; grid-row: 1; width: 50px !important; height: 50px !important; justify-self: start; align-self: end; }
.doll .es-weapon { grid-column: 1; grid-row: 2 / 4; }
.doll .es-armor { grid-column: 2; grid-row: 2; }
.doll .es-boots { grid-column: 2; grid-row: 3; }
.doll-hero { top: -6px; width: 170px; height: 190px; opacity: 0.32; z-index: 0; }
.doll .eslot { z-index: 1; }
.p-body.split:has(.doll) > .p-top { width: 290px; }
/* menu thao tác vật phẩm (Trang bị, Nâng cấp, Bán…) luôn nằm trên bảng thuộc tính */
#ctxmenu { z-index: 75; }

/* ---------- Bảng chọn khu: 20 khu xếp hàng ngang ---------- */
.khu-line { display: flex; align-items: center; gap: 6px; }
.khu-btn { font: inherit; font-size: 11px; line-height: 1.5; padding: 0 8px; border-radius: 4px; border: 1px solid #8a5a2b; background: #f3e2b8; color: #5a3415; cursor: pointer; pointer-events: auto; }
.khu-btn:hover { background: #ffe9a8; }
.panel:has(.khu-list), body.touch .panel:has(.khu-list) { width: min(340px, calc(100vw - 32px)); }
.khu-intro { margin: 0 0 8px; font-size: 12px; opacity: .8; }
.khu-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.khu-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 7px; border-radius: 6px; cursor: pointer; font: inherit;
  background: rgba(255, 244, 214, .55); border: 1px solid rgba(138, 90, 43, .45); color: #4a2a10; }
.khu-cell b { font-size: 15px; line-height: 1; }
.khu-cell:hover:not(:disabled) { background: #ffe9a8; border-color: #b8862f; }
.khu-cell:disabled { cursor: default; }
.khu-cell.here { background: #c8963c; border: 2px solid #7a4a12; color: #fff8e6; box-shadow: 0 0 6px rgba(200, 150, 60, .7); }
.khu-cell .khu-bar { width: 80%; height: 4px; background: rgba(90, 52, 21, .18); border-radius: 2px; overflow: hidden; }
.khu-cell .khu-bar i { display: block; height: 100%; }
.khu-cell.busy .khu-bar i { background: #b03a2e; } .khu-cell.mid .khu-bar i { background: #c8a03c; } .khu-cell.calm .khu-bar i { background: #6b8e23; }
.khu-cell.here .khu-bar { background: rgba(255, 255, 255, .3); }
.khu-legend { display: flex; gap: 10px; justify-content: center; margin: 8px 0 0; font-size: 11px; }
.khu-legend .busy { color: #b03a2e; } .khu-legend .mid { color: #a8701a; } .khu-legend .calm { color: #4f7a28; } .khu-legend .here-l { color: #9a6a12; }

/* ---------- Lời thách đấu võ đài ---------- */
#arena-call { position: fixed; top: 86px; left: 50%; transform: translateX(-50%); z-index: 40; width: min(440px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 10px;
  background: radial-gradient(ellipse at center, rgba(255, 248, 225, 0.25) 40%, rgba(120, 78, 30, 0.3) 100%), url(/assets/ui/paper.webp) center / cover, #e9dcae;
  border: 2px solid #8a5a2b; box-shadow: 0 6px 24px rgba(0, 0, 0, .55); color: #3a2010; font-size: 14px; animation: acIn .3s ease-out; }
#arena-call[hidden] { display: none; }
#arena-call .ac-t { line-height: 1.4; }
#arena-call .ac-t b { color: #8a1c10; }
#arena-call .ac-b { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
#arena-call .ac-time { margin-left: auto; font-size: 12px; color: #7a5a3a; }
@keyframes acIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
body.touch #arena-call { top: 8px; zoom: .8; }

/* ---------- Bàn cờ tướng ---------- */
#xq { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 35; padding: 8px 12px 12px; border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(255, 248, 225, 0.25) 40%, rgba(120, 78, 30, 0.3) 100%), url(/assets/ui/paper.webp) center / cover, #e9dcae;
  border: 2px solid #8a5a2b; box-shadow: 0 10px 34px rgba(0, 0, 0, .55); color: #3a2010; font-size: 13px; }
#xq[hidden] { display: none; }
#xq .xq-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 15px; color: #6a1c10; }
#xq .xq-x { font: inherit; border: 1px solid #8a5a2b; background: #f3e2b8; color: #5a3415; border-radius: 4px; width: 26px; height: 22px; cursor: pointer; line-height: 1; }
#xq .xq-main { display: flex; flex-direction: column-reverse; gap: 8px; align-items: center; }
#xq canvas { display: block; border-radius: 6px; box-shadow: 0 3px 10px rgba(0, 0, 0, .45); touch-action: none; cursor: pointer; }
#xq .xq-side { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; align-items: center; }
#xq .xq-status { grid-column: 1 / -1; order: -1; text-align: center; min-height: 20px; }
#xq .xq-btns { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: center; }
#xq .xq-rec { grid-column: 1 / -1; text-align: center; font-size: 11px; opacity: .75; }
#xq .xq-me { text-align: right; }
#xq .xq-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; border: 1px solid #0006; }
#xq .xq-dot.red { background: #c0281c; } #xq .xq-dot.black { background: #1e1e1e; }
#xq .xq-turn { color: #2a7a1a; } #xq .xq-chk { color: #c0281c; }
#xq .xq-res.win { color: #2a7a1a; font-size: 16px; } #xq .xq-res.lose { color: #b0281c; font-size: 16px; } #xq .xq-res.draw { font-size: 16px; }
#xq.mini .xq-main { display: none; }
#xq.mini { top: auto; bottom: 120px; }
/* màn thấp (điện thoại xoay ngang): thông tin bên trái, bàn cờ bên phải */
@media (max-height: 559px) {
  #xq { top: 6px; padding: 6px 10px 8px; }
  #xq .xq-head { margin-bottom: 2px; font-size: 13px; }
  #xq .xq-main { flex-direction: row; align-items: stretch; }
  #xq .xq-side { width: 190px; grid-template-columns: 1fr; align-content: center; }
  #xq .xq-me { text-align: left; }
  #xq .xq-btns { flex-direction: column; }
}

/* màn đăng nhập: thẻ nhân vật gọn — chỉ nhân vật, tên, cấp */
.lg-char.lg-simple { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.lg-char.lg-simple #lg-hero { width: 220px; height: 240px; }
.lg-char.lg-simple .lg-name { font-size: 24px; }
.lg-char.lg-simple .lg-sub { font-size: 15px; }
@media (max-height: 520px) { .lg-char.lg-simple #lg-hero { width: 110px; height: 120px; } .lg-char.lg-simple .lg-name { font-size: 18px; } .lg-char.lg-simple .lg-sub { font-size: 13px; } }

/* ================= Phẩm chất đồ: trắng < xanh < tím < vàng < đỏ ================= */
.item.r1 .nm { color: #1d5fb8; } .item.r2 .nm { color: #7a3fb8; } .item.r3 .nm { color: #a86d00; } .item.r4 .nm { color: #b81f14; }
.grid .item.r1, .eslot .item.r1 { border-color: #4fa8ff; box-shadow: inset 0 0 6px rgba(79, 168, 255, 0.35); }
.grid .item.r2, .eslot .item.r2 { border-color: #a55cf0; box-shadow: inset 0 0 7px rgba(165, 92, 240, 0.45); }
.grid .item.r3, .eslot .item.r3 { border-color: #e0a020; box-shadow: inset 0 0 8px rgba(255, 190, 40, 0.55), 0 0 5px rgba(255, 190, 40, 0.45); }
.grid .item.r4, .eslot .item.r4 { border-color: #ff3b2e; box-shadow: inset 0 0 9px rgba(255, 70, 50, 0.6), 0 0 7px rgba(255, 60, 40, 0.6); animation: rar-red 2.2s ease-in-out infinite; }
@keyframes rar-red { 50% { box-shadow: inset 0 0 12px rgba(255, 70, 50, 0.8), 0 0 12px rgba(255, 60, 40, 0.85); } }
.item.unid .nm { opacity: 0.7; font-style: italic; }
.item.book .nm { color: #8a4a08; }
.grid .item.book { border-color: #c98a2a; }
.book-ic { display: grid; place-items: center; border-radius: 4px; overflow: hidden; outline: 2px solid #b8862f; outline-offset: -2px;
  background: linear-gradient(90deg, #6b3a14 0 12%, transparent 12%); box-shadow: inset 4px 0 0 #3e200a; }
.book-ic img { width: 82%; height: 82%; object-fit: cover; border-radius: 2px; margin-left: 10%; }
.item .qk { position: absolute; left: 3px; top: 3px; padding: 0 4px; border-radius: 4px; background: #9a2418; color: #fff3d8; font: 700 10px/1.4 "Be Vietnam Pro", sans-serif; }
#tooltip .tt-rar { font-weight: 700; font-size: 12px; letter-spacing: 0.5px; }
#tooltip .tt-aff { font-weight: 600; }
.ok-t { color: #3aa23a; } .bad-t { color: #d0402a; }
.panel .ok-t { color: #2d7a22; } .panel .bad-t { color: #a8281a; }

/* thanh chiêu: ô trống, cấp chiêu */
#skillbar .slot.empty-sk { opacity: 0.6; border-style: dashed; cursor: pointer; display: grid; place-items: center; }
#skillbar .slot .plus-sk { font: 700 22px/1 "Be Vietnam Pro", sans-serif; color: var(--gold); }
#skillbar .slot .sk-lv { position: absolute; right: 3px; top: 2px; min-width: 14px; padding: 0 3px; border-radius: 7px; background: rgba(120, 20, 10, 0.85); color: #ffe08a; font: 700 10px/1.4 "Be Vietnam Pro", sans-serif; text-align: center; }

/* ================= Bảng Võ Công ================= */
.panel.vc-panel { width: min(760px, calc(100vw - 32px)); }
body.touch .panel.vc-panel { width: min(760px, calc(100vw - 24px)); }
.vc .vc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .vc .vc-cols { grid-template-columns: 1fr; } }
.vc-path, .vc-base { border: 1px solid rgba(110, 70, 25, 0.35); border-top: 3px solid var(--pc, #8a5a1c); border-radius: 6px; padding: 8px; background: rgba(255, 250, 230, 0.22); }
.vc-base { margin-bottom: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.vc-base .vc-ph { grid-column: 1 / -1; }
@media (max-width: 640px) { .vc-base { grid-template-columns: 1fr; } }
.vc-ph { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.vc-ph b { font-size: 16px; color: var(--ink-red); }
.vc-tag { padding: 1px 8px; border-radius: 10px; background: var(--pc); color: #1a0f06; font-weight: 700; font-size: 12px; }
.vc-pts { margin-left: auto; font-weight: 700; color: var(--muted); }
.vc-meter { height: 6px; border-radius: 3px; background: rgba(110, 70, 25, 0.2); overflow: hidden; margin-bottom: 6px; }
.vc-meter i { display: block; height: 100%; background: var(--pc); }
.vc-pd { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.vc-bonus { font-size: 13px; margin-bottom: 2px; }
.vc-bonus span { white-space: nowrap; margin-right: 6px; }
.vc-max { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.vc-sk { display: grid; grid-template-columns: 44px 1fr; gap: 4px 8px; padding: 6px 0; border-top: 1px solid rgba(110, 70, 25, 0.18); }
.vc-sk.off .vc-ic { filter: grayscale(1) brightness(0.7); opacity: 0.7; }
.vc-sk.off b { color: var(--muted); }
.vc-ic { position: relative; width: 44px; height: 44px; border-radius: 6px; background: #2a1810 center / cover; box-shadow: inset 0 0 0 1px rgba(60, 35, 10, 0.6); }
.vc-key { position: absolute; left: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: #9a2418; color: #fff3d8; display: grid; place-items: center; font: 700 11px/1 "Be Vietnam Pro", sans-serif; }
.vc-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vc-info small { font-size: 12px; color: var(--muted); }
.vc-info .vc-desc { color: var(--text); }
.vc-info .vc-src { color: #8a4a08; }
.vc-lv { font-size: 12px; font-weight: 700; color: #2d7a22; }
.vc-sk.off .vc-lv { color: var(--muted); font-weight: 500; }
.vc-bar { grid-column: 2; display: flex; gap: 4px; }
.vc-slot { width: 26px; height: 24px; border-radius: 4px; border: 1px solid rgba(110, 70, 25, 0.5); background: rgba(255, 250, 230, 0.5); color: var(--text); font-weight: 700; cursor: pointer; }
.vc-slot.on { background: #9a2418; color: #fff3d8; border-color: #5e1a10; }

/* ================= Sạp hàng tre gỗ (hàng quán, lò rèn) ================= */
.panel.stall {
  --text: #fff1d6; --muted: #e9cfa3; --gold: #ffd27a; --ink-red: #ffcf6a;
  background: linear-gradient(rgba(40, 20, 8, 0.55), rgba(30, 14, 5, 0.7)), var(--wood-tex, none) 0 0 / 220px, #6b4423;
  border-radius: 4px; margin-top: 70px;
  box-shadow: inset 0 0 30px rgba(20, 8, 2, 0.8), 0 14px 40px rgba(0, 0, 0, 0.6);
  padding: 0 22px 10px;
}
.panel.stall::before, .panel.stall::after { content: ''; position: absolute; top: -40px; bottom: -6px; width: 22px; z-index: 0; pointer-events: none;
  background: var(--bamboo, linear-gradient(90deg, #8a9a3a, #d8d070 45%, #7a8a30)) center / 100% 100%; filter: sepia(0.45) saturate(0.85) brightness(0.95); }
.panel.stall::before { left: -6px; right: auto; transform: none; height: auto; } .panel.stall::after { right: -6px; left: auto; }
.panel.stall > .p-head::before { content: ''; position: absolute; left: -42px; right: -42px; top: -78px; height: 96px; pointer-events: none;
  background: var(--stall-roof, none) center bottom / 100% 100% no-repeat; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.5)); }
.panel.stall .p-head { color: #ffd98a; text-shadow: 0 2px 3px #000; font-size: 18px; border-bottom: 3px solid rgba(30, 12, 3, 0.6); padding-top: 22px; }
.panel.stall .p-close { color: #ffe2a8; }
.panel.stall .p-top, .panel.stall .p-bot { border-color: rgba(30, 12, 3, 0.6); }
.panel.stall .note { color: #e9cfa3; }
.panel.stall .shop-row { border-bottom-color: rgba(30, 12, 3, 0.5); }
.panel.stall .item { background: rgba(30, 14, 5, 0.45); border-color: rgba(255, 210, 140, 0.35); color: #fff1d6; }
.panel.stall .btn { background: linear-gradient(#c9853a, #8a5220); color: #fff3d8; border-color: #4a2a0c; }
.panel.stall .stall-call { font-style: italic; color: #ffe8b8; text-align: center; margin: 6px 0 10px; }
.stall-goods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 520px) { .stall-goods { grid-template-columns: 1fr; } }
.stall-item { display: grid; grid-template-columns: 56px 1fr auto; grid-template-areas: 'ic nm pr' 'ic ds ds' 'ic hv hv' 'bt bt bt'; gap: 2px 8px; align-items: center;
  padding: 8px; border-radius: 6px; background: linear-gradient(rgba(255, 230, 180, 0.12), rgba(0, 0, 0, 0.18)); border: 1px solid rgba(255, 210, 140, 0.25);
  box-shadow: inset 0 -3px 0 rgba(20, 8, 2, 0.45); }
.stall-item .stall-ic { grid-area: ic; width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6)); }
.stall-item b { grid-area: nm; color: #ffe2a8; }
.stall-item small { grid-area: ds; color: #e9cfa3; font-size: 12px; }
.stall-item .price { grid-area: pr; padding: 1px 8px; border-radius: 10px; background: #9a2418; color: #fff3d8; font-weight: 700; font-size: 12px; }
.stall-item .stall-btns { grid-area: bt; display: flex; gap: 6px; margin-top: 4px; }
.stall-item .stall-btns .btn { flex: 1; white-space: nowrap; }
.stall-item .stall-btns .btn { padding: 3px 8px; font-size: 12px; }
.stall-item .have { grid-area: hv; font-size: 11px; color: #e9cfa3; }

.panel:has(.doll) .grid.bag .item.r1, .panel .eslot .item.r1 { border-color: #4fa8ff; box-shadow: inset 0 0 6px rgba(79, 168, 255, 0.5); }
.panel:has(.doll) .grid.bag .item.r2, .panel .eslot .item.r2 { border-color: #b77cff; box-shadow: inset 0 0 7px rgba(183, 124, 255, 0.6); }
.panel:has(.doll) .grid.bag .item.r3, .panel .eslot .item.r3 { border-color: #ffc93a; box-shadow: inset 0 0 8px rgba(255, 201, 58, 0.6), 0 0 6px rgba(255, 190, 40, 0.5); }
.panel:has(.doll) .grid.bag .item.r4, .panel .eslot .item.r4 { border-color: #ff4b3e; box-shadow: inset 0 0 9px rgba(255, 75, 62, 0.7), 0 0 8px rgba(255, 60, 40, 0.6); animation: rar-red 2.2s ease-in-out infinite; }
.panel:has(.doll) .grid.bag .item.book { border-color: #e0a84a; }
.doll .eslot:has(.item.r1) { border-color: #4fa8ff; } .doll .eslot:has(.item.r2) { border-color: #b77cff; }
.doll .eslot:has(.item.r3) { border-color: #ffc93a; box-shadow: 0 0 8px rgba(255, 201, 58, 0.5); } .doll .eslot:has(.item.r4) { border-color: #ff4b3e; box-shadow: 0 0 10px rgba(255, 75, 62, 0.6); }

/* thẻ vật phẩm khi bấm: thông tin bên trái, nút thao tác bên cạnh (dùng được trên điện thoại) */
#ctxmenu:has(.cm-card) { padding: 0; min-width: 0; max-width: calc(100vw - 12px); }
.cm-card { display: flex; gap: 0; max-height: calc(100vh - 16px); }
.cm-info { width: 250px; max-width: 56vw; padding: 10px 12px; font-size: 12px; line-height: 1.5; background: rgba(14, 7, 6, 0.97); border-radius: 8px 0 0 8px; overflow-y: auto; color: var(--text); }
.cm-info .tt-ic { float: right; width: 52px; height: 52px; object-fit: contain; margin: 0 0 4px 8px; }
.cm-info .tt-name { font-weight: 700; font-size: 14px; }
.cm-info .tt-desc { color: #cdb893; }
.cm-info .tt-id { color: #8a7a60; font-size: 10px; margin-top: 4px; }
.cm-acts { display: flex; flex-direction: column; gap: 4px; padding: 8px; min-width: 140px; border-left: 1px solid rgba(212, 169, 78, 0.35); overflow-y: auto; }
.cm-acts button { border: 1px solid rgba(212, 169, 78, 0.35) !important; background: rgba(60, 30, 10, 0.5) !important; padding: 8px 10px !important; font-weight: 600; }
.cm-acts button small { color: #ffd75e; font-weight: 500; }
.cm-acts .cm-x { margin-top: auto; opacity: 0.8; text-align: center !important; }
body.touch .cm-acts button { padding: 10px 12px !important; font-size: 14px; }
@media (max-height: 460px) { .cm-info { max-height: calc(100vh - 16px); } }

/* ================= Võ Công dạng cây ================= */
.panel.vc-panel { width: min(640px, calc(100vw - 32px)); }
.vt { display: flex; flex-direction: column; gap: 10px; }
.vt-tree { position: relative; padding: 14px 10px 16px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 196, 90, 0.18), transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(120, 30, 20, 0.35), transparent 60%),
    var(--panel-tex, none) 0 0 / 256px, linear-gradient(#2a120c, #160806);
  box-shadow: inset 0 0 0 1px rgba(212, 169, 78, 0.45), inset 0 0 30px rgba(0, 0, 0, 0.7); color: #f3e3c0; }
.vt-tree::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(212, 169, 78, 0.18); border-radius: 7px; pointer-events: none; }
.vt-root { display: flex; flex-direction: column; align-items: center; }
.vt-rlabel { font: 700 12px/1 "Noto Serif", serif; letter-spacing: 3px; text-transform: uppercase; color: #e8c37a; margin-bottom: 6px; }
.vt-rnodes { display: flex; gap: 34px; position: relative; }
.vt-rnodes::before { content: ''; position: absolute; left: 32px; right: 32px; top: 27px; height: 2px; background: linear-gradient(90deg, #e8c37a, #ffe7a8, #e8c37a); box-shadow: 0 0 6px rgba(255, 200, 90, 0.7); z-index: 0; }
/* chạc ba: từ gốc tách xuống 2 nhánh */
.vt-fork { position: relative; height: 26px; }
.vt-fork::before { content: ''; position: absolute; left: 50%; top: -4px; height: 13px; width: 2px; transform: translateX(-1px); background: #e8c37a; box-shadow: 0 0 6px rgba(255, 200, 90, 0.7); }
.vt-fork i { position: absolute; left: 25%; right: 25%; top: 9px; height: 17px; border: 2px solid #e8c37a; border-bottom: none; border-radius: 10px 10px 0 0; box-shadow: 0 -2px 6px -2px rgba(255, 200, 90, 0.6); }
.vt-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vt-branch { display: flex; flex-direction: column; align-items: center; padding: 8px 6px 4px; border-radius: 8px;
  background: linear-gradient(color-mix(in srgb, var(--pc) 14%, transparent), transparent 70%); border-top: 2px solid var(--pc); }
.vt-ph { display: flex; align-items: center; gap: 6px; }
.vt-ph b { font: 700 17px/1.2 "Noto Serif", serif; color: var(--pc); text-shadow: 0 0 10px color-mix(in srgb, var(--pc) 50%, transparent), 0 1px 2px #000; }
.vt .vt-tag { padding: 1px 8px; border-radius: 10px; background: var(--pc); color: #1a0f06; font-weight: 700; font-size: 11px; }
.vt-meter { position: relative; width: 82%; height: 12px; margin: 6px 0 4px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); overflow: hidden; }
.vt-meter i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 60%, #000), var(--pc)); box-shadow: 0 0 8px var(--pc); }
.vt-meter span { position: relative; display: block; text-align: center; font: 700 9px/12px "Be Vietnam Pro", sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.vt-bonus { min-height: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; font-size: 11px; text-align: center; margin-bottom: 8px; }
.vt-bonus .ok-t { color: #8ff08a; } .vt-bonus .bad-t { color: #ff8a72; } .vt-none { color: rgba(243, 227, 192, 0.5); }
.vt-chain { display: flex; flex-direction: column; align-items: center; }
.vt-link { width: 3px; height: 16px; background: rgba(243, 227, 192, 0.18); border-radius: 2px; }
.vt-link.half { background: linear-gradient(var(--pc), rgba(243, 227, 192, 0.18)); }
.vt-link.lit { background: var(--pc); box-shadow: 0 0 8px var(--pc); }
/* nút chiêu */
.vt-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 96px; padding: 0; border: none; background: none; color: inherit; cursor: pointer; }
.vt-ic { width: 54px; height: 54px; border-radius: 50%; background: #120806 center / cover; border: 3px solid rgba(243, 227, 192, 0.25);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7), inset 0 0 8px rgba(0, 0, 0, 0.6); transition: transform 0.15s, box-shadow 0.15s; }
.vt-node.on .vt-ic { border-color: var(--pc); box-shadow: 0 0 12px color-mix(in srgb, var(--pc) 70%, transparent), 0 3px 8px rgba(0, 0, 0, 0.7); }
.vt-node.max .vt-ic { border-color: #ffe08a; box-shadow: 0 0 16px rgba(255, 215, 110, 0.9), 0 0 4px #fff inset; }
.vt-node.off .vt-ic { filter: grayscale(0.9) brightness(0.55); }
.vt-node:hover .vt-ic { transform: scale(1.07); }
.vt-node.sel .vt-ic { transform: scale(1.1); outline: 2px solid #fff3c4; outline-offset: 3px; }
.vt-key { position: absolute; left: 14px; top: -3px; width: 20px; height: 20px; border-radius: 50%; background: #9a2418; color: #fff3d8; border: 1px solid #ffd27a; display: grid; place-items: center; font: 700 11px/1 "Be Vietnam Pro", sans-serif; box-shadow: 0 2px 4px #000; }
.vt-lock { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: 15px; line-height: 1; text-shadow: 0 1px 3px #000; pointer-events: none; }
.vt-lock small { font: 700 10px/1.2 "Be Vietnam Pro", sans-serif; color: #f3e3c0; }
.vt-pips { display: flex; gap: 3px; }
.vt-pips i { width: 7px; height: 7px; border-radius: 50%; background: rgba(243, 227, 192, 0.18); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
.vt-pips i.f { background: var(--pc); box-shadow: 0 0 5px var(--pc); }
.vt-nm { font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center; color: #f3e3c0; text-shadow: 0 1px 2px #000; }
.vt-node.off .vt-nm { color: rgba(243, 227, 192, 0.55); }
/* chi tiết chiêu đang chọn */
.vt-detail { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px; border-radius: 8px; border: 1px solid rgba(110, 70, 25, 0.35); border-left: 4px solid var(--pc); background: rgba(255, 250, 230, 0.3); }
.vt-dic { width: 64px; height: 64px; border-radius: 10px; background: #2a1810 center / cover; box-shadow: 0 3px 8px rgba(60, 35, 10, 0.5); }
.vt-dh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vt-dh b { font-size: 16px; color: var(--ink-red); }
.vt-dlv { margin-left: auto; font-weight: 700; color: #2d7a22; font-size: 13px; }
.vt-dline { font-size: 12px; color: var(--muted); }
.vt-ddesc { font-size: 13px; margin: 2px 0; }
.vt-dnext { font-size: 12px; color: #2d6a8a; }
.vt-dsrc { font-size: 12px; color: #8a4a08; }
.vt-dbar { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.vt-dbar span { margin-right: 4px; }
.vt-help { margin: 0; font-size: 11px; color: var(--muted); }
@media (max-width: 520px) { .vt-node { width: 78px; } .vt-ic { width: 46px; height: 46px; } .vt-branches { gap: 8px; } }
body.touch .vt-ic { width: 46px; height: 46px; } body.touch .vt-node { width: 84px; } body.touch .vt-link { height: 10px; }
body.touch .vt-rnodes::before { top: 23px; }
.vt > * { flex-shrink: 0; }
.vt-link { height: 12px; }
/* chi tiết dính dưới đáy bảng khi cuộn cây, luôn thấy nút gắn phím */
.vt-detail { position: sticky; bottom: 0; z-index: 2; background: linear-gradient(rgba(250, 240, 210, 0.97), rgba(240, 226, 186, 0.97)); box-shadow: 0 -6px 12px -6px rgba(60, 35, 10, 0.5); }

/* ================= Thanh chiêu điện thoại: lưới 2 hàng × 4 nút to, có nút ẩn/hiện ================= */
#sb-toggle { display: none; }
body.touch #skillbar, body.touch.dragon-ui #skillbar {
  display: grid; grid-template-columns: repeat(4, 60px); grid-auto-rows: 60px; gap: 9px 10px; max-width: none; flex-wrap: nowrap;
  grid-template-areas: 's3 s4 q w' 's0 s1 s2 auto';
  right: calc(10px + env(safe-area-inset-right)); bottom: 18px;
}
body.touch #skillbar .slot { width: 60px; height: 60px; }
body.touch #skillbar .slot .sk-name { font-size: 8.5px; }
body.touch #skillbar .slot .key { display: none; }
body.touch #skillbar [data-si="0"] { grid-area: s0; } body.touch #skillbar [data-si="1"] { grid-area: s1; }
body.touch #skillbar [data-si="2"] { grid-area: s2; } body.touch #skillbar [data-si="3"] { grid-area: s3; }
body.touch #skillbar [data-si="4"] { grid-area: s4; }
body.touch #skillbar [data-pot="q"] { grid-area: q; } body.touch #skillbar [data-pot="w"] { grid-area: w; }
body.touch #skillbar [data-auto] { grid-area: auto; }
/* đánh thường / chiêu 1 nổi bật hơn */
body.touch #skillbar [data-si="0"] { box-shadow: 0 0 0 2px rgba(255, 210, 120, 0.8), 0 0 10px rgba(255, 200, 90, 0.5); }
body.touch #skillbar .slot.pot, body.touch #skillbar .slot.auto { width: 52px; height: 52px; margin: 4px; }
body.touch #sb-toggle {
  display: grid; place-items: center; position: fixed; z-index: 31; right: calc(10px + env(safe-area-inset-right)); bottom: 158px;
  width: 36px; height: 36px; border-radius: 50%; font-size: 18px; line-height: 1; color: #ffe2a8; cursor: pointer;
  background: rgba(20, 10, 8, 0.75); border: 1px solid rgba(212, 169, 78, 0.7); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
body.touch.sb-hidden #skillbar { display: none; }
body.touch.sb-hidden #sb-toggle { bottom: 18px; width: 52px; height: 52px; font-size: 24px; }
@media (max-height: 360px) {
  body.touch #skillbar, body.touch.dragon-ui #skillbar { grid-template-columns: repeat(4, 52px); grid-auto-rows: 52px; gap: 6px 8px; }
  body.touch #skillbar .slot { width: 52px; height: 52px; }
  body.touch #skillbar .slot.pot, body.touch #skillbar .slot.auto { width: 46px; height: 46px; margin: 3px; }
  body.touch #sb-toggle { bottom: 134px; }
}

/* màn tải khi sang vùng: tranh địa danh phủ cả màn, chậm rãi phóng to (Ken Burns), tên vùng lớn ở dưới */
#loading.ld-region { background: #0b0504; place-items: end center; }
#loading.ld-region::before { content: ''; position: absolute; inset: -3%; background: var(--ld-art) center / cover no-repeat; animation: ldPan 14s ease-out forwards; }
#loading.ld-region::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(8, 4, 3, 0.55) 70%, rgba(8, 4, 3, 0.92)), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55)); }
@keyframes ldPan { from { transform: scale(1.0) translateX(-1%); } to { transform: scale(1.08) translateX(1%); } }
#loading.ld-region .ld-box { position: relative; z-index: 1; margin-bottom: 6vh; }
#loading.ld-region .ld-emblem { display: none; }
#loading.ld-region .ld-title { font-size: 40px; letter-spacing: 3px; color: #ffe2a0; text-shadow: 0 3px 14px #000, 0 0 30px rgba(255, 190, 80, 0.35); }
.ld-sub { color: #f0d9a8; font-style: italic; font-size: 15px; text-shadow: 0 1px 4px #000; min-height: 0; }
#loading:not(.ld-region) .ld-sub { display: none; }
body.touch #loading.ld-region .ld-title { font-size: 26px; }
body.touch #loading.ld-region .ld-box { margin-bottom: 3vh; }

/* ================= Nút menu: biểu tượng to + nhãn chữ, máy tính xếp 2 cột ================= */
#menu button .lbl { display: block; font: 700 9.5px/1.1 "Be Vietnam Pro", sans-serif; color: #f3dfae; text-shadow: 0 1px 2px #000; white-space: nowrap; pointer-events: none; }
#menu button[data-open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px 0 3px; }
#menu button[data-open] small { top: 2px; bottom: auto; right: 4px; font-size: 8.5px; color: #c9a85e; }
.dragon-ui #menu { display: grid; grid-template-columns: repeat(2, 62px); gap: 6px; }
.dragon-ui #menu button[data-open] { width: 62px; height: 60px; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 30%, rgba(120, 60, 25, 0.55), rgba(28, 13, 8, 0.95) 75%); border: 1px solid rgba(212, 169, 78, 0.6);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.55); }
.dragon-ui #menu button[data-open] img { width: 38px; height: 38px; }
.dragon-ui #menu button[data-open]:hover { border-color: #ffd27a; box-shadow: 0 0 14px rgba(255, 200, 90, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
.dragon-ui #menu button[data-open]:hover img { transform: scale(1.08); }
.dragon-ui #menu #sound-btn, .dragon-ui #menu #q-btn, .dragon-ui #menu #dev-btn { width: 62px; height: 40px; }
/* điện thoại: hàng ngang trên cùng, giữ nhãn chữ nhỏ */
body.touch #menu, body.touch.dragon-ui #menu { display: flex; transform: scale(0.74); }
body.touch #menu button[data-open] { width: 58px; height: 58px; }
body.touch #menu button[data-open] img { width: 34px; height: 34px; }
body.touch #menu button .lbl { font-size: 10px; }
body.touch #menu button[data-open] small { display: none; }

/* ======================================================================
   MÀN ĐĂNG NHẬP MỚI: cảnh nền chuyển động, logo vàng, 3 ô nhân vật
   ====================================================================== */
#login.lv-login { position: fixed; inset: 0; z-index: 50; padding: 0; display: flex; flex-direction: column; align-items: center; overflow: hidden auto;
  background: #0d0604; color: #f6e7c4; font-family: 'Be Vietnam Pro', sans-serif; }
.lv-login > .lv-bg, .lv-login > .lv-mist, .lv-login > .lv-rays, .lv-login > .lv-fx, .lv-login > .lv-vignette { position: fixed; inset: 0; pointer-events: none; }
.lv-bg { inset: -4% !important; background: var(--login-bg, none) center / cover, #140a08; animation: lvKen 48s ease-in-out infinite alternate; filter: saturate(1.1) brightness(0.8); }
@keyframes lvKen { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
.lv-mist { opacity: 0.55; mix-blend-mode: screen; filter: blur(24px); }
.lv-mist.m1 { background: radial-gradient(ellipse 60% 22% at 30% 72%, rgba(255, 236, 210, 0.38), transparent 70%), radial-gradient(ellipse 50% 18% at 80% 62%, rgba(255, 226, 190, 0.3), transparent 70%); animation: lvMist 26s linear infinite alternate; }
.lv-mist.m2 { background: radial-gradient(ellipse 70% 20% at 60% 85%, rgba(230, 210, 255, 0.22), transparent 70%); animation: lvMist 34s linear infinite alternate-reverse; }
@keyframes lvMist { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.lv-rays { background: conic-gradient(from 180deg at 50% -10%, transparent 0deg, rgba(255, 210, 130, 0.12) 8deg, transparent 16deg, transparent 24deg, rgba(255, 210, 130, 0.09) 31deg, transparent 38deg, transparent 330deg, rgba(255, 210, 130, 0.1) 338deg, transparent 346deg);
  mix-blend-mode: screen; animation: lvRays 18s ease-in-out infinite alternate; transform-origin: 50% -10%; }
@keyframes lvRays { from { transform: rotate(-6deg); opacity: 0.7; } to { transform: rotate(6deg); opacity: 1; } }
.lv-vignette { background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(8, 3, 2, 0.75) 100%), linear-gradient(transparent 55%, rgba(10, 4, 2, 0.85)); }
.lv-login > :not(.lv-bg):not(.lv-mist):not(.lv-rays):not(.lv-fx):not(.lv-vignette):not(#cls-fx):not(.lv-modal) { position: relative; z-index: 2; }
.lv-login #cls-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

/* góc trên: toàn màn hình, tài khoản */
.lv-top { align-self: stretch; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 0; }
.lv-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 20px; cursor: pointer; font: 600 13px/1 'Be Vietnam Pro', sans-serif; color: #ffe6b0;
  background: rgba(20, 8, 4, 0.6); border: 1px solid rgba(255, 210, 130, 0.55); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); transition: all 0.2s; }
.lv-chip:hover { border-color: #ffd27a; box-shadow: 0 0 16px rgba(255, 200, 100, 0.5); }
.lv-dot { width: 8px; height: 8px; border-radius: 50%; background: #6fe06a; box-shadow: 0 0 8px #6fe06a; }
.lv-dot.busy { background: #ffd25a; box-shadow: 0 0 8px #ffd25a; animation: lvBlink 0.8s infinite; } .lv-dot.err { background: #ff5a4a; box-shadow: 0 0 8px #ff5a4a; }
@keyframes lvBlink { 50% { opacity: 0.3; } }

/* logo */
.lv-logo { text-align: center; margin-top: 1vh; }
.lv-emblem { width: 96px; height: 96px; margin: 0 auto -6px; background: var(--orn-emblem) center / contain no-repeat; filter: drop-shadow(0 0 22px rgba(255, 200, 80, 0.65)); animation: lvFloat 5s ease-in-out infinite; }
@keyframes lvFloat { 50% { transform: translateY(-6px) scale(1.04); filter: drop-shadow(0 0 34px rgba(255, 215, 110, 0.9)); } }
.lv-title { position: relative; margin: 0; font: 900 clamp(44px, 7.5vw, 88px)/1 'Noto Serif', serif; letter-spacing: 0.06em; white-space: nowrap; }
.lv-title span { display: inline-block; background: linear-gradient(180deg, #fff6d0 0%, #ffd56a 38%, #c8811d 62%, #ffe08a 82%, #9a5a10 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #5a2a06) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 22px rgba(255, 170, 60, 0.35));
  animation: lvDrop 0.9s cubic-bezier(.2, 1.6, .4, 1) both; }
.lv-title span:nth-child(2) { animation-delay: 0.06s; } .lv-title span:nth-child(3) { animation-delay: 0.12s; } .lv-title span:nth-child(4) { animation-delay: 0.22s; }
.lv-title span:nth-child(5) { animation-delay: 0.28s; } .lv-title span:nth-child(6) { animation-delay: 0.34s; } .lv-title span:nth-child(7) { animation-delay: 0.4s; }
@keyframes lvDrop { from { opacity: 0; transform: translateY(-40px) scale(1.4); } to { opacity: 1; transform: none; } }
.lv-title::after { content: ''; position: absolute; inset: -10% -5%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 240, 0.75) 50%, transparent 60%); mix-blend-mode: overlay;
  background-size: 250% 100%; animation: lvShine 5s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes lvShine { from { background-position: 150% 0; } 40%, to { background-position: -60% 0; } }
.lv-online { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; font: 700 15px/1 'Noto Serif', serif; letter-spacing: 0.9em; padding-left: 0.9em; color: #ffe2a0; text-shadow: 0 2px 6px #000; animation: lvFade 1s 0.6s both; }
.lv-online i { width: 70px; height: 1px; background: linear-gradient(90deg, transparent, #ffd27a, transparent); }
.lv-tag { margin: 10px 0 0; font-style: italic; color: #f0d9a8; text-shadow: 0 1px 4px #000; animation: lvFade 1s 0.9s both; }
@keyframes lvFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* sân khấu: 3 ô nhân vật */
.lv-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: 100%; padding: 8px 16px; box-sizing: border-box; }
.lv-slots { display: flex; gap: clamp(12px, 3vw, 40px); align-items: flex-end; justify-content: center; }
.lv-slot { position: relative; width: clamp(150px, 19vw, 220px); height: clamp(250px, 44vh, 360px); padding: 0; border: none; cursor: pointer; color: inherit; border-radius: 14px; overflow: visible;
  background: linear-gradient(180deg, rgba(40, 16, 8, 0.25), rgba(30, 10, 4, 0.72) 70%), radial-gradient(ellipse at 50% 100%, rgba(255, 170, 60, 0.18), transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 130, 0.35), 0 10px 30px rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px);
  transition: transform 0.35s cubic-bezier(.2, 1.3, .4, 1), box-shadow 0.3s, filter 0.3s; animation: lvRise 0.8s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(0.5s + var(--d)); filter: brightness(0.72) saturate(0.85); }
@keyframes lvRise { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
.lv-slot::before { content: ''; position: absolute; inset: -3px; border-radius: 16px; pointer-events: none;
  background: var(--c-tl) top left / 34px no-repeat, var(--c-tr) top right / 34px no-repeat, var(--c-bl) bottom left / 34px no-repeat, var(--c-br) bottom right / 34px no-repeat; opacity: 0.85; }
.lv-slot:hover { filter: brightness(0.9); transform: translateY(-4px); }
.lv-slot.sel { filter: none; transform: translateY(-10px) scale(1.06); box-shadow: inset 0 0 0 2px #ffd27a, 0 0 40px rgba(255, 190, 80, 0.45), 0 16px 40px rgba(0, 0, 0, 0.6); }
.lv-aura { position: absolute; left: 50%; bottom: 52px; width: 190%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg, transparent, rgba(255, 210, 110, 0.35), transparent 30%, transparent 50%, rgba(255, 180, 80, 0.3), transparent 80%); mask: radial-gradient(circle, transparent 30%, #000 31%, #000 46%, transparent 47%);
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 31%, #000 46%, transparent 47%); transition: opacity 0.4s; }
.lv-slot.sel .lv-aura { opacity: 1; animation: lvSpin 9s linear infinite; }
@keyframes lvSpin { to { transform: translateX(-50%) rotate(360deg); } }
.lv-pedestal { position: absolute; left: 50%; bottom: 52px; width: 76%; height: 26px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 210, 120, 0.55), rgba(255, 150, 40, 0.15) 55%, transparent 70%); box-shadow: 0 0 0 1px rgba(255, 220, 150, 0.25) inset; }
.lv-slot.sel .lv-pedestal { background: radial-gradient(ellipse, rgba(255, 236, 170, 0.95), rgba(255, 170, 60, 0.4) 50%, transparent 72%); animation: lvPulse 2.4s ease-in-out infinite; }
@keyframes lvPulse { 50% { filter: brightness(1.35); transform: translateX(-50%) scaleX(1.08); } }
.lv-hero { position: absolute; left: 50%; bottom: 62px; height: 78%; max-width: 120%; object-fit: contain; transform: translateX(-50%); transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7)); animation: lvBreath 4s ease-in-out infinite; pointer-events: none; }
@keyframes lvBreath { 50% { transform: translateX(-50%) scaleY(1.012); } }
.lv-slot:not(.sel) .lv-hero { animation: none; }
.lv-info { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lv-info b { font: 700 19px/1.15 'Noto Serif', serif; color: #fff1cc; text-shadow: 0 2px 4px #000; max-width: 94%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-slot.sel .lv-info b { color: #ffd76a; text-shadow: 0 0 12px rgba(255, 200, 80, 0.7), 0 2px 4px #000; }
.lv-lv { font-size: 12px; font-weight: 700; color: #e9cf96; letter-spacing: 1px; }
.lv-slot.empty { filter: none; background: rgba(20, 8, 4, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 210, 130, 0.25); }
.lv-slot.empty .lv-pedestal { opacity: 0.4; }
.lv-plus { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  font: 300 44px/1 'Be Vietnam Pro', sans-serif; color: #ffd27a; border: 2px dashed rgba(255, 210, 130, 0.6); transition: all 0.25s; }
.lv-slot.empty:hover .lv-plus { background: rgba(255, 200, 100, 0.15); box-shadow: 0 0 24px rgba(255, 200, 100, 0.5); transform: translate(-50%, -50%) rotate(90deg); }
.lv-slot.empty .lv-info b { color: #d9c08a; font-size: 15px; }

/* nút VÀO GAME */
.lv-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: lvFade 0.8s 1s both; }
.lv-go { position: relative; overflow: hidden; min-width: 260px; padding: 14px 36px; border-radius: 10px; cursor: pointer; border: 1px solid #ffe6a0;
  font: 900 22px/1 'Noto Serif', serif; letter-spacing: 0.18em; color: #3a1604; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.7);
  background: linear-gradient(180deg, #fff2bf 0%, #ffd062 35%, #d8901e 70%, #f2bb48 100%);
  box-shadow: 0 0 0 3px rgba(60, 20, 4, 0.75), 0 0 0 4px #c98a2a, 0 10px 26px rgba(0, 0, 0, 0.6), 0 0 34px rgba(255, 190, 70, 0.45); animation: lvGlow 2.6s ease-in-out infinite; transition: transform 0.15s; }
.lv-go::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-20deg); animation: lvSweep 3.2s ease-in-out infinite; }
@keyframes lvSweep { 60%, to { left: 130%; } }
@keyframes lvGlow { 50% { box-shadow: 0 0 0 3px rgba(60, 20, 4, 0.75), 0 0 0 4px #ffd27a, 0 10px 26px rgba(0, 0, 0, 0.6), 0 0 54px rgba(255, 200, 90, 0.75); } }
.lv-go:hover { transform: translateY(-2px) scale(1.03); } .lv-go:active { transform: scale(0.97); }
.lv-go:disabled { filter: grayscale(0.8) brightness(0.6); animation: none; cursor: default; }
.lv-go.sm { min-width: 0; padding: 11px 22px; font-size: 16px; letter-spacing: 0.06em; }
.lv-link { background: none; border: none; color: #d9bf88; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; opacity: 0.8; }
.lv-link:hover { color: #ffb0a0; opacity: 1; }

/* tạo nhân vật */
.lv-create { gap: 14px; }
.lv-ch { font: 700 22px/1 'Noto Serif', serif; color: #ffe2a0; text-shadow: 0 2px 6px #000; }
.lv-ch small { font-size: 14px; color: #d9bf88; }
.lv-classes { display: grid; grid-template-columns: repeat(3, minmax(0, 210px)); gap: 14px; margin: 0; }
.lv-cls { position: relative; padding: 12px 10px 10px; border-radius: 12px; cursor: pointer; color: #f6e7c4; text-align: center; transition: all 0.25s;
  background: linear-gradient(rgba(40, 16, 8, 0.5), rgba(20, 8, 4, 0.8)); border: 1px solid rgba(255, 210, 130, 0.35); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); }
.lv-cls canvas { width: 110px; height: 110px; }
.lv-cls b { font: 700 17px/1.2 'Noto Serif', serif; color: #ffe2a0; }
.lv-cls small { display: block; color: #d9c49a; font-size: 12px; margin-top: 2px; }
.lv-cls:hover { border-color: #ffd27a; transform: translateY(-3px); }
.lv-cls.sel { border-color: #ffd27a; box-shadow: 0 0 0 1px #ffd27a, 0 0 28px rgba(255, 190, 80, 0.5), 0 8px 22px rgba(0, 0, 0, 0.5); background: linear-gradient(rgba(120, 60, 15, 0.45), rgba(30, 10, 4, 0.85)); }
.lv-paths { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.lv-paths i { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 9px; color: #1a0f06; background: var(--pc); }
.lv-namerow { display: flex; gap: 10px; align-items: center; }
.lv-namerow input, .lv-modal input { padding: 12px 16px; border-radius: 10px; font: 600 16px 'Be Vietnam Pro', sans-serif; color: #fff1cc; min-width: 240px;
  background: rgba(15, 6, 3, 0.75); border: 1px solid rgba(255, 210, 130, 0.5); outline: none; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }
.lv-namerow input:focus, .lv-modal input:focus { border-color: #ffd27a; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 200, 100, 0.4); }
.lv-foot { padding: 8px 16px 12px; font-size: 12px; color: #cdb88a; text-shadow: 0 1px 3px #000; text-align: center; }

/* hộp tài khoản */
.lv-modal { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(5, 2, 1, 0.6); backdrop-filter: blur(4px); animation: lvFade 0.25s both; padding: 12px; }
.lv-modal-box { position: relative; width: min(400px, 100%); max-height: calc(100vh - 24px); overflow-y: auto; box-sizing: border-box; padding: 24px 24px 18px; border-radius: 14px; display: flex; flex-direction: column; gap: 10px; text-align: center;
  background: linear-gradient(rgba(40, 16, 8, 0.92), rgba(18, 7, 3, 0.96)), var(--panel-tex, none) 0 0 / 256px; border: 1px solid #c98a2a; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 180, 60, 0.15); }
.lv-modal-box h3 { margin: 0; font: 700 22px/1.2 'Noto Serif', serif; color: #ffd76a; }
.lv-modal input { min-width: 0; width: 100%; box-sizing: border-box; }
.lv-x { position: absolute; right: 10px; top: 8px; background: none; border: none; color: #e9cf96; font-size: 18px; cursor: pointer; }
.lv-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); }
.lv-tabs button { flex: 1; padding: 8px; border-radius: 8px; border: none; background: none; color: #d9bf88; font-weight: 700; cursor: pointer; }
.lv-tabs button.on { background: linear-gradient(#e3b558, #a8701e); color: #2a1206; }
.lv-note { margin: 0; font-size: 12.5px; color: #e0caa0; line-height: 1.45; }
.lv-warn { margin: 0; font-size: 11px; color: #c9a070; }
.lv-msg { margin: 0; min-height: 16px; font-size: 13px; font-weight: 600; color: #ffd27a; }
.lv-acc-user { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; color: #fff1cc; }
.lv-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lv-btn { padding: 9px 14px; border-radius: 8px; border: 1px solid #c98a2a; background: linear-gradient(#a8402a, #7a2414); color: #fff3d8; font-weight: 700; cursor: pointer; }
.lv-btn.ghost { background: rgba(0, 0, 0, 0.3); color: #e9cf96; }

/* màn thấp (điện thoại xoay ngang) */
@media (max-height: 520px) {
  .lv-top { position: absolute !important; right: 0; top: 0; padding: 8px 10px; }
  .lv-logo { margin-top: 4px; display: flex; align-items: center; gap: 10px; }
  .lv-emblem { width: 40px; height: 40px; margin: 0; }
  .lv-title { font-size: 32px; }
  .lv-online { font-size: 10px; margin: 0; letter-spacing: 0.5em; } .lv-online i { width: 20px; }
  .lv-tag { display: none; }
  .lv-stage { gap: 8px; padding: 4px 10px; }
  .lv-slot { height: min(220px, calc(100vh - 150px)); width: 140px; }
  .lv-info b { font-size: 15px; }
  .lv-pedestal, .lv-aura { bottom: 42px; } .lv-hero { bottom: 48px; height: 74%; }
  .lv-go { padding: 10px 28px; font-size: 17px; min-width: 200px; }
  .lv-actions { flex-direction: row; gap: 14px; }
  .lv-classes { grid-template-columns: repeat(3, minmax(0, 190px)); gap: 8px; }
  .lv-cls { padding: 6px; } .lv-cls canvas { width: 64px; height: 64px; } .lv-cls small { display: none; }
  .lv-ch { font-size: 16px; }
  .lv-namerow input { padding: 8px 12px; min-width: 180px; font-size: 14px; }
  .lv-foot { display: none; }
}
@media (max-width: 560px) {
  .lv-slots { gap: 8px; } .lv-slot { width: 30vw; }
  .lv-classes { grid-template-columns: 1fr; }
  .lv-namerow { flex-direction: column; }
}
.lv-go { white-space: nowrap; }
.lv-cls canvas { width: 150px; height: 150px; margin: -16px auto -10px; display: block; }
@media (max-height: 520px) { .lv-cls canvas { width: 84px; height: 84px; margin: -8px auto -6px; } }
.lv-namerow .lv-go { flex: none; min-width: max-content; padding-left: 22px; padding-right: 22px; }
.lv-namerow .lv-go span { position: relative; z-index: 1; }
.lv-classes .lv-cls { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
@media (max-height: 520px) {
  .lv-classes .lv-cls { flex-direction: column; padding: 4px 6px 6px; gap: 0; }
  .lv-cls b { font-size: 14px; }
  .lv-paths i { font-size: 9px; padding: 0 5px; }
  .lv-cls canvas { width: 70px; height: 70px; margin: -6px auto -4px; }
  .lv-create .lv-ch { display: none; }
}
.lv-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 12px 16px; border-radius: 10px; cursor: pointer;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font: 600 15px/1 'Be Vietnam Pro', sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: box-shadow 0.2s, transform 0.1s; }
.lv-google:hover { box-shadow: 0 0 0 3px rgba(255, 210, 120, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35); }
.lv-google:active { transform: scale(0.98); }
.lv-google:disabled { opacity: 0.55; cursor: default; box-shadow: none; }

/* ================= Bảng Cài Đặt ================= */
.set-tabs { display: flex; gap: 4px; padding: 6px 14px 0; border-bottom: 1px solid rgba(120, 70, 20, 0.35); }
.set-tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px 8px; border: none; border-radius: 8px 8px 0 0; cursor: pointer;
  background: rgba(110, 70, 25, 0.1); color: var(--muted); font: 700 12.5px/1 'Be Vietnam Pro', sans-serif; transition: background 0.15s; }
.set-tabs button span { font-size: 18px; line-height: 1; }
.set-tabs button:hover { background: rgba(110, 70, 25, 0.2); }
.set-tabs button.on { background: linear-gradient(#a8402a, #7a2414); color: #fff3d8; box-shadow: 0 -2px 6px rgba(80, 30, 10, 0.3); }
.set-body { display: flex; flex-direction: column; gap: 4px; min-height: 260px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid rgba(110, 70, 25, 0.18); cursor: default; }
.set-row > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.set-row small { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.set-seg { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid rgba(110, 70, 25, 0.5); flex: none; }
.set-seg button { padding: 7px 12px; border: none; background: rgba(255, 250, 230, 0.45); color: var(--text); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.set-seg button + button { border-left: 1px solid rgba(110, 70, 25, 0.35); }
.set-seg button.on { background: linear-gradient(#e3bf68, #b48a35); color: #2a1408; }
/* công tắc bật/tắt */
.set-row.chk { cursor: pointer; }
.set-row.chk input { position: absolute; opacity: 0; pointer-events: none; }
.set-row .sw { position: relative; flex: none; width: 44px; height: 24px; border-radius: 12px; background: rgba(110, 70, 25, 0.35); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); transition: background 0.2s; }
.set-row .sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff8e8; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: transform 0.2s; }
.set-row input:checked + .sw { background: linear-gradient(#5fae3a, #3d7f22); }
.set-row input:checked + .sw::after { transform: translateX(20px); }
.set-rng { display: flex; align-items: center; gap: 8px; flex: none; }
.set-rng input { width: 150px; accent-color: #a8402a; }
.set-rng em { width: 38px; text-align: right; font-style: normal; font-weight: 700; color: var(--ink-red); font-size: 12.5px; }
.set-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; margin: 6px 0; border-radius: 8px; border: 1px solid rgba(110, 70, 25, 0.3); background: rgba(255, 250, 230, 0.28); }
.set-card > b { font-size: 15px; color: var(--ink-red); }
.set-card .lv-acc-user { justify-content: flex-start; font-size: 15px; color: var(--text); }
.set-card .btn { align-self: flex-start; }
.set-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.set-msg { margin: 0; min-height: 16px; font-weight: 600; color: var(--ink-red); font-size: 13px; }
.set-card .lv-google { width: auto; align-self: flex-start; }
@media (max-width: 520px) { .set-rng input { width: 100px; } .set-seg button { padding: 6px 8px; } }

/* bản đồ nhỏ: tên vùng + khu */
#region-name .rn-khu { margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: rgba(154, 36, 24, 0.12); font: 700 11px/1.3 'Be Vietnam Pro', sans-serif; color: #6b3a18; vertical-align: 2px; }
#minimap { border-radius: 6px; }
/* điện thoại: bản đồ nhỏ không bị thu nhỏ nữa — chỉ giữ tên vùng + bản đồ, to và rõ */
body.touch #topright, body.touch.dragon-ui #topright { transform: none; width: 168px; padding: 5px 6px 6px; top: calc(4px + env(safe-area-inset-top)); right: calc(4px + env(safe-area-inset-right)); box-sizing: border-box; }
body.touch #topright::after { background-size: 26px !important; }
body.touch #region-name { font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.touch #region-name .rn-khu { font-size: 9.5px; margin-left: 4px; }
body.touch #minimap { width: 156px; height: 81px; margin: 3px 0 0; }
body.touch #coords, body.touch #net-info { display: none; }
body.touch #menu, body.touch.dragon-ui #menu { right: calc(176px + env(safe-area-inset-right)); }
body.touch #tracker { top: 118px; }
#region-name .rn-khu { white-space: nowrap; display: inline-block; }
body.touch #region-name { white-space: normal; overflow: visible; font-size: 11.5px; }
/* tranh màn tải tươi sáng: lớp phủ nhẹ, chỉ tối dần ở đáy để chữ dễ đọc */
#loading.ld-region { background: #f3e6c8; }
#loading.ld-region::after { background: linear-gradient(transparent 58%, rgba(40, 20, 8, 0.35) 76%, rgba(30, 14, 6, 0.72)); }
#loading.ld-region .ld-title { color: #fff4d0; text-shadow: 0 2px 0 #7a3a10, 0 4px 14px rgba(0, 0, 0, 0.6); }
#loading.ld-region .ld-tip, #loading.ld-region .ld-text, #loading.ld-region .ld-sub { color: #fff6e0; }

/* gợi ý xoay ngang (điện thoại dựng đứng mà trình duyệt không cho tự khoá ngang, vd iPhone) */
@media (orientation: portrait) and (max-width: 600px) {
  body.touch.playing #rotate-hint { display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(60, 25, 10, 0.94), rgba(10, 5, 4, 0.97)); }
}
.rh-box { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 280px; }
.rh-box b { font: 700 22px/1.2 'Noto Serif', serif; color: #ffe2a0; }
.rh-box small { color: #e0caa0; font-size: 14px; }
.rh-phone { width: 64px; height: 108px; border: 4px solid #ffd27a; border-radius: 12px; position: relative; margin-bottom: 10px; animation: rhTurn 2.2s ease-in-out infinite; box-shadow: 0 0 22px rgba(255, 200, 90, 0.4); }
.rh-phone i { position: absolute; left: 50%; bottom: 6px; width: 14px; height: 4px; border-radius: 2px; background: #ffd27a; transform: translateX(-50%); }
@keyframes rhTurn { 0%, 25% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
.rh-box .lv-go { margin-top: 8px; }

/* ================= Điện thoại: menu gọn trong nút ☰ ================= */
#menu-toggle { display: none; }
body.touch #menu-toggle { display: grid; place-items: center; position: fixed; z-index: 32; top: calc(6px + env(safe-area-inset-top)); right: calc(180px + env(safe-area-inset-right));
  width: 42px; height: 42px; border-radius: 10px; font-size: 22px; line-height: 1; color: #ffe2a8; cursor: pointer;
  background: radial-gradient(ellipse at 50% 30%, rgba(120, 60, 25, 0.7), rgba(28, 13, 8, 0.95) 75%); border: 1px solid rgba(212, 169, 78, 0.7); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55); }
body.touch.menu-open #menu-toggle { background: linear-gradient(#a8402a, #7a2414); }
body.touch #menu, body.touch.dragon-ui #menu { display: none; }
body.touch.menu-open #menu, body.touch.menu-open.dragon-ui #menu {
  display: grid; grid-template-columns: repeat(5, 58px); gap: 6px; transform: none; z-index: 33;
  top: calc(54px + env(safe-area-inset-top)); right: calc(120px + env(safe-area-inset-right)); bottom: auto; left: auto;
  padding: 8px; border-radius: 12px; background: rgba(20, 9, 5, 0.92); border: 1px solid rgba(212, 169, 78, 0.6); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); }
body.touch.menu-open #menu #sound-btn, body.touch.menu-open #menu #dev-btn { width: 58px; height: 58px; }
body.touch.nodev.menu-open #menu { grid-template-columns: repeat(5, 58px); }
@media (max-width: 700px) { body.touch.menu-open #menu, body.touch.menu-open.dragon-ui #menu { right: calc(60px + env(safe-area-inset-right)); grid-template-columns: repeat(5, 52px); } body.touch.menu-open #menu button[data-open] { width: 52px; height: 52px; } }

/* ================= Điện thoại: bản đồ lớn toàn màn hình ================= */
body.touch .panel.map-panel { top: 0 !important; left: 0; right: 0; transform: none; margin: 0; width: calc(100vw / var(--pz)) !important; max-height: none; height: calc(100vh / var(--pz)); border-radius: 0; z-index: 60; }
body.touch .panel.map-panel::before { display: none; }
body.touch .panel.map-panel .p-head { padding-top: 8px; padding-bottom: 6px; }
body.touch .map-panel .worldmap { flex: 1; display: flex; flex-direction: column; padding: 6px 10px 10px; overflow: hidden; }
body.touch .map-panel .bm-wrap { flex: 1; min-height: 0; position: relative; }
body.touch .map-panel #bigmap { width: 100%; height: 100%; max-height: none; object-fit: fill; }
body.touch .map-panel .note { display: none; }
body.touch .map-panel .bm-ctl button { width: 52px; height: 52px; font-size: 24px; }
body.touch.map-open #topright, body.touch.map-open #menu-toggle, body.touch.map-open #tracker { display: none; }

/* điện thoại: 3 nút hay dùng để ngoài, cạnh nút ☰ (☰ mở đủ menu) */
#quick-menu { display: none; }
body.touch #quick-menu { display: flex; gap: 5px; position: fixed; z-index: 32; top: calc(6px + env(safe-area-inset-top)); right: calc(228px + env(safe-area-inset-right)); }
body.touch #quick-menu button { width: 46px; height: 46px; padding: 2px 0 3px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer;
  background: radial-gradient(ellipse at 50% 30%, rgba(120, 60, 25, 0.7), rgba(28, 13, 8, 0.95) 75%); border: 1px solid rgba(212, 169, 78, 0.7); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55); font-size: 18px; color: #fff; }
body.touch #quick-menu button img { width: 28px; height: 28px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.7)); }
body.touch #quick-menu .lbl { font: 700 8px/1 'Be Vietnam Pro', sans-serif; color: #f3dfae; white-space: nowrap; pointer-events: none; }
body.touch #menu-toggle { width: 46px; height: 46px; }
body.touch.map-open #quick-menu { display: none; }

/* ================= Điện thoại: bảng mở toàn màn hình, nằm trên mọi thứ ================= */
body.touch .panel { top: 0 !important; left: 0; right: 0; transform: none; margin: 0 !important; z-index: 60;
  width: calc(100vw / var(--pz)) !important; height: calc(100vh / var(--pz)); max-height: none !important; border-radius: 0; }
body.touch .panel::before { display: none; }
body.touch .panel .p-head { padding: 10px 18px 8px; font-size: 20px; }
body.touch .panel .p-close { font-size: 26px; padding: 4px 10px; }
body.touch .panel > .p-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 22px 18px; }
body.touch.panel-open #quick-menu, body.touch.panel-open #menu-toggle, body.touch.panel-open #sb-toggle { display: none; }
/* sạp hàng vẫn giữ mái lá, cột tre */
body.touch .panel.stall { padding: 0 26px 10px; }
body.touch .panel.stall > .p-head::before { top: -6px; height: 40px; left: -20px; right: -20px; }
body.touch .panel.stall::before, body.touch .panel.stall::after { display: block; top: 0; bottom: 0; }

/* Nhân Vật: 2 cột */
body.touch .panel.char-panel > .p-body { columns: 2; column-gap: 34px; column-rule: 1px solid rgba(110, 70, 25, 0.25); }
body.touch .panel.char-panel .stat, body.touch .panel.char-panel .ch-name, body.touch .panel.char-panel .pts, body.touch .panel.char-panel .note { break-inside: avoid; }
body.touch .panel.char-panel hr { break-after: column; border: none; margin: 0; height: 0; }
body.touch .panel.char-panel hr ~ hr { break-after: auto; border-top: 1px solid rgba(120, 70, 20, 0.3); margin: 8px 0; height: auto; }
body.touch .panel.char-panel .stat { padding: 6px 0; font-size: 15px; }
body.touch .panel.char-panel .plus { width: 34px; height: 34px; font-size: 20px; }

/* Võ Công: cây bên trái, chi tiết bên phải */
body.touch .panel.vc-panel > .p-body.vt { flex-direction: row; align-items: stretch; gap: 14px; overflow: hidden; padding: 10px 14px 12px; }
body.touch .vt-tree { flex: 1.5; min-width: 0; overflow-y: auto; }
body.touch .vt-detail { position: static; flex: 1; min-width: 0; grid-template-columns: 1fr; align-content: start; overflow-y: auto; box-shadow: none; }
body.touch .vt-dic { width: 72px; height: 72px; }
body.touch .vt-dbar .vc-slot { width: 40px; height: 38px; font-size: 16px; }
body.touch .vt-help { display: none; }
body.touch .vt-node { width: 90px; }
body.touch .vt-ic { width: 50px; height: 50px; }

/* Sổ nhiệm vụ: dòng thoáng hơn */
body.touch .qlog summary { padding: 9px 0; font-size: 15px; }
body.touch .panel:has(.doll) .grid.bag { grid-template-columns: repeat(auto-fill, 58px); gap: 7px; }
body.touch .panel:has(.doll) .grid.bag .item { width: 58px; height: 58px; }
body.touch .panel:has(.doll) .grid.bag .item img.ic { width: 44px; height: 44px; }
body.touch .panel:has(.doll) .grid.bag .item .qty { font-size: 11px; }
body.touch .panel:has(.doll) .doll { zoom: 1.25; }

/* bảng nhiệm vụ đang làm: góc trái, ngay dưới khung nhân vật */
#tracker, body:not(.touch) #tracker { left: 16px; right: auto; top: 140px; }
body.touch #tracker { transform: scale(0.72); transform-origin: top left; left: calc(4px + env(safe-area-inset-left)); right: auto; top: calc(84px + env(safe-area-inset-top)); }
body.touch.panel-open #tracker { display: none; }

/* thanh chiêu: máy tính cũng có nút ẩn/hiện */
body:not(.touch) #sb-toggle { display: grid; place-items: center; position: fixed; z-index: 31; left: 50%; bottom: 102px; transform: translateX(-50%);
  width: 34px; height: 22px; border-radius: 8px 8px 0 0; font-size: 13px; color: #ffe2a8; cursor: pointer; background: rgba(20, 10, 8, 0.8); border: 1px solid rgba(212, 169, 78, 0.7); }
body:not(.touch).sb-hidden #skillbar { display: none; }
body:not(.touch).sb-hidden #sb-toggle { bottom: 14px; width: 46px; height: 32px; border-radius: 8px; font-size: 18px; }


/* ================= Tay nắm ngăn kéo: khung trượt ra / thụt vào, tay nắm luôn thò ở mép ================= */
.fold { position: absolute; z-index: 6; width: 20px; height: 54px; padding: 0; cursor: pointer; display: block; font-size: 0; color: transparent;
  background: linear-gradient(90deg, #5a1c0c, #8a3418 45%, #5a1c0c); border: 1px solid #d8a548; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 220, 150, 0.18); transition: filter 0.15s; }
.fold::before { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: solid #ffd98a; border-width: 0 2.5px 2.5px 0; transition: transform 0.3s; }
.fold::after { content: ''; position: absolute; left: 4px; right: 4px; top: 7px; bottom: 7px; border-top: 1px solid rgba(255, 217, 138, 0.45); border-bottom: 1px solid rgba(255, 217, 138, 0.45); pointer-events: none; }
.fold:hover { filter: brightness(1.3); }
/* tay nắm bên phải khung (khung nằm mép trái màn hình) */
.fold-frame, .fold-trk, .fold-chat { right: -21px; top: 50%; margin-top: -27px; border-left: none; border-radius: 0 10px 10px 0; }
/* tay nắm bên trái khung (khung nằm mép phải màn hình) */
.fold-map, .fold-menu { left: -21px; top: 50%; margin-top: -27px; border-right: none; border-radius: 10px 0 0 10px; }
.fold[data-dir='l']::before { transform: translate(-30%, -50%) rotate(135deg); }
.fold[data-dir='r']::before { transform: translate(-70%, -50%) rotate(-45deg); }
.fold[data-dir='u'], .fold[data-dir='d'] { }
.fold-map[data-dir='u']::before, .fold-menu[data-dir='u']::before { transform: translate(-70%, -50%) rotate(-45deg); }
.fold-map[data-dir='d']::before, .fold-menu[data-dir='d']::before { transform: translate(-30%, -50%) rotate(135deg); }
.fold-trk[data-dir='u']::before, .fold-chat[data-dir='d']::before { transform: translate(-30%, -50%) rotate(135deg); }
.fold-trk[data-dir='d']::before, .fold-chat[data-dir='u']::before { transform: translate(-70%, -50%) rotate(-45deg); }
.fold-frame { top: 62px; }
/* trượt khung */
#topright, #tracker, #chat, #menu, #frame .fr-panel { transition: transform 0.35s cubic-bezier(.3, 1.2, .5, 1), opacity 0.3s; }
body.fold-frame #frame .fr-panel { transform: translateX(-115%); opacity: 0; pointer-events: none; }
body.fold-frame .fold-frame { right: auto; left: 112px; }
body.fold-trk #tracker { transform: translateX(calc(-100% - 16px)); }
body.fold-chat #chat { transform: translateX(calc(-100% - 12px)); }
body.fold-map #topright { transform: translateX(calc(100% + 12px)); }
body.fold-menu #menu { transform: translateX(calc(100% + 10px)); }
body.touch .fold { width: 24px; height: 60px; margin-top: -30px; }
body.touch .fold-frame { top: 40px; }
body.touch.fold-frame .fold-frame { left: 74px; }
body.touch.fold-trk #tracker { transform: scale(0.72) translateX(calc(-100% - 6px)); }
body.touch .fold-trk { right: -29px; width: 30px; height: 70px; margin-top: -35px; }
body.touch.fold-map #topright { transform: translateX(calc(100% + 4px)); }
body.touch .fold-chat, body.touch .fold-menu { display: none; }
body.touch.panel-open .fold { display: none; }#menu > .fold { position: absolute !important; width: 20px !important; height: 54px !important; padding: 0 !important; left: -21px; top: 50%; margin-top: -27px; transform: none !important;
  background: linear-gradient(90deg, #5a1c0c, #8a3418 45%, #5a1c0c) !important; border: 1px solid #d8a548 !important; border-right: none !important; border-radius: 10px 0 0 10px !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55) !important; }

/* thẻ "Trang bị ngay" khi nhặt được đồ mạnh hơn */
#eq-prompt { position: fixed; z-index: 45; left: 50%; bottom: 118px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px;
  border-radius: 10px; background: linear-gradient(rgba(40, 16, 8, 0.95), rgba(20, 8, 4, 0.96)); border: 1px solid #d8a548; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 190, 80, 0.25); color: #f6e7c4; overflow: hidden; }
#eq-prompt.go { animation: eqIn 0.35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes eqIn { from { opacity: 0; transform: translate(-50%, 20px); } }
#eq-prompt .eqp-ic { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 3px #000); }
#eq-prompt .eqp-txt { display: flex; flex-direction: column; min-width: 150px; }
#eq-prompt .eqp-txt b { font-size: 14px; }
#eq-prompt .eqp-txt small { font-size: 12px; color: #9fe08a; }
#eq-prompt .btn { padding: 8px 16px; font-weight: 800; }
#eq-prompt .eqp-x { background: none; border: none; color: #c9b28a; font-size: 16px; cursor: pointer; }
#eq-prompt .eqp-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #ffd27a, #c98a2a); transform-origin: left; }
#eq-prompt.go .eqp-bar { animation: eqBar 10s linear forwards; }
@keyframes eqBar { to { transform: scaleX(0); } }
body.touch #eq-prompt { bottom: auto; top: 54px; }
/* cài đặt nhặt đồ */
.pk-box { margin: 2px 0 6px 22px; padding: 6px 10px; border-left: 2px solid rgba(110, 70, 25, 0.35); display: flex; flex-direction: column; gap: 4px; }
.pk-box.off { opacity: 0.45; pointer-events: none; }
.pk-row { display: flex; gap: 16px; flex-wrap: wrap; }
.pk-sel { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pk-sel select { padding: 4px 6px; border-radius: 6px; border: 1px solid rgba(110, 70, 25, 0.5); background: rgba(255, 250, 230, 0.6); font: 600 13px 'Be Vietnam Pro', sans-serif; color: var(--text); }

/* ================= Trò chuyện: bong bóng 💬, mở ra thành khung bong bóng, nút thành ✕ ================= */
#chat-toggle { display: grid !important; place-items: center; position: fixed; z-index: 31; left: 16px; bottom: 26px; width: 52px; height: 52px; border-radius: 50%; padding: 0; cursor: pointer;
  font: 700 22px/1 'Be Vietnam Pro', sans-serif; color: #ffe2a8; background: radial-gradient(circle at 35% 30%, #8a3418, #3a1408 75%); border: 2px solid #d8a548;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 0 8px rgba(255, 200, 100, 0.25); transition: transform 0.15s; }
#chat-toggle:hover { transform: scale(1.07); }
#chat-toggle .ct-n { position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: #d62a1a; color: #fff;
  font: 800 11px/20px 'Be Vietnam Pro', sans-serif; border: 2px solid #2a0e06; animation: ctPop 0.3s; }
@keyframes ctPop { from { transform: scale(0); } }
body:not(.chat-open) #chat { display: none !important; }
#chat, .dragon-ui #chat { left: 16px; bottom: 90px; border-radius: 14px; padding: 6px 8px 8px; background: rgba(16, 7, 4, 0.82); border: 1px solid rgba(216, 165, 72, 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); animation: chatIn 0.22s cubic-bezier(.2, 1.3, .4, 1); transform-origin: 20px 100%; }
@keyframes chatIn { from { opacity: 0; transform: scale(0.6); } }
/* đuôi bong bóng chỉ xuống nút 💬 */
#chat::after { content: ''; position: absolute; left: 18px; bottom: -9px; width: 16px; height: 16px; background: rgba(16, 7, 4, 0.82); border-right: 1px solid rgba(216, 165, 72, 0.6); border-bottom: 1px solid rgba(216, 165, 72, 0.6); transform: rotate(45deg); }
body.touch #chat-toggle { left: calc(132px + env(safe-area-inset-left)); bottom: 18px; width: 44px; height: 44px; font-size: 19px; }
body.touch #chat, body.touch.dragon-ui #chat { left: calc(4px + env(safe-area-inset-left)); bottom: 74px; }
body.touch #chat::after { left: 140px; }
body.touch.panel-open #chat-toggle { display: none !important; }
body.touch #chat, body.touch.dragon-ui #chat { left: calc(132px + env(safe-area-inset-left)); bottom: 72px; width: min(330px, calc(100vw - 440px)); min-width: 240px; }
body.touch #chat-log { height: 88px; }
body.touch #chat::after { left: 14px; }
body.touch.chat-open #tracker { display: none; }

/* thẻ "Nhiệm vụ mới" khi đủ cấp / đủ điều kiện */
#q-prompt { position: fixed; z-index: 46; left: 50%; top: 90px; transform: translateX(-50%); width: min(360px, calc(100vw - 32px)); box-sizing: border-box; padding: 12px 16px 16px; overflow: hidden;
  border-radius: 6px; color: #2e1d10; background: radial-gradient(ellipse at center, rgba(255, 248, 225, 0.3) 40%, rgba(120, 78, 30, 0.3) 100%), url(/assets/ui/paper.webp) center / cover, #e9dcae;
  border: 1px solid #8a5a1c; box-shadow: inset 0 0 20px rgba(110, 66, 20, 0.45), 0 12px 32px rgba(0, 0, 0, 0.6); text-align: center; }
#q-prompt.go { animation: qpIn 0.45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes qpIn { from { opacity: 0; transform: translate(-50%, -30px) scale(0.9); } }
#q-prompt .qp-head { display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 12px/1 'Be Vietnam Pro', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #9a2418; }
#q-prompt .qp-ic { width: 22px; height: 22px; }
#q-prompt .qp-name { display: block; margin: 6px 0 4px; font: 700 19px/1.2 'Noto Serif', serif; color: #7a1c10; }
#q-prompt .qp-text { margin: 0 0 4px; font-size: 13px; line-height: 1.45; color: #4f3a22; font-style: italic; }
#q-prompt .qp-from { display: block; font-size: 12px; color: #6b5233; margin-bottom: 10px; }
#q-prompt .qp-btns { display: flex; gap: 8px; justify-content: center; }
#q-prompt .qp-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: linear-gradient(90deg, #9a2418, #d8a548); transform-origin: left; }
#q-prompt.go .qp-bar { animation: eqBar 6s linear forwards; }
body.touch #q-prompt { top: 56px; zoom: 0.85; }
body:not(.touch) #tracker { top: 158px; }
/* bán hàng loạt: nằm trên danh sách đồ, có nút chọn theo màu */
.p-list > .bulk { position: sticky; top: 0; z-index: 2; margin-bottom: 8px; background: rgba(30, 12, 5, 0.92); border: 1px solid rgba(216, 165, 72, 0.5); border-radius: 8px; padding: 6px 8px; }
.bulk .bk-rar { border-color: var(--rc) !important; color: var(--rc) !important; background: rgba(0, 0, 0, 0.35) !important; font-weight: 800; }
.bulk .bk-rar:hover { background: rgba(255, 255, 255, 0.08) !important; }
/* khung nhân vật: bấm ảnh đại diện để thu/mở (không dùng tay nắm) */
#portrait { cursor: pointer; pointer-events: auto; }
#portrait:hover .ring { filter: brightness(1.15) drop-shadow(0 0 6px rgba(255, 210, 120, 0.6)); }
#frame .fr-panel { transform-origin: left center; }
body.fold-frame #frame .fr-panel { transform: translateX(-30px) scaleX(0.2); opacity: 0; }
/* ô đồ đã ép cao: viền lấp lánh (+7 xanh băng, +9 hồng tím) */
.item.high { animation: upShine 2s ease-in-out infinite; }
@keyframes upShine { 50% { box-shadow: 0 0 10px rgba(120, 220, 255, 0.8), inset 0 0 8px rgba(120, 220, 255, 0.5); } }
.item.max9 { animation: upShine9 1.6s ease-in-out infinite; border-color: #ff7ad8 !important; }
@keyframes upShine9 { 50% { box-shadow: 0 0 14px rgba(255, 110, 220, 0.9), inset 0 0 10px rgba(255, 110, 220, 0.6); } }
.item.max12 { border-color: #ff5a3a !important; animation: upShine12 1.2s ease-in-out infinite; }
@keyframes upShine12 { 50% { box-shadow: 0 0 16px rgba(255, 90, 50, 0.95), inset 0 0 12px rgba(255, 200, 80, 0.7); } }

/* ================= Tổ đội ================= */
#party-hud { position: fixed; z-index: 21; left: 372px; top: 18px; display: flex; flex-direction: column; gap: 4px; }
.ph-m { width: 150px; padding: 4px 8px 6px; border-radius: 6px; background: rgba(20, 9, 5, 0.78); border: 1px solid rgba(216, 165, 72, 0.5); color: #f6e7c4; font-size: 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; }
.ph-m b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-m small { color: #d9bf88; }
.ph-m i { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
.ph-m s { display: block; height: 100%; background: linear-gradient(90deg, #c0392b, #ff6a4a); }
.ph-m.far { opacity: 0.5; }
body.fold-frame #party-hud { left: 140px; }
body.touch #party-hud { left: calc(212px + env(safe-area-inset-left)); top: 4px; transform: scale(0.8); transform-origin: top left; }
body.touch.panel-open #party-hud { display: none; }
.pt-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.pt-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; background: rgba(255, 250, 230, 0.35); border: 1px solid rgba(110, 70, 25, 0.3); }
.pt-row .pt-cls { font-size: 11px; color: var(--muted); width: 72px; }
.pt-row .pt-lv { margin-left: auto; font-weight: 700; color: var(--ink-red); }
.pt-tag { padding: 1px 6px; border-radius: 8px; background: rgba(110, 70, 25, 0.2); font-size: 10.5px; }
.pt-tag.me { background: #9a2418; color: #fff3d8; }
.pt-wait { color: var(--ink-red); font-weight: 600; }
body.panel-open #party-hud { display: none; }

/* máy tính: menu thu vào nút tròn ☰ ở góc phải dưới (giống nút trò chuyện); mở ra thì nút thành ✕ */
body:not(.touch) #menu-toggle { display: grid; place-items: center; position: fixed; z-index: 31; right: 16px; bottom: 26px; width: 52px; height: 52px; border-radius: 50%; padding: 0; cursor: pointer;
  font: 700 24px/1 'Be Vietnam Pro', sans-serif; color: #ffe2a8; background: radial-gradient(circle at 35% 30%, #8a3418, #3a1408 75%); border: 2px solid #d8a548;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 0 8px rgba(255, 200, 100, 0.25); transition: transform 0.15s; }
body:not(.touch) #menu-toggle:hover { transform: scale(1.07); }
body:not(.touch):not(.menu-open) #menu { display: none !important; }
body:not(.touch).dragon-ui #menu, body:not(.touch) #menu { right: 16px; bottom: 90px; padding: 8px; border-radius: 14px; background: rgba(16, 7, 4, 0.82); border: 1px solid rgba(216, 165, 72, 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); animation: chatIn 0.22s cubic-bezier(.2, 1.3, .4, 1); transform-origin: calc(100% - 26px) 100%; }
body:not(.touch) #menu::after { content: ''; position: absolute; right: 18px; bottom: -9px; width: 16px; height: 16px; background: rgba(16, 7, 4, 0.82); border-right: 1px solid rgba(216, 165, 72, 0.6); border-bottom: 1px solid rgba(216, 165, 72, 0.6); transform: rotate(45deg); }
#menu > .fold { display: none !important; }
/* 4 phái ở màn tạo nhân vật */
.lv-classes { grid-template-columns: repeat(4, minmax(0, 190px)); }
@media (max-height: 520px) { .lv-classes { grid-template-columns: repeat(4, minmax(0, 170px)); } }
@media (max-width: 560px) { .lv-classes { grid-template-columns: repeat(2, 1fr); } }

/* ================= Trang giới thiệu & hướng dẫn tân thủ ================= */
#intro { --gold: #ffd76a; --ink: #140906; position: fixed; inset: 0; z-index: 60; overflow-y: auto; overflow-x: hidden; background: var(--ink); color: #f6e7c4; font-family: 'Be Vietnam Pro', sans-serif; transition: opacity 0.5s, transform 0.5s; }
#intro.out { opacity: 0; transform: scale(1.04); }
#intro h2 { margin: 0; text-align: center; font: 800 clamp(26px, 3.6vw, 40px)/1.2 'Noto Serif', serif; background: linear-gradient(180deg, #fff3c4, #ffd56a 55%, #d8962c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7)); }
/* hiện dần khi cuộn tới */
#intro .rv { opacity: 0; transform: translateY(36px); transition: opacity 0.8s ease var(--d, 0s), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s); }
#intro .rv.in { opacity: 1; transform: none; }
/* thanh trên cùng */
.it-nav { position: fixed; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 18px; padding: 10px max(18px, calc(50% - 560px)); background: linear-gradient(rgba(20, 8, 4, 0.92), rgba(20, 8, 4, 0.78)); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(216, 165, 72, 0.35); transform: translateY(-110%); transition: transform 0.4s; }
.it-nav.on { transform: none; }
.it-brand { display: flex; align-items: center; gap: 8px; color: var(--gold); text-decoration: none; font: 800 18px 'Noto Serif', serif; letter-spacing: 0.08em; }
.it-brand img { width: 30px; height: 30px; }
.it-links { flex: 1; display: flex; justify-content: center; gap: 22px; }
.it-links a { position: relative; color: #e9d4ae; text-decoration: none; font-weight: 600; font-size: 14px; padding: 4px 0; }
.it-links a::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; background: var(--gold); transition: left 0.25s, right 0.25s; }
.it-links a:hover { color: #fff; } .it-links a:hover::after { left: 0; right: 0; }
.it-nav-go { padding: 8px 18px; border: 1px solid #ffe6a0; border-radius: 8px; cursor: pointer; font: 800 14px 'Noto Serif', serif; color: #3a1a06; background: linear-gradient(#ffe7a0, #e3a83c 60%, #b8741c); box-shadow: 0 0 18px rgba(255, 200, 90, 0.35); }
/* đầu trang */
.it-hero { position: relative; min-height: 100vh; min-height: 100svh; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 18px 80px; overflow: hidden; }
.it-bgs { position: absolute; inset: -4% 0 -12%; will-change: transform; }
.it-bg { position: absolute; inset: 0; background: center / cover; opacity: 0; transition: opacity 2.2s ease; }
.it-bg.on { opacity: 1; animation: itKen 14s ease-out forwards; }
@keyframes itKen { from { transform: scale(1.14) translate(1.5%, 1%); } to { transform: scale(1.02); } }
.it-mist { position: absolute; left: -20%; right: -20%; bottom: 0; height: 55%; background: radial-gradient(ellipse 40% 50% at 30% 70%, rgba(255, 236, 200, 0.16), transparent 70%), radial-gradient(ellipse 35% 40% at 75% 80%, rgba(255, 230, 190, 0.12), transparent 70%); animation: lvMist 18s ease-in-out infinite alternate; pointer-events: none; }
.it-mist.b { bottom: 12%; opacity: 0.7; animation-duration: 26s; animation-direction: alternate-reverse; }
.it-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.it-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(10, 4, 2, 0.15), rgba(10, 4, 2, 0.55) 60%, rgba(10, 4, 2, 0.92)), linear-gradient(transparent 70%, var(--ink)); }
.it-hc { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }
.it-emb { position: relative; width: 130px; height: 130px; animation: itIn 1s ease both; }
.it-emblem { position: absolute; inset: 14px; background: center / contain no-repeat; filter: drop-shadow(0 0 26px rgba(255, 200, 80, 0.7)); animation: lvFloat 5s ease-in-out infinite; }
.it-ring { position: absolute; inset: -18px; background: center / contain no-repeat; opacity: 0.55; animation: itSpin 40s linear infinite; filter: drop-shadow(0 0 10px rgba(255, 190, 70, 0.5)); }
@keyframes itSpin { to { transform: rotate(360deg); } }
@keyframes itIn { from { opacity: 0; transform: scale(0.6); filter: blur(8px); } }
.it-hero h1 { margin: 10px 0 0; font: 900 clamp(48px, 8.4vw, 104px)/1 'Noto Serif', serif; letter-spacing: 0.06em; }
.it-t1 { display: block; filter: drop-shadow(0 3px 0 #5a2a06) drop-shadow(0 10px 22px rgba(0, 0, 0, 0.85)); }
.it-t1 i { display: inline-block; font-style: normal; background: linear-gradient(100deg, #ffd56a 0%, #c8811d 30%, #ffe08a 45%, #fffbe8 50%, #ffe08a 55%, #c8811d 70%, #ffd56a 100%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: itRise 0.9s cubic-bezier(0.2, 0.9, 0.2, 1.2) calc(0.3s + var(--i) * 0.07s) both, itGleam 6s linear calc(1.6s + var(--i) * 0.05s) infinite; }
@keyframes itRise { from { opacity: 0; transform: translateY(40px) rotateX(70deg); filter: blur(6px); } }
@keyframes itGleam { from { background-position: 100% 0; } 40%, to { background-position: 0 0; } }
.it-t2 { display: block; margin-top: 10px; font-size: 0.24em; letter-spacing: 0.9em; padding-left: 0.9em; color: #ffe2a0; text-shadow: 0 0 18px rgba(255, 190, 80, 0.7), 0 2px 4px #000; animation: itTrack 1.4s ease 0.9s both; }
@keyframes itTrack { from { opacity: 0; letter-spacing: 0.2em; } }
.it-tag { max-width: 680px; margin: 22px 0 30px; font-size: clamp(14px, 1.6vw, 18px); line-height: 1.65; color: #f6e2b8; text-shadow: 0 2px 6px #000; animation: lvFade 1s ease 1.3s both; }
.it-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; animation: lvFade 1s ease 1.6s both; }
.it-play { min-width: 280px; }
.it-ghost { padding: 13px 26px; border-radius: 10px; color: #ffe2a0; text-decoration: none; font: 700 16px 'Noto Serif', serif; border: 1px solid rgba(255, 215, 120, 0.55); background: rgba(20, 8, 4, 0.35); backdrop-filter: blur(4px); transition: background 0.25s, box-shadow 0.25s; }
.it-ghost:hover { background: rgba(255, 210, 110, 0.15); box-shadow: 0 0 22px rgba(255, 200, 90, 0.35); }
.it-scroll { position: absolute; z-index: 1; bottom: 26px; left: 50%; width: 24px; height: 38px; margin-left: -12px; border: 2px solid rgba(255, 220, 140, 0.7); border-radius: 14px; animation: lvFade 1s ease 2.2s both; }
.it-scroll span { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--gold); animation: itWheel 1.8s ease-in-out infinite; }
@keyframes itWheel { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
/* dải số liệu */
.it-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 980px; margin: -40px auto 0; padding: 0 18px; gap: 12px; }
.it-st { padding: 16px 8px; text-align: center; border-radius: 12px; background: linear-gradient(rgba(60, 24, 8, 0.9), rgba(30, 12, 5, 0.95)); border: 1px solid rgba(216, 165, 72, 0.45); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 230, 160, 0.15); }
.it-st b { display: block; font: 900 clamp(28px, 4vw, 42px)/1 'Noto Serif', serif; color: var(--gold); text-shadow: 0 0 18px rgba(255, 190, 70, 0.5); }
.it-st span { display: block; margin-top: 6px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #d9bf88; }
/* khung chung các phần */
.it-sec { position: relative; padding: 80px 18px; max-width: 1140px; margin: 0 auto; box-sizing: border-box; }
.it-dark { max-width: none; background: radial-gradient(ellipse at 50% 0%, rgba(120, 50, 14, 0.35), transparent 60%), linear-gradient(rgba(40, 14, 6, 0.92), rgba(20, 8, 4, 0.96)), var(--panel-tex, none) 0 0 / 256px; border-top: 1px solid rgba(216, 165, 72, 0.2); border-bottom: 1px solid rgba(216, 165, 72, 0.2); }
#intro .it-dark > * { max-width: 1140px; margin-left: auto; margin-right: auto; }
.it-hd { display: flex; flex-direction: column; align-items: center; margin-bottom: 26px; }
.it-hd small { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.4em; padding-left: 0.4em; text-transform: uppercase; color: #e0a64a; }
.it-orn { width: min(300px, 64%); margin-top: 8px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6)); }
.it-lead { max-width: 760px; margin: 0 auto 30px; text-align: center; line-height: 1.75; color: #e9d4ae; }
/* vùng đất */
.it-places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.it-places figure { --mx: 50%; --my: 50%; margin: 0; aspect-ratio: 16 / 10; border-radius: 14px; position: relative; overflow: hidden; cursor: default; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55); border: 1px solid rgba(216, 165, 72, 0.4); transition: opacity 0.8s ease var(--d, 0s), transform 0.35s ease, box-shadow 0.35s; }
#intro .it-places figure.in { transition: transform 0.25s ease-out, box-shadow 0.35s; }
.it-places figure > span { position: absolute; inset: 0; background: center / cover; transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s; }
.it-places figure .b { opacity: 0; }
.it-places figure:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px #ffd27a, 0 0 30px rgba(255, 190, 70, 0.35); }
.it-places figure:hover > span { transform: scale(1.1); }
.it-places figure:hover .b { opacity: 1; }
.it-places figure::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 240, 200, 0.22), transparent 45%); opacity: 0; transition: opacity 0.3s; }
.it-places figure:hover::after { opacity: 1; }
.it-places figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); display: flex; flex-direction: column; gap: 2px; }
.it-places figcaption b { font: 800 18px 'Noto Serif', serif; color: #ffe2a0; text-shadow: 0 2px 4px #000; }
.it-places figcaption small { color: #e9d4ae; font-size: 12.5px; transform: translateY(6px); opacity: 0.75; transition: transform 0.35s, opacity 0.35s; }
.it-places figure:hover figcaption small { transform: none; opacity: 1; }
/* chọn phái */
.it-show { display: grid; grid-template-columns: 230px 1fr 1.15fr; gap: 22px; align-items: center; }
.it-tabs { display: flex; flex-direction: column; gap: 10px; }
.it-tabs button { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; cursor: pointer; text-align: left; color: #e9d4ae; background: rgba(255, 220, 150, 0.05); border: 1px solid rgba(216, 165, 72, 0.25); overflow: hidden; transition: background 0.25s, border-color 0.25s, transform 0.25s; }
.it-tabs button img { width: 44px; height: 56px; object-fit: cover; object-position: 50% 4%; border-radius: 8px; background: rgba(0, 0, 0, 0.35); }
.it-tabs button b { display: block; font: 700 16px 'Noto Serif', serif; color: #ffe2a0; }
.it-tabs button small { font-size: 12px; color: #c9ad7a; }
.it-tabs button:hover { transform: translateX(4px); border-color: rgba(255, 215, 120, 0.6); }
.it-tabs button.on { background: linear-gradient(90deg, rgba(255, 200, 90, 0.25), rgba(255, 200, 90, 0.04)); border-color: #ffd27a; box-shadow: 0 0 20px rgba(255, 190, 70, 0.25); }
.it-tabs button.on::before { content: ''; position: absolute; left: 0; top: 10%; bottom: 10%; width: 3px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.it-stage { --c: 255, 200, 90; position: relative; height: 440px; display: flex; align-items: flex-end; justify-content: center; }
.it-stage[data-cls=kiem] { --c: 255, 130, 70; } .it-stage[data-cls=phap] { --c: 190, 110, 255; } .it-stage[data-cls=cung] { --c: 120, 230, 140; } .it-stage[data-cls=dao] { --c: 150, 220, 255; }
.it-aura { position: absolute; left: 50%; top: 46%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--c), 0.45), rgba(var(--c), 0.12) 45%, transparent 70%); filter: blur(6px); animation: itBreath 4s ease-in-out infinite; transition: background 0.6s; }
@keyframes itBreath { 50% { transform: scale(1.12); opacity: 0.8; } }
.it-sring { position: absolute; left: 50%; top: 46%; width: 330px; height: 330px; margin: -165px 0 0 -165px; background: center / contain no-repeat; opacity: calc(0.18 + var(--tier, 1) * 0.06); animation: itSpin 30s linear infinite; }
.it-floor { position: absolute; bottom: 8px; left: 50%; width: 240px; height: 40px; margin-left: -120px; border-radius: 50%; background: radial-gradient(ellipse, rgba(var(--c), 0.55), rgba(var(--c), 0.1) 55%, transparent 72%); }
.it-hero-img { position: relative; z-index: 1; height: 420px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 calc(var(--tier, 1) * 5px) rgba(var(--c), 0.8)); animation: itHover 5s ease-in-out infinite; }
.it-hero-img.pop { animation: itPop 0.7s cubic-bezier(0.2, 0.9, 0.2, 1.1), itHover 5s ease-in-out 0.7s infinite; }
@keyframes itPop { from { opacity: 0; transform: translateY(24px) scale(0.92); filter: brightness(2.2) blur(4px); } }
@keyframes itHover { 50% { transform: translateY(-8px); } }
.it-tiers { position: absolute; z-index: 2; bottom: -6px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 20px; background: rgba(14, 6, 3, 0.75); border: 1px solid rgba(216, 165, 72, 0.4); }
.it-tiers small { white-space: nowrap; margin-right: 4px; font-size: 11px; color: #c9ad7a; }
.it-tiers button { width: 24px; height: 24px; padding: 0; border-radius: 50%; cursor: pointer; font: 700 11px 'Be Vietnam Pro', sans-serif; color: #e9d4ae; background: rgba(255, 220, 150, 0.08); border: 1px solid rgba(216, 165, 72, 0.4); transition: all 0.2s; }
.it-tiers button.on, .it-tiers button:hover { color: #3a1a06; background: linear-gradient(#ffe7a0, #d8962c); border-color: #ffe6a0; box-shadow: 0 0 10px rgba(255, 200, 90, 0.6); }
.it-info.pop { animation: itSlide 0.6s ease both; }
@keyframes itSlide { from { opacity: 0; transform: translateX(24px); } }
.it-role { font-size: 12px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgb(var(--c, 255, 200, 90)); color: #e0a64a; }
.it-info h3 { margin: 4px 0 8px; font: 900 34px 'Noto Serif', serif; color: var(--gold); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.it-info > p { margin: 0 0 14px; line-height: 1.65; color: #e9d4ae; }
.it-met { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-bottom: 16px; }
.it-met div { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #d9bf88; }
.it-met i { height: 7px; border-radius: 4px; background: rgba(255, 220, 150, 0.1); overflow: hidden; }
.it-met b { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #b8741c, #ffd56a); box-shadow: 0 0 8px rgba(255, 200, 90, 0.6); animation: itBar 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes itBar { from { width: 0; } }
.it-paths { display: grid; gap: 10px; }
.it-paths div { padding: 10px 12px; border-radius: 10px; background: rgba(255, 220, 150, 0.05); border: 1px solid rgba(216, 165, 72, 0.22); border-left: 3px solid var(--pc); }
.it-paths b { display: flex; align-items: center; gap: 8px; font: 700 15px 'Noto Serif', serif; color: var(--pc); }
.it-paths em { font: 700 10.5px 'Be Vietnam Pro', sans-serif; font-style: normal; padding: 1px 7px; border-radius: 8px; color: #1a0c05; background: var(--pc); }
.it-paths p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #d9c59c; }
/* hướng dẫn */
.it-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.it-step { position: relative; padding: 18px 18px 16px; border-radius: 12px; color: #2e1d10; background: radial-gradient(ellipse at center, rgba(255, 248, 225, 0.3) 40%, rgba(120, 78, 30, 0.25) 100%), url(/assets/ui/paper.webp) center / cover, #e9dcae; box-shadow: inset 0 0 18px rgba(110, 66, 20, 0.4), 0 6px 16px rgba(0, 0, 0, 0.45); }
#intro .it-step.in { transition: transform 0.3s, box-shadow 0.3s; }
.it-step:hover { transform: translateY(-6px) rotate(-0.4deg); box-shadow: inset 0 0 18px rgba(110, 66, 20, 0.4), 0 16px 30px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 215, 120, 0.6); }
.it-step .it-n { position: absolute; right: 12px; top: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 900 16px 'Noto Serif', serif; color: #fff1d6; background: radial-gradient(circle at 35% 30%, #d0442e, #8e1f14); box-shadow: 0 0 0 2px rgba(142, 31, 20, 0.35), 0 2px 4px rgba(0, 0, 0, 0.4); transform: rotate(-8deg); }
.it-step .it-ic { display: inline-block; font-size: 30px; transition: transform 0.3s; }
.it-step:hover .it-ic { transform: scale(1.2) rotate(-8deg); }
.it-step b { display: block; margin: 4px 0; font: 700 17px 'Noto Serif', serif; color: #9a2418; }
.it-step p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.it-rar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 26px; color: #d9bf88; font-size: 14px; }
.it-rar i { font-style: normal; font-weight: 800; padding: 4px 12px; border-radius: 14px; color: var(--c); border: 1px solid var(--c); background: rgba(0, 0, 0, 0.35); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent); }
.it-rar em { font-style: normal; color: #8c6a3a; }
/* điều khiển */
.it-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.it-keys > div { padding: 20px 22px; border-radius: 14px; background: rgba(255, 220, 150, 0.05); border: 1px solid rgba(216, 165, 72, 0.3); }
.it-keys h3 { margin: 0 0 10px; color: var(--gold); font-family: 'Noto Serif', serif; }
.it-keys p { margin: 6px 0; line-height: 1.75; color: #e9d4ae; }
kbd { display: inline-block; min-width: 18px; padding: 1px 7px; border-radius: 5px; background: #2a1408; border: 1px solid #b8862f; box-shadow: 0 2px 0 #5a2a06; color: #ffe2a8; font: 700 12px 'Be Vietnam Pro', sans-serif; text-align: center; }
/* cuối trang */
.it-end { padding: 90px 18px 30px; text-align: center; background: center / cover; background-attachment: fixed; }
.it-tips { max-width: 720px; margin: 0 auto 34px; padding: 0; list-style: none; text-align: left; }
.it-tips li { position: relative; margin: 0 0 10px; padding: 10px 14px 10px 40px; border-radius: 10px; line-height: 1.55; color: #f0dcb4; background: rgba(14, 6, 3, 0.55); border: 1px solid rgba(216, 165, 72, 0.25); backdrop-filter: blur(3px); }
.it-tips li::before { content: '✦'; position: absolute; left: 14px; top: 10px; color: var(--gold); text-shadow: 0 0 8px var(--gold); }
.it-end footer { margin-top: 60px; font-size: 12px; color: #8c6a3a; }
@media (max-width: 960px) {
  .it-show { grid-template-columns: 1fr 1fr; }
  .it-tabs { grid-column: 1 / -1; flex-direction: row; overflow-x: auto; }
  .it-tabs button { flex: 1 0 auto; }
  .it-links { display: none; } .it-nav { justify-content: space-between; }
}
@media (max-width: 760px) {
  .it-places, .it-steps { grid-template-columns: 1fr 1fr; }
  .it-stats { grid-template-columns: 1fr 1fr; }
  .it-keys { grid-template-columns: 1fr; }
  .it-show { grid-template-columns: 1fr; }
  .it-stage { height: 340px; } .it-hero-img { height: 320px; }
  .it-tabs { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .it-tabs button img { display: none; }
  .it-sec { padding: 60px 16px; }
  .it-end { background-attachment: scroll; }
}
@media (max-width: 480px) { .it-places, .it-steps { grid-template-columns: 1fr; } .it-play { min-width: 0; width: 100%; } .it-cta { width: 100%; } }
@media (max-height: 520px) {
  .it-hero { min-height: 100vh; padding: 20px 16px 50px; } .it-emb { width: 70px; height: 70px; } .it-hero h1 { font-size: 46px; }
  .it-tag { margin: 10px 0 14px; font-size: 13px; } .it-scroll { display: none; } .it-stats { margin-top: 0; padding-top: 20px; grid-template-columns: repeat(4, 1fr); }
  .it-show { grid-template-columns: 1fr 1fr; } .it-stage { height: 300px; } .it-hero-img { height: 280px; }
}
@media (prefers-reduced-motion: reduce) { #intro *, #intro *::before, #intro *::after { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; transition-duration: 0.01s !important; } }
/* hướng dẫn cài như ứng dụng */
.lv-modal.inst { z-index: 70; }
.inst-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); }
.inst-tabs button { flex: 1; padding: 8px; border: none; border-radius: 8px; background: none; color: #d9bf88; font-weight: 700; cursor: pointer; }
.inst-tabs button.on { background: linear-gradient(#e3b558, #a8701e); color: #2a1206; }
.inst-steps { margin: 4px 0 0; padding-left: 22px; text-align: left; line-height: 1.75; color: #f0dcb4; font-size: 14px; }
.inst-steps b { color: #ffd76a; }
.inst-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: #2a6fd6; color: #fff; font-size: 13px; vertical-align: middle; }
@media (max-height: 520px) { .lv-top .lv-chip { padding: 5px 9px; font-size: 11.5px; } .lv-top { gap: 5px; } .lv-logo { margin-right: 250px; } }