/* Ngũ Hành Tiên Đồ — giao diện cổ trang: khung kem viền vàng, ô kỹ năng ngọc bích */
:root {
  --cream: #fbf3df; --cream2: #f3e6c4; --gold: #c9a86a; --gold2: #e8c547; --ink: #4a3420; --ink2: #7a5a38;
  --wood: #4a2e1a; --jade: #1d4554; --jade2: #2a6476; --red: #d83a2a; --good: #2e9a3e; --bad: #c8382a; --warn: #c8841a;
  --font: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #10141a; font-family: var(--font); color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#game { position: fixed; inset: 0; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.hidden { display: none !important; }
.good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); } .dim { color: #8a7a62; } .center { text-align: center; }
b { font-weight: 700; }

/* ===== Nút ===== */
.btn { font-family: var(--font); font-size: 14px; font-weight: 600; color: #f8ecd0; background: linear-gradient(#6a4628, #4a2e1a); border: 2px solid var(--gold); border-radius: 8px; padding: 7px 14px; cursor: pointer; box-shadow: 0 2px 0 #2a1a0e, inset 0 1px 0 rgba(255,255,255,0.15); transition: transform .08s, filter .15s; }
.btn:hover { filter: brightness(1.15); } .btn:active { transform: translateY(1px); }
.btn.gold { background: linear-gradient(#e8c060, #b88a2a); color: #3a2410; border-color: #fff0b0; }
.btn.bad { background: linear-gradient(#a83a2a, #6a1a10); }
.btn.sm { font-size: 12px; padding: 4px 10px; border-radius: 6px; }
.btn.big { font-size: 18px; padding: 12px 26px; min-width: 260px; }
.btn small { display: block; font-size: 11px; font-weight: 400; opacity: .85; }
.btn.opt.on { background: linear-gradient(#e8c060, #b88a2a); color: #3a2410; }

.cream { background: linear-gradient(var(--cream), var(--cream2)); border: 2px solid var(--gold); border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.5); }
.el-badge { display: inline-block; width: 22px; height: 22px; vertical-align: middle; flex: none; image-rendering: pixelated; filter: drop-shadow(0 0 3px var(--ec)); }
.el-badge.big { width: 40px; height: 40px; }
.ic { width: 22px; height: 22px; vertical-align: middle; image-rendering: pixelated; }
.ic.sm { width: 18px; height: 18px; margin-right: 3px; }
.small { font-size: 11px; }

/* ===== HUD: khung người chơi ===== */
#hud-player { position: fixed; left: 10px; top: 10px; display: flex; gap: 10px; padding: 8px 12px 8px 8px; width: 320px; z-index: 5; }
.pf-ava { position: relative; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(#fff8e0, #e8d0a0); border: 3px solid var(--gold); overflow: hidden; flex: none; }
.pf-ava canvas { width: 56px; height: 56px; image-rendering: pixelated; }
.pf-lv { position: absolute; right: -2px; bottom: -2px; background: #3a2a18; color: #ffe8a0; border: 2px solid var(--gold); border-radius: 50%; width: 24px; height: 24px; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.pf-info { flex: 1; min-width: 0; }
.pf-top { display: flex; align-items: center; gap: 6px; }
.pf-name { font-weight: 800; font-size: 16px; color: #3a2410; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-stone { margin-left: auto; display: flex; align-items: center; gap: 3px; background: #f0e2bc; border: 1px solid var(--gold); border-radius: 10px; padding: 0 7px 0 3px; font-size: 12px; font-weight: 700; }
.pf-stone img { width: 18px; height: 18px; image-rendering: pixelated; }
.pf-realm { font-size: 12px; font-weight: 600; color: var(--good); margin: 1px 0 3px; }
.bar { position: relative; height: 13px; background: #fff; border: 1.5px solid #b89a6a; border-radius: 8px; overflow: hidden; margin-top: 3px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; transition: width .15s; }
.bar.hp i { background: linear-gradient(#ff8a7a, #e03a3a); }
.bar.mp i { background: linear-gradient(#7ab8ff, #3a7ae0); }
.bar span { position: absolute; inset: 0; font-size: 9.5px; line-height: 11px; text-align: center; font-weight: 700; color: #3a2010; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
#hud-buffs { position: fixed; left: 12px; top: 92px; display: flex; gap: 4px; flex-wrap: wrap; max-width: 320px; z-index: 5; }
.buff { position: relative; width: 28px; height: 28px; background: var(--jade); border: 1.5px solid var(--gold); border-radius: 5px; }
.buff img { width: 100%; height: 100%; image-rendering: pixelated; }
.buff em { display: block; text-align: center; font: 700 15px/25px "Noto Serif", serif; color: #fff; font-style: normal; }
.buff.debuff { background: #5a1a1a; border-color: #ff7a6a; }
.buff.nh { background: linear-gradient(135deg, #e8c547, #4fc25a, #3d9cf0, #f0532f, #c08a3e); }
.buff span { position: absolute; bottom: -2px; right: 0; font-size: 9px; font-weight: 800; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.buff b { position: absolute; top: -3px; right: 0; font-size: 9px; color: #ffe060; text-shadow: 0 0 2px #000; }
#btn-break { position: fixed; left: 14px; top: 126px; z-index: 6; font: 800 14px var(--font); color: #3a1a08; background: linear-gradient(#fff0a0, #e8a020); border: 2px solid #fff8d0; border-radius: 20px; padding: 8px 16px; cursor: pointer; animation: glowPulse 1.2s infinite; }
@keyframes glowPulse { 0%,100% { box-shadow: 0 0 6px #ffd040; } 50% { box-shadow: 0 0 22px #ffe080, 0 0 40px #ffb020; } }

/* ===== Mục tiêu ===== */
#hud-target { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); width: 280px; z-index: 5; padding: 6px 12px 7px; background: linear-gradient(#f8ecd0, #e8d4a8); border: 2px solid var(--gold); border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.35); cursor: pointer; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }
#hud-target.boss { background: linear-gradient(#f8d8c8, #e0a890); border-color: #ff8060; }
.tg-head { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; font-size: 13px; color: #3a2010; }
.bar.tg { height: 14px; border-radius: 3px; background: #2a2018; border-color: #6a5030; }
.bar.tg i { background: linear-gradient(#5ad04a, #2a8a2a); border-radius: 2px; }
#hud-target.boss .bar.tg i { background: linear-gradient(#ff6a4a, #c02a1a); }
.bar.tg span { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; line-height: 12px; }
#tg-rel { text-align: center; font-size: 11px; font-weight: 700; margin-top: 2px; }

/* ===== Bên phải: bản đồ nhỏ, menu, nhiệm vụ ===== */
#hud-right { position: fixed; right: 10px; top: 10px; width: 240px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
#hud-right > * { pointer-events: auto; }
#hud-mini { position: relative; width: 140px; height: 140px; border-radius: 50%; border: 4px solid #2a2018; box-shadow: 0 0 0 2px var(--gold), 0 4px 12px rgba(0,0,0,0.5); background: #1a2018; }
#minimap { width: 132px; height: 132px; border-radius: 50%; cursor: pointer; }
#mini-name { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); white-space: nowrap; background: var(--wood); color: #ffe8a0; border: 1.5px solid var(--gold); border-radius: 10px; padding: 1px 10px; font-size: 11px; font-weight: 700; }
#mini-coord { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-size: 9px; color: #fff; text-shadow: 0 0 2px #000; }
#hud-menu { display: grid; grid-template-columns: repeat(6, 38px); gap: 4px; margin-top: 8px; justify-content: end; }
#hud-menu button { width: 38px; height: 38px; border-radius: 9px; background: radial-gradient(circle at 50% 30%, #3a8aa0, #163a48 75%); border: 2px solid var(--gold); cursor: pointer; position: relative; padding: 0; box-shadow: inset 0 0 0 1.5px #0e2a34, 0 2px 4px rgba(0,0,0,0.45); }
#hud-menu button img { width: 28px; height: 28px; image-rendering: pixelated; margin-top: 2px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)); }
#hud-menu button:hover { filter: brightness(1.25); transform: translateY(-1px); }
#hud-menu .dot { display: none; }
#hud-quests { width: 240px; background: rgba(20,14,8,0.72); border: 1.5px solid rgba(201,168,106,0.7); border-radius: 8px; color: #f0e6d0; font-size: 12px; overflow: hidden; }
.hq-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; background: rgba(90,58,32,0.85); color: #ffd880; font-weight: 800; }
.hq-head button, .chat-head button { background: none; border: none; color: #ffd880; cursor: pointer; font-size: 14px; }
#hud-quests.min #quest-list { display: none; }
#quest-list { max-height: 34vh; overflow-y: auto; padding: 4px 6px; }
.qt { padding: 4px 4px; border-bottom: 1px dashed rgba(255,255,255,0.12); cursor: pointer; border-radius: 4px; }
.qt:hover { background: rgba(255,220,140,0.1); }
.qt-h { font-weight: 700; color: #ffe8b0; }
.qt-l { padding-left: 8px; color: #d8d0c0; font-size: 11.5px; }
.qt-l.done { color: #7ad86a; } .qt-l.turn { color: #ffd040; font-weight: 700; }
.qtag { display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 4px; margin-right: 4px; color: #1a1208; font-weight: 800; }
.tg-main { background: #ffc040; } .tg-side { background: #8ad0ff; } .tg-daily { background: #a0e080; } .tg-sect { background: #e090ff; }

/* ===== Thanh kỹ năng ===== */
#hud-bottom { position: fixed; left: 50%; bottom: calc(8px + var(--safe-b)); transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#skillbar { display: flex; gap: 5px; padding: 5px 7px; background: rgba(30,20,12,0.55); border: 1.5px solid rgba(201,168,106,0.6); border-radius: 10px; }
.slot.skill { position: relative; width: 52px; height: 52px; border-radius: 7px; background: radial-gradient(circle at 50% 35%, #2e6a7e, var(--jade)); border: 2px solid var(--gold); box-shadow: inset 0 0 0 2px #0e2a34, 0 2px 4px rgba(0,0,0,0.5); cursor: pointer; overflow: hidden; }
.slot.skill img { position: absolute; inset: 6px; width: 36px; height: 36px; image-rendering: pixelated; }
.slot.skill .key { position: absolute; left: 2px; top: 1px; font-size: 9px; font-weight: 800; color: #3a2410; background: #f8ecc8; border-radius: 3px; padding: 0 3px; line-height: 12px; z-index: 3; }
.slot.skill .cd { position: absolute; inset: 0; z-index: 2; }
.slot.skill .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; z-index: 3; }
.slot.skill .cnt { position: absolute; right: 2px; bottom: 0; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; z-index: 3; }
.slot.skill .lock { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; font-size: 8px; font-weight: 700; color: #ffd0a0; z-index: 3; padding-bottom: 2px; text-shadow: 0 0 2px #000; }
.slot.skill.locked img { filter: grayscale(1) brightness(0.45); }
.slot.skill.nomp img { filter: saturate(0.3) brightness(0.7); }
.slot.skill.active { border-color: #9affd8; box-shadow: 0 0 10px #5affc0, inset 0 0 0 2px #0e2a34; }
#expbar { position: relative; width: 470px; height: 14px; background: #2a2018; border: 1.5px solid var(--gold); border-radius: 7px; overflow: hidden; }
#exp-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #8a6a1a, #e8c547, #fff0a0); transition: width .3s; }
#exp-text { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 12px; color: #fff; font-weight: 700; text-shadow: 0 0 2px #000, 0 0 2px #000; white-space: nowrap; }

/* ===== Chat ===== */
#hud-chat { position: fixed; left: 10px; bottom: calc(10px + var(--safe-b)); width: 330px; z-index: 5; background: rgba(15,10,6,0.62); border: 1.5px solid rgba(201,168,106,0.6); border-radius: 8px; overflow: hidden; }
.chat-head { display: flex; justify-content: space-between; padding: 2px 8px; background: rgba(90,58,32,0.85); color: #ffd880; font-size: 12px; font-weight: 800; }
#hud-chat.min #chat-log, #hud-chat.min .chat-in { display: none; }
#chat-log { height: 140px; overflow-y: auto; padding: 4px 6px; font-size: 12px; color: #e8e0d0; }
.cl { margin: 1px 0; line-height: 1.35; user-select: text; }
.ctag { font-size: 10.5px; opacity: .85; }
.cl-sys .ctag { color: #ffb040; } .cl-world .ctag, .cl-me .ctag { color: #8ad0ff; } .cl-loot .ctag { color: #a0e080; } .cl-quest .ctag { color: #ffd040; }
.cl-sys { color: #ffe8c0; }
.cn { color: #9ad8ff; font-weight: 700; cursor: pointer; } .cn.me { color: #ffd86a; }
.chat-in { display: flex; border-top: 1px solid rgba(201,168,106,0.4); }
.chat-in input { flex: 1; min-width: 0; background: rgba(0,0,0,0.35); border: none; color: #fff; padding: 5px 8px; font: 12px var(--font); outline: none; user-select: text; }
.chat-in button { background: #4a2e1a; color: #ffd880; border: none; padding: 0 10px; font: 700 12px var(--font); cursor: pointer; }

/* ===== Thông báo ===== */
#toasts { position: fixed; left: 50%; top: 92px; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; }
.toast { background: rgba(30,20,10,0.88); color: #f8ecd0; border: 1.5px solid var(--gold); border-radius: 18px; padding: 6px 16px; font-size: 13px; font-weight: 600; animation: tin .25s ease-out; transition: opacity .5s, transform .5s; max-width: 86vw; text-align: center; }
.toast.out { opacity: 0; transform: translateY(-10px); }
.toast.good { border-color: #7ad86a; color: #c8ffb8; } .toast.bad { border-color: #ff7a6a; color: #ffc8c0; }
.toast.gold { border-color: #ffe080; color: #ffe8a0; background: rgba(60,40,10,0.92); } .toast.quest { border-color: #ffd040; color: #fff0c0; }
@keyframes tin { from { opacity: 0; transform: translateY(-12px) scale(.95); } }
#banner { position: fixed; left: 0; right: 0; top: 30%; z-index: 15; text-align: center; pointer-events: none; opacity: 0; transition: opacity .4s; }
#banner.show { opacity: 1; animation: bin .6s ease-out; }
@keyframes bin { from { transform: scale(1.3); letter-spacing: 12px; } }
.bn-t { font: 800 34px "Noto Serif", serif; color: #fff4c8; text-shadow: 0 0 12px #e8a020, 0 2px 0 #6a3a10, 0 0 30px rgba(255,180,40,0.6); letter-spacing: 3px; }
.bn-s { font-size: 16px; font-weight: 700; color: #fff; text-shadow: 0 0 6px #000, 0 0 2px #000; margin-top: 4px; }
#banner.bad .bn-t { color: #ffd0c8; text-shadow: 0 0 12px #e02020, 0 2px 0 #4a0a0a; }
#banner.map .bn-t { font-size: 30px; color: #f8ecd0; text-shadow: 0 0 10px #000, 0 2px 0 #2a1a0a; }
#banner.map .bn-t::before, #banner.map .bn-t::after { content: '❖'; margin: 0 14px; color: var(--gold2); font-size: 20px; vertical-align: middle; }

/* ===== Hội thoại ===== */
#dialog { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); width: min(760px, 94vw); z-index: 25; display: flex; gap: 12px; padding: 12px 16px 12px 12px;
  background: linear-gradient(#fbf3df, #f0e0bc); border: 3px solid var(--gold); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.55), inset 0 0 0 2px #fff8e8; cursor: pointer; animation: tin .2s; }
#dlg-portrait { width: 96px; height: 96px; flex: none; image-rendering: pixelated; background: radial-gradient(#fff8e0, #e0c890); border: 2px solid var(--gold); border-radius: 10px; }
#dialog.narr #dlg-portrait { display: none; }
#dialog.narr { background: linear-gradient(#2a2018, #1a140e); color: #f0e6d0; border-color: #8a6a3a; }
#dialog.narr #dlg-text { color: #f0e6d0; font-style: italic; }
.dlg-body { flex: 1; min-width: 0; position: relative; }
#dlg-name { font-weight: 800; font-size: 16px; color: #8a3a10; margin-bottom: 4px; }
#dlg-name small { font-size: 11px; color: var(--ink2); font-weight: 600; margin-left: 6px; }
#dlg-text { font-size: 15px; line-height: 1.55; color: #3a2410; min-height: 48px; }
#dlg-next { position: absolute; right: 0; bottom: -4px; color: var(--ink2); animation: bob 1s infinite; font-size: 12px; }
@keyframes bob { 50% { transform: translateY(3px); } }
#dlg-opts { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.dlg-opt { text-align: left; font: 600 14px var(--font); padding: 7px 12px; border-radius: 7px; border: 1.5px solid var(--gold); background: #fff8e8; color: #3a2410; cursor: pointer; }
.dlg-opt:hover { background: #ffeec0; }
.dlg-opt.gold, .dlg-opt.q-done { background: linear-gradient(#ffe8a0, #f0c860); font-weight: 800; }
.dlg-opt.q-offer { color: #8a5a00; } .dlg-opt.q-talk { color: #2a6a8a; } .dlg-opt.dim { color: #8a7a62; }
#dialog.narr .dlg-opt { background: #3a2a1a; color: #f0e6d0; }

/* ===== Bảng chức năng ===== */
#panel-wrap { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; }
#panel { width: min(900px, 96vw); max-height: 90vh; display: flex; flex-direction: column; background: linear-gradient(#fbf3df, #f0e2bc); border: 3px solid var(--gold); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 0 0 2px #fff8e8; overflow: hidden; animation: tin .2s; }
#panel.p-shop, #panel.p-sell, #panel.p-alchemy, #panel.p-teleport, #panel.p-board, #panel.p-party, #panel.p-system, #panel.p-vendor, #panel.p-quests, #panel.p-skills, #panel.p-sectshop { width: min(640px, 96vw); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: linear-gradient(#6a4628, #3a2210); color: #ffe8a0; font: 800 17px "Noto Serif", var(--font); border-bottom: 2px solid var(--gold); }
.panel-head button { background: #8a2a1a; color: #fff; border: 2px solid var(--gold); border-radius: 50%; width: 30px; height: 30px; font-size: 14px; cursor: pointer; }
#panel-body { padding: 12px 14px; overflow-y: auto; font-size: 13.5px; }
#panel-body h4 { margin: 10px 0 4px; color: #8a3a10; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.tab { font: 700 13px var(--font); padding: 6px 14px; border-radius: 8px 8px 0 0; border: 1.5px solid var(--gold); border-bottom: none; background: #e8d4a8; color: var(--ink2); cursor: pointer; }
.tab.on { background: #fff8e8; color: #8a3a10; }
.empty-msg { text-align: center; color: #8a7a62; padding: 16px; font-style: italic; }

/* Nhân vật */
.char-wrap { display: flex; gap: 14px; }
.char-l { width: 330px; flex: none; }
.char-r { flex: 1; min-width: 0; }
.eq-grid { position: relative; display: grid; grid-template-columns: 64px 1fr 64px; grid-template-rows: repeat(3, 64px); gap: 6px; background: radial-gradient(#fff8e8, #e8d4a8); border: 1.5px solid var(--gold); border-radius: 10px; padding: 8px; }
.eq-cell { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.eq-cell:nth-child(1) { grid-column: 1; grid-row: 1; } .eq-cell:nth-child(2) { grid-column: 3; grid-row: 1; } .eq-cell:nth-child(3) { grid-column: 1; grid-row: 2; }
.eq-cell:nth-child(4) { grid-column: 3; grid-row: 2; } .eq-cell:nth-child(5) { grid-column: 1; grid-row: 3; } .eq-cell:nth-child(6) { grid-column: 3; grid-row: 3; }
.eq-l { font-size: 10px; color: var(--ink2); font-weight: 700; }
#char-prev { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: center; width: 96px; height: 120px; image-rendering: pixelated; }
.islot { position: relative; width: 46px; height: 46px; border-radius: 6px; background: radial-gradient(#3a5a66, #1d3a44); border: 2px solid var(--qc, #8a7a5a); box-shadow: inset 0 0 6px rgba(0,0,0,0.5); flex: none; }
.islot.empty { background: rgba(120,90,50,0.15); border: 1.5px dashed #b89a6a; }
.islot img { position: absolute; inset: 3px; width: 36px; height: 36px; image-rendering: pixelated; }
.islot .n { position: absolute; right: 2px; bottom: 0; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.islot .pl { position: absolute; right: 1px; top: 0; font-size: 10px; font-weight: 800; color: #ffe060; text-shadow: 0 0 2px #000; }
.islot .st { position: absolute; left: 2px; top: 0; font-size: 10px; font-weight: 800; color: #9affd0; text-shadow: 0 0 2px #000; }
.islot.q2 { box-shadow: 0 0 8px #c070ff, inset 0 0 6px rgba(0,0,0,0.5); } .islot.q3 { box-shadow: 0 0 10px #ffb52e, inset 0 0 6px rgba(0,0,0,0.5); animation: qglow 2s infinite; }
@keyframes qglow { 50% { box-shadow: 0 0 16px #ffd060, inset 0 0 6px rgba(0,0,0,0.5); } }
.islot.sel { outline: 3px solid #ff8a2a; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 12px; margin-top: 8px; font-size: 12.5px; }
.st-r { display: flex; justify-content: space-between; border-bottom: 1px dotted #d8c49a; padding: 2px 0; }
.st-r b { color: #3a2410; }
.el-note { font-size: 12px; margin-top: 6px; padding: 6px 8px; background: rgba(255,255,255,0.5); border-radius: 6px; }
.sets { margin-top: 6px; font-size: 12px; } .set-b { padding: 4px 8px; background: rgba(120,200,140,0.15); border-radius: 6px; margin-bottom: 4px; }
.inv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 700; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, 48px); gap: 4px; max-height: 300px; overflow-y: auto; padding: 4px; background: rgba(90,60,30,0.1); border-radius: 8px; }
.inv-c { cursor: pointer; }
.inv-detail { margin-top: 8px; min-height: 40px; }
.inv-detail .tt { background: #2a2018; color: #f0e6d0; border: 1.5px solid var(--gold); border-radius: 8px; padding: 8px 10px; }
.det-btns { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* Tooltip */
#tooltip { position: fixed; z-index: 50; max-width: 300px; background: rgba(24,18,12,0.96); color: #f0e6d0; border: 1.5px solid var(--gold); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
.tt-name { font-weight: 800; font-size: 14.5px; } .tt-name .plus { color: #ffe060; }
.tt-type { font-size: 11.5px; color: #c8b890; margin: 2px 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tt-req { font-size: 11.5px; color: #c8c0b0; } .tt-req.bad { color: #ff7a6a; }
.tt-sec { border-top: 1px solid rgba(201,168,106,0.35); margin-top: 5px; padding-top: 4px; }
.tt-sec.aff { color: #8ad0ff; } .tt-sec.hidden { color: #ffd070; } .tt-sec.set .set-name { color: #9affd0; font-weight: 700; }
#tooltip .good, .tt .good { color: #8ae07a; } #tooltip .dim, .tt .dim { color: #8a8070; } #tooltip .bad, .tt .bad { color: #ff8a7a; }
.tt-small { font-size: 11px; } .tt-desc { margin-top: 4px; color: #e0d4b8; } .tt-sell { margin-top: 5px; font-size: 11px; color: #c8b070; } .tt-cmp { margin-top: 4px; font-size: 11px; color: #c8c0b0; }

/* Kỹ năng */
.sk-head { display: flex; gap: 12px; align-items: center; padding: 8px; background: rgba(255,255,255,0.5); border-radius: 10px; margin-bottom: 8px; }
.sk-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-bottom: 1px dashed #d8c49a; }
.sk-row img { width: 44px; height: 44px; image-rendering: pixelated; background: var(--jade); border: 2px solid var(--gold); border-radius: 7px; flex: none; }
.sk-row.locked { opacity: .6; } .sk-row.passive { background: rgba(232,197,71,0.15); border-radius: 8px; }
.kb { font-size: 10px; background: #3a2410; color: #ffe8a0; padding: 0 5px; border-radius: 3px; }
.wuxing { width: 100%; max-width: 340px; display: block; margin: 10px auto 0; color: #3a2410; }
.wx-leg { text-align: center; font-size: 12px; }

/* Nhiệm vụ */
.q-card { padding: 8px 10px; border: 1.5px solid #d8c49a; border-radius: 8px; margin-bottom: 8px; background: rgba(255,255,255,0.55); }
.q-card.main { border-color: #e8b040; } .q-t { font-weight: 800; color: #3a2410; } .q-d { font-size: 12.5px; color: #5a4430; margin: 3px 0; }
.q-card .qt-l { color: #5a4430; } .q-card .qt-l.done { color: var(--good); }
.q-rw { font-size: 12px; color: #8a5a10; margin-top: 3px; } .q-btns { display: flex; gap: 6px; margin-top: 5px; justify-content: flex-end; align-items: center; }
.done-list { columns: 2; font-size: 12.5px; color: var(--good); }

/* Bản đồ */
.map-wrap { display: flex; gap: 12px; }
.map-big { flex: none; } #bigmap { image-rendering: pixelated; border: 2px solid var(--gold); border-radius: 8px; cursor: crosshair; max-width: 100%; }
.map-list { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: 12px; max-height: 60vh; overflow-y: auto; }
.map-it, .tp-it { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border: 1.5px solid #d8c49a; border-radius: 8px; background: rgba(255,255,255,0.55); }
.map-it.cur, .tp-it.cur { border-color: #e8a020; background: rgba(255,230,160,0.6); } .map-it.locked, .tp-it.locked { opacity: .55; }
.tp-list { display: flex; flex-direction: column; gap: 6px; }

/* Cửa hàng */
.shop-stones { text-align: right; margin-bottom: 8px; font-size: 13px; }
.shop-list { display: flex; flex-direction: column; gap: 6px; }
.shop-it { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border: 1.5px solid #d8c49a; border-radius: 8px; background: rgba(255,255,255,0.55); }
.si-info { flex: 1; min-width: 0; font-size: 12.5px; }
.si-buy { display: flex; gap: 5px; align-items: center; font-weight: 700; white-space: nowrap; }
.enh-wrap { display: flex; gap: 10px; } .enh-list { width: 46%; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.enh-it { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 700; border: 1.5px solid transparent; }
.enh-it.on { border-color: #e8a020; background: rgba(255,230,160,0.6); }
.enh-detail { flex: 1; } .enh-detail .tt { background: #2a2018; color: #f0e6d0; border: 1.5px solid var(--gold); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.enh-info { font-size: 12.5px; margin-bottom: 8px; }
.sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#sy-code { width: 100%; margin-top: 10px; font-size: 11px; user-select: text; }
.help table { width: 100%; border-collapse: collapse; } .help td { padding: 4px 6px; border-bottom: 1px dotted #d8c49a; } .help p, .help li { line-height: 1.55; }

/* Hồi sinh & chuyển cảnh */
#revive { position: fixed; inset: 0; z-index: 40; background: rgba(40,0,0,0.55); display: flex; align-items: center; justify-content: center; }
.rv-box { background: linear-gradient(#2a1a14, #1a0e0a); border: 2px solid #c8584a; border-radius: 14px; padding: 22px 28px; text-align: center; color: #f0d8c8; display: flex; flex-direction: column; gap: 10px; }
.rv-t { font: 800 28px "Noto Serif", serif; color: #ff9a8a; } .rv-s { font-size: 14px; margin-bottom: 6px; }
#fade { position: fixed; inset: 0; z-index: 45; background: #000; opacity: 0; pointer-events: none; transition: opacity .35s; }
#fade.on { opacity: 1; }

/* ===== Tiêu đề & tạo nhân vật ===== */
#title-screen { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 20px; }
.logo { text-align: center; }
.logo-els { display: flex; justify-content: center; gap: 10px; margin-bottom: 6px; }
.logo-els img { width: 44px; height: 44px; image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(255,220,140,0.7)); animation: elbob 2.4s ease-in-out infinite; }
.logo-els img:nth-child(2) { animation-delay: .2s; } .logo-els img:nth-child(3) { animation-delay: .4s; } .logo-els img:nth-child(4) { animation-delay: .6s; } .logo-els img:nth-child(5) { animation-delay: .8s; }
@keyframes elbob { 50% { transform: translateY(-6px); } }
.logo h1 { margin: 2px 0; font: 800 clamp(38px, 8vw, 72px) "Noto Serif", serif; color: #fff4d0; text-shadow: 0 0 18px #e8a020, 0 4px 0 #6a3a10, 0 0 40px rgba(255,180,60,0.6); letter-spacing: 2px; }
.logo-sub { color: #f8e8c8; font-size: 14px; text-shadow: 0 0 6px #000; }
.title-btns { display: flex; flex-direction: column; gap: 10px; }
#howto { max-width: 560px; padding: 12px 18px; font-size: 14px; line-height: 1.5; }
.title-foot { position: absolute; bottom: 10px; font-size: 11px; color: rgba(255,240,220,0.7); }
#create-screen { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 10px; overflow-y: auto; }
.cr-box { width: min(980px, 98vw); padding: 14px 18px; max-height: 96vh; overflow-y: auto; }
.cr-box h2 { margin: 0 0 10px; text-align: center; font: 800 22px "Noto Serif", serif; color: #8a3a10; }
.cr-grid { display: flex; gap: 16px; }
.cr-left { width: 300px; flex: none; display: flex; flex-direction: column; gap: 8px; align-items: center; }
#cr-prev { width: 200px; height: 200px; image-rendering: pixelated; background: radial-gradient(#fff8e0, #e0c890); border: 2px solid var(--gold); border-radius: 50%; }
.cr-row { display: flex; gap: 5px; align-items: center; width: 100%; flex-wrap: wrap; }
.cr-row label { width: 70px; font-weight: 700; font-size: 13px; }
.cr-row input { flex: 1; min-width: 0; padding: 6px 8px; font: 600 14px var(--font); border: 1.5px solid var(--gold); border-radius: 6px; background: #fff; user-select: text; }
#cr-hair { display: flex; gap: 5px; }
.sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #8a6a3a; cursor: pointer; }
.sw.on { box-shadow: 0 0 0 3px #e8a020; }
.cr-right { flex: 1; min-width: 0; }
#cr-sects { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sect-card { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 8px 4px; border: 2px solid #d8c49a; border-radius: 10px; background: rgba(255,255,255,0.6); cursor: pointer; font-size: 12.5px; transition: transform .15s; }
.sect-card:hover { transform: translateY(-2px); }
.sect-card.on { border-color: var(--ec); box-shadow: 0 0 12px var(--ec); background: #fffaf0; }
.sc-style { font-size: 10.5px; color: var(--ink2); }
#cr-info { margin-top: 10px; padding: 10px 12px; background: rgba(255,255,255,0.6); border: 1.5px solid #d8c49a; border-radius: 10px; font-size: 13px; line-height: 1.5; }
#cr-info p { margin: 5px 0; }
.ci-h { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.ci-sk { display: flex; gap: 6px; } .ci-sk img { width: 40px; height: 40px; image-rendering: pixelated; background: var(--jade); border: 2px solid var(--gold); border-radius: 7px; }
.cr-btns { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }

/* ===== Điều khiển cảm ứng ===== */
#mobile-ctrl { display: none; }
body.touch #mobile-ctrl { display: block; }
body.touch #skillbar { display: none; }
#joy-zone { position: fixed; left: 0; bottom: 0; width: 45vw; height: 55vh; z-index: 4; }
#joy-base { position: fixed; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,240,200,0.5); z-index: 4; pointer-events: none; opacity: 0; left: 40px; bottom: 60px; }
#joy-base.on { opacity: 1; }
#joy-knob { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(#fff8e0, #c9a86a); border: 2px solid #fff; }
#mbtns { position: fixed; right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(26px + var(--safe-b)); width: 230px; height: 220px; z-index: 6; }
#mbtns .slot.skill { position: absolute; width: 54px; height: 54px; border-radius: 50%; }
#mbtns .slot.skill img { inset: 9px; width: 32px; height: 32px; }
#mbtns .m-sk0 { right: 6px; bottom: 6px; width: 82px; height: 82px; }
#mbtns .m-sk0 img { inset: 16px; width: 46px; height: 46px; }
#mbtns .m-sk1 { right: 100px; bottom: 2px; } #mbtns .m-sk2 { right: 92px; bottom: 64px; } #mbtns .m-sk3 { right: 50px; bottom: 112px; } #mbtns .m-sk4 { right: 0; bottom: 112px; }
#mbtns .m-hp { right: 162px; bottom: 2px; width: 42px; height: 42px; } #mbtns .m-mp { right: 156px; bottom: 54px; width: 42px; height: 42px; }
#mbtns .m-med { right: 150px; bottom: 108px; width: 42px; height: 42px; } #mbtns .m-auto { right: 104px; bottom: 150px; width: 42px; height: 42px; }
#mbtns .m-hp img, #mbtns .m-mp img, #mbtns .m-med img, #mbtns .m-auto img { inset: 5px; width: 28px; height: 28px; }
body.touch #expbar { width: min(320px, 50vw); }
body.touch #hud-bottom { left: 50%; bottom: calc(4px + var(--safe-b)); }
body.touch #hud-chat { width: 260px; bottom: calc(24px + var(--safe-b)); }
body.touch #chat-log { height: 76px; }

/* ===== Màn hình nhỏ ===== */
@media (max-width: 900px), (max-height: 520px) {
  #hud-player { width: 250px; padding: 5px 8px 5px 5px; gap: 6px; }
  .pf-ava { width: 46px; height: 46px; } .pf-ava canvas { width: 42px; height: 42px; }
  .pf-name { font-size: 14px; } .bar { height: 11px; } .bar span { font-size: 8.5px; line-height: 9px; }
  #hud-buffs { top: 74px; } #btn-break { top: 104px; font-size: 12px; padding: 6px 12px; }
  #hud-right { width: 180px; }
  #hud-mini { width: 104px; height: 104px; } #minimap { width: 96px; height: 96px; }
  #hud-menu button { width: 32px; height: 32px; font-size: 15px; }
  #hud-quests { width: 180px; font-size: 11px; } #quest-list { max-height: 24vh; }
  #hud-target { width: 220px; top: 6px; }
  #toasts { top: 70px; }
  .bn-t { font-size: 24px; } .bn-s { font-size: 13px; }
  .char-wrap, .map-wrap, .cr-grid, .enh-wrap { flex-direction: column; }
  .char-l, .cr-left { width: 100%; } .enh-list { width: 100%; max-height: 30vh; }
  #cr-sects { grid-template-columns: repeat(5, 1fr); } .sect-card { font-size: 10.5px; padding: 6px 2px; } .sc-style { display: none; }
  #dialog { bottom: calc(10px + var(--safe-b)); padding: 8px 10px; } #dlg-portrait { width: 64px; height: 64px; }
  #dlg-text { font-size: 13.5px; }
  #panel { max-height: 94vh; } #panel-body { padding: 8px 10px; }
}
@media (max-width: 520px) {
  #hud-chat { display: none; }
  #hud-quests { width: 150px; } #hud-right { width: 150px; }
  #hud-menu { max-width: 150px; }
  #hud-target { top: 120px; width: 200px; }
  #dialog { width: 98vw; }
}
@media (max-height: 520px) {
  body.touch #hud-chat { display: none; }
  #quest-list { max-height: 20vh; }
  body.touch #hud-quests { position: fixed; left: 10px; top: 84px; width: 210px; }
  body.touch #hud-buffs { top: 74px; left: 230px; }
}
#btn-tele { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); z-index: 6; font: 800 15px var(--font); color: #fff; background: linear-gradient(#9a6af0, #5a2ab0); border: 2px solid #e0c8ff; border-radius: 22px; padding: 9px 20px; cursor: pointer; box-shadow: 0 0 16px #a070ff; animation: glowPulse 1.6s infinite; }
body.touch #btn-tele { left: 12px; transform: none; bottom: calc(250px + var(--safe-b)); font-size: 13px; padding: 7px 14px; }
#mbtns .m-mount { right: 162px; bottom: 158px; width: 42px; height: 42px; }
#mbtns .m-mount img { inset: 5px; width: 28px; height: 28px; }

/* =================== MỞ RỘNG: GIAO DIỆN MỚI =================== */
.cur { display: inline-flex; align-items: center; gap: 3px; margin: 0 6px; font-size: 13px; }
.cur .ic { width: 20px; height: 20px; }
.islot.qu { box-shadow: 0 0 12px #ff6a30, inset 0 0 6px rgba(0,0,0,0.5); animation: uglow 1.6s infinite; }
@keyframes uglow { 50% { box-shadow: 0 0 20px #ff9a40, 0 0 6px #ffe080, inset 0 0 6px rgba(0,0,0,0.5); } }
.uniq-tag { color: #ff8a40; font-weight: 800; }
.tt-sec.uniq { color: #ffb070; font-weight: 600; }
.btn[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.gembtn { background: linear-gradient(var(--ec), #3a2a18); border-color: var(--ec); padding: 3px 6px; }

/* HUD hoạt động */
#inst-hud { position: fixed; left: 10px; top: 128px; z-index: 6; width: 250px; background: rgba(20,12,8,0.82); border: 2px solid var(--gold); border-radius: 10px; padding: 8px 10px; color: #f0e6d0; font-size: 12px; }
#inst-title { font: 800 14px "Noto Serif", serif; color: #ffd880; margin-bottom: 4px; }
#inst-info { line-height: 1.5; } #inst-info .bar { margin-bottom: 4px; }
#inst-time { color: #ffb0a0; font-weight: 700; margin-top: 4px; }
.inst-btns { display: flex; gap: 6px; margin-top: 6px; }

/* Bảng nhân vật */
.cp { display: flex; gap: 14px; }
.cp-left { width: 380px; flex: none; }
.cp-right { flex: 1; min-width: 0; }
.cp-stage { position: relative; height: 300px; border-radius: 12px; border: 2px solid var(--gold); overflow: hidden;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--ec) 45%, #fff8e8), #e8d4a8 60%, #c8a878); box-shadow: inset 0 0 30px rgba(90,50,10,0.35); }
.cp-stage::before { content: ''; position: absolute; left: 50%; top: 52%; width: 200px; height: 200px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px dashed rgba(120,80,30,0.35); animation: spin 30s linear infinite; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.cp-slot { position: absolute; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.cp-slot span { font-size: 10px; font-weight: 700; color: #5a3a18; text-shadow: 0 0 2px #fff; }
.cp-slot.l1 { left: 10px; top: 14px; } .cp-slot.l2 { left: 10px; top: 92px; } .cp-slot.l3 { left: 10px; top: 170px; }
.cp-slot.r1 { right: 10px; top: 14px; } .cp-slot.r2 { right: 10px; top: 92px; } .cp-slot.r3 { right: 10px; top: 170px; }
.cp-slot .islot { width: 52px; height: 52px; } .cp-slot .islot img { inset: 4px; width: 40px; height: 40px; }
#char-prev { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); width: 120px; height: 150px; image-rendering: pixelated; }
.cp-name { position: absolute; left: 0; right: 0; top: 176px; text-align: center; font: 800 17px "Noto Serif", serif; color: #3a1a08; }
.cp-name small { display: block; font: 700 11px var(--font); color: #b0307a; }
.cp-realm { position: absolute; left: 0; right: 0; top: 214px; text-align: center; font-size: 12px; font-weight: 700; color: #4a3020; }
.cp-power { position: absolute; left: 50%; top: 238px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 3px 14px; border-radius: 14px; background: linear-gradient(#5a2a10, #2a1408); color: #ffd880; font-size: 12px; border: 1.5px solid var(--gold); white-space: nowrap; }
.cp-power b { font: 800 16px "Noto Serif", serif; color: #fff0b0; }
.cp-cur { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; flex-wrap: wrap; }
.cp-cur .cur { margin: 0 4px; font-size: 11.5px; }
.ctabs, .itabs { margin: 8px 0 0; }
.cp-tab { background: rgba(255,255,255,0.55); border: 1.5px solid #d8c49a; border-radius: 0 8px 8px 8px; padding: 8px; max-height: 260px; overflow-y: auto; font-size: 12.5px; }
.st-group { margin-bottom: 6px; } .st-h { font-weight: 800; color: #8a3a10; margin: 6px 0 3px; border-bottom: 1px solid #e0c89a; }
.combo { display: flex; gap: 6px; align-items: flex-start; padding: 4px 6px; border-radius: 6px; margin-bottom: 3px; }
.combo.on { background: rgba(80,200,120,0.18); }
.title-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.title-it { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1.5px solid #d8c49a; border-radius: 7px; cursor: pointer; background: #fffaf0; }
.title-it span { margin-left: auto; font-size: 11px; color: #2e9a3e; }
.title-it.on { border-color: #e8a020; background: #fff0c8; }
.inv-grid { grid-template-columns: repeat(auto-fill, 50px); }

/* Ngọc Bội */
.jade-wrap { display: flex; gap: 14px; }
.jade-stage { position: relative; width: 280px; height: 280px; flex: none; border-radius: 50%; background: radial-gradient(circle, #e8fff4, #9ad8c0 45%, #2a6a5a 72%, #163a32); border: 3px solid var(--gold); box-shadow: 0 0 30px rgba(90,240,190,0.45), inset 0 0 30px rgba(0,0,0,0.4); }
.jade-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.jade-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.jade-core img { width: 110px; height: 110px; image-rendering: pixelated; filter: drop-shadow(0 0 14px #7affd8); animation: elbob 3s ease-in-out infinite; }
.jade-core b { display: block; color: #fff8d0; text-shadow: 0 0 4px #000; font: 800 15px "Noto Serif", serif; }
.jade-sock { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(#2a3a3a, #101818); border: 3px solid var(--ec); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px var(--ec); }
.jade-sock img { width: 40px; height: 40px; image-rendering: pixelated; opacity: .4; }
.jade-sock.filled img { opacity: 1; }
.jade-sock span { position: absolute; bottom: -6px; font-size: 10px; font-weight: 800; color: #fff; background: #3a2a18; border-radius: 6px; padding: 0 4px; }
.jade-sock.on { transform: scale(1.12); box-shadow: 0 0 20px var(--ec), 0 0 0 3px #fff8d0; }
.jade-info { flex: 1; min-width: 0; font-size: 12.5px; }
.jade-cost { margin: 4px 0; } .jade-gems { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }

/* Tọa kỵ */
.mount-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 8px; }
.mount-card { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 8px; border: 2px solid #d8c49a; border-radius: 10px; background: rgba(255,255,255,0.5); font-size: 12px; opacity: .75; }
.mount-card img { width: 64px; height: 64px; image-rendering: pixelated; }
.mount-card.own { opacity: 1; } .mount-card.on { border-color: #e8a020; box-shadow: 0 0 12px #ffd060; background: #fff6d8; }

/* Hoạt động */
.act-cur { text-align: center; margin-bottom: 6px; }
.checkin { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.ck { border: 1.5px solid #d8c49a; border-radius: 8px; padding: 4px; text-align: center; font-size: 10.5px; background: rgba(255,255,255,0.5); }
.ck b { display: block; color: #8a3a10; } .ck.done { background: rgba(80,200,120,0.25); border-color: #5ab05a; } .ck.today { border-color: #e8a020; box-shadow: 0 0 10px #ffd060; background: #fff4d0; }
.act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.act-card { display: flex; gap: 10px; padding: 8px; border: 1.5px solid #d8c49a; border-radius: 10px; background: linear-gradient(#fffaf0, #f4e6c4); }
.act-card > img { width: 52px; height: 52px; image-rendering: pixelated; flex: none; background: radial-gradient(#3a8aa0, #163a48); border: 2px solid var(--gold); border-radius: 10px; padding: 2px; }
.act-b { flex: 1; min-width: 0; font-size: 12px; } .act-b b { font-size: 14px; color: #3a1a08; }
.act-btns { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.rank-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.rank-t td { padding: 4px 6px; border-bottom: 1px dotted #d8c49a; }
.rank-t tr.me { background: rgba(255,210,90,0.35); font-weight: 800; }
.achv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.achv { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border: 1.5px solid #d8c49a; border-radius: 8px; opacity: .6; font-size: 12px; }
.achv.on { opacity: 1; background: rgba(255,220,120,0.25); border-color: #e8a020; }

/* Giải đố */
.pz-grid { display: grid; grid-template-columns: repeat(4, 64px); gap: 8px; justify-content: center; margin: 12px auto; }
.pz-cell { width: 64px; height: 64px; border-radius: 12px; background: #2a2018; border: 2px solid #5a4a3a; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; }
.pz-cell img { width: 40px; height: 40px; image-rendering: pixelated; opacity: .25; filter: grayscale(1); }
.pz-cell.on { background: radial-gradient(var(--ec), #3a2a18 80%); border-color: #fff0b0; box-shadow: 0 0 14px var(--ec); }
.pz-cell.on img { opacity: 1; filter: none; }
.pz-ring { position: relative; width: 220px; height: 220px; margin: 14px auto; border-radius: 50%; background: radial-gradient(#3a2a4a, #1a1020); border: 2px solid var(--gold); }
.pz-node { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: #2a2018; border: 2px solid #8a7a5a; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 10px; }
.pz-node img { width: 36px; height: 36px; image-rendering: pixelated; }
.pz-node.fix { border-color: #ffd040; box-shadow: 0 0 12px #ffd040; cursor: default; }
.pz-arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 46px; color: #ffe8b0; }
.pz-q { text-align: center; font: 700 17px var(--font); margin: 14px 0; color: #3a1a08; }
.pz-ans { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pz-a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; border: 2px solid var(--gold); border-radius: 10px; background: #fffaf0; cursor: pointer; font: 700 12px var(--font); }
.pz-a img { width: 40px; height: 40px; image-rendering: pixelated; }
.pz-a:hover { background: #fff0c0; }

@media (max-width: 900px), (max-height: 520px) {
  #hud-menu { grid-template-columns: repeat(6, 30px); }
  #hud-menu button { width: 30px; height: 30px; } #hud-menu button img { width: 22px; height: 22px; margin-top: 1px; }
  .cp, .jade-wrap { flex-direction: column; } .cp-left { width: 100%; } .jade-stage { margin: 0 auto; }
  .act-grid, .achv-list { grid-template-columns: 1fr; } .checkin { grid-template-columns: repeat(4, 1fr); }
  #inst-hud { top: auto; bottom: 120px; width: 210px; }
}

/* =================== BẢN 3: âm thanh, tốc độ, công pháp, auto, thông báo, hướng dẫn =================== */
#hud-mini #btn-speed, #hud-mini #btn-music { position: absolute; top: -4px; z-index: 3; box-shadow: 0 2px 4px rgba(0,0,0,.5); width: 34px; height: 24px; border-radius: 12px; border: 1.5px solid var(--gold); background: linear-gradient(#5a3a20, #2a1808); color: #ffe8a0; font: 800 12px var(--font); cursor: pointer; padding: 0; }
#hud-mini #btn-speed { left: -14px; } #hud-mini #btn-music { right: -14px; }
#btn-speed.fast { background: linear-gradient(#e8a020, #a85a10); color: #fff; box-shadow: 0 0 8px #ffb030; }
#btn-music img { width: 18px; height: 18px; image-rendering: pixelated; margin-top: 2px; }
#btn-music.off { filter: grayscale(1) brightness(.6); }
.hq-head small { font-size: 10px; color: #f0d8a0; font-weight: 600; }
#quest-list { max-height: 46vh; }
.qt { padding: 2px 4px; } .qt-h { font-size: 11.5px; } .qt-l { font-size: 11px; }
.slot.skill.emptyslot { background: rgba(30,50,60,0.6); border-style: dashed; }
.empty-sk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,240,200,0.5); font: 800 22px var(--font); }
.slot.skill .gear { position: absolute; right: -1px; top: -2px; z-index: 4; font-style: normal; font-size: 13px; line-height: 13px; color: #ffe8a0; background: #2a1808; border: 1px solid var(--gold); border-radius: 50%; width: 16px; height: 16px; text-align: center; cursor: pointer; }
#mbtns .m-sk5 { right: 196px; bottom: 60px; width: 46px; height: 46px; } #mbtns .m-sk6 { right: 200px; bottom: 112px; width: 46px; height: 46px; }
#mbtns .m-sk5 img, #mbtns .m-sk6 img { inset: 7px; width: 30px; height: 30px; }
#mbtns { width: 260px; }
/* Công pháp */
.bar-edit { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 8px; }
.be-slot { position: relative; min-height: 74px; border: 2px dashed #c8a878; border-radius: 10px; background: rgba(255,255,255,0.55); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 10.5px; cursor: pointer; padding: 3px; }
.be-slot b { position: absolute; left: 4px; top: 2px; font-size: 11px; color: #8a3a10; }
.be-slot img { width: 38px; height: 38px; image-rendering: pixelated; }
.be-slot.target { border-color: #e8a020; box-shadow: 0 0 10px #ffd060; animation: glowPulse 1.2s infinite; }
.sk-row { cursor: pointer; } .sk-row.sel { background: rgba(255,210,90,0.35); border-radius: 8px; outline: 2px solid #e8a020; }
.sk-info { flex: 1; min-width: 0; }
.adv-tag { font-size: 10px; font-weight: 800; color: #fff; background: linear-gradient(#c070ff, #7a2ab0); border-radius: 4px; padding: 0 5px; }
.auto-chk { font-size: 11px; font-weight: 700; white-space: nowrap; align-self: center; }
/* Cài đặt */
.set-sec { padding: 6px 8px; margin-bottom: 8px; background: rgba(255,255,255,0.5); border: 1.5px solid #d8c49a; border-radius: 10px; }
.opt-r, .opt-c { display: inline-flex; align-items: center; gap: 4px; margin: 3px 10px 3px 0; font-size: 13px; cursor: pointer; }
.opt-s { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; font-size: 13px; }
.opt-s input[type=range] { width: 100%; accent-color: #c88a20; }
/* Lịch hoạt động */
.sched { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 6px; }
.sch { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1.5px solid #d8c49a; border-radius: 8px; background: rgba(255,255,255,0.5); font-size: 12px; }
.sch img { width: 30px; height: 30px; image-rendering: pixelated; } .sch > div { flex: 1; min-width: 0; } .sch > span { font-size: 11px; font-weight: 700; text-align: right; }
.sch.open { border-color: #5ab05a; background: rgba(120,220,120,0.2); }
/* Thông báo sự kiện */
#notices { position: fixed; right: 260px; top: 10px; z-index: 31; display: flex; flex-direction: column; gap: 6px; width: 290px; }
.notice { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: linear-gradient(#3a2410, #1e1208); color: #f8ecd0; border: 2px solid var(--gold); border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.5); animation: tin .3s; font-size: 12.5px; transition: opacity .4s; position: relative; }
.notice img { width: 36px; height: 36px; image-rendering: pixelated; } .notice > div { flex: 1; } .notice b { color: #ffd880; }
.notice .x { position: absolute; right: 5px; top: 2px; font-style: normal; cursor: pointer; color: #c8b090; font-size: 11px; }
.notice.out { opacity: 0; }
/* Gợi ý trang bị */
#equip-offer { position: fixed; right: 14px; bottom: calc(110px + var(--safe-b)); z-index: 32; width: 300px; padding: 10px 12px; background: linear-gradient(#fbf3df, #f0e2bc); border: 2.5px solid #e8a020; border-radius: 12px; box-shadow: 0 0 20px rgba(255,190,60,0.6), 0 6px 18px rgba(0,0,0,0.5); animation: tin .3s; }
.eo-h { font: 800 14px "Noto Serif", serif; color: #8a3a10; margin-bottom: 6px; }
.eo-b { display: flex; gap: 10px; align-items: center; font-size: 12.5px; }
.eo-btns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
/* Hướng dẫn */
#tut { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
#tut-hand { position: fixed; width: 44px; height: 44px; image-rendering: pixelated; animation: tutbob .8s ease-in-out infinite; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 2px 2px #000); }
@keyframes tutbob { 50% { margin-top: 10px; } }
#tut-ring { position: fixed; border: 3px solid #ffd040; border-radius: 12px; box-shadow: 0 0 0 4000px rgba(0,0,0,0.28), 0 0 16px #ffd040; animation: glowPulse 1.2s infinite; }
#tut-box { position: fixed; width: 320px; pointer-events: auto; padding: 10px 12px; background: linear-gradient(#fbf3df, #f0e2bc); border: 2.5px solid var(--gold); border-radius: 12px; box-shadow: 0 6px 22px rgba(0,0,0,0.55); font-size: 13.5px; line-height: 1.5; color: #3a2410; }
#tut-step { font: 800 12px var(--font); color: #a85a10; margin-bottom: 3px; }
.tut-btns { display: flex; justify-content: space-between; margin-top: 8px; gap: 6px; }
.tut-hl { position: relative; z-index: 61 !important; }
@media (max-width: 900px), (max-height: 520px) {
  #notices { right: 190px; width: 230px; } #equip-offer { width: 260px; bottom: calc(240px + var(--safe-b)); }
  .bar-edit { grid-template-columns: repeat(3, 1fr); } .sched { grid-template-columns: 1fr; }
  #hud-mini #btn-speed, #hud-mini #btn-music { top: -6px; height: 22px; width: 30px; }
}
@media (max-width: 520px) { #notices { right: auto; left: 10px; top: 170px; width: 220px; } #tut-box { width: 280px; } }

/* ===== Lệnh admin trong chat ===== */
#adm-sug { position: fixed; z-index: 60; width: min(440px, calc(100vw - 16px)); max-height: 52vh; overflow-y: auto; background: rgba(24,16,10,0.96); border: 1.5px solid var(--gold); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.55); font-size: 12px; color: #f0e6d0; }
#adm-sug.hidden { display: none; }
#adm-sug .adm-h { padding: 4px 8px; background: rgba(90,58,32,.9); color: #ffd880; font-weight: 800; font-size: 11px; position: sticky; top: 0; }
#adm-sug .adm-row { padding: 4px 8px; cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; border-top: 1px solid rgba(201,168,106,.15); }
#adm-sug .adm-row b { color: #ffd060; } #adm-sug .adm-row i { color: #a8c8e8; font-style: normal; font-size: 11px; }
#adm-sug .adm-row span { grid-column: 1 / -1; color: #c8b898; font-size: 11px; }
#adm-sug .adm-row.on, #adm-sug .adm-row:hover { background: rgba(232,197,71,.18); }
.adm { color: #ff9a40; font-weight: 800; } .adm.bad { color: #ff5a5a; }
.adm-g { color: #ffd880; font-weight: 700; }
.adm-c { color: #8fd8ff; cursor: pointer; font-weight: 600; } .adm-c:hover { text-decoration: underline; }

/* ===== Hành trang: mở rộng ô & bán nhiều ===== */
#panel { position: relative; }
.inv-head .inv-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.inv-head .inv-btns .ic.sm { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.inv-head b.bad { color: #d03a2a; }
.inv-more .islot { display: flex; align-items: center; justify-content: center; border-color: #c9a86a; background: rgba(232,197,71,.18); }
.inv-more .islot b { color: #8a5a10; font-size: 14px; }
.inv-more:hover .islot { background: rgba(232,197,71,.4); }
.sell-bar { background: rgba(160,60,30,.1); border: 1.5px solid rgba(180,90,40,.45); border-radius: 8px; padding: 6px; margin-bottom: 6px; display: flex; flex-direction: column; gap: 5px; }
.sell-q { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .sell-q > span { font-weight: 700; font-size: 12px; margin-right: 2px; }
.sell-q .sq { border-color: var(--qc); color: var(--qc); text-shadow: 0 0 2px #000; }
.sell-q .sq.on { background: var(--qc); color: #fff; box-shadow: 0 0 6px var(--qc); }
.sell-sum { display: flex; align-items: center; gap: 6px; font-size: 13px; } .sell-sum .btn { margin-left: auto; }
.sell-sum .ic.sm { width: 16px; height: 16px; vertical-align: -3px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.inv-c.chk { position: relative; } .inv-c.chk .islot { outline: 3px solid #e04a2a; filter: brightness(.8); }
.inv-c.chk::after { content: '✓'; position: absolute; right: 2px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #e04a2a; color: #fff; font-size: 11px; font-weight: 900; line-height: 16px; text-align: center; box-shadow: 0 0 3px #000; }
.inv-c.nosell { opacity: .35; cursor: not-allowed; }
.ask-ov { position: absolute; inset: 0; background: rgba(10,6,2,.55); display: flex; align-items: center; justify-content: center; z-index: 20; border-radius: inherit; }
.ask-box { max-width: 360px; width: calc(100% - 32px); padding: 16px; border-radius: 10px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.ask-t { font-size: 14px; line-height: 1.6; margin-bottom: 12px; } .ask-t .ic.sm { width: 16px; height: 16px; vertical-align: -3px; }
.ask-t .warn { color: #c04a10; font-weight: 700; }
.ask-btns { display: flex; gap: 8px; justify-content: center; }

/* ===== Chế độ phạm vi Auto ===== */
.auto-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 8px; }
.auto-mode { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 8px 30px; position: relative; border: 2px solid rgba(160,120,60,.4); border-radius: 8px; cursor: pointer; background: rgba(255,255,255,.35); }
.auto-mode input { position: absolute; left: 9px; top: 10px; }
.auto-mode span { font-size: 11px; color: #7a6040; line-height: 1.4; }
.auto-mode.on { border-color: var(--gold); background: rgba(232,197,71,.22); box-shadow: 0 0 6px rgba(232,197,71,.5); }
.opt-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .opt-line > span { font-weight: 700; font-size: 12px; }
@media (max-width: 600px) { .auto-modes { grid-template-columns: 1fr; } }

/* ===== Trực tuyến: đăng nhập, PK, chat, quản trị ===== */
#login-box { width: min(360px, 92vw); margin: 14px auto 0; padding: 18px 20px; border-radius: 12px; display: flex; flex-direction: column; gap: 9px; position: relative; z-index: 2; box-shadow: 0 8px 28px rgba(0,0,0,.5); }
#login-box.hidden { display: none; }
#login-box .lg-h { font: 700 19px "Noto Serif", serif; color: #6a3a10; text-align: center; }
#login-box label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: #6a4a2a; }
#login-box input { padding: 9px 10px; border-radius: 8px; border: 1.5px solid #c9a86a; background: #fffaf0; font: 15px var(--font); color: #3a2410; }
#login-box input:focus { outline: none; border-color: #e0a020; box-shadow: 0 0 0 3px rgba(232,180,60,.25); }
#login-box .btn.big { margin-top: 4px; }
#login-box .lg-err { color: #c0301a; font-size: 13px; font-weight: 600; min-height: 16px; text-align: center; }
#login-box .lg-wait { text-align: center; padding: 12px; color: #6a4a2a; }
#login-box .lg-sw { text-align: center; font-size: 13px; } #login-box .lg-sw a { color: #b8641a; font-weight: 800; cursor: pointer; text-decoration: underline; }
#login-box .lg-info { text-align: center; font-size: 12px; color: #3a8a3a; font-weight: 700; }
#login-box .lg-btns { display: flex; gap: 8px; justify-content: center; }
#btn-pk { position: absolute; right: -6px; bottom: -14px; z-index: 3; padding: 2px 10px; height: 22px; border-radius: 11px; border: 1.5px solid var(--gold); background: linear-gradient(#4a6a3a, #23381a); color: #e8ffd8; font: 800 11px var(--font); cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
#btn-pk.on { background: linear-gradient(#e04a2a, #8a1a0a); color: #fff; box-shadow: 0 0 10px #ff4a2a; animation: pkpulse 1.4s infinite; }
@keyframes pkpulse { 50% { box-shadow: 0 0 2px #ff4a2a; } }
#chat-online { color: #8affa0; font-size: 11px; font-weight: 600; cursor: pointer; }
.bot-tag { color: #9aa4ae; font-size: 10px; font-weight: 700; margin-right: 3px; }
.gm-tag { display: inline-block; background: #e0a020; color: #2a1606; font-size: 9px; font-weight: 900; padding: 0 3px; border-radius: 3px; margin-right: 3px; vertical-align: 1px; }
.cl-map .ctag { color: #8ad8ff; } .cl-mapme .ctag { color: #8ad8ff; } .cl-pm .ctag { color: #ff8ad8; } .cl-pm { color: #ffc8ec; }
.cl-gm { color: #ffe08a; } .cl-gm .ctag { color: #ffb030; } .gm-n { color: #ffb030; }
#kicked { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; }
#kicked .kk-box { padding: 22px; border-radius: 12px; text-align: center; display: flex; flex-direction: column; gap: 12px; max-width: 360px; }
#kicked .kk-t { font: 700 20px "Noto Serif", serif; color: #a02a10; }
.pl-top { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .pl-top input { flex: 1; min-width: 160px; padding: 6px 8px; border-radius: 6px; border: 1.5px solid #c9a86a; font: 14px var(--font); }
.pl-list { overflow-x: auto; }
.pl-tb { width: 100%; border-collapse: collapse; font-size: 12px; }
.pl-tb th { text-align: left; background: rgba(120,80,30,.15); padding: 5px; }
.pl-tb td { padding: 5px; border-top: 1px solid rgba(160,120,60,.25); vertical-align: top; }
.pl-tb tr.ban td { background: rgba(200,40,20,.08); }
.pl-tb .on { color: #2a8a2a; font-weight: 700; } .pl-tb .bad { color: #c0301a; } .pl-tb .warn { color: #c07010; }
.pl-act { display: flex; flex-wrap: wrap; gap: 3px; }
.pl-act button { font: 600 11px var(--font); padding: 2px 6px; border-radius: 5px; border: 1px solid #b89a6a; background: #fff6e0; cursor: pointer; color: #4a2a10; }
.pl-act button:hover { background: #ffe6a8; } .pl-act button.bad { color: #b02010; border-color: #d08070; }
.pl-log { font-size: 12px; padding: 2px 0; border-bottom: 1px dashed rgba(160,120,60,.25); }