/* ======================================================================
   Giao diện kiểu TUNIC (chủ dự án 31/10: "giao diện ui, login, chọn nhân vật theo phong cách tunic;
   chọn nhân vật làm kiểu giống game MU"). Nạp SAU cozy.css.
   Tông: khung xanh đêm trong mờ, viền vàng mảnh, tiêu đề chữ có chân, chữ kem sáng, điểm nhấn ngọc lam.
   ====================================================================== */
:root {
  --tn-bg: rgba(12, 26, 40, 0.86);
  --tn-bg2: rgba(20, 40, 58, 0.9);
  --tn-line: #d9b45a;
  --tn-line-soft: rgba(217, 180, 90, 0.45);
  --tn-ink: #eef2e6;
  --tn-ink2: #a9bcc2;
  --tn-teal: #5fc9c0;
  --tn-glow: rgba(110, 220, 230, 0.35);

  /* đổi bộ màu "gỗ + giấy da" của cozy.css sang xanh đêm + viền vàng → mọi bảng trong game đổi theo */
  --cz-wood-0: #08131d;
  --cz-wood-1: #10202f;
  --cz-wood-2: #183247;
  --cz-wood-3: #23465f;
  --cz-wood-4: #d9b45a;
  --cz-parch-0: #1d3347;
  --cz-parch-1: #15283a;
  --cz-parch-2: #10202f;
  --cz-parch-3: #2e4b62;
  --cz-slot: #0d1b28;
  --cz-ink: #eef2e6;
  --cz-ink-2: #a9bcc2;
  --cz-leaf-0: #1d5a57;
  --cz-leaf-1: #2b7d77;
  --cz-leaf-2: #3fa49b;
  --cz-leaf-3: #7fd8cd;
  --cz-amber: #e6c068;
  --cz-sky: #6fc3e0;
  --cz-red: #e0664f;
  --cz-paper: linear-gradient(180deg, rgba(29, 51, 71, 0.94), rgba(16, 32, 47, 0.94));
  --cz-woodgrad: linear-gradient(180deg, #d9b45a, #8a6a2c 50%, #d9b45a);
  --cz-frame-shadow: 0 0 0 1px #08131d, 0 14px 34px rgba(0, 8, 16, 0.55), inset 0 0 0 1px rgba(217, 180, 90, 0.35), inset 0 0 30px rgba(95, 201, 192, 0.08);
}
body .panel, body #trade { border-width: 2px !important; border-radius: 10px !important; }

/* ---------------- Màn đăng nhập / chọn nhân vật ---------------- */
.lv-login .lv-title span { background: linear-gradient(180deg, #fff3cf, #e9c46a 55%, #b8862e); -webkit-background-clip: text; background-clip: text; }
.lv-login .lv-chip, .lv-login .lv-gbtn {
  background: var(--tn-bg) !important; color: var(--tn-ink) !important;
  border: 1px solid var(--tn-line-soft) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
.lv-login .lv-go {
  background: linear-gradient(180deg, #24506a, #16324a) !important; color: #fff6dc !important;
  border: 1px solid var(--tn-line) !important; border-radius: 6px !important;
  box-shadow: 0 0 0 1px #08131d, 0 0 18px var(--tn-glow), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  font-family: 'Noto Serif', serif; letter-spacing: 1px;
}
.lv-login .lv-go:hover:not(:disabled) { box-shadow: 0 0 0 1px #08131d, 0 0 26px rgba(110, 220, 230, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; }
.lv-login .lv-link { color: var(--tn-ink2) !important; }
.lv-login input#inp-name {
  background: rgba(8, 19, 29, 0.85) !important; color: var(--tn-ink) !important;
  border: 1px solid var(--tn-line-soft) !important; border-radius: 6px !important;
}
/* chọn nhân vật: ô nhân vật như bệ đá MU, viền vàng mảnh khi chọn */
.lv-login .lv-slot { background: linear-gradient(180deg, rgba(12, 26, 40, 0.25), rgba(12, 26, 40, 0.7)) !important; border-radius: 10px !important; }
.lv-login .lv-slot.sel { box-shadow: inset 0 0 0 1px var(--tn-line), 0 0 36px var(--tn-glow), 0 16px 40px rgba(0, 0, 0, 0.6) !important; }
.lv-login .lv-slot.sel .lv-pedestal { background: radial-gradient(ellipse, rgba(170, 245, 240, 0.9), rgba(95, 201, 192, 0.35) 50%, transparent 72%) !important; }
.lv-login .lv-slot.empty { background: rgba(8, 19, 29, 0.55) !important; box-shadow: inset 0 0 0 1px var(--tn-line-soft) !important; }

/* ---------------- Tạo nhân vật kiểu MU: phái trái · nhân vật giữa · thông tin phải ---------------- */
.lv-create.mu {
  display: grid; grid-template-columns: minmax(200px, 250px) minmax(260px, 1fr) minmax(260px, 340px);
  align-items: center; gap: 18px; max-width: 1120px; margin: 0 auto; width: 100%;
}
.mu .mu-h { font-family: 'Noto Serif', serif; font-size: 18px; color: var(--tn-ink); margin-bottom: 10px; text-shadow: 0 2px 6px #000; }
.mu .mu-h small { font-size: 12px; color: var(--tn-ink2); }
.mu .mu-h.gold { color: #f2d48a; font-size: 26px; margin-bottom: 6px; }
.mu-left, .mu-right {
  background: var(--tn-bg); border: 1px solid var(--tn-line-soft); border-radius: 10px; padding: 14px;
  box-shadow: 0 0 0 1px #08131d, 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 0 24px rgba(95, 201, 192, 0.06);
  backdrop-filter: blur(4px); color: var(--tn-ink);
}
.mu-left { display: flex; flex-direction: column; gap: 8px; }
.mu-cls {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; text-align: left; cursor: pointer;
  background: rgba(8, 19, 29, 0.6) !important; border: 1px solid transparent !important; border-radius: 8px;
  color: var(--tn-ink); transition: background 0.15s, border-color 0.15s, transform 0.15s; width: auto !important; height: auto !important;
}
.mu-cls img { width: 40px; height: 52px; object-fit: cover; object-position: top; border-radius: 6px; background: rgba(95, 201, 192, 0.1); }
.mu-cls b { display: block; font-family: 'Noto Serif', serif; font-size: 15px; }
.mu-cls small { color: var(--tn-ink2); font-size: 12px; }
.mu-cls:hover { background: rgba(35, 70, 95, 0.75) !important; transform: translateX(3px); }
.mu-cls.sel { border-color: var(--tn-line) !important; background: rgba(35, 70, 95, 0.9) !important; box-shadow: 0 0 16px var(--tn-glow); }
.mu-cls.sel b { color: #f2d48a; }

.mu-center { position: relative; height: min(62vh, 540px); display: flex; align-items: flex-end; justify-content: center; }
.mu-hero { position: relative; z-index: 2; height: 92%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.55)); animation: muBob 4s ease-in-out infinite; }
.mu-ped { position: absolute; bottom: 0; left: 50%; width: 70%; height: 16%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(170, 245, 240, 0.75), rgba(95, 201, 192, 0.25) 55%, transparent 72%); }
.mu-ring { position: absolute; bottom: -2%; left: 50%; width: 82%; height: 20%; transform: translateX(-50%); border-radius: 50%;
  border: 1px solid var(--tn-line-soft); box-shadow: 0 0 22px var(--tn-glow); animation: muRing 3s ease-in-out infinite; }
.mu-anchor { position: absolute; left: 50%; bottom: 4%; width: 220px; height: 220px; transform: translateX(-50%); opacity: 0; pointer-events: none; }
@keyframes muBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes muRing { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.mu-desc { color: var(--tn-ink2); font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.mu-stats { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.mu-st { display: grid; grid-template-columns: 92px 1fr 30px; align-items: center; gap: 8px; font-size: 13px; }
.mu-st i { height: 8px; border-radius: 4px; background: rgba(8, 19, 29, 0.9); border: 1px solid rgba(217, 180, 90, 0.25); overflow: hidden; }
.mu-st i b { display: block; height: 100%; background: linear-gradient(90deg, #2b7d77, #7fd8cd); }
.mu-st em { font-style: normal; color: #f2d48a; text-align: right; }
.mu-paths { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mu-paths i { font-style: normal; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--pc); color: #fff; background: rgba(8, 19, 29, 0.6); }
.mu-name { display: flex; gap: 8px; flex-wrap: wrap; }
.mu-name input { flex: 1; min-width: 140px; }

@media (max-width: 860px) {
  .lv-create.mu { grid-template-columns: 1fr; gap: 10px; padding-bottom: 20px; }
  .mu-left { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .mu-left .mu-h { width: 100%; text-align: center; }
  .mu-cls { flex: 1 1 140px; }
  .mu-center { height: 38vh; }
}

/* đè kiểu thẻ phái cũ (.cls/.lv-cls trong style.css) */
.lv-create.mu .mu-cls { flex-direction: row !important; justify-content: flex-start !important; min-height: 0 !important; padding: 6px 10px !important; }
.lv-create.mu .mu-cls span { display: block; text-align: left; }
.lv-create.mu canvas.mu-anchor { opacity: 0 !important; visibility: hidden; }

/* ---------------- Đè các chỗ cozy.css viết cứng màu giấy/gỗ → tông Tunic ---------------- */
.panel .p-head .p-title {
  background: linear-gradient(180deg, #24506a, #16324a) !important; color: #fff3cf !important;
  border: 1px solid var(--tn-line) !important; box-shadow: 0 0 0 1px #08131d, 0 4px 10px rgba(0, 0, 0, 0.4) !important;
  font-family: 'Noto Serif', serif !important; text-shadow: 0 1px 2px #000 !important;
}
body .panel .p-close { background: #16324a !important; color: #f2d48a !important; border: 1px solid var(--tn-line-soft) !important; box-shadow: none !important; }
body .panel .p-close:hover { background: #24506a !important; }
body .panel .btn, body .gdlg .btn, body #confirm .btn {
  background: linear-gradient(180deg, #1d3a52, #132a3d) !important; color: var(--tn-ink) !important;
  border: 1px solid var(--tn-line-soft) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; text-shadow: none !important;
}
body .panel .btn:hover:not(:disabled), body .gdlg .btn:hover:not(:disabled), body #confirm .btn:hover:not(:disabled) { border-color: var(--tn-line) !important; box-shadow: 0 0 12px var(--tn-glow) !important; }
body .panel .btn.gold, body .gdlg .btn.gold, body #confirm .btn.gold {
  background: linear-gradient(180deg, #2b7d77, #1d5a57) !important; color: #fff !important; border: 1px solid var(--tn-line) !important;
}
body .panel .item, body .panel .eslot {
  background: radial-gradient(circle at 50% 35%, #1b3246, #0c1824) !important;
  border: 1px solid rgba(217, 180, 90, 0.28) !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}
html body .panel :is(.block, .bulk, .mining, .quest, .lore, .trade-cols > div, .rk-row, .dl-task, .dl-bonus, .dl-day, .fr-row, .ac-row, .gd-card, .au-row, .tx, .stat-box) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  background: rgba(8, 19, 29, 0.55) !important; border-color: rgba(217, 180, 90, 0.2) !important; color: var(--tn-ink) !important;
}
html body .panel :is(.rk-row.top, .dl-day.big, .dl-task.ok, .dl-bonus.ok, .ac-row.ok, .rk-row.me, .dl-day.now) { background: rgba(43, 125, 119, 0.35) !important; border-color: var(--tn-teal) !important; }
body .panel input, body .panel select, body .panel textarea, body .gdlg input, body #chat-input {
  background: rgba(8, 19, 29, 0.85) !important; color: var(--tn-ink) !important; border: 1px solid var(--tn-line-soft) !important;
}
body #tooltip { background: rgba(10, 22, 34, 0.96) !important; border: 1px solid var(--tn-line) !important; color: var(--tn-ink) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important; }
body #tracker {
  background: var(--tn-bg) !important; color: var(--tn-ink) !important;
  border: 1px solid var(--tn-line-soft) !important; box-shadow: 0 0 0 1px #08131d, 0 10px 24px rgba(0, 0, 0, 0.45) !important;
}
body #tracker * { color: inherit; }
body #menu button[data-open], body #menu #dev-btn, body.dragon-ui #menu button[data-open] {
  background: linear-gradient(180deg, #1d3a52, #10202f) !important; color: var(--tn-ink) !important;
  border: 1px solid rgba(217, 180, 90, 0.4) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
body:not(.touch).dragon-ui #skillbar, body #skillbar {
  background: var(--tn-bg) !important; border: 1px solid var(--tn-line-soft) !important; box-shadow: 0 0 0 1px #08131d, 0 8px 20px rgba(0, 0, 0, 0.45) !important;
}
body #skillbar .slot:not(.art):not(.pot):not(.auto), body.dragon-ui #skillbar .slot:not(.art):not(.pot):not(.auto) {
  background: radial-gradient(circle at 50% 35%, #1b3246, #0c1824) !important;
  border: 1px solid rgba(217, 180, 90, 0.35) !important;
}
body #skillbar .slot.art, body.dragon-ui #skillbar .slot.art {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(217, 180, 90, 0.5) !important;
  position: relative;
  overflow: hidden;
}
body #skillbar .slot.art .sk-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}
body #skillbar .slot .key { background: #16324a !important; color: #f2d48a !important; border: 1px solid var(--tn-line-soft) !important; z-index: 2; }
body #skillbar .slot .sk-name { z-index: 2; }
body #chat-tabs button { background: #10202f !important; color: var(--tn-ink2) !important; border: 1px solid rgba(217, 180, 90, 0.25) !important; }
body #chat-tabs button.on { background: #24506a !important; color: #fff3cf !important; border-color: var(--tn-line) !important; }
body.dragon-ui #frame-name, body #frame-name { color: #fff3cf !important; }
body #region-name { color: #f2d48a !important; }
/* túi đồ: lưới ô trống xanh đêm viền vàng mờ */
body .panel:has(.doll) .grid.bag {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='0.75' y='0.75' width='38.5' height='38.5' rx='6' fill='%230e1c29' stroke='%23d9b45a' stroke-opacity='0.3' stroke-width='1'/%3E%3C/svg%3E") !important;
}
body .panel:has(.doll) .grid.bag .item:not(.r1):not(.r2):not(.r3):not(.r4):not(.exc):not(.jewel):not(.high) { border-color: rgba(217, 180, 90, 0.35) !important; }
body #chat, body.dragon-ui #chat { background: var(--tn-bg) !important; border: 1px solid var(--tn-line-soft) !important; border-radius: 10px !important; box-shadow: 0 0 0 1px #08131d, 0 8px 18px rgba(0, 0, 0, 0.4) !important; }
body #chat::after { background: var(--tn-bg) !important; border-color: var(--tn-line-soft) !important; }
body .panel .vt-detail, body .panel .vt-tree { background: rgba(8, 19, 29, 0.75) !important; color: var(--tn-ink) !important; border-color: var(--tn-line-soft) !important; }
body .panel .vt-detail * { color: inherit; }
/* bảng Việc hằng ngày: dòng việc / boss / ô ngày */
body .panel .dl-list > *, body .panel .dl-days > .dl-day { background: rgba(8, 19, 29, 0.62) !important; border: 1px solid rgba(217, 180, 90, 0.22) !important; color: var(--tn-ink) !important; }
body .panel .dl-list > .ok, body .panel .dl-days > .dl-day.now { border-color: var(--tn-line) !important; box-shadow: 0 0 10px var(--tn-glow) !important; }
html body .panel :is(.fr-info b, .dl-tx b, .dl-bonus b, .lore b, .rk-n, .gdlg-text) { color: var(--tn-ink) !important; }
html body .panel :is(.fr-info small, .dl-tx small, .dl-bonus small, .dl-st, .rk-c, .rk-v small, .lore p) { color: var(--tn-ink2) !important; }
html body .panel .dl-bar { background: rgba(8, 19, 29, 0.8) !important; }
/* nút tab trong bảng (Xếp hạng, Bang, Đấu giá…) */
html body .panel :is(.rk-tabs, .rk-cls, .tabs, .au-tabs, .gd-tabs, .q-tabs, .set-tabs) button { background: linear-gradient(180deg, #1d3a52, #132a3d) !important; color: var(--tn-ink2) !important; border: 1px solid rgba(217, 180, 90, 0.3) !important; }
html body .panel :is(.rk-tabs, .rk-cls, .tabs, .au-tabs, .gd-tabs, .q-tabs, .set-tabs) button:is(.on, .sel, .gold, [aria-selected="true"]) { background: linear-gradient(180deg, #2b7d77, #1d5a57) !important; color: #fff !important; border-color: var(--tn-line) !important; }

/* ---------------- Chọn nhân vật kiểu MU: các nhân vật đứng trên sân đá, người được chọn bước lên phía trước ---------------- */
.lv-slots.mu-court { position: relative; display: block !important; width: min(1000px, 96vw); height: min(58vh, 540px); margin: 0 auto; }
.mu-court-floor { position: absolute; left: 50%; bottom: 2%; width: 92%; height: 46%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, rgba(170, 245, 240, 0.12), rgba(8, 19, 29, 0.35) 60%, transparent 72%);
  border: 1px solid rgba(217, 180, 90, 0.25); box-shadow: 0 0 40px rgba(95, 201, 192, 0.15) inset; pointer-events: none; }
.mu-court .lv-slot {
  position: absolute !important; left: var(--x); top: var(--y); width: clamp(120px, 14vw, 190px) !important; height: clamp(210px, 38vh, 340px) !important;
  transform: translate(-50%, -100%) scale(0.8) !important; transition: left 0.7s cubic-bezier(.2,.8,.2,1), top 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1), filter 0.4s !important;
  background: none !important; box-shadow: none !important; filter: brightness(0.7) saturate(0.8) !important; z-index: 1;
}
.mu-court .lv-slot:nth-of-type(1) { --x: 20%; --y: 72%; }
.mu-court .lv-slot:nth-of-type(2) { --x: 50%; --y: 64%; }
.mu-court .lv-slot:nth-of-type(3) { --x: 80%; --y: 72%; }
.mu-court .lv-slot:hover { filter: brightness(0.9) !important; }
/* nhân vật được chọn: bước ra giữa phía trước, to và sáng */
.mu-court .lv-slot.sel { left: 50%; top: 100%; transform: translate(-50%, -100%) scale(1.12) !important; filter: none !important; z-index: 3; }
.mu-court .lv-slot.empty { filter: none !important; }
.mu-court .lv-slot.empty .lv-plus { opacity: 0.8; }
.mu-court .lv-slot .lv-info { background: rgba(8, 19, 29, 0.8); border: 1px solid rgba(217, 180, 90, 0.35); border-radius: 6px; padding: 3px 10px; }
.mu-court .lv-slot.sel .lv-info { border-color: var(--tn-line); box-shadow: 0 0 14px var(--tn-glow); }
@media (max-width: 760px) { .lv-slots.mu-court { height: 52vh; } .mu-court .lv-slot { width: 28vw !important; } }
/* sân chọn nhân vật: bỏ khung thẻ cũ, ảnh nền đã có sân đá */
.mu-court .lv-slot::before, .mu-court .lv-slot::after { display: none !important; }
.mu-court .lv-slot .lv-aura { display: none !important; }
.mu-court-floor { display: none; }
.lv-slots.mu-court { height: min(50vh, 470px); }
.mu-court .lv-slot.empty { background: none !important; box-shadow: none !important; }
.mu-court .lv-slot.empty .lv-plus { background: rgba(8, 19, 29, 0.6); border: 1px solid var(--tn-line-soft); border-radius: 50%; }
.lv-login .mu-court .lv-slot, .lv-login .mu-court .lv-slot.sel, .lv-login .mu-court .lv-slot.empty { background: none !important; box-shadow: none !important; outline: none !important; }
.lv-login .mu-court .lv-slot:not(.sel), .lv-login .mu-court .lv-slot:not(.sel) * { background-color: transparent !important; box-shadow: none !important; }
.lv-login .mu-court .lv-slot:not(.sel) .lv-info { background: rgba(8, 19, 29, 0.8) !important; }
.lv-login .mu-court .lv-slot { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.mu-court .lv-slot:nth-of-type(1) { --x: 22%; --y: 82%; }
.mu-court .lv-slot:nth-of-type(2) { --x: 50%; --y: 76%; }
.mu-court .lv-slot:nth-of-type(3) { --x: 78%; --y: 82%; }

/* ---------------- Vòng xoay chọn nhân vật (thay cho đổi chỗ nhảy cóc) ---------------- */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.lv-login .mu-court .lv-slot,
.lv-login .mu-court .lv-slot.sel,
.lv-login .mu-court .lv-slot:nth-of-type(n) {
  /* elip: tâm (50%, 86%), bán kính ngang 30%, dọc 12%; góc 0 = phía trước (gần người xem) */
  left: calc(50% + sin(var(--ang)) * 30%) !important;
  top: calc(86% + cos(var(--ang)) * 12%) !important;
  transform: translate(-50%, -100%) scale(calc(0.72 + (cos(var(--ang)) + 1) * 0.2)) !important;
  filter: brightness(calc(0.6 + (cos(var(--ang)) + 1) * 0.2)) saturate(calc(0.75 + (cos(var(--ang)) + 1) * 0.125)) !important;
  z-index: calc(10 + round(cos(var(--ang)) * 5)) !important;
  transition: --ang 0.9s cubic-bezier(.45, .05, .25, 1) !important;
  animation: none !important; opacity: 1 !important;
}
.lv-login .mu-court .lv-slot:not(.sel) .lv-info { opacity: 0.75; }

/* nút ✕ gọn: nhỏ, sát góc trên-phải của bảng (chủ dự án yêu cầu) */
html body .panel .p-head { position: static !important; }
html body .panel .p-close, html body .panel .p-head > span:not(.p-title) .p-close {
  position: absolute !important; top: 6px !important; right: 6px !important; margin: 0 !important; z-index: 5;
  width: 22px !important; height: 22px !important; min-width: 0 !important; padding: 0 !important; display: grid; place-items: center;
  font-size: 12px !important; line-height: 1 !important; border-radius: 5px !important;
  background: rgba(8, 19, 29, 0.85) !important; color: #f2d48a !important; border: 1px solid rgba(217, 180, 90, 0.45) !important; box-shadow: none !important;
}
html body .panel .p-close:hover { background: #8a2a17 !important; color: #fff !important; border-color: #e0664f !important; }
html body .panel .p-head { padding-right: 34px !important; } /* chừa chỗ cho nút ✕ ở góc, không đè nút khác */
html body .panel .p-head > span:not(.p-title), html body .panel .p-head > .au-gold { margin-right: 26px !important; }
/* nút ✕ của khung nổi khi đang mở: nhỏ, vuông bo, sát góc trên-phải của khung (vị trí do ui.js dockX đặt) */
html body .x-dock {
  position: fixed !important; width: 22px !important; height: 22px !important; min-width: 0 !important; padding: 0 !important; z-index: 60 !important;
  border-radius: 5px !important; font-size: 12px !important; line-height: 1 !important; place-items: center !important;
  background: rgba(8, 19, 29, 0.9) !important; color: #f2d48a !important; border: 1px solid rgba(217, 180, 90, 0.5) !important; box-shadow: none !important; transform: none !important;
}
html body .x-dock .bub-t { display: none !important; }
html body .x-dock:hover { background: #8a2a17 !important; color: #fff !important; }
/* nút ✕ của mọi bảng: giống hệt nút ✕ khung nổi, nhô ra ngoài góc trên-phải một nửa (chủ dự án) */
html body .panel { overflow: visible !important; }
html body .panel .p-close, html body .panel .p-head > span:not(.p-title) .p-close { top: -11px !important; right: -11px !important; }
html body .panel .p-head { padding-right: 14px !important; }
html body .panel .p-head > span:not(.p-title), html body .panel .p-head > .au-gold { margin-right: 0 !important; }
/* chỉ nút ✕ ở đầu bảng mới nhô ra góc; nút ✕ khác trong thân bảng giữ như cũ */
html body .panel .p-close:not(.p-head .p-close) { position: static !important; top: auto !important; right: auto !important; }
/* nút ✕ đã gắn vào góc khung → bỏ khoảng chừa 78px cho nút tròn cũ, khung thẳng hàng với mép màn hình như menu/khung nhân vật */
html body:not(.touch) #topright, html body:not(.touch).dragon-ui #topright { right: 16px !important; }
html body:not(.touch) #tracker { left: 16px !important; }

/* bỏ hình thoi trang trí thừa dưới bảng menu (chủ dự án) */
html body #menu::after, html body:not(.touch) #menu::after, html body.dragon-ui #menu::after { display: none !important; content: none !important; }
/* khi mở bảng lớn trên điện thoại, nút ✕ của khung nổi bị che thì ẩn */
html body.touch.panel-open #trk-toggle, html body.touch.panel-open #chat-toggle { display: none !important; }

/* ---------------- Modal Intro Video (Lần đầu tạo nhân vật) ---------------- */
#intro-modal {
  position: fixed; inset: 0; z-index: 999999; background: #000;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity 0.6s ease-out;
}
#intro-modal[hidden] { display: none !important; }
#intro-modal.fade-out { opacity: 0; pointer-events: none; }
#intro-video {
  width: 100%; height: 100%; object-fit: cover;
}
.intro-overlay {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(16px, 3vw, 36px);
  background: radial-gradient(circle at center, transparent 35%, rgba(4, 10, 16, 0.65) 100%);
}
.intro-skip-btn {
  pointer-events: auto; align-self: flex-end;
  background: rgba(12, 26, 40, 0.88); color: #fff6dc;
  border: 1px solid var(--tn-line); border-radius: 999px;
  padding: 10px 22px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.25s ease;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.6), 0 0 12px var(--tn-glow);
  font-family: 'Noto Serif', serif; letter-spacing: 0.5px;
}
.intro-skip-btn:hover {
  background: linear-gradient(180deg, #24506a, #16324a);
  border-color: #ffd700; transform: scale(1.05);
  box-shadow: 0 0 24px rgba(110, 220, 230, 0.7);
}
.intro-caption {
  position: absolute; bottom: clamp(20px, 4vw, 48px); left: clamp(20px, 4vw, 48px);
  max-width: 80%; pointer-events: none;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95);
}
.intro-title {
  font-family: 'Noto Serif', serif; font-size: clamp(22px, 3.5vw, 36px);
  color: #f2d48a; margin: 0 0 6px 0; letter-spacing: 2px;
  text-transform: uppercase;
}
.intro-subtitle {
  font-size: clamp(13px, 1.8vw, 17px); color: rgba(238, 242, 230, 0.9);
  margin: 0; font-style: italic; line-height: 1.4;
}

/* hàng nút trên cùng cạnh bản đồ nhỏ: Hằng ngày, Xếp hạng, Tải game */
#top-quick { position: fixed; top: 16px; right: 240px; z-index: 30; display: flex; gap: 6px; }
body.touch #top-quick { gap: 4px; }
#top-quick button[data-open] {
  position: relative; width: 58px; height: 58px; padding: 4px 2px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(180deg, #1d3a52, #10202f) !important; color: var(--tn-ink) !important; font-size: 10px; line-height: 1.1;
  border: 1px solid rgba(217, 180, 90, 0.45) !important; border-radius: 9px; box-shadow: 0 0 0 1px #08131d, 0 4px 10px rgba(0, 0, 0, 0.45) !important; cursor: pointer;
}
#top-quick button[data-open] img { width: 30px; height: 30px; object-fit: contain; }
#top-quick button[data-open]:hover { border-color: var(--tn-line) !important; box-shadow: 0 0 12px var(--tn-glow) !important; }
body.touch #top-quick button[data-open] { width: 46px; height: 46px; font-size: 0; }
body.installed #top-quick [data-open="install"] { display: none; }

/* ---------------- Menu 2 hàng + nút nổi khối, trông bấm được (chủ dự án) ---------------- */
html body:not(.touch) #menu, html body:not(.touch).dragon-ui #menu {
  display: grid !important; grid-auto-flow: column !important; grid-template-rows: repeat(2, auto) !important; grid-template-columns: none !important;
  grid-auto-columns: 62px !important; gap: 7px !important; padding: 10px !important;
}
/* nút nổi: mặt sáng hơn, gờ dưới dày (như phím bấm), bóng đổ; rê chuột nhô lên, bấm thì lún xuống */
html body #menu button[data-open], html body #menu #dev-btn, html body #top-quick button[data-open],
html body .panel .btn, html body .gdlg .btn, html body #confirm .btn, html body .lv-login .lv-go {
  background: linear-gradient(180deg, #2c5677 0%, #1d3d57 48%, #142c41 100%) !important;
  border: 1px solid rgba(217, 180, 90, 0.55) !important; border-bottom: 3px solid #0a1824 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 4px rgba(0, 0, 0, 0.35), 0 3px 6px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease !important; cursor: pointer;
}
html body #menu button[data-open]:hover, html body #menu #dev-btn:hover, html body #top-quick button[data-open]:hover,
html body .panel .btn:hover:not(:disabled), html body .gdlg .btn:hover:not(:disabled), html body #confirm .btn:hover:not(:disabled), html body .lv-login .lv-go:hover:not(:disabled) {
  transform: translateY(-2px); filter: brightness(1.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 6px 12px rgba(0, 0, 0, 0.55), 0 0 12px rgba(110, 220, 230, 0.35) !important;
}
html body #menu button[data-open]:active, html body #menu #dev-btn:active, html body #top-quick button[data-open]:active,
html body .panel .btn:active:not(:disabled), html body .gdlg .btn:active:not(:disabled), html body #confirm .btn:active:not(:disabled), html body .lv-login .lv-go:active:not(:disabled) {
  transform: translateY(2px); border-bottom-width: 1px !important; filter: brightness(0.95);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
/* nút chính (xanh ngọc) giữ màu riêng nhưng cũng nổi khối */
html body .panel .btn.gold, html body .gdlg .btn.gold, html body #confirm .btn.gold { background: linear-gradient(180deg, #3aa198 0%, #2b7d77 50%, #1d5a57 100%) !important; border-bottom-color: #0d2e2c !important; }
html body .panel .btn:disabled, html body .gdlg .btn:disabled { filter: grayscale(0.6) brightness(0.7); transform: none; cursor: default; }

/* khung avatar: không cố định cao 98px nữa → dòng xu / lực chiến không bị lẹm xuống viền (chủ dự án) */
html body.dragon-ui .fr-panel, html body #frame .fr-panel { height: auto !important; min-height: 98px !important; padding-top: 8px !important; padding-bottom: 10px !important; }
/* bản đồ nhỏ: vừa khít bề ngang khung, không tràn sang phải */
html body #topright, html body.dragon-ui #topright { box-sizing: border-box !important; }
html body #minimap { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 200 / 104; box-sizing: border-box !important; margin: 6px 0 !important; }
html body #region-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
html body #region-name .rn-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #region-name .rn-khu { flex: none; }
/* khung avatar: khung thông tin căn giữa theo chiều dọc với ảnh tròn → ảnh nhô ra trên và dưới bằng nhau (chủ dự án) */
html body.dragon-ui #frame { display: flex !important; align-items: center !important; min-height: 112px !important; height: 112px !important; }
html body.dragon-ui #frame .fr-panel { margin-top: 0 !important; margin-bottom: 0 !important; flex: 1 1 auto; min-height: 92px !important; }
html body.dragon-ui #frame .fr-panel { min-height: 0 !important; padding-top: 5px !important; padding-bottom: 6px !important; row-gap: 2px; }
html body.dragon-ui #frame .fr-panel .bar { margin: 2px 0 !important; }
/* ảnh tròn to bằng chiều cao khung thông tin → trên dưới thẳng hàng */
html body.dragon-ui #portrait { width: 132px !important; height: 132px !important; top: 50% !important; transform: translateY(-50%); }
html body.dragon-ui #frame { height: 132px !important; min-height: 132px !important; }
html body.dragon-ui #frame .fr-panel { margin-left: 70px !important; padding-left: 74px !important; height: 116px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }

/* chữ trên nút: đủ chữ, in đậm, dễ đọc (chủ dự án) */
html body #top-quick button[data-open] { width: auto !important; min-width: 62px !important; padding: 4px 8px 3px !important; }
html body #top-quick button[data-open], html body #menu button[data-open], html body #menu #dev-btn {
  font-weight: 800 !important; font-size: 11px !important; letter-spacing: 0.1px; white-space: nowrap !important;
  color: #fff6dc !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}
html body #top-quick button[data-open] small, html body #top-quick button[data-open] kbd, html body #menu button[data-open] small { font-weight: 700 !important; color: #f2d48a !important; }
/* nhãn dưới nút tròn (Nhiệm vụ, Bản đồ…) khi thu gọn: chữ sáng trên nền tối */
html body .hud-bub .bub-t {
  color: #fff6dc !important; font-weight: 800 !important; font-size: 11px !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
  background: rgba(8, 19, 29, 0.85) !important; border: 1px solid rgba(217, 180, 90, 0.5) !important; border-radius: 5px !important; padding: 1px 6px !important;
}
html body #top-quick .lbl, html body #menu .lbl { font-weight: 800 !important; color: #fff6dc !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; }
html body #skillbar .slot img.pot-ic { width: 70%; height: 70%; object-fit: contain; pointer-events: none; }
/* ô cần câu / thú cưỡi khi chưa có: vẫn thấy rõ hình (mờ nhẹ), không chìm vào nền */
html body #skillbar .slot.nomp.rodslot, html body #skillbar .slot.nomp.mountslot { opacity: 0.85 !important; }
html body #skillbar .slot.rodslot img.pot-ic, html body #skillbar .slot.mountslot img.pot-ic { filter: drop-shadow(0 0 2px rgba(255, 240, 200, 0.55)) !important; }
/* nút xoá nhân vật: nút nhỏ viền đỏ có biểu tượng thùng rác, không phải chữ gạch chân */
html body .lv-login #lv-del {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 14px !important;
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.3px; text-decoration: none !important;
  color: #ffb4a6 !important; background: rgba(60, 14, 10, 0.55) !important; border: 1px solid rgba(224, 102, 79, 0.65) !important;
  border-bottom: 2px solid rgba(90, 20, 14, 0.9) !important; border-radius: 6px !important; cursor: pointer; transition: transform 0.08s, background 0.15s;
}
html body .lv-login #lv-del::before { content: '🗑'; font-size: 13px; }
html body .lv-login #lv-del:hover { background: rgba(138, 42, 23, 0.85) !important; color: #fff !important; transform: translateY(-1px); }
html body .lv-login #lv-del:active { transform: translateY(1px); border-bottom-width: 1px !important; }

/* ---------------- Điện thoại (màn ngang thấp, iPhone) ---------------- */
@media (max-height: 520px) {
  /* tạo nhân vật: 3 cột gọn, mọi thứ trong một màn hình (trước: dồn 1 cột, nút Tạo bị đẩy khỏi màn) */
  .lv-create.mu { grid-template-columns: 30% 1fr 38% !important; gap: 8px !important; padding: 0 8px !important; max-height: calc(100vh - 70px); }
  .mu-left { flex-direction: column !important; flex-wrap: nowrap !important; padding: 8px !important; gap: 4px !important; }
  .mu-left .mu-h { font-size: 13px !important; margin-bottom: 4px !important; text-align: left !important; }
  .mu-cls { padding: 3px 6px !important; gap: 6px !important; flex: none !important; }
  .mu-cls img { width: 26px !important; height: 32px !important; }
  .mu-cls b { font-size: 13px !important; } .mu-cls small { font-size: 10px !important; }
  .mu-center { height: calc(100vh - 90px) !important; }
  .mu-right { padding: 8px 10px !important; overflow-y: auto; max-height: calc(100vh - 80px); }
  .mu .mu-h.gold { font-size: 17px !important; margin-bottom: 2px !important; }
  .mu-desc { font-size: 11px !important; margin-bottom: 6px !important; line-height: 1.35 !important; }
  .mu-stats { gap: 3px !important; margin-bottom: 6px !important; } .mu-st { font-size: 11px !important; grid-template-columns: 74px 1fr 24px !important; }
  .mu-paths { margin-bottom: 6px !important; } .mu-paths i { font-size: 10px !important; padding: 1px 6px !important; }
  .mu-name input { min-width: 0 !important; height: 32px; font-size: 13px; } .mu-name .lv-go { padding: 6px 10px !important; font-size: 13px !important; }
  .lv-login .lv-logo, .lv-login .lv-title { transform: scale(0.75); transform-origin: top left; }
  /* chọn nhân vật: sân thấp hơn để nút Vào game không bị che */
  .lv-slots.mu-court { height: 58vh !important; }
  .mu-court .lv-slot { width: 22vw !important; height: 46vh !important; }
  /* nút ✕ của bảng: nằm trong góc (bảng sát mép màn hình, nhô ra ngoài sẽ bị cắt) */
  html body.touch .panel .p-close, html body.touch .panel .p-head > span:not(.p-title) .p-close { top: 4px !important; right: 4px !important; width: 28px !important; height: 28px !important; }
  html body.touch .x-dock { width: 26px !important; height: 26px !important; }
  /* hàng nút trên cùng: nhỏ lại, chỉ biểu tượng */
  html body.touch #top-quick button[data-open] { min-width: 40px !important; width: 40px !important; height: 40px !important; padding: 2px !important; }
  html body.touch #top-quick button[data-open] .lbl, html body.touch #top-quick button[data-open] small { display: none !important; }
  html body.touch #top-quick button[data-open] img { width: 28px; height: 28px; }
}

/* thanh kỹ năng trên điện thoại kiểu Arcane Legends (chủ dự án): nút đánh to ở góc phải dưới,
   4 chiêu xếp vòng cung quanh nó, vòng ngoài là máu / mana / auto / cần câu / ngựa (nút nhỏ) */
html body.touch #skillbar, html body.touch.dragon-ui #skillbar {
  display: block !important; position: fixed !important; width: 250px !important; height: 250px !important; padding: 0 !important; gap: 0 !important;
  left: auto !important; top: auto !important; right: calc(6px + env(safe-area-inset-right)) !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  transform: none; transform-origin: bottom right; background: none !important; border: none !important; box-shadow: none !important; pointer-events: none;
}
html body.touch #skillbar::before, html body.touch #skillbar::after { content: none !important; display: none !important; }
html body.touch #skillbar .slot { position: absolute !important; margin: 0 !important; pointer-events: auto; border-radius: 50% !important; width: 56px !important; height: 56px !important; }
html body.touch #skillbar .slot .sk-name, html body.touch #skillbar .slot .key { display: none !important; }
html body.touch #skillbar .slot .cd { border-radius: 50% !important; font-size: 15px; }
/* nút đánh chính */
html body.touch #skillbar [data-si="0"] { width: 84px !important; height: 84px !important; right: 12px; bottom: 12px;
  box-shadow: 0 0 0 3px rgba(242, 212, 138, 0.85), 0 0 14px rgba(242, 212, 138, 0.45), 0 4px 8px rgba(0, 0, 0, 0.5) !important; }
/* vòng chiêu: 3 chiêu, bán kính 105 quanh tâm nút đánh */
html body.touch #skillbar [data-si="1"], html body.touch #skillbar [data-si="2"], html body.touch #skillbar [data-si="3"] { width: 60px !important; height: 60px !important; }
html body.touch #skillbar [data-si="1"] { right: 128px; bottom: 9px; }
html body.touch #skillbar [data-si="2"] { right: 97px; bottom: 100px; }
html body.touch #skillbar [data-si="3"] { right: 6px; bottom: 127px; }
/* vòng ngoài, bán kính 172: đồ dùng nhỏ */
html body.touch #skillbar .slot.pot, html body.touch #skillbar .slot.auto { width: 44px !important; height: 44px !important; }
html body.touch #skillbar [data-pot="q"] { right: 203px; bottom: 14px; }
html body.touch #skillbar [data-pot="w"] { right: 199px; bottom: 74px; }
html body.touch #skillbar [data-auto] { width: 48px !important; height: 48px !important; right: 152px; bottom: 152px; }
html body.touch #skillbar [data-rodslot] { right: 74px; bottom: 199px; }
html body.touch #skillbar [data-mountslot] { right: 14px; bottom: 203px; }
html body.touch #skillbar .slot.pot .cnt { position: absolute !important; top: auto !important; left: auto !important; right: -4px !important; bottom: -3px !important; width: auto !important; height: 16px !important; min-width: 16px; padding: 0 4px !important; border-radius: 8px !important; font: 700 10px/16px "Be Vietnam Pro", sans-serif !important; text-align: center; background: #16324a !important; color: #f2d48a !important; border: 1px solid rgba(242, 212, 138, 0.6) !important; }
html body.touch #skillbar .slot.empty-sk { display: grid !important; place-items: center; background: rgba(8, 19, 29, 0.45) !important; }
html body.touch #skillbar .slot.empty-sk .plus-sk { display: block !important; color: #f2d48a !important; font-size: 24px; }
/* màn thấp (iPhone ngang): thu cả cụm lại cho khỏi đè minimap */
@media (max-height: 430px) { html body.touch #skillbar { transform: scale(0.86) !important; } }
@media (max-height: 360px) { html body.touch #skillbar { transform: scale(0.74) !important; } }

/* nút tròn kiểu viền kim loại: vành vàng, vòng tối, bóng đổ, ánh bóng phía trên; bấm thì lún xuống */
html body.touch #skillbar .slot {
  border: 2px solid #e2c06a !important; overflow: hidden;
  background: radial-gradient(circle at 38% 30%, #2f6286, #122a40 68%, #0a1826) !important;
  box-shadow: 0 0 0 2px rgba(8, 18, 28, 0.9), 0 0 0 4px rgba(226, 192, 106, 0.35), 0 4px 8px rgba(0, 0, 0, 0.55), inset 0 -4px 8px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.06s, filter 0.06s;
}
html body.touch #skillbar .slot::after {
  content: ''; position: absolute; left: 12%; right: 12%; top: 4%; height: 42%; border-radius: 50% 50% 45% 45%; pointer-events: none; z-index: 3;
  background: linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
}
html body.touch #skillbar .slot:active { transform: scale(0.92); filter: brightness(1.2); }
html body.touch #skillbar .slot .sk-img { border-radius: 50% !important; }
html body.touch #skillbar .slot .cd { z-index: 4; background: rgba(5, 12, 20, 0.62) !important; color: #fff !important; font-weight: 700; text-shadow: 0 1px 2px #000; }
html body.touch #skillbar [data-si="0"] { border-width: 3px !important; border-color: #f2d48a !important;
  box-shadow: 0 0 0 3px rgba(8, 18, 28, 0.9), 0 0 0 6px rgba(242, 212, 138, 0.55), 0 0 18px rgba(242, 212, 138, 0.45), 0 5px 10px rgba(0, 0, 0, 0.6), inset 0 -6px 10px rgba(0, 0, 0, 0.45) !important; }
html body.touch #skillbar .slot.pot { border-color: #b9c6cf !important; box-shadow: 0 0 0 2px rgba(8, 18, 28, 0.9), 0 3px 6px rgba(0, 0, 0, 0.55), inset 0 -3px 6px rgba(0, 0, 0, 0.45) !important; }
html body.touch #skillbar .slot.pot { overflow: visible !important; }
html body.touch #skillbar .slot.pot::after { left: 14%; right: 14%; }
html body.touch #skillbar .slot.pot .cnt { z-index: 5; }
html body.touch #skillbar .slot.pot.nomp img.pot-ic { filter: grayscale(0.7) brightness(0.8); }
html body.touch #skillbar .slot.auto.on { border-color: #8be07a !important; box-shadow: 0 0 0 2px rgba(8, 18, 28, 0.9), 0 0 12px rgba(139, 224, 122, 0.7) !important; }
html body.touch #skillbar .slot.empty-sk { border-style: dashed !important; }

/* bắt buộc chơi màn ngang: máy cảm ứng cầm dọc thì phủ màn xoay ngang lên tất cả (cả màn đăng nhập) */
@media (orientation: portrait) {
  html body.touch #rotate-hint { display: grid !important; position: fixed; inset: 0; z-index: 99999 !important; place-items: center; text-align: center; padding: 30px;
    background: radial-gradient(ellipse at center, rgba(22, 50, 74, 0.97), rgba(6, 14, 22, 0.99)) !important; color: #f3e6c8; }
}

/* chip góc trên màn đăng nhập (ngôn ngữ, Google, cài app): chữ không tràn — gọn một dòng, cắt bằng … */
html body .lv-login .lv-top { gap: 6px !important; flex-wrap: nowrap !important; }
html body .lv-login .lv-chip, html body .lv-login .lv-gbtn { display: inline-flex !important; align-items: center !important; gap: 5px !important; height: 32px !important; padding: 0 10px !important; white-space: nowrap !important; overflow: hidden !important; line-height: 1 !important; font-size: 12.5px !important; }
html body .lv-login .lv-gbtn .lv-gtxt { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .lv-login .lv-gbtn svg, html body .lv-login .lv-gbtn img { width: 16px !important; height: 16px !important; flex: none; }
@media (max-height: 520px), (max-width: 760px) {
  html body .lv-login .lv-gbtn .lv-gtxt, html body .lv-login .lv-chip .lv-ct { display: none !important; } /* điện thoại: chỉ biểu tượng */
  html body .lv-login .lv-chip, html body .lv-login .lv-gbtn { height: 30px !important; padding: 0 8px !important; }
}
html body .lv-login .lv-chip, html body .lv-login .lv-gbtn { width: auto !important; min-width: 32px !important; max-width: none !important; justify-content: center; }

/* ================= Điện thoại (iPhone): chữ nét, tránh tai thỏ / vạch Home, menu đủ mục ================= */
/* co nhỏ bằng transform làm Safari vẽ chữ mờ — dùng zoom (Safari dàn lại chữ ở cỡ thật); khoảng cách mép chia lại cho hệ số zoom */
html body.touch #frame { transform: none !important; zoom: 0.6; left: calc((2px + env(safe-area-inset-left)) / 0.6) !important; top: calc((2px + env(safe-area-inset-top)) / 0.6) !important; }
html body.touch #tracker { transform: none !important; zoom: 0.72; left: calc((4px + env(safe-area-inset-left)) / 0.72) !important; top: calc((84px + env(safe-area-inset-top)) / 0.72) !important; right: auto !important; }
html body.touch.fold-trk #tracker { transform: translateX(calc(-100% - 12px)) !important; }
@media (max-height: 430px) {
  html body.touch #skillbar { transform: none !important; zoom: 0.86; right: calc((6px + env(safe-area-inset-right)) / 0.86) !important; bottom: calc((8px + env(safe-area-inset-bottom)) / 0.86) !important; }
}
@media (max-height: 360px) {
  html body.touch #skillbar { zoom: 0.74; right: calc((6px + env(safe-area-inset-right)) / 0.74) !important; bottom: calc((8px + env(safe-area-inset-bottom)) / 0.74) !important; }
}
/* vạch Home ở đáy: thanh kinh nghiệm, cần điều khiển, nút chat nhích lên */
html body.touch #exp { bottom: env(safe-area-inset-bottom) !important; }
html body.touch #joy { bottom: calc(18px + env(safe-area-inset-bottom)) !important; }
html body.touch #chat-toggle { bottom: calc(18px + env(safe-area-inset-bottom)) !important; }
/* điện thoại: bỏ hàng nút cạnh bản đồ nhỏ (bản PC), mọi mục nằm trong bảng MENU */
html body.touch #top-quick, html body.touch #quick-menu { display: none !important; }
html body.touch.menu-open #menu button[data-open="inv"], html body.touch.menu-open #menu button[data-open="char"] { display: flex !important; }
html body.touch.menu-open #menu, html body.touch.menu-open.dragon-ui #menu { grid-template-columns: repeat(5, 58px) !important; }
@media (max-width: 700px) { html body.touch.menu-open #menu, html body.touch.menu-open.dragon-ui #menu { grid-template-columns: repeat(5, 52px) !important; } }
html body.touch #menu [data-open="char"] { order: 1; } html body.touch #menu [data-open="inv"] { order: 2; } html body.touch #menu [data-open="skills"] { order: 3; }
html body.touch #menu [data-open="guild"] { order: 4; } html body.touch #menu [data-open="friends"] { order: 5; } html body.touch #menu [data-open="party"] { order: 6; }
html body.touch #menu [data-open="mail"] { order: 7; } html body.touch #menu [data-open="daily"] { order: 8; } html body.touch #menu [data-open="rank"] { order: 9; }
html body.touch #menu [data-open="ach"] { order: 10; } html body.touch #menu [data-open="settings"] { order: 11; } html body.touch #menu [data-open="help"] { order: 12; }
html body.touch #menu [data-open="install"] { order: 13; } html body.touch #menu #dev-btn { order: 14; }
html body.touch.menu-open #menu button .lbl { font-size: 9.5px !important; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* màn chọn / tạo nhân vật: tránh Dynamic Island và tai thỏ hai bên (chủ dự án) */
html body #login.lv-login { padding-left: env(safe-area-inset-left) !important; padding-right: env(safe-area-inset-right) !important; padding-bottom: env(safe-area-inset-bottom) !important; box-sizing: border-box; }
html body #login.lv-login .lv-top { right: env(safe-area-inset-right) !important; padding-top: calc(8px + env(safe-area-inset-top)) !important; }
html body #login.lv-login .lv-logo { left: calc(10px + env(safe-area-inset-left)) !important; top: calc(8px + env(safe-area-inset-top)) !important; }

/* MENU trên điện thoại kiểu Arcane Legends: nút tròn viền vàng chứa biểu tượng, nhãn chữ bên dưới (thay nút vuông góc vát) */
html body.touch.menu-open #menu, html body.touch.menu-open.dragon-ui #menu { grid-template-columns: repeat(5, 66px) !important; gap: 6px 8px !important; }
@media (max-width: 700px) { html body.touch.menu-open #menu, html body.touch.menu-open.dragon-ui #menu { grid-template-columns: repeat(5, 60px) !important; } }
html body.touch.menu-open #menu button[data-open], html body.touch.menu-open #menu #dev-btn {
  position: relative !important; width: 100% !important; height: 76px !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important;
  background: none !important; border: none !important; box-shadow: none !important; filter: none !important; transform: none !important; overflow: visible !important; isolation: isolate;
}
html body.touch.menu-open #menu button[data-open]::before, html body.touch.menu-open #menu #dev-btn::before {
  content: '' !important; position: absolute; left: 50%; top: 2px; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; z-index: -1; display: block !important;
  background: radial-gradient(circle at 38% 30%, #2f6286, #122a40 68%, #0a1826) !important; border: 2px solid #e2c06a;
  box-shadow: 0 0 0 2px rgba(8, 18, 28, 0.9), 0 0 0 4px rgba(226, 192, 106, 0.3), 0 4px 8px rgba(0, 0, 0, 0.55), inset 0 -5px 9px rgba(0, 0, 0, 0.45), inset 0 3px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.06s; box-sizing: border-box;
}
html body.touch.menu-open #menu button[data-open]:active::before, html body.touch.menu-open #menu #dev-btn:active::before { transform: scale(0.9); filter: brightness(1.25); }
html body.touch.menu-open #menu button[data-open] img { position: relative; z-index: 1; width: 34px !important; height: 34px !important; margin-top: 11px !important; pointer-events: none; }
html body.touch.menu-open #menu button[data-open] .lbl { position: relative; z-index: 1; margin-top: 12px !important; font-size: 10px !important; font-weight: 800 !important; color: #fff6dc !important; text-shadow: 0 1px 2px #000, 0 0 3px #000 !important; }
html body.touch.menu-open #menu #dev-btn { padding-top: 19px !important; font-size: 13px !important; color: #f2d48a !important; z-index: 0; }
html body.touch.menu-open #menu button[data-open] .badge, html body.touch.menu-open #menu button[data-open] .dot { z-index: 2; }
/* bảng toàn màn hình trên điện thoại: nội dung lùi khỏi tai thỏ / Dynamic Island / vạch Home; nút ✕ cách góc bo (chủ dự án) */
html body.touch .panel { padding-left: calc(env(safe-area-inset-left) / var(--pz, 1)) !important; padding-right: calc(env(safe-area-inset-right) / var(--pz, 1)) !important; padding-bottom: calc(env(safe-area-inset-bottom) / var(--pz, 1)) !important; box-sizing: border-box !important; }
html body.touch .panel .p-close, html body.touch .panel .p-head > span:not(.p-title) .p-close {
  left: auto !important; top: calc((10px + env(safe-area-inset-top)) / var(--pz, 1)) !important; right: calc((12px + env(safe-area-inset-right)) / var(--pz, 1)) !important;
  width: 34px !important; height: 34px !important; font-size: 16px !important; border-radius: 50% !important;
}
html body.touch .panel .p-head { padding-right: 56px !important; }
/* màn tạo nhân vật hẹp hơn (chừa Dynamic Island): ô tên rộng ra, nút Tạo gọn lại */
html body.touch .lv-create .mu-name input { flex: 1 1 auto; min-width: 0; }
html body.touch .lv-create .mu-name .lv-go.sm { flex: none; padding-left: 12px !important; padding-right: 12px !important; letter-spacing: 0 !important; }
/* nút mở MENU (lúc đóng) kiểu Arcane Legends: nút tròn viền vàng, chữ MENU bên dưới (chủ dự án) */
html body.touch:not(.menu-open) #menu-toggle {
  width: 50px !important; height: 50px !important; border-radius: 50% !important; overflow: visible !important;
  top: calc(8px + env(safe-area-inset-top)) !important;
  background: radial-gradient(circle at 38% 30%, #2f6286, #122a40 68%, #0a1826) !important; border: 2px solid #e2c06a !important;
  box-shadow: 0 0 0 2px rgba(8, 18, 28, 0.9), 0 0 0 4px rgba(226, 192, 106, 0.3), 0 4px 8px rgba(0, 0, 0, 0.55), inset 0 -5px 9px rgba(0, 0, 0, 0.45) !important;
}
html body.touch:not(.menu-open) #menu-toggle::after {
  content: 'MENU'; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); pointer-events: none;
  font: 800 9.5px/1 'Be Vietnam Pro', sans-serif; letter-spacing: 0.06em; color: #fff6dc; text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
html body.touch:not(.menu-open) #menu-toggle:active { transform: scale(0.92) !important; filter: brightness(1.2); }
/* menu đang mở: chỉ còn 1 nút ✕ nhỏ ở góc menu; ẩn các nút ✕ khác đang lòi lên trên menu */
html body.touch.menu-open #trk-toggle.x-dock, html body.touch.menu-open #map-toggle.x-dock, html body.touch.menu-open #chat-toggle.x-dock { display: none !important; }
html body.touch.menu-open #menu-toggle { width: 30px !important; height: 30px !important; border-radius: 50% !important; font-size: 15px !important; z-index: 70 !important;
  background: rgba(8, 19, 29, 0.92) !important; color: #f2d48a !important; border: 1px solid rgba(217, 180, 90, 0.6) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important; }
html body.touch.menu-open #menu-toggle::after { content: none !important; }
/* nút tròn thu gọn (MAP, nhiệm vụ) trên điện thoại: cùng kiểu nút MENU — viền vàng, chữ bên dưới (chủ dự án) */
html body.touch .hud-bub:not(.on):not(.x-dock) {
  width: 50px !important; height: 50px !important; border-radius: 50% !important; overflow: visible !important; padding: 0 !important; display: grid !important; place-items: center !important;
  background: radial-gradient(circle at 38% 30%, #2f6286, #122a40 68%, #0a1826) !important; border: 2px solid #e2c06a !important;
  box-shadow: 0 0 0 2px rgba(8, 18, 28, 0.9), 0 0 0 4px rgba(226, 192, 106, 0.3), 0 4px 8px rgba(0, 0, 0, 0.55), inset 0 -5px 9px rgba(0, 0, 0, 0.45) !important;
}
html body.touch .hud-bub:not(.on):not(.x-dock) img { width: 70% !important; height: 70% !important; object-fit: contain; }
html body.touch .hud-bub:not(.on):not(.x-dock) .bub-t {
  display: block !important; position: absolute !important; left: 50% !important; top: auto !important; bottom: -15px !important; transform: translateX(-50%) !important;
  background: none !important; border: none !important; padding: 0 !important; white-space: nowrap; text-transform: uppercase;
  font: 800 9.5px/1 'Be Vietnam Pro', sans-serif !important; letter-spacing: 0.06em; color: #fff6dc !important; text-shadow: 0 1px 2px #000, 0 0 3px #000 !important;
}
html body.touch .hud-bub:not(.on):not(.x-dock):active { transform: scale(0.92) !important; }
/* góc trên-phải: MAP sát mép (trong vùng an toàn), MENU bên trái nó */
html body.touch.fold-map #map-toggle { right: calc(14px + env(safe-area-inset-right)) !important; top: calc(8px + env(safe-area-inset-top)) !important; left: auto !important; }
html body.touch.fold-map:not(.menu-open) #menu-toggle { right: calc(80px + env(safe-area-inset-right)) !important; left: auto !important; }
html body.touch.menu-open #trk-toggle, html body.touch.menu-open #map-toggle { display: none !important; }
/* bảng toàn màn hình trên điện thoại (Hành trang, Nhân vật…): bo góc theo góc bo của màn hình (chủ dự án) */
html body.touch .panel:not(.map-panel) { border-radius: calc(44px / var(--pz, 1)) !important; overflow: hidden !important; }
html body.touch .panel:not(.map-panel) > .p-head { padding-top: calc(12px / var(--pz, 1)) !important; padding-left: calc(28px / var(--pz, 1)) !important; }
html body.touch .panel:not(.map-panel) > .p-body { padding-bottom: calc(18px / var(--pz, 1)) !important; }
/* bản đồ nhỏ trên điện thoại kiểu Arcane Legends: vòng tròn viền vàng, tên vùng trên dải băng bên dưới (chủ dự án) */
html body.touch #topright, html body.touch.dragon-ui #topright {
  width: 132px !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; border-image: none !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important;
  right: calc(10px + env(safe-area-inset-right)) !important; top: calc(6px + env(safe-area-inset-top)) !important; backdrop-filter: none !important;
}
html body.touch #topright::before, html body.touch #topright::after { content: none !important; display: none !important; }
html body.touch #minimap {
  order: 1; width: 116px !important; height: 116px !important; aspect-ratio: 1 !important; margin: 0 !important; border-radius: 50% !important;
  background: radial-gradient(circle, #1d3d57, #0a1826) !important; border: 3px solid #e2c06a !important;
  box-shadow: 0 0 0 2px rgba(8, 18, 28, 0.95), 0 0 0 5px rgba(226, 192, 106, 0.35), 0 5px 12px rgba(0, 0, 0, 0.6), inset 0 0 14px rgba(0, 0, 0, 0.65) !important;
}
html body.touch #region-name {
  order: 2; position: relative; z-index: 2; margin-top: -12px !important; max-width: 132px; padding: 3px 6px 3px 10px !important; gap: 4px !important;
  background: linear-gradient(180deg, #2c5677, #142c41) !important; border: 1px solid #e2c06a !important; border-radius: 10px !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55) !important; font-size: 11px !important;
}
html body.touch #region-name .rn-name { font: 800 11px/1.2 'Be Vietnam Pro', sans-serif !important; color: #fff6dc !important; text-shadow: 0 1px 2px #000; }
html body.touch #region-name .rn-khu { font-size: 10px !important; padding: 1px 5px !important; min-height: 0 !important; height: auto !important; }
html body.touch #region-name .rn-khu i { display: none !important; }
html body.touch #coords, html body.touch #net-info { display: none !important; }
/* nút ✕ thu bản đồ nằm trên vòng tròn; nút MENU lùi sang trái vòng tròn */
html body.touch:not(.fold-map):not(.menu-open) #menu-toggle { right: calc(152px + env(safe-area-inset-right)) !important; }
/* điện thoại: bản đồ nhỏ luôn hiện — bỏ nút ✕ / nút MAP thu gọn (chủ dự án) */
html body.touch #map-toggle { display: none !important; }
html body.touch.fold-map #topright { transform: none !important; }
/* tên vùng: dải ruy băng vàng hai đầu khía, chữ nâu đậm; số khu là huy hiệu nhỏ (chỉ để xem — đổi khu ở Cờ Chọn Khu) */
html body.touch #region-name {
  margin-top: -14px !important; padding: 4px 16px 5px !important; gap: 5px !important; max-width: 150px; border: none !important; border-radius: 0 !important;
  background: linear-gradient(180deg, #ffe7a6 0%, #f2c96a 45%, #c99a3f 100%) !important;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
  box-shadow: none !important; filter: drop-shadow(0 2px 0 #6b4a17) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.55));
}
html body.touch #region-name .rn-name { font: 800 11.5px/1.15 'Noto Serif', Georgia, serif !important; color: #3a2408 !important; text-shadow: 0 1px 0 rgba(255, 245, 210, 0.7) !important; letter-spacing: 0.02em; }
html body.touch #region-name .rn-khu, html body.touch #region-name .khu-chip {
  background: #3a2408 !important; color: #ffe7a6 !important; border: none !important; border-radius: 8px !important; padding: 1px 6px !important;
  font: 800 9.5px/1.3 'Be Vietnam Pro', sans-serif !important; box-shadow: none !important; cursor: default !important; pointer-events: none;
}
html body.touch #region-name .rn-khu b { color: #fff !important; }
/* thanh kinh nghiệm sát đáy màn hình (chủ dự án) */
html body.touch #exp { bottom: 0 !important; }
/* bảng toàn màn hình: bo khớp góc màn iPhone (~55px) để viền vàng không bị góc màn cắt mất */
html body.touch .panel:not(.map-panel) { border-radius: calc(58px / var(--pz, 1)) !important; }
html body.touch .panel:not(.map-panel) > .p-head { padding-left: calc(40px / var(--pz, 1)) !important; }
/* bản đồ nhỏ: bỏ dải tên vùng, chỉ còn số khu nằm trong vòng tròn (chủ dự án) */
html body.touch #region-name {
  margin-top: -30px !important; padding: 0 !important; max-width: none; background: none !important; clip-path: none !important; filter: none !important;
  box-shadow: none !important; border: none !important; pointer-events: none;
}
html body.touch #region-name .rn-name { display: none !important; }
html body.touch #region-name .rn-khu, html body.touch #region-name .khu-chip {
  background: rgba(8, 19, 29, 0.78) !important; color: #f2d48a !important; border: 1px solid rgba(226, 192, 106, 0.7) !important; border-radius: 9px !important;
  padding: 1px 7px !important; font: 800 9.5px/1.3 'Be Vietnam Pro', sans-serif !important;
}
html body.touch #region-name .rn-khu b { color: #fff6dc !important; }
/* bảng nhiệm vụ trên điện thoại: không lấn xuống cần điều khiển / nút chat (chủ dự án) — cuộn bên trong nếu dài */
html body.touch #tracker { max-height: calc((100vh - 88px - env(safe-area-inset-top) - 168px - env(safe-area-inset-bottom)) / 0.72) !important; overflow-y: auto !important; box-sizing: border-box !important; }
/* mọi nút ✕: tròn, nhỏ, nền đỏ (chủ dự án) */
html body .x-dock, html body .panel .p-close, html body .panel .p-head > span:not(.p-title) .p-close, html body.touch.menu-open #menu-toggle {
  width: 24px !important; height: 24px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important;
  display: grid !important; place-items: center !important; font-size: 12px !important; line-height: 1 !important; font-weight: 800 !important;
  background: radial-gradient(circle at 35% 30%, #e0664f, #b3301e 60%, #7a1d10) !important; color: #fff !important;
  border: 1.5px solid #ffd7a0 !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
html body .x-dock:hover, html body .panel .p-close:hover { filter: brightness(1.15); }
html body.touch .x-dock:active, html body.touch .panel .p-close:active { transform: scale(0.9) !important; }
/* bảng toàn màn hình trên điện thoại: nút ✕ cùng cỡ (bù hệ số zoom của bảng) */
html body.touch .panel .p-close, html body.touch .panel .p-head > span:not(.p-title) .p-close { width: calc(28px / var(--pz, 1)) !important; height: calc(28px / var(--pz, 1)) !important; font-size: calc(13px / var(--pz, 1)) !important; }
html body .hud-bub.on {
  width: 24px !important; height: 24px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important;
  display: grid !important; place-items: center !important; font-size: 12px !important; line-height: 1 !important; font-weight: 800 !important;
  background: radial-gradient(circle at 35% 30%, #e0664f, #b3301e 60%, #7a1d10) !important; color: #fff !important;
  border: 1.5px solid #ffd7a0 !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
html body .hud-bub.on .bub-t, html body .hud-bub.on img { display: none !important; }
/* nút ✕ nhỏ hơn nữa (chủ dự án) */
html body .x-dock, html body .hud-bub.on, html body.touch.menu-open #menu-toggle, html body .panel .p-close, html body .panel .p-head > span:not(.p-title) .p-close { width: 18px !important; height: 18px !important; font-size: 9px !important; border-width: 1px !important; }
html body.touch .panel .p-close, html body.touch .panel .p-head > span:not(.p-title) .p-close { width: calc(20px / var(--pz, 1)) !important; height: calc(20px / var(--pz, 1)) !important; font-size: calc(10px / var(--pz, 1)) !important; }
/* bảng nhiệm vụ lùi xuống 4px */
html body.touch #tracker { top: calc((88px + env(safe-area-inset-top)) / 0.72) !important; }
/* nút nhiệm vụ (thu gọn) lùi xuống 4px (chủ dự án) */
html body.touch #trk-toggle:not(.on):not(.x-dock) { top: calc(86px + env(safe-area-inset-top)) !important; }
/* nút MENU trên điện thoại: đứng yên một chỗ khi mở / đóng — không đổi thành ✕, chỉ sáng viền khi menu đang mở (chủ dự án) */
html body.touch.menu-open #menu-toggle {
  width: 50px !important; height: 50px !important; border-radius: 50% !important; overflow: visible !important; font-size: 22px !important; color: #ffe2a8 !important;
  top: calc(8px + env(safe-area-inset-top)) !important; right: calc(152px + env(safe-area-inset-right)) !important; left: auto !important; z-index: 70 !important;
  background: radial-gradient(circle at 38% 30%, #3b7aa6, #17344f 68%, #0a1826) !important; border: 2px solid #ffe7a6 !important;
  box-shadow: 0 0 0 2px rgba(8, 18, 28, 0.9), 0 0 0 4px rgba(255, 231, 166, 0.55), 0 0 14px rgba(255, 215, 120, 0.6), 0 4px 8px rgba(0, 0, 0, 0.55) !important;
}
html body.touch.menu-open #menu-toggle::after {
  content: 'MENU' !important; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); pointer-events: none;
  font: 800 9.5px/1 'Be Vietnam Pro', sans-serif; letter-spacing: 0.06em; color: #fff6dc; text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
/* màu phẩm chất + phát sáng sau khi ép: khôi phục (nền Tunic đặt viền/bóng !important đã đè mất — chủ dự án) */
html body .panel .item.r1 { border-color: #4fa8ff !important; box-shadow: inset 0 0 8px rgba(79, 168, 255, 0.55), inset 0 2px 6px rgba(0, 0, 0, 0.45) !important; }
html body .panel .item.r2 { border-color: #b77cff !important; box-shadow: inset 0 0 9px rgba(183, 124, 255, 0.6), inset 0 2px 6px rgba(0, 0, 0, 0.45) !important; }
html body .panel .item.r3 { border-color: #ffc93a !important; box-shadow: inset 0 0 10px rgba(255, 201, 58, 0.6), 0 0 6px rgba(255, 190, 40, 0.55) !important; }
html body .panel .item.r4 { border-color: #ff4b3e !important; box-shadow: inset 0 0 11px rgba(255, 75, 62, 0.7), 0 0 8px rgba(255, 60, 40, 0.65) !important; animation: tnRed 2.2s ease-in-out infinite !important; }
html body .panel .item.jewel { border-color: #c48cff !important; }
html body .panel .item.r1, html body .panel .item.r2, html body .panel .item.r3, html body .panel .item.r4 { border-width: 1.5px !important; }
/* đồ đã ép: nhấp nháy sáng theo cấp ép (dùng filter để không đụng box-shadow !important) */
html body .panel .item.high { border-color: #7fe0ff !important; animation: tnUp 2s ease-in-out infinite !important; }
html body .panel .item.max9 { border-color: #ff7ad8 !important; animation: tnUp9 1.6s ease-in-out infinite !important; }
html body .panel .item.max12 { border-color: #ff5a3a !important; animation: tnUp12 1.2s ease-in-out infinite !important; }
html body .panel .item { position: relative; overflow: hidden; }
@keyframes tnRed { 50% { filter: drop-shadow(0 0 6px rgba(255, 70, 50, 0.9)); } }
@keyframes tnUp { 50% { filter: drop-shadow(0 0 6px rgba(120, 220, 255, 0.95)) brightness(1.12); } }
@keyframes tnUp9 { 50% { filter: drop-shadow(0 0 8px rgba(255, 110, 220, 1)) brightness(1.15); } }
@keyframes tnUp12 { 50% { filter: drop-shadow(0 0 10px rgba(255, 90, 50, 1)) drop-shadow(0 0 4px rgba(255, 210, 90, 0.9)) brightness(1.2); } }
html body .panel .item.r1 .nm { color: #6db8ff !important; } html body .panel .item.r2 .nm { color: #c99bff !important; }
html body .panel .item.r3 .nm { color: #ffd45e !important; } html body .panel .item.r4 .nm { color: #ff6a5a !important; } html body .panel .item.high .nm { color: #7fe0ff !important; }
/* màn chọn nhân vật: vòng xoay rộng theo chỗ trống thật (đã chừa Dynamic Island) — trước 96vw tràn sang phải nên lệch (chủ dự án) */
html body .lv-login .lv-slots.mu-court { width: min(1000px, 100%) !important; max-width: 100% !important; box-sizing: border-box; }
/* nhân vật đứng thở (idle): nhún nhẹ + phồng ngực, mỗi người lệch nhịp */
html body .lv-login .mu-court .lv-hero { animation: tnIdle 3.2s ease-in-out infinite !important; }
html body .lv-login .mu-court .lv-slot:nth-of-type(2) .lv-hero { animation-delay: -1.1s !important; }
html body .lv-login .mu-court .lv-slot:nth-of-type(3) .lv-hero { animation-delay: -2.2s !important; }
@keyframes tnIdle {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1, 1); }
  50% { transform: translateX(-50%) translateY(-1.5%) scale(0.992, 1.022); }
}
/* bảng bản đồ lớn trên điện thoại: viền vàng bo theo góc màn hình như các bảng khác (chủ dự án) */
html body.touch .panel.map-panel { border-radius: calc(58px / var(--pz, 1)) !important; overflow: hidden !important; }
html body.touch .panel.map-panel > .p-head { padding-left: calc(40px / var(--pz, 1)) !important; }

/* ===== Bảng Kỹ năng kiểu Arcane Legends (01/11) ===== */
/* ===== Bảng Kỹ năng kiểu Arcane Legends (01/11 & Cải tiến PC 02/11) ===== */
body .panel.vc-panel { width: min(980px, calc(100vw - 32px)) !important; max-width: 980px !important; }
.al-sk { display: flex; flex-direction: column; gap: 10px; }
.al-build { display: grid; grid-template-columns: 1.3fr 1.2fr auto; gap: 10px; align-items: stretch; }
.al-me { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 22%, rgba(8,19,29,.9)), rgba(8,19,29,.85));
  border: 1.5px solid color-mix(in srgb, var(--ac) 70%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--ac) 30%, transparent) inset; }
.al-me b { font: 700 17px/1.2 "Noto Serif", serif; color: var(--ac); text-shadow: 0 0 10px color-mix(in srgb, var(--ac) 60%, transparent); }
.al-me small { font-size: 11px; opacity: .8; }
.al-me .ok-t, .al-sk .ok-t { color: #8ff08a; font-size: 12px; font-weight: 600; } .al-me .bad-t, .al-sk .bad-t { color: #ff8a72; font-size: 12px; font-weight: 600; }
.al-ring { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 6px; border-radius: 14px; background: rgba(8,19,29,.6); border: 1px solid rgba(212,169,78,.25); }
.al-ring > i { color: #e8c37a; font-style: normal; opacity: .7; font-size: 15px; }
.al-ri { display: flex; flex-direction: column; align-items: center; width: 52px; font-size: 20px; line-height: 1.1; filter: grayscale(.4) brightness(.85); }
.al-ri small { font-size: 9.5px; font-weight: 700; color: var(--ac); white-space: nowrap; }
.al-ri.me { filter: none; transform: scale(1.12); text-shadow: 0 0 12px var(--ac); }
.al-pts { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 12px; border-radius: 14px; background: rgba(8,19,29,.6); border: 1px solid rgba(212,169,78,.25); }
.al-pts span { font-size: 11px; opacity: .8; }
.al-pts b { font: 800 26px/1 "Noto Serif", serif; color: #c9b98a; }
.al-pts b.has { color: #7dff9a; text-shadow: 0 0 12px rgba(125,255,154,.7); animation: alPulse 1.4s ease-in-out infinite; }
@keyframes alPulse { 50% { transform: scale(1.12); } }
.al-cols { display: grid; grid-template-columns: .62fr 1fr 1fr; gap: 10px; }
.al-col { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 12%, rgba(8,19,29,.85)), rgba(8,19,29,.8));
  border: 1.5px solid color-mix(in srgb, var(--pc) 45%, transparent); }
.al-col.cur { border-color: var(--pc); box-shadow: 0 0 18px color-mix(in srgb, var(--pc) 40%, transparent), 0 0 10px color-mix(in srgb, var(--pc) 25%, transparent) inset; }
.al-ch { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.al-ch b { font: 700 15px/1.2 "Noto Serif", serif; color: var(--pc); text-shadow: 0 0 8px color-mix(in srgb, var(--pc) 50%, transparent); }
.al-at { padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--ac, #e8c37a) 85%, #000); color: #10141a; }
.al-sub { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--pc); opacity: .85; margin-top: 2px; }
.al-grid { display: grid; grid-template-columns: repeat(2, 76px); gap: 6px 8px; justify-content: center; }
.al-col:first-child .al-grid { grid-template-columns: 76px; }
.al-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 76px; padding: 2px 0; background: none !important; border: 0 !important; box-shadow: none !important; cursor: pointer; }
.al-ic { position: relative; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: #0b1520;
  border: 2.5px solid rgba(243,227,192,.25); box-shadow: 0 3px 8px rgba(0,0,0,.5); transition: transform .12s; }
.al-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-ic b { font-size: 24px; color: var(--pc); }
.al-node.pas .al-ic { border-radius: 50%; border-style: double; border-width: 4px; }
.al-node.on .al-ic { border-color: var(--pc); box-shadow: 0 0 12px color-mix(in srgb, var(--pc) 65%, transparent), 0 3px 8px rgba(0,0,0,.5); }
.al-node.max .al-ic { border-color: #ffe08a; box-shadow: 0 0 16px rgba(255,215,110,.9), 0 0 5px #fff inset; }
.al-node.off .al-ic img { filter: grayscale(.85) brightness(.5); }
.al-node:hover .al-ic { transform: scale(1.06); }
.al-node.sel .al-ic { outline: 2px solid #fff3c4; outline-offset: 2px; transform: scale(1.08); }
.al-rank { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 8px; font: 800 10px/15px "Be Vietnam Pro", sans-serif; color: #fff; background: rgba(0,0,0,.8); border: 1px solid var(--pc); }
.al-node.off .al-rank { border-color: rgba(243,227,192,.3); color: rgba(255,255,255,.6); }
.al-key { position: absolute; left: 4px; top: -2px; width: 18px; height: 18px; border-radius: 50%; background: #9a2418; color: #fff3d8; font: 800 11px/18px sans-serif; text-align: center; box-shadow: 0 0 0 1.5px #e8c37a; }
.al-lock { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: 15px; pointer-events: none; }
.al-lock small { font: 700 10px/1.1 sans-serif; color: #f3e3c0; text-shadow: 0 1px 2px #000; }
.al-plus { position: absolute; right: 2px; top: -3px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 900 17px/1 sans-serif; color: #062a10;
  background: radial-gradient(circle at 35% 30%, #c8ffb0, #3fd65a 60%, #1e8a32); box-shadow: 0 0 0 2px #0b2a12, 0 0 10px rgba(110,255,130,.9); animation: alPulse 1.2s ease-in-out infinite; }
.al-nm { margin-top: 8px; font-size: 10.5px; font-weight: 600; line-height: 1.15; text-align: center; color: #f3e3c0; text-shadow: 0 1px 2px #000; }
.al-node.off .al-nm { color: rgba(243,227,192,.55); }

/* Bảng chi tiết môn võ hiện đại (.al-detail) */
.al-detail {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--pc) 18%, transparent), transparent 70%),
              linear-gradient(145deg, rgba(14, 26, 42, 0.95), rgba(7, 14, 24, 0.95)) !important;
  border: 1.5px solid color-mix(in srgb, var(--pc) 60%, rgba(212, 169, 78, 0.3)) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 0 16px color-mix(in srgb, var(--pc) 15%, transparent) !important;
  color: var(--tn-ink, #f3e3c0);
}
.al-dhead { display: flex; align-items: center; gap: 12px; }
.al-dic { width: 56px; height: 56px; min-width: 56px; border-radius: 14px; overflow: hidden; border: 2.5px solid var(--pc); display: grid; place-items: center; background: #060d16; box-shadow: 0 0 14px color-mix(in srgb, var(--pc) 50%, transparent); }
.al-dic.pas { border-radius: 50%; border-style: double; border-width: 4px; }
.al-dic img { width: 100%; height: 100%; object-fit: cover; }
.al-dic b { font-size: 26px; color: var(--pc); }
.al-dmeta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.al-dtitle b { font: 700 17px/1.2 "Noto Serif", serif; color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--pc) 70%, transparent), 0 2px 4px #000; }
.al-dbadges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.al-kind { padding: 2px 7px; border-radius: 7px; font: 700 10px/1.2 "Be Vietnam Pro", sans-serif; letter-spacing: 0.3px; background: linear-gradient(135deg, #e05a30, #b03816); color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.al-kind.pas { background: linear-gradient(135deg, #3b74db, #2452a8); }
.al-dbadges .vt-tag { padding: 2px 7px; border-radius: 7px; font-size: 10px; font-weight: 700; background: color-mix(in srgb, var(--pc) 25%, #0d1a29); color: var(--pc); border: 1px solid var(--pc); }
.al-dbadges .vt-dlv { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 7px; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.15); }
.al-dbadges .vt-dlv.on { color: #7dff9a; border-color: rgba(125,255,154,0.4); text-shadow: 0 0 8px rgba(125,255,154,0.4); }
.al-dbadges .vt-dlv.off { color: rgba(243,227,192,0.5); }

.al-detail .vt-ddesc { font-size: 12px; line-height: 1.4; color: rgba(243,227,192,0.85); background: rgba(0,0,0,0.25); padding: 6px 9px; border-radius: 8px; border-left: 3px solid var(--pc); margin: 0; }

/* Stat chips trực quan */
.al-chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.al-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px; font-size: 11px; background: rgba(10,20,32,0.75); border: 1px solid rgba(255,255,255,0.12); color: #e2ecf5; }
.al-chip b { font-weight: 700; color: #fff; }
.al-chip.dmg { border-color: rgba(255,120,90,0.4); background: rgba(50,18,12,0.65); } .al-chip.dmg b { color: #ff9d82; }
.al-chip.mp { border-color: rgba(70,170,255,0.4); background: rgba(10,28,50,0.65); } .al-chip.mp b { color: #8ad2ff; }
.al-chip.cd { border-color: rgba(255,210,90,0.4); background: rgba(45,36,12,0.65); } .al-chip.cd b { color: #ffe082; }
.al-chip.poison { border-color: rgba(120,230,120,0.4); background: rgba(14,40,20,0.65); } .al-chip.poison b { color: #9df09d; }
.al-chip.slow { border-color: rgba(130,220,255,0.4); background: rgba(16,38,55,0.65); } .al-chip.slow b { color: #b0e8ff; }
.al-chip.buff { border-color: rgba(220,140,255,0.4); background: rgba(38,18,50,0.65); } .al-chip.buff b { color: #e6b3ff; }
.al-chip.pas { border-color: rgba(125,255,154,0.35); background: rgba(12,35,24,0.65); } .al-chip.pas b { color: #7dff9a; }

/* Khung cấp tiếp theo */
.al-next-box { display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; border-radius: 9px; background: linear-gradient(135deg, rgba(16,38,56,0.6), rgba(9,21,34,0.7)); border: 1px dashed rgba(120,200,255,0.35); }
.al-next-h { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; color: #8ed0f8; }
.al-next-body { font-size: 11px; color: #d2e4f0; }
.al-next-body b { color: #fff; }

/* Thao tác: Nút Nâng cấp & Hotkeys */
.al-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.1); margin: 0; }
.al-btn-up { padding: 6px 14px !important; font-size: 12.5px !important; font-weight: 700 !important; border-radius: 8px !important; }
.al-max-badge { font-size: 12px; font-weight: 700; color: #7dff9a; text-shadow: 0 0 8px rgba(125,255,154,0.4); }
.al-acts .vt-dbar { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 11px; color: rgba(243,227,192,0.8); }
.al-slots-group { display: flex; gap: 4px; }
.al-slots-group .vc-slot { width: 28px; height: 28px; border-radius: 7px; border: 1.5px solid rgba(212,169,78,0.4); background: rgba(12,22,34,0.9); color: #f3e3c0; font: 800 12px/1 "Be Vietnam Pro", sans-serif; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.al-slots-group .vc-slot:hover { border-color: #ffe08a; transform: translateY(-1px); box-shadow: 0 0 8px rgba(255,220,110,0.5); }
.al-slots-group .vc-slot.on { border-color: #ffd700; background: linear-gradient(135deg, #8a2418, #5a1008); color: #fff4d0; box-shadow: 0 0 10px rgba(255,200,60,0.7), inset 0 0 4px rgba(255,255,255,0.3); }

/* Bố cục PC: 2 Cột Ngang Tối Ưu, Cấm Tràn Panel, Không Scroll */
body:not(.touch) .panel.vc-panel > .p-body.al-sk {
  display: grid !important;
  grid-template-columns: minmax(500px, 1.35fr) minmax(350px, 1fr) !important;
  gap: 14px !important;
  padding: 12px 16px 14px !important;
  max-height: min(600px, calc(100vh - 110px)) !important;
  overflow: hidden !important;
  align-items: start !important;
}
body:not(.touch) .al-sk .al-cols {
  overflow-y: auto;
  max-height: calc(min(600px, calc(100vh - 110px)) - 26px);
  padding-right: 6px;
}
body:not(.touch) .al-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  max-height: calc(min(600px, calc(100vh - 110px)) - 26px);
  overflow-y: auto;
  padding-right: 4px;
}
.al-side .al-build { display: flex; justify-content: stretch; margin: 0; }
.al-side .al-pts { flex: 1; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 6px 12px; border-radius: 12px; background: rgba(9,20,32,0.85); border: 1px solid rgba(212,169,78,0.35); box-shadow: inset 0 0 10px rgba(0,0,0,0.4); }
.al-side .al-pts span { font-size: 11.5px; color: rgba(243,227,192,0.9); font-weight: 600; }
.al-side .al-pts b { font-size: 20px; }
.al-side .vt-help { margin: 0; padding: 6px 10px; font-size: 10.5px; line-height: 1.35; color: rgba(243,227,192,0.65); background: rgba(0,0,0,0.25); border-radius: 8px; }

/* Bố cục Điện thoại: 2 cột chạm */
body.touch .panel.vc-panel > .p-body.al-sk { display: grid !important; grid-template-columns: 1fr 300px !important; gap: 8px 10px !important; overflow: hidden !important; padding: 8px 12px 10px !important; }
body.touch .al-sk .al-cols { overflow-y: auto !important; min-height: 0 !important; }
body.touch .al-side { display: flex !important; flex-direction: column !important; gap: 8px !important; min-height: 0 !important; overflow-y: auto !important; }
body.touch .al-side .vt-help { display: none !important; }
body.touch .al-grid { grid-template-columns: repeat(2, 64px); } body.touch .al-col:first-child .al-grid { grid-template-columns: 64px; }
body.touch .al-node { width: 64px; } body.touch .al-ic { width: 46px; height: 46px; } body.touch .al-rank { top: 37px; }
@media (max-width: 700px) { .al-build { grid-template-columns: 1fr; } .al-cols { grid-template-columns: 1fr; } }

/* Điện thoại (chủ dự án 02/11): bảng Kỹ năng phủ kín màn hình; nút ✕ mọi bảng lùi vào trong thêm 2px khỏi góc bo */
html body.touch .panel.vc-panel { left: 0 !important; right: 0 !important; top: 0 !important; transform: none !important; margin: 0 !important;
  width: calc(100vw / var(--pz, 1)) !important; max-width: none !important; height: calc(100vh / var(--pz, 1)) !important; max-height: none !important;
  display: flex !important; flex-direction: column !important; }
html body.touch .panel.vc-panel > .p-body.al-sk { flex: 1 1 auto; min-height: 0; grid-template-columns: 1fr 340px; }
html body.touch .panel .p-close, html body.touch .panel .p-head > span:not(.p-title) .p-close {
  top: calc((12px + env(safe-area-inset-top)) / var(--pz, 1)) !important; right: calc((14px + env(safe-area-inset-right)) / var(--pz, 1)) !important; }

/* So sánh đồ trong hành trang (chủ dự án 02/11) */
.cm-cmp { width: 250px; max-width: 46vw; padding: 10px 12px; font-size: 12px; line-height: 1.5; background: rgba(10, 22, 34, 0.97); border-left: 1px solid rgba(212, 169, 78, 0.35); overflow-y: auto; color: #f3e3c0; }
.cm-cmp .tt-ic { float: right; width: 44px; height: 44px; object-fit: contain; margin: 0 0 4px 8px; }
.cm-cmp .tt-name { font-weight: 700; font-size: 13px; }
.cm-cmp-h { margin: 6px 0 3px; padding-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #e8c37a; border-bottom: 1px solid rgba(212, 169, 78, 0.3); clear: both; }
.cm-diff { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.cm-diff b { font-weight: 600; white-space: nowrap; }
.cm-diff i { font-style: normal; font-weight: 800; }
.cm-diff.up i { color: #7dff9a; } .cm-diff.down i { color: #ff7a66; }
/* nút ✕ trên điện thoại: lùi vào trái thêm 2px, vùng chạm rộng ~44px dù hình vẫn nhỏ */
html body.touch .panel .p-close, html body.touch .panel .p-head > span:not(.p-title) .p-close { right: calc((16px + env(safe-area-inset-right)) / var(--pz, 1)) !important; overflow: visible !important; }
html body.touch .panel .p-close::after, html body.touch .x-dock::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; }

/* Điện thoại: mùa + giờ trong game ở giữa cạnh trên (chủ dự án 02/11) */
#top-clock { display: none; }
html body.touch.playing #top-clock { display: block; position: fixed; z-index: 40; top: calc(6px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  padding: 3px 12px; border-radius: 999px; font: 700 12px/1.3 "Be Vietnam Pro", sans-serif; color: #f3e3c0; white-space: nowrap; pointer-events: none;
  background: rgba(8, 19, 29, 0.72); border: 1px solid rgba(212, 169, 78, 0.55); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); text-shadow: 0 1px 2px #000; }
html body.touch.panel-open #top-clock { display: none; }

/* Bảng Võ Công trên điện thoại: bỏ zoom (Safari tính sai vùng bấm của nút ✕ trong khối có zoom); bảng đã phủ kín màn hình nên chữ nhỏ lại bằng cỡ chữ */
html body.touch .panel.vc-panel { --pz: 1 !important; zoom: 1 !important; font-size: 12px !important; }
html body.touch .panel.vc-panel .p-head { font-size: 15px !important; }
html body.touch .vc-panel .al-me b { font-size: 14px !important; }
html body.touch .vc-panel .al-pts b { font-size: 20px !important; }
html body.touch .vc-panel .al-ri { width: 44px; font-size: 16px; }
html body.touch .vc-panel .al-grid { grid-template-columns: repeat(2, 56px) !important; gap: 4px 6px !important; }
html body.touch .vc-panel .al-col:first-child .al-grid { grid-template-columns: 56px !important; }
html body.touch .vc-panel .al-node { width: 56px !important; }
html body.touch .vc-panel .al-ic { width: 40px !important; height: 40px !important; }
html body.touch .vc-panel .al-rank { top: 31px !important; font-size: 9px !important; }
html body.touch .vc-panel .al-nm { font-size: 9px !important; margin-top: 7px; }
html body.touch .vc-panel .al-plus { width: 18px; height: 18px; font-size: 14px; }
html body.touch .panel.vc-panel > .p-body.al-sk { grid-template-columns: 1fr 260px !important; }
html body.touch .vc-panel .al-detail { font-size: 12px; }
html body.touch .al-me small.al-keep { display: block !important; font-size: 11px; line-height: 1.35; }
/* lối build ẩn: hàng trên chỉ còn ô điểm kỹ năng, nằm gọn bên phải */
.al-build.al-only-pts { display: flex !important; justify-content: flex-end; }
.al-build.al-only-pts .al-pts { flex-direction: row; gap: 12px; padding: 6px 14px; }
html body.touch .vc-panel .al-build.al-only-pts { grid-column: 1 / -1; }
/* điện thoại: bảng Võ Công nhẹ máy — tắt nhấp nháy vô hạn, bớt bóng đổ phát sáng (iPhone đơ khi mở bảng) */
html body.touch .vc-panel .al-plus, html body.touch .vc-panel .al-pts b.has { animation: none !important; }
html body.touch .vc-panel .al-plus { box-shadow: 0 0 0 2px #0b2a12 !important; }
html body.touch .vc-panel .al-node .al-ic, html body.touch .vc-panel .al-col, html body.touch .vc-panel .al-detail { box-shadow: none !important; }
html body.touch .vc-panel .al-node.on .al-ic { box-shadow: 0 0 0 1px var(--pc) !important; }
html body.touch .vc-panel .al-ch b, html body.touch .vc-panel .al-pts b { text-shadow: none !important; }
html body.touch .vc-panel .al-ic, html body.touch .vc-panel .al-node:hover .al-ic { transition: none !important; }

/* bảng đã đóng (thuộc tính hidden) thì luôn ẩn — các luật display:flex !important (bảng Võ Công phủ kín màn hình điện thoại) từng đè lên làm bảng không tắt được */
html body .panel[hidden], html body #panel[hidden] { display: none !important; }

/* Màn đăng nhập / chọn nhân vật trên màn thấp (máy tính, tablet cao ≤ 900px): co logo + sân theo chiều cao, nút xếp ngang — vừa 1 màn hình, không phải cuộn */
@media (min-height: 521px) and (max-height: 900px) {
  .lv-login .lv-emblem { width: clamp(48px, 10vh, 96px); height: clamp(48px, 10vh, 96px); }
  .lv-login .lv-title { font-size: clamp(40px, 9.5vh, 88px); }
  .lv-login .lv-tag { margin-top: 2px; font-size: 13px; }
  .lv-login .lv-stage { gap: 6px; padding: 2px 16px 10px; }
  .lv-login .lv-slots.mu-court { height: min(46vh, 470px); }
  .lv-login .lv-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; }
  .lv-login .lv-req-note { margin: 0; }
}

/* chưa đăng nhập: không hiện ô nhân vật, nút đăng nhập Google nằm giữa màn hình */
.lv-login .lv-stage.lv-guest { flex: 1; justify-content: center; padding-bottom: 12vh; }
.lv-login .lv-guest .lv-actions { flex-direction: column !important; gap: 10px !important; }
.lv-login .lv-guest .lv-act-google { font-size: 18px; padding: 14px 30px; }
@media (max-height: 520px) { .lv-login .lv-stage.lv-guest { padding-bottom: 0; } }