@import url("style-khung.css?v=362a7347");   /* khung thắp đèn, chữ pixel (29/10/2026) */
@import url("style-ui-kit.css?v=362a7347");
@import url("style-ui-kit2.css?v=362a7347");   /* bộ khung GPT thứ hai: bảng, tab, hộp thoại, thông báo, boss, chân dung */   /* bộ khung GPT 02/11/2026: nút có biểu tượng, vòng nút tròn, thanh, khung bảng; thu gọn, ẩn giao diện */
@import url("style-ui-kit3.css?v=362a7347");   /* nút tròn, bản đồ tròn theo ảnh mẫu 04/11/2026 */
@import url("style-ui-hoa-dao.css?v=362a7347");   /* bộ khung hoa đào 04/11/2026: bảng, hộp thoại, thanh, nút tròn, ô phẩm cấp, màn đăng nhập */
@import url("style-ui-icon.css?v=362a7347");   /* bộ biểu tượng mới 04/11/2026 */
/* Giao diện "đêm hầm ngục" (28/10/2026): nền đá tối, viền vàng cũ, chữ ánh trăng, nút chính màu lửa đuốc.
   Màu chỉ khai ở :root, mọi chỗ khác dùng biến để đổi tông một chỗ. Ghi chú ở docs/03-CAU-TRUC.md (Giao diện). */
:root {
  --night: #0b0a14;                 /* nền ngoài cùng */
  --panel: #15121f;                 /* thân bảng */
  --panel-2: #1c1829;               /* thẻ, ô trong bảng */
  --panel-3: #272138;               /* nút thường, ô nổi */
  --line: #3a3350;                  /* viền đá */
  --line-hi: #574c74;
  --trim: #a88446;                  /* viền vàng cũ */
  --trim-hi: #e2c07a;
  --ink: #ece5f6;                   /* chữ chính (ánh trăng) */
  --ink-2: #bcb2d0;
  --muted: #8a81a2;
  --moon: #a9c3ff;                  /* chữ thông tin, liên kết */
  --torch: #f2a443;                 /* lửa đuốc: nút chính, tab đang chọn */
  --ember: #d9682a;
  --torch-ink: #1d1006;             /* chữ trên nút lửa */
  --blood: #e2525a;
  --jade: #6fd39a;
  --glass: rgba(11, 9, 20, .72);    /* nền mờ trên cảnh */
  --f-title: "Noto Serif", "Songti SC", Georgia, "Times New Roman", serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 10px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); font-family: var(--f-body); color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: none; }
button { color: var(--ink); font-family: var(--f-body); }   /* iPhone tự tô chữ nút màu xanh hệ thống: giữ màu của game */
button:focus-visible, input:focus-visible { outline: 2px solid var(--torch); outline-offset: 2px; }
canvas#game { position: fixed; inset: 0; display: block; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; }   /* vẽ ở độ phân giải thấp hơn màn (src/core/perf.js) vẫn sắc nét kiểu pixel */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- HUD trên cảnh */
#hud { position: fixed; left: 0; right: 0; top: 0; padding: calc(env(safe-area-inset-top) + 8px) 10px 0; pointer-events: none; }
.bars { width: 176px; }
.power { font-size: 11px; font-weight: 800; color: var(--torch); text-shadow: 0 1px 2px #000; margin: -2px 0 3px; }
.sky { font-size: 10px; font-weight: 700; color: var(--moon); text-shadow: 0 1px 2px #000; margin: -2px 0 3px; }
.realm { font: 700 14px var(--f-title); color: var(--trim-hi); text-shadow: 0 1px 2px #000, 0 0 8px rgba(226, 192, 122, .35); margin-bottom: 3px; letter-spacing: .02em; }
.bar { position: relative; height: 12px; background: rgba(5, 4, 10, .7); border: 1px solid var(--line-hi); box-shadow: inset 0 0 0 1px #000; border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width .15s; }
.bar.hp i { background: linear-gradient(#ff8a7a, #b8283a); box-shadow: 0 0 8px rgba(226, 82, 90, .6); }
.bar.qi i { background: linear-gradient(#bfe6ff, #3a7fd0); box-shadow: 0 0 8px rgba(90, 160, 240, .6); }
.bar span { position: absolute; inset: 0; font-size: 9px; line-height: 10px; text-align: center; color: #fff; font-weight: 700; text-shadow: 0 1px 1px #000; }
.goal { position: absolute; right: 10px; top: calc(env(safe-area-inset-top) + 8px); max-width: 52%; background: var(--glass); color: var(--ink); font-size: 12px; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--line); border-left: 3px solid var(--torch); white-space: pre-line; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
.goal:empty { display: none; }
.goal { pointer-events: auto; cursor: pointer; }   /* chạm để đổi việc mũi tên chỉ (src/game/guide.js) */
.boss { position: absolute; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 64px); width: 70%; text-align: center; color: var(--ink); font: 700 13px var(--f-title); text-shadow: 0 1px 2px #000, 0 0 10px rgba(226, 82, 90, .6); }
.boss .bar { height: 10px; margin-top: 3px; border-color: var(--trim); }
.boss .bar i { background: linear-gradient(#ff6a5a, #8a1020); }

/* ---------------------------------------------------------------- nút đánh, chiêu */
#buttons { position: fixed; right: 0; bottom: 0; width: 190px; height: 190px; margin: 0 calc(env(safe-area-inset-right) + 8px) calc(env(safe-area-inset-bottom) + 10px) 0; }
.btn { position: absolute; border: 1.5px solid var(--line-hi); border-radius: 50%; background: radial-gradient(circle at 40% 30%, rgba(60, 52, 86, .92), rgba(16, 13, 26, .92)); color: var(--ink); font: 700 11px var(--f-body); padding: 0; overflow: hidden; touch-action: none; box-shadow: 0 0 0 1px #000, 0 3px 10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(169, 195, 255, .18); }
.btn:active, .btn.down { transform: scale(.92); border-color: var(--trim-hi); }
.btn b { position: relative; z-index: 1; display: block; padding: 0 4px; line-height: 1.1; text-shadow: 0 1px 2px #000; }
.btn .cd { position: absolute; inset: 0; background: rgba(5, 4, 10, .7); transform-origin: bottom; transform: scaleY(var(--cd, 0)); }
.btn.off { opacity: .35; }
#btn-s0, #btn-s1, #btn-s2 { background-repeat: no-repeat; background-position: center 9px; background-size: 24px 24px; image-rendering: pixelated; }
#btn-s0 b, #btn-s1 b, #btn-s2 b { font-size: 9px; padding-top: 30px; }
.atk { right: 0; bottom: 0; width: 84px; height: 84px; font-size: 15px; border-color: var(--trim); background: radial-gradient(circle at 45% 35%, #ffcf7a 0, #e0802e 38%, #6a2a10 100%); color: var(--torch-ink); box-shadow: 0 0 0 1px #000, 0 0 18px rgba(242, 164, 67, .45), inset 0 2px 0 rgba(255, 240, 200, .5); }
.atk b { color: #fff6e0; text-shadow: 0 1px 2px #3a1404; font-family: var(--f-title); font-size: 16px; }
/* Chiêu xếp thành cung đều quanh nút Đánh (tâm nút Đánh cách góc 42px): bán kính 94 ở 180°, 135°, 90° — không chạm nhau */
#btn-s0 { right: 107px; bottom: 13px; width: 58px; height: 58px; }
#btn-s1 { right: 79px; bottom: 79px; width: 58px; height: 58px; }
#btn-s2 { right: 13px; bottom: 107px; width: 58px; height: 58px; }
.act { right: 128px; bottom: 150px; width: auto; height: 38px; border-radius: 6px; padding: 0 14px; background: linear-gradient(#f6b45a, #c66a22); border-color: var(--trim-hi); color: var(--torch-ink); font-size: 13px; white-space: nowrap; box-shadow: 0 0 14px rgba(242, 164, 67, .45); }
.act b { color: var(--torch-ink); text-shadow: none; }
#btn-pill { right: 178px; bottom: 8px; width: 46px; height: 46px; font-size: 11px; background: radial-gradient(circle at 40% 30%, #8a3a52, #2a0f1c); }
#btn-dash { right: 166px; bottom: 74px; width: 44px; height: 44px; font-size: 11px; background: radial-gradient(circle at 40% 30%, #3a5a8a, #0f1828); }
#btn-art { right: 70px; bottom: 156px; width: 46px; height: 46px; font-size: 10px; background: radial-gradient(circle at 40% 30%, #6a5a2a, #20180a); border-color: var(--trim); }

/* ---------------------------------------------------------------- hộp thoại */
#dialog { max-height: 92vh; overflow-y: auto; position: fixed; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 10px); min-height: 110px; background: linear-gradient(rgba(169, 195, 255, .06), transparent 40%), var(--panel); border: 1px solid var(--line-hi); border-radius: var(--r); padding: 12px 14px 22px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(226, 192, 122, .2), 0 10px 30px rgba(0, 0, 0, .7); max-width: 640px; margin: 0 auto; }
.who { font: 700 15px var(--f-title); color: var(--torch); margin-bottom: 4px; letter-spacing: .02em; }
.who:empty { display: none; }
.text { font-size: 15px; line-height: 1.5; color: var(--ink); }
.hint { position: absolute; right: 12px; bottom: 5px; font-size: 11px; color: var(--muted); }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.choices:empty { display: none; }
/* nhiều lựa chọn (bể cá: cả chục loài cá) thì cuộn trong khung, không tràn màn (chủ dự án 04/11/2026 15:09) */
#dialog .choices { max-height: 34vh; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
.choice { border: 1px solid var(--line-hi); border-radius: 8px; padding: 8px 10px; text-align: left; background: var(--panel-2); font: inherit; color: var(--ink); }
.choice:active { background: var(--panel-3); border-color: var(--torch); }
.choice b { display: block; font-size: 15px; }
.choice small { font-size: 11px; color: var(--ink-2); }

#toast { position: fixed; left: 50%; top: 32%; transform: translateX(-50%); background: var(--glass); color: var(--ink); border: 1px solid var(--trim); padding: 8px 14px; border-radius: 6px; font-weight: 700; font-size: 14px; text-align: center; pointer-events: none; max-width: 86%; box-shadow: 0 0 18px rgba(0, 0, 0, .6), 0 0 10px rgba(226, 192, 122, .2); }

body.trip #hud, body.trip #buttons, body.trip #toast { display: none !important; }
/* Đang mở bảng thì dòng báo xuống sát đáy, không che tab và nội dung giữa bảng */
body:has(.panel:not([hidden])) #toast, body:has(#bag:not([hidden])) #toast { top: auto; bottom: 10px; }

/* ---------------------------------------------------------------- màn hình đầu */
#menu { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(ellipse at 50% 18%, rgba(169, 195, 255, .18), transparent 55%), linear-gradient(rgba(8, 6, 18, .55), rgba(8, 6, 18, .88)), url(assets/icon/splash.jpg) center / cover; text-align: center; padding: 20px; }
#menu h1 { margin: 0; font: 700 32px var(--f-title); color: var(--trim-hi); letter-spacing: .03em; text-shadow: 0 2px 0 #000, 0 0 18px rgba(242, 164, 67, .45); }
.sub { margin: 0 0 14px; color: var(--ink-2); }
.menu-btn { width: 220px; padding: 12px; font: 700 17px var(--f-title); border: 1px solid var(--trim-hi); border-radius: 8px; background: linear-gradient(#f6b45a, #c66a22); color: var(--torch-ink); box-shadow: 0 0 0 1px #000, 0 0 16px rgba(242, 164, 67, .35), inset 0 1px 0 rgba(255, 240, 200, .5); }
.menu-btn.alt { background: var(--panel-3); color: var(--ink); border-color: var(--line-hi); box-shadow: 0 0 0 1px #000; }
.menu-btn:disabled { opacity: .5; }
.help { font-size: 12px; color: var(--ink-2); max-width: 300px; }
#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(rgba(8, 6, 18, .7), rgba(8, 6, 18, .9)), url(assets/icon/splash.jpg) center / cover, var(--night); font: 700 16px var(--f-title); color: var(--trim-hi); text-shadow: 0 2px 0 #000; }
#menu input { width: 240px; padding: 11px 12px; font: 600 16px var(--f-body); border: 1px solid var(--line-hi); border-radius: 8px; margin-bottom: 8px; display: block; background: var(--panel-2); color: var(--ink); }
#menu input::placeholder { color: var(--muted); }
#login-form .row, #play-buttons { display: flex; flex-direction: column; gap: 8px; align-items: center; }
#login-form .row { flex-direction: row; width: 240px; }
#login-form .row .menu-btn { width: auto; flex: 1; }
.hello { margin: 0 0 8px; font-size: 16px; }
.link-btn { background: none; border: 0; text-decoration: underline; font: 600 14px var(--f-body); color: var(--moon); padding: 6px; }
#login-msg { min-height: 18px; margin: 0; font-size: 13px; }
#login-msg.bad { color: var(--blood); }
#menu .health { font-size: 12px; color: #e88a7a; max-width: 300px; margin: 10px auto 2px; }
#menu .legal { font-size: 12px; opacity: .8; margin: 2px 0; }
#menu .legal a { color: var(--ink-2); }
.link-btn.danger { color: var(--blood); }

/* ---------------------------------------------------------------- nút menu trên HUD */
#btn-mute, #btn-menu, #btn-auto, #btn-pilot, #btn-bag, #btn-skills, #btn-pets, #btn-daily, #btn-achv, #btn-world, #btn-social, #btn-rank, #btn-guild { pointer-events: auto; width: 32px; height: 28px; border: 1px solid var(--line-hi); border-radius: 5px; background: var(--glass); color: var(--ink); font-size: 15px; padding: 0; box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(169, 195, 255, .15); }
.hud-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; max-width: 240px; }
#btn-auto.on, #btn-pilot.on { background: linear-gradient(#f6b45a, #c66a22); color: var(--torch-ink); border-color: var(--trim-hi); box-shadow: 0 0 10px rgba(242, 164, 67, .5); }
#hud-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; }
#hud-menu[hidden] { display: none; }
#hud-menu button { height: 32px !important; min-width: 96px; text-align: left; }
.glow-hint { animation: hint-glow 1.1s ease-in-out infinite; }
@keyframes hint-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 164, 67, 0); } 50% { box-shadow: 0 0 0 3px rgba(242, 164, 67, .85), 0 0 14px rgba(242, 164, 67, .7); } }
@media (prefers-reduced-motion: reduce) { .glow-hint { animation: none; box-shadow: 0 0 0 2px var(--torch); } }
#btn-menu, #btn-auto, #btn-pilot, #btn-bag, #btn-skills, #btn-pets, #btn-daily, #btn-achv, #btn-world, #btn-social, #btn-rank, #btn-guild { width: auto; padding: 0 10px; white-space: nowrap; font: 700 13px var(--f-body); position: relative; }
#menu-badge, #bag-badge, #skills-badge, #pets-badge, #daily-badge, #achv-badge, #social-badge { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ember); border: 1px solid #000; box-shadow: 0 0 6px var(--torch); }

/* ---------------------------------------------------------------- bảng chung (túi đồ, chiêu, ...) */
#bag, .panel { position: fixed; inset: calc(env(safe-area-inset-top) + 8px) 8px calc(env(safe-area-inset-bottom) + 8px); max-width: 560px; margin: 0 auto; background: radial-gradient(ellipse at 50% -10%, rgba(169, 195, 255, .1), transparent 50%), linear-gradient(var(--panel), #100e18); border: 1px solid var(--line-hi); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; color: var(--ink); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(226, 192, 122, .22), 0 14px 50px rgba(0, 0, 0, .8); }
.bag-head { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.bag-head b { font: 700 18px var(--f-title); color: var(--trim-hi); letter-spacing: .02em; text-shadow: 0 0 10px rgba(226, 192, 122, .25); }
#bag-mats { flex: 1; font-size: 12px; color: var(--torch); font-weight: 700; text-align: right; }
#bag-close, #skills-close, #cave-close, #pets-close, #daily-close, #achv-close, #world-close, #social-close, #market-close, #topup-close, #guild-close { width: 34px; height: 34px; flex: none; border: 1px solid var(--line-hi); border-radius: 6px; background: var(--panel-3); color: var(--ink-2); font-size: 16px; }
.panel-sub { flex: 1; font-size: 12px; color: var(--ink-2); }
.bag-tabs { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.bag-tabs button { border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; background: var(--panel-2); color: var(--ink-2); font: 700 13px var(--f-body); }
.bag-tabs button.on { background: linear-gradient(rgba(242, 164, 67, .22), rgba(242, 164, 67, .06)); color: var(--torch); border-color: var(--torch); box-shadow: inset 0 -2px 0 var(--torch), 0 0 10px rgba(242, 164, 67, .2); }
.muted { color: var(--muted); font-size: 12px; margin: 2px 0; }
.tiny { font-size: 11px; }
.mini, .act-btn, .socket { border: 1px solid var(--line-hi); border-radius: 6px; background: var(--panel-3); color: var(--ink); font: 700 12px var(--f-body); padding: 7px 10px; }
.mini:active, .act-btn:active { border-color: var(--torch); }
.mini:disabled, .act-btn:disabled { opacity: .4; }
.mini.on { border-color: var(--torch); color: var(--torch); }
.act-btn.primary, .mini.primary { background: linear-gradient(#f6b45a, #c66a22); color: var(--torch-ink); border-color: var(--trim-hi); box-shadow: 0 0 12px rgba(242, 164, 67, .35); }
.swatch { float: right; width: 28px; height: 14px; border: 1px solid #000; border-radius: 3px; }
.wide-card { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- túi đồ */
#bag-equip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
@media (max-width: 380px) { #bag-equip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.slot { --rar: var(--line-hi); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 4px; border: 1px solid var(--rar); border-radius: 7px; background: var(--panel-2); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rar) 22%, transparent), transparent 70%), var(--panel-2); font: inherit; min-width: 0; }
.slot .ico { width: 32px; height: 32px; background: no-repeat center / 32px 32px; image-rendering: pixelated; }
.slot small { font-size: 10px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.slot.empty { border-style: dashed; border-color: var(--line); background: var(--panel-2); }
.slot.empty .ico { opacity: .25; background: radial-gradient(circle, var(--line-hi) 0 4px, transparent 5px); }
.slot.sel { box-shadow: 0 0 0 2px var(--torch), 0 0 12px rgba(242, 164, 67, .35); }
#bag-stats { font-size: 11px; color: var(--moon); line-height: 1.4; }
#bag-pick { font-size: 12px; color: var(--torch); font-weight: 700; }
#bag-filter { display: flex; gap: 6px; align-items: center; }
.chips { flex: 1; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 1px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: var(--panel-2); color: var(--ink-2); font: 600 12px var(--f-body); white-space: nowrap; }
.chip.on { border-color: var(--moon); color: var(--ink); background: rgba(169, 195, 255, .14); }
.chip.sort { border-radius: 6px; color: var(--moon); }
#bag-list { flex: 1; min-height: 80px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; align-content: start; padding: 1px 1px 4px; }
#bag.sheet-open #bag-list { padding-bottom: 52vh; }   /* chừa chỗ cho tấm chi tiết, món cuối vẫn cuộn tới được */
.item { --rar: var(--line-hi); position: relative; border: 1px solid var(--line); border-left: 3px solid var(--rar); border-radius: 7px; background: var(--panel-2); padding: 6px 7px; text-align: left; font: inherit; color: var(--ink); min-height: 48px; }
.item b { display: block; font-size: 13px; color: var(--rar); line-height: 1.25; }
.item small { font-size: 10.5px; color: var(--muted); }
.item em { position: absolute; right: 6px; bottom: 4px; font: 700 10px var(--f-body); font-style: normal; }
.item em.up { color: var(--jade); }
.item.sel { background: var(--panel-3); box-shadow: 0 0 0 1px var(--torch), 0 0 12px rgba(242, 164, 67, .25); }
.item .ico { float: left; width: 32px; height: 32px; margin-right: 6px; background: no-repeat center / 32px 32px; image-rendering: pixelated; }
.gem-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; padding: 4px 2px; border-bottom: 1px solid var(--line); }
.gem-row span { flex: 1; min-width: 120px; }
.gem-ico { image-rendering: pixelated; flex: none; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .6)); }
.gem-ico.sm { vertical-align: middle; margin-right: 4px; }
.socket.full, .pf-gem { display: inline-flex; align-items: center; gap: 2px; }
.gem-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #000; display: inline-block; box-shadow: 0 0 6px currentColor; }
.quick-sell { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.quick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-chip { border-width: 1.5px; opacity: .55; }
.quick-chip.on { opacity: 1; font-weight: 800; }
.quick-sell .act-btn { width: 100%; }

/* tấm chi tiết trượt lên từ đáy túi */
#bag-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 62%; display: flex; flex-direction: column; background: linear-gradient(rgba(169, 195, 255, .07), transparent 30%), #120f1c; border-top: 1px solid var(--trim); border-radius: 12px 12px var(--r) var(--r); box-shadow: 0 -12px 30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(226, 192, 122, .3); animation: sheet-up .18s ease-out; }
@keyframes sheet-up { from { transform: translateY(30px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { #bag-sheet { animation: none; } }
#bag-detail { overflow-y: auto; padding: 10px 12px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
/* Lịch sử Linh Thạch (src/ui/coin-log-sheet.js): giờ · lý do · số ± · số dư, vừa màn dọc */
#bag-coinlog { padding: 4px 8px; font-size: 11px; flex: none; }
.coinlog { display: flex; flex-direction: column; gap: 2px; }
.coinlog-day { font-size: 11px; color: var(--trim-hi); opacity: .8; margin-top: 6px; }
.coinlog-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; padding: 4px 2px; border-bottom: 1px solid var(--line); font-size: 12px; }
.coinlog-t { color: var(--ink); opacity: .7; font-variant-numeric: tabular-nums; }
.coinlog-why { overflow-wrap: anywhere; }
.coinlog-n { text-align: right; font-variant-numeric: tabular-nums; }
.coinlog-n.up { color: #8ee08a; }
.coinlog-n.down { color: #ff7a7a; }
.coinlog-b { grid-column: 2 / 4; text-align: right; opacity: .6; font-size: 10px; }
.d-head { display: flex; align-items: center; gap: 10px; }
.d-head .ico { width: 40px; height: 40px; flex: none; border: 1px solid var(--line-hi); border-radius: 7px; background: no-repeat center / 32px 32px, var(--panel-2); image-rendering: pixelated; }
.d-name { flex: 1; min-width: 0; }
/* tên + "Đang mặc" một dòng, "Phẩm · ô · cấp" một dòng (chủ dự án 07/11/2026 09:04: trước chiếm 3 và 2 dòng) */
.d-title { font: 700 11px var(--f-title); line-height: 1.2; letter-spacing: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-sub { font-size: 9px; letter-spacing: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-head .ico { position: relative; }
.d-worn { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); white-space: nowrap; background: var(--panel-3); color: var(--torch); border: 1px solid var(--torch); border-radius: 4px; padding: 0 3px; font: 700 7px/1.4 var(--f-body); font-style: normal; }
.d-close { width: 32px; height: 32px; flex: none; border: 1px solid var(--line-hi); border-radius: 6px; background: var(--panel-3); color: var(--ink-2); font-size: 15px; }
.d-primary { display: flex; align-items: center; gap: 10px; }
.d-primary .act-btn { flex: 1; padding: 10px; font-size: 14px; }
.d-gain { font: 700 12px var(--f-body); color: var(--muted); white-space: nowrap; }
.d-gain.up { color: var(--jade); }
.d-gain.down { color: var(--blood); }
.d-msg { color: var(--torch); font-weight: 700; }
.d-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.d-compare { border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; background: var(--panel-2); display: grid; gap: 2px; }
.d-diff { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.d-diff.up b { color: var(--jade); }
.d-diff.down b { color: var(--blood); }
.d-stats { display: grid; gap: 3px; }
.d-main { font-weight: 700; color: var(--ink); }
.d-line { color: var(--moon); }
.d-line.tier-den { background: #1a0d12; border: 1px solid var(--edge, #8b0000); border-radius: 4px; padding: 0 4px; margin-left: -4px; }
.d-line.lockable { cursor: pointer; border-radius: 4px; padding: 1px 4px; margin-left: -4px; }
.d-line.locked { background: rgba(242, 164, 67, .14); color: var(--torch); font-weight: 700; }
.d-sockets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.socket { border-style: dashed; }
.socket.full { border-style: solid; }
.d-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- chiêu, động phủ, linh thú, việc, thành tựu */
#skills-slots, #cave-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#skills-slots button, #cave-slots button { border: 1px solid var(--line-hi); border-radius: 7px; background: var(--panel-2); color: var(--ink); padding: 6px; font: 700 13px var(--f-body); min-height: 48px; }
#skills-slots button.on, #cave-slots button.on { border-color: var(--torch); box-shadow: 0 0 0 1px var(--torch), 0 0 12px rgba(242, 164, 67, .3); color: var(--torch); }
#skills-slots small { display: block; font-weight: 600; font-size: 10px; color: var(--muted); }
#skills-list, #cave-list, #pets-list, #daily-list, #achv-list, #guild-list { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; align-content: start; }
.skill-card { text-align: left; border: 1px solid var(--line); border-left-width: 4px; border-radius: 7px; background: var(--panel-2); color: var(--ink); padding: 7px 9px; font: 600 12px var(--f-body); }
.skill-card b { display: block; font-size: 14px; }
.skill-card small { display: block; color: var(--ink-2); line-height: 1.35; margin-top: 2px; }
.skill-card.locked { opacity: .45; }
.skill-card.using { background: var(--panel-3); box-shadow: inset 0 0 0 1px rgba(242, 164, 67, .5); }
#cave-slots[hidden] { display: none; }
#cave-slots { grid-template-columns: repeat(4, 1fr); gap: 4px; flex: none; }   /* ô rèn gọn để danh sách lò rèn còn chỗ trên điện thoại dọc (báo cáo #16) */
#cave-slots button { min-height: 30px; padding: 3px 4px; font-size: 12px; }
/* Động phủ: dòng nguyên liệu trên đầu bảng dài theo túi (cuối game vài chục loại) từng đẩy danh sách luống, đan ra khỏi bảng nửa màn hình
   (báo lỗi #5 "dược viên kín không thể trồng", 29/10/2026): giữ tối đa 2 dòng, dài hơn thì cuộn trong dòng đó */
#cave-mats { max-height: 2.5em; line-height: 1.25; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
#cave-msg, #daily-msg, #achv-msg, #guild-msg { min-height: 16px; font: 700 13px var(--f-body); color: var(--torch); }
.card-acts { display: flex; gap: 6px; margin-top: 6px; }
.card-acts .mini { flex: 1; min-height: 32px; }
.card-acts.wrap { flex-wrap: wrap; align-items: center; }
.card-acts.wrap .mini { flex: 0 1 auto; white-space: nowrap; }
.gift-lbl { font-weight: 700; margin-left: 4px; }
.skill-up { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 8px 10px; }
.skill-up small { color: var(--muted); }

/* ---------------------------------------------------------------- bản đồ thế giới */
.world-tabs { display: flex; gap: 4px; }
.world-tabs button { flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; background: var(--panel-2); color: var(--ink-2); font: 700 13px var(--f-body); }
.world-tabs button.on { background: linear-gradient(rgba(242, 164, 67, .22), rgba(242, 164, 67, .06)); color: var(--torch); border-color: var(--torch); box-shadow: inset 0 -2px 0 var(--torch); }
.world-tabs button[hidden] { display: none; }
#world-sky { position: relative; flex: 1; min-height: 220px; border-radius: 8px; overflow: hidden; background: #06050d; border: 1px solid var(--line); touch-action: none; }
#world-sky canvas { display: block; }
#world-card { position: absolute; left: 8px; right: 8px; bottom: 8px; max-width: 360px; margin: 0 auto; padding: 8px 10px; border: 1px solid var(--trim); border-radius: 8px; background: rgba(18, 15, 28, .95); font: 12px var(--f-body); color: var(--ink); box-shadow: 0 6px 20px rgba(0, 0, 0, .7); }
#world-card b { font: 700 15px var(--f-title); margin-right: 6px; color: var(--trim-hi); }
#world-card small { color: var(--muted); font-weight: 700; }
#world-card p { margin: 4px 0 0; color: var(--ink-2); }
#world-card .wc-danger { font-weight: 700; }
#world-card .wc-danger span { text-shadow: 0 0 1px #000, 0 0 1px #000; }
.wc-go { display: block; width: 100%; margin-top: 6px; padding: 8px; border: 1px solid var(--trim-hi); border-radius: 6px; background: linear-gradient(#f6b45a, #c66a22); color: var(--torch-ink); font: 700 13px var(--f-body); }
@media (orientation: landscape) { #world-card { left: auto; top: 8px; bottom: auto; width: 230px; max-height: calc(100% - 16px); overflow-y: auto; } }
.wc-go:disabled { background: var(--panel-3); color: var(--muted); border-color: var(--line); }

/* Ngắm cảnh: ẩn nút, chỉ còn cảnh */
body.ngam-canh #hud, body.ngam-canh #buttons { opacity: 0; pointer-events: none; transition: opacity 1.2s; }
#hud, #buttons { transition: opacity .4s; }

/* ---------------------------------------------------------------- đạo hữu, xếp hạng, chợ, nạp, tông môn */
#social-log, #market-list, #topup-list, #rank-list, #guild-list.chat { background: rgba(5, 4, 10, .55); border: 1px solid var(--line); border-radius: 7px; }
#social-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; font-size: 13px; padding: 6px; }
#social-log b { color: #b89aff; margin-right: 4px; }
#social-log .empty { color: var(--muted); }
#social-log small { color: var(--muted); }
#social-log .me b { color: var(--jade); }
#social-rank { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
#rank-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; font-size: 13px; padding: 6px; }
#rank-list div { display: flex; gap: 8px; padding: 3px 4px; border-radius: 4px; }
#rank-list div.me { background: rgba(242, 164, 67, .14); color: var(--torch); font-weight: 700; }
#rank-list b { width: 26px; text-align: right; color: var(--trim-hi); font-variant-numeric: tabular-nums; }
#rank-list span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rank-list .empty { color: var(--muted); }
#rank-list div.co span { color: var(--blood); }   /* bị gắn cờ nghi vấn gian lận */
#rank-list .flag { font-style: normal; margin-right: 4px; color: var(--blood); text-shadow: 0 0 6px rgba(226, 82, 90, .6); }
#rank-note { color: var(--muted); }
#social-form { display: flex; gap: 6px; }
#social-input, .dlg-input, .guild-input, #market-form input { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-hi); border-radius: 6px; font: 14px var(--f-body); }
#social-input::placeholder, .dlg-input::placeholder, .guild-input::placeholder { color: var(--muted); }
#social-input { flex: 1; min-width: 0; padding: 7px 9px; }
#market-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 6px; font-size: 13px; }
#market-list { min-height: 0; touch-action: pan-y; overscroll-behavior: contain; } #market-list > * { flex-shrink: 0; }   /* chợ kéo lên xem được (đề xuất admin 04/11/2026): dòng không co lại, danh sách cuộn */
#market-list .empty { color: var(--muted); }
.mk-row { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); }
.mk-row.sel { background: rgba(242, 164, 67, .12); border-color: var(--torch); }
.mk-row > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mk-row small { color: var(--muted); }
.mk-price { font-weight: 700; color: var(--torch); }
#market-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#market-form input { width: 110px; padding: 7px; font-weight: 600; }
#market-form small { width: 100%; color: var(--ink-2); }
.dlg-input { width: 100%; padding: 8px 10px; font-size: 15px; }
#topup-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 6px; font-size: 13px; }
.tp-head { margin-top: 6px; color: var(--moon); }
.tp-note { color: var(--muted); }
.tp-odds { display: block; margin: -2px 0 6px; color: var(--muted); font-size: 11px; line-height: 1.35; }
/* Bảng Tông môn (ui/guild-panel.js) */
#guild-list.chat { display: flex; flex-direction: column; gap: 3px; font-size: 13px; padding: 6px; }
#guild-list.chat b { color: #b89aff; margin-right: 4px; }
#guild-list.chat .me b { color: var(--jade); }
#guild-list.chat small { color: var(--muted); }
#guild-list .empty { color: var(--muted); font-size: 13px; padding: 6px; }
#guild-list .guild-head { grid-column: 1 / -1; font: 700 13px var(--f-body); color: var(--ink-2); }
#guild-list .guild-find { grid-column: 1 / -1; display: flex; gap: 6px; }
.guild-input { width: 100%; min-width: 0; padding: 7px 9px; margin-top: 6px; }
.guild-find .guild-input { margin-top: 0; flex: 1; }
#guild-form { display: flex; gap: 6px; }
#guild-form[hidden] { display: none; }
#guild-form .guild-input { margin-top: 0; flex: 1; }
.chat-msg { cursor: pointer; }
.chat-act { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 2px 0 6px 8px; }
.chat-act small { width: 100%; color: var(--muted); }
.chat-hidden { color: var(--muted); font-size: 11px; font-style: italic; margin: 4px 0; }
.wh-row { cursor: pointer; }
.wh-new { color: var(--ember); font-weight: 800; }

/* thanh cuộn tối */
* { scrollbar-color: var(--line-hi) transparent; scrollbar-width: thin; }

/* ---------------------------------------------------------------- hòm thư (src/ui/inbox-panel.js) */
.ib-btn { pointer-events: auto; position: relative; width: 30px; height: 26px; padding: 0; border: 1px solid var(--line-hi); border-radius: 5px; background: var(--glass); color: var(--ink); font-size: 14px; line-height: 1; box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(169, 195, 255, .15); }
.ib-badge { position: absolute; top: -6px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: 8px; background: #d8343c; border: 1px solid #000; color: #fff; font: 700 9.5px/13px system-ui, sans-serif; font-style: normal; text-align: center; }
.ib-badge[hidden] { display: none; }
.ib-panel .bag-head b { flex: 1; }
.ib-tabs { display: flex; gap: 5px; overflow-x: auto; flex-shrink: 0; padding-bottom: 2px; }
.ib-tab { white-space: nowrap; }
.ib-tab.on { border-color: var(--trim); color: var(--trim-hi); }
.ib-list { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; min-height: 0; }
.ib-list > * { flex-shrink: 0; }
.ib-row { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 6px 8px; border-radius: 6px; border: 1px solid transparent; background: var(--panel-2); color: var(--ink-2); font: inherit; }
.ib-row.new { border-color: var(--line-hi); color: var(--ink); background: linear-gradient(90deg, rgba(216, 52, 60, .14), var(--panel-2) 30%); }
.ib-top { display: flex; align-items: center; gap: 6px; }
.ib-title { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-row:not(.new) .ib-title { font-weight: 600; }
.ib-ago { font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.ib-text { font-size: 11.5px; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- báo lỗi, đề xuất (src/ui/feedback-panel.js) */
.fb-btn { pointer-events: auto; width: 28px; height: 26px; padding: 0; border: 1px solid var(--line-hi); border-radius: 5px; background: var(--glass); font-size: 13px; line-height: 1; box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(169, 195, 255, .15); }
.fb-panel .bag-head b { flex: 1; }
.fb-body { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; padding-bottom: 6px; }
.fb-body > * { flex-shrink: 0; }
.fb-info { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.fb-label { font-size: 12px; color: var(--trim-hi); font-weight: 700; }
.fb-name, .fb-desc { width: 100%; box-sizing: border-box; border: 1px solid var(--line-hi); border-radius: 6px; background: rgba(8, 6, 16, .7); color: var(--ink); font: 14px var(--f-body); padding: 7px 8px; }
.fb-desc { resize: none; }
.fb-img { align-self: flex-start; max-width: 100%; max-height: 110px; border-radius: 6px; border: 1px solid var(--line-hi); }
.fb-pick { align-self: flex-start; }
.fb-msg { margin: 0; min-height: 1em; font-size: 12px; color: var(--trim-hi); }
.fb-send { height: 34px; border: 1px solid var(--trim); border-radius: 6px; background: linear-gradient(#5a3a1a, #3a2410); color: #ffe9b8; font: 700 14px var(--f-body); }
.fb-send:disabled { opacity: .6; }
.fb-list { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; border-top: 1px solid var(--glass-line, #444); padding-top: 6px; }
.fb-list b { font-size: 12px; color: var(--ink-2); }
.fb-row { display: flex; flex-direction: column; gap: 2px; padding: 5px 7px; border-radius: 6px; background: var(--panel-2); }
.fb-row-top { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.fb-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-st { font-size: 11px; padding: 1px 6px; border-radius: 9px; background: rgba(169, 195, 255, .15); color: var(--ink-2); white-space: nowrap; }
.st-da_sua .fb-st, .st-se_lam .fb-st { background: rgba(110, 200, 130, .22); color: #a8f0b8; }
.st-khong_lam .fb-st, .st-chua_sua_duoc .fb-st { background: rgba(220, 120, 120, .2); color: #f2b0b0; }
.fb-reply { color: var(--ink-2); font-size: 11.5px; line-height: 1.35; }

/* ---------------------------------------------------------------- nhóm Zalo (src/ui/zalo.js) */
#btn-zalo { pointer-events: auto; position: relative; height: 28px; padding: 0 8px; border: 1px solid #7fb0ff; border-radius: 5px; background: #0068ff; color: #fff; font: 700 13px var(--f-body); box-shadow: 0 0 0 1px #000; }
#btn-zalo.gift::after { content: ''; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ffd86b; border: 1px solid #000; box-shadow: 0 0 6px #ffd86b; }
/* .zalo-panel: nằm nửa dưới như mọi bảng (chủ dự án 02/11/2026: Zalo bị kéo lên góc trên) */
.zalo-panel .bag-head b { flex: 1; }
.zalo-body { display: flex; flex-direction: column; gap: 8px; }
.zalo-info { margin: 0; color: var(--ink-2); line-height: 1.45; }
.zalo-gift { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 8px; border: 1px dashed var(--trim); background: var(--panel-2); }
.zalo-gift b { color: var(--trim-hi); }
.zalo-gift small { color: var(--ink-2); line-height: 1.4; }
.zalo-gems { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.zalo-gem { border-color: var(--gem); }
.zalo-gem.on { background: var(--gem); color: #fff; border-color: #fff; text-shadow: 0 1px 0 #000; }
.zalo-go { display: block; padding: 11px; border-radius: 8px; border: 1px solid #7fb0ff; background: #0068ff; color: #fff; font: 700 15px var(--f-body); text-align: center; text-decoration: none; box-shadow: 0 0 0 1px #000; }

/* ---------------------------------------------------------------- bảng nửa màn hình (chủ dự án chốt 28/10/2026)
   Mọi bảng, hộp thoại chỉ chiếm nửa dưới màn hình; nền và viền trong mờ để thấy game phía sau (máy quay đẩy người chơi lên
   giữa nửa trên, src/game/camera.js). Thẻ đồ, ô trang bị, nút bên trong giữ nền đặc cho nổi rõ. */
:root { --sheet-h: 50vh; --glass-line: rgba(140, 124, 182, .5); }
@supports (height: 50dvh) { :root { --sheet-h: 50dvh; } }
#bag, .panel {
  top: auto; height: var(--sheet-h); max-height: var(--sheet-h);
  background: linear-gradient(rgba(20, 17, 31, .84), rgba(10, 8, 18, .94));   /* đặc hơn để đọc chữ, viền trên vẫn thấy game */
  border-color: var(--glass-line);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(226, 192, 122, .14), 0 -8px 26px rgba(0, 0, 0, .3);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .75);   /* không nhoè nền (backdrop-filter) vì cảnh chạy liên tục bên dưới, máy yếu rất nóng */
}
.bag-head { border-bottom-color: var(--glass-line); }
.zalo-panel { height: auto; }
#dialog { max-height: var(--sheet-h); background: linear-gradient(rgba(20, 17, 31, .86), rgba(10, 8, 18, .94)); border-color: var(--glass-line); text-shadow: 0 1px 1px rgba(0, 0, 0, .75); }
#bag.sheet-open #bag-list { padding-bottom: 32vh; }
#world-sky { min-height: 160px; }
/* bảng đang mở thì nút đánh, chiêu, lướt nằm dưới bảng: ẩn đi cho khỏi lộ xuyên qua và bấm nhầm */
body:has(.panel:not([hidden])) :is(#btn-atk, #btn-dash, #btn-act, #btn-s0, #btn-s1, #btn-s2, #btn-art, #btn-pill),
body:has(#bag:not([hidden])) :is(#btn-atk, #btn-dash, #btn-act, #btn-s0, #btn-s1, #btn-s2, #btn-art, #btn-pill) { visibility: hidden; }
.rec-panel .rec-video { max-height: 22vh; }

/* ---------------------------------------------------------------- bảng Menu (src/ui/menu-panel.js, data/menu.json) */
.menu-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.menu-group { font: 700 12px var(--f-title); color: var(--trim-hi); letter-spacing: .04em; margin-top: 2px; }
.menu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.menu-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 64px; padding: 5px 2px; border: 1px solid var(--line-hi); border-radius: 8px; background: radial-gradient(circle at 50% 35%, rgba(169, 195, 255, .1), transparent 70%), var(--panel-2); color: var(--ink); font: 700 11px var(--f-body); line-height: 1.2; text-align: center; text-shadow: none; }
.menu-tile:active { border-color: var(--torch); background: var(--panel-3); }
.menu-tile.locked { opacity: .62; filter: saturate(.4); }
.menu-tile .mt-ico { image-rendering: pixelated; max-width: 34px; max-height: 34px; object-fit: contain; }
.menu-dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--ember); border: 1px solid #000; box-shadow: 0 0 6px var(--torch); }
.menu-back { align-self: flex-start; }
.menu-dun { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--trim); border-radius: 8px; background: var(--panel-2); text-shadow: none; }
.menu-dun.locked { opacity: .5; border-left-color: var(--line); }
.md-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.md-info b { font: 700 14px var(--f-title); }
.md-info small { font-size: 11px; color: var(--ink-2); }
.md-info .md-tag { font-weight: 700; }
.menu-dun .mini { min-width: 64px; min-height: 34px; }

/* ---------------------------------------------------------------- lưới ô trong các bảng (src/ui/grid-cards.js), như túi đồ */
.gc-on { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; }
.gc-hidden { display: none !important; }
.gc-on > :not(.gc-tile):not(.skill-card):not(.skill-up) { grid-column: 1 / -1; }
.gc-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-height: 84px; padding: 6px 4px 5px; border: 1px solid var(--line); border-left: 3px solid var(--line-hi); border-radius: 8px; background: var(--panel-2); color: var(--ink); font: inherit; text-align: center; text-shadow: none; min-width: 0; }
.gc-tile:active { border-color: var(--torch); }
.gc-tile b { font-size: 12px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.gc-tile small { font-size: 10px; line-height: 1.25; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gc-tile.using { background: var(--panel-3); box-shadow: 0 0 0 1px var(--torch), 0 0 10px rgba(242, 164, 67, .3); }
.gc-tile.locked, .gc-tile.off { opacity: .45; }
.gc-ico { image-rendering: pixelated; flex: none; }
.gc-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 74%; z-index: 2; display: flex; flex-direction: column; background: linear-gradient(rgba(169, 195, 255, .07), transparent 30%), #120f1c; border-top: 1px solid var(--trim); border-radius: 12px 12px var(--r) var(--r); box-shadow: 0 -12px 30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(226, 192, 122, .3); animation: sheet-up .18s ease-out; text-shadow: none; }
.gc-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px; }
.gc-title { flex: 1; min-width: 0; font: 700 15px var(--f-title); line-height: 1.25; }
.gc-body { overflow-y: auto; padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.gc-card { display: flex; flex-direction: column; gap: 4px; }
.gc-card small { font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.gc-card .card-acts { margin-top: 4px; }
.gc-go { padding: 10px; font-size: 14px; }

/* ---------------------------------------------------------------- túi đồ và ô lưới gọn (người chơi thử báo 28/10/2026: túi không vuốt được, ô to)
   7 ô trang bị một hàng nhỏ, chỉ số một dòng (chạm để xem hết), ô đồ nhỏ hơn để danh sách còn chỗ vuốt. */
#bag { padding: 8px; gap: 6px; }
#bag .bag-head { padding-bottom: 4px; }
#bag .bag-head b, .panel .bag-head b { font-size: 16px; }
#bag-close, #skills-close, #cave-close, #pets-close, #daily-close, #achv-close, #world-close, #social-close, #market-close, #topup-close, #guild-close { width: 30px; height: 30px; font-size: 14px; }
#bag-equip { gap: 4px; }
@media (max-width: 380px) { #bag-equip { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
#bag-equip .slot { padding: 3px 1px 2px; gap: 1px; border-radius: 6px; }
#bag-equip .slot .ico { width: 24px; height: 24px; background-size: 24px 24px; }
#bag-equip .slot small { font-size: 9px; }
#bag-stats { font-size: 10.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
#bag-stats.open { white-space: normal; max-height: 30%; overflow-y: auto; }
#bag .bag-tabs button { padding: 4px 10px; font-size: 12px; }
#bag .chip { padding: 3px 9px; font-size: 11px; }
#bag-list { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 5px; min-height: 120px; }
#bag .item { min-height: 40px; padding: 4px 5px; }
#bag .item .ico { width: 24px; height: 24px; background-size: 24px 24px; margin-right: 4px; }
#bag .item b { font-size: 11.5px; }
#bag .item small { font-size: 9.5px; }
.gc-on { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)) !important; gap: 5px !important; }
.gc-tile { min-height: 68px; padding: 5px 3px 4px; gap: 2px; }
.gc-tile b { font-size: 11px; }
.gc-tile small { font-size: 9.5px; }
.gc-tile.gc-big { gap: 1px; padding-top: 4px; min-height: 84px; }
.gc-tile.gc-big > * { flex: none; }   /* chữ không bị ép co lại dưới hình */
.gc-tile.gc-big b { font-size: 10px; }
.gc-tile.gc-big small { font-size: 8.5px; -webkit-line-clamp: 1; }
.menu-tile { min-height: 58px; }
/* vuốt danh sách chắc chắn được trên Android (html, body đặt touch-action: none cho cần gạt) */
#bag-list, .panel [id$="-list"], .menu-body, .gc-body, #bag-detail, #world-card { touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#bag .item { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 4px; row-gap: 2px; align-items: center; }
#bag .item .ico { float: none; margin: 0; grid-column: 1; grid-row: 1; }
#bag .item b { grid-column: 2; grid-row: 1; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#bag .item small { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bag .item:has(em) small { padding-right: 40px; }
#bag .item em { right: 5px; bottom: 3px; font-size: 9.5px; }

/* ---------------------------------------------------------------- HUD gọn (28/10/2026 đêm, chơi thử thấy góc trái chật, đè mục tiêu)
   Nút nhỏ lại một nấc, tên cảnh giới không xuống dòng, Zalo theo tông tối (giữ viền lam nhận diện), dòng báo cao hơn, gọn hơn. */
.bars { width: 182px; }
.realm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.power, .sky { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.realm b, .realm small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.realm b { font: inherit; }
.realm .hud-name { pointer-events: auto; cursor: pointer; color: #fff4d0; margin-right: .35em; text-decoration: underline dotted rgba(226, 192, 122, .6); text-underline-offset: 3px; }
.realm small { font: 700 10.5px system-ui, sans-serif; color: var(--moon); letter-spacing: 0; margin-top: 1px; }
.realm small:empty { display: none; }
.hud-btns { gap: 5px; max-width: 200px; }
#btn-mute, #btn-menu, #btn-auto, #btn-pilot, #btn-world, #btn-zalo, #btn-rec { height: 26px !important; font-size: 12px !important; }
#btn-menu, #btn-auto, #btn-pilot, #btn-world { padding: 0 8px !important; }
#btn-mute { width: 28px !important; }
#btn-zalo { background: var(--glass); color: #8fbcff; border-color: #3d6fc4; padding: 0 7px; }
.goal { font-size: 11.5px; padding: 6px 8px; max-width: 48%; }
#toast { top: max(40%, 330px); font-size: 12.5px; padding: 6px 11px; width: max-content; max-width: 92%; }   /* rộng theo chữ tới 92% (left 50% làm hộp tự co còn nửa màn, max-width không có tác dụng): chữ pixel 16px bị gãy 4 dòng, đè lên đầu nhân vật (chơi thử 01/11); giữa cột nút HUD và nhân vật: 20% đè nút Bản đồ, 28% đè dòng nhặt đồ dưới HUD (chơi thử 30/10) */
@media (orientation: portrait) { #toast { top: auto; bottom: calc(env(safe-area-inset-bottom) + 84px); left: calc(env(safe-area-inset-left) + 8px); transform: none; max-width: calc(100% - 222px); text-align: left; } }   /* báo lỗi #82: màn dọc thông báo (hạ boss, túi đầy) chắn ngang giữa màn; đưa xuống trên khung chat, tránh cụm nút đánh bên phải */
/* Ô chiêu chưa có chiêu: ẩn hẳn, đỡ rối góc màn (chơi thử thấy ba vòng tối trống cạnh nút Đánh) */
#btn-s0.off, #btn-s1.off, #btn-s2.off { opacity: 0; pointer-events: none; }

/* Hộp thoại luôn nằm trên nút đánh, chiêu (màn ngang: nút Lướt đè lên chữ hộp thoại, chơi thử 28/10) */
#dialog { z-index: 30; }
/* Đang có hộp thoại thì ẩn nút đánh, chiêu, đan, lướt như lúc mở bảng: khung tròn chiêu (style-khung.css?v=362a7347) vẫn lồi lên trên viền hộp thoại
   và lộ mờ sau nền hộp thoại (chơi thử 02/11: nút Hồi Xuân đè lên góc hộp thoại Tiểu Hỏa sau độ kiếp) */
body:has(#dialog:not([hidden])) :is(#btn-atk, #btn-dash, #btn-act, #btn-s0, #btn-s1, #btn-s2, #btn-art, #btn-pill) { visibility: hidden; }

/* Mất kết nối máy chủ (src/game/net-watch.js): phủ màn, game đứng lại tới khi nối lại */
#net-lost { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 20, 0.72); }
#net-lost[hidden] { display: none; }
#net-lost .nl-box { max-width: 300px; margin: 16px; padding: 16px 20px; text-align: center; color: #f3ead2; background: #1d2236; border: 2px solid #c9a24a; border-radius: 6px; }
#net-lost b { display: block; font-size: 18px; margin-bottom: 6px; }
#net-lost p { margin: 0; font-size: 14px; line-height: 1.4; }

/* Đại Ma Thần xuất thế (src/game/thienma.js): nút đỏ rực chỉ hiện khi Đại Ma Thần online */

/* Túi → Nguyên liệu: mục lục nơi kiếm (đề xuất #29) */
.mat-row { display: flex; gap: 8px; align-items: flex-start; padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mat-row b { display: block; font-size: 13px; }
.mat-row small { display: block; font-size: 11.5px; line-height: 1.35; opacity: .8; }
.mat-dot { flex: 0 0 12px; height: 12px; margin-top: 3px; border-radius: 3px; border: 1px solid #000; }

/* Túi → Ngọc: nút khảm ngọc tốt nhất (đề xuất #33) */
#bag .gem-best { white-space: nowrap; margin: 2px 0 8px; grid-column: 1 / -1; justify-self: start; }
/* ngọc, nguyên liệu dạng lưới (src/ui/bag-stock.js) */
#bag .item.stock .ico { image-rendering: pixelated; object-fit: contain; }
#bag .item.stock .mat-sq, .d-head .mat-sq { display: block; width: 18px; height: 18px; margin: 3px; border-radius: 4px; border: 1px solid #000; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
#bag .item.stock.none { opacity: .45; }

/* Bảng kết quả bí cảnh (src/ui/dun-result.js) */
.dr-panel { display: flex; flex-direction: column; gap: 8px; }
.dr-panel .bag-head b { flex: 1; }
.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; overflow-y: auto; min-height: 0; max-height: 46vh; touch-action: pan-y; }
.dr-cell { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; border: 2px solid var(--line); border-radius: 8px; background: var(--panel-2); text-align: center; }
.dr-cell small { font-size: 9.5px; line-height: 1.1; max-height: 2.2em; overflow: hidden; color: var(--ink-2); }
.dr-dot { width: 22px; height: 22px; border-radius: 5px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.dr-n { position: absolute; right: 4px; top: 2px; font-size: 11px; color: #ffe27a; text-shadow: 0 1px 2px #000; }
.dr-acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.dr-acts .act-btn { font-size: 12px; padding: 8px 4px; }
.dr-cell .ico { width: 28px; height: 28px; display: block; background: center / contain no-repeat; image-rendering: pixelated; }
.dr-gem { width: 40px; height: 40px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* Nút chữ trên màn hình theo nhóm A–L (src/ui/hud-order.js): cùng khung gỗ son nẹp vàng như nút Menu */
.hud-btns > button:not(#btn-inbox):not(#btn-notice):not(#btn-rec):not(#btn-mute):not(.tron) {
  pointer-events: auto; width: auto !important; height: 26px !important; padding: 0 8px !important; white-space: nowrap; position: relative;
  font-family: var(--f-pixel) !important; font-size: 16px !important; font-weight: 400 !important; -webkit-font-smoothing: none;
  border: 4px solid transparent !important; border-radius: 0 !important; border-image: url("assets/art/ui-btn.png") 4 fill / 4px / 0 stretch !important; image-rendering: pixelated;
  background: transparent !important; color: #ffe6a0 !important; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000;
  box-shadow: 0 0 0 1.5px var(--el-line, transparent), 0 2px 0 rgba(0, 0, 0, .45) !important;
}
.hud-btns > button.on { border-image: url("assets/art/ui-btn-on.png") 4 fill / 4px / 0 stretch !important; color: #2a0a12 !important; text-shadow: 0 1px 0 rgba(255, 220, 160, .6) !important; }
.hud-btns > button > i { font-size: 10px; }
.hud-btns { max-width: 260px !important; }
.hud-btns > button > i.hud-dot { position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: #ff4a4a; box-shadow: 0 0 0 1.5px #000; }
.bag-links { flex-wrap: wrap; gap: 4px; margin-top: -2px; }
.bag-links button { font-size: 13px !important; padding: 2px 6px !important; opacity: .9; }
/* Bảng nhân vật (nhóm D, src/ui/self-panel.js) */
#realm, #power { pointer-events: auto; cursor: pointer; }
.self-body { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
.self-top { display: flex; gap: 12px; align-items: center; }
.self-ava { width: 84px; height: 84px; flex: none; display: flex; align-items: center; justify-content: center; border: 2px solid var(--line-hi); border-radius: 10px; background: var(--panel-2); overflow: hidden; }
.self-ico { image-rendering: pixelated; max-height: 80px; }
.self-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.self-name { font: 16px var(--f-pixel); color: #ffd98a; }
.self-title { font-size: 12.5px; color: var(--ink-2); }
.self-realm { font-size: 13px; color: var(--trim-hi); }
.self-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.self-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.self-row { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.self-row span { color: var(--ink-2); }
.self-panel .bag-head b { flex: 1; }
/* Bảng điểm danh 1→N (src/ui/checkin-card.js) */
.ck-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 6px 0; }
.ck-cell { position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: var(--ink-2); }
.ck-cell b { font-size: 11px; color: var(--ink); }
.ck-cell i { font-style: normal; font-size: 11px; line-height: 1; }
.ck-cell.on { background: rgba(95, 208, 122, .18); border-color: #5fd07a; }
.ck-cell.on i { color: #5fd07a; }
.ck-cell.today { border-color: #ff7ab6; box-shadow: 0 0 6px rgba(255, 122, 182, .6); }
.ck-cell.gift { border-color: #f2c94c; }
.ck-cell.m28 { border-color: #ff9a3a; } .ck-cell.m112 { border-color: #e0484a; box-shadow: 0 0 6px rgba(224, 72, 74, .5); }
.rank-sub { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; margin-top: 4px; }
.rank-sub button { font-size: 11px !important; padding: 2px 6px !important; }
#rank-tabs { flex-wrap: wrap; }
#dialog .dlg-x { position: absolute; top: 4px; right: 4px; z-index: 3; width: 28px; height: 28px; padding: 0; border: none; border-radius: 0;
  background: url("assets/art/ui-ic-dong.png") center / contain no-repeat; color: transparent; font-size: 0; cursor: pointer; }
#dialog .dlg-x[hidden] { display: none; }
/* Chỉ số món trên chợ (src/ui/item-stats.js) */
.it-stats { display: flex; flex-wrap: wrap; gap: 1px 10px; font-size: 11.5px; margin-top: 3px; }
.it-gem { font-size: 11px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-hi); background: #110e1a; }
.it-gem.empty { border-style: dashed; color: var(--muted); }
.it-gain { flex-basis: 100%; font-size: 11px; color: var(--muted); }
.it-gain.up { color: #5fd07a; }
.it-gain.down { color: #ff8a8a; }