/* Khung giao dien JX1 — xem js/jx-shell.js */
:root { --jx-gold: rgb(255, 217, 78); --jx-green: rgb(0, 255, 0); --jx-text: #e8dfc8; --jx-dim: #9d927a; --jx-line: #6e5c34;
  --jx-bg: rgba(16, 13, 9, .94); --jx-font: Tahoma, Arial, sans-serif; }

/* ---------- bo cot the cu: game toan man hinh ---------- */
body.jx-ui #panel { display: none !important; }
body.jx-ui #app { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "top" "battle" "tabs"; }
body.jx-ui #battle { grid-area: battle; min-height: 0; }
body.jx-ui #top { grid-area: top; }
body.jx-ui #tabs { grid-area: tabs; }

/* ---------- thanh nut JX duoi cung ---------- */
body.jx-ui #tabs { position: relative; z-index: 10; display: flex; justify-content: center; gap: 4px; padding: 3px 6px calc(3px + var(--safe-b, 0px));
  background: linear-gradient(#2a2216, #120e08); border-top: 1px solid var(--jx-line); box-shadow: inset 0 1px 0 #ffffff12; }
/* nut thanh cong cu JX1 (ui/jx1/bar/*.png: 3 khung 28x28 thuong / nhan / sang, tools/ui_bar.py) + nhan chu duoi */
body.jx-ui #tabs button { position: relative; flex: 0 1 84px; min-width: 0; max-width: 92px; height: 54px; padding: 0 2px 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #d8c48c;
  font: 11px/1.1 var(--jx-font); text-shadow: 1px 1px 0 #000; white-space: nowrap; }
body.jx-ui #tabs button span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
body.jx-ui #tabs button::before { content: ""; position: static; flex: none; width: 34px; height: 34px; transform: none; filter: none;
  background: var(--jx-ic) 0 0 / 300% 100% no-repeat; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5a4a2a; image-rendering: auto; }
body.jx-ui #tabs button:hover::before, body.jx-ui #tabs button:focus-visible::before { background-position: 100% 0; }
body.jx-ui #tabs button:active::before { background-position: 50% 0; }
body.jx-ui #tabs button:hover { color: #fff0b8; filter: none; }
body.jx-ui #tabs button.on { color: var(--jx-gold); background: transparent; box-shadow: none; }
body.jx-ui #tabs button.on::before { background-position: 100% 0; box-shadow: 0 0 0 1px #000, 0 0 0 2px #e0b54a, 0 0 8px #ffd24a88; }
body.jx-ui #tabs button .dot { position: absolute; right: calc(50% - 22px); top: 1px; }

/* ---------- cua so JX dung chung ---------- */
/* cac cua so (ke ca #jx1Win / #jx1Bag) chi chiem phan tren thanh nut, de thanh nut luon bam duoc */
body.jx-ui #jx1Win, body.jx-ui #jx1Bag { bottom: var(--jx-nav-h, 54px); }
.jxw-layer { position: absolute; inset: 0 0 var(--jx-nav-h, 54px); z-index: 9; display: flex; align-items: center; justify-content: center; padding: 8px;
  background: rgba(0, 0, 0, .45); }
.jxw-layer.hidden { display: none; }
.jxw { position: relative; display: flex; flex-direction: column; width: min(100%, var(--jxw-w, 560px)); max-height: 100%;
  padding: 63px 18px 24px; color: var(--jx-text); font: 13px/1.45 var(--jx-font); text-shadow: 1px 1px 0 #000; }
/* nen trong + khung 9 manh (63/44/21/44 px, xem tools/ui_frame9.py) */
.jxw::before { content: ""; position: absolute; inset: 10px 8px 8px; background: var(--jx-bg); z-index: -1; }
.jxw::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-style: solid; border-width: 63px 44px 21px;
  border-image: url('ui/jx1/khung9.png') 63 44 21 44 round; }
.jxw { isolation: isolate; }
.jxw-title { position: absolute; left: 60px; right: 60px; top: 29px; height: 26px; display: flex; align-items: center; justify-content: center; z-index: 1;
  /* Tahoma dam, khong viet hoa: dau tieng Viet ro tren nen giay (Times hoa + vien mo lam dau nhoe, dai ca 06/10/2026) */
  font: 700 15px/1 var(--jx-font); letter-spacing: .5px; color: #24180a; text-shadow: 0 1px 0 #fff6d6, 0 0 2px #fff3c4; }
.jxw-x { position: absolute; right: 14px; top: 30px; z-index: 2; width: 26px; height: 24px; padding: 0; border: 1px solid #8a7240; border-radius: 0;
  background: linear-gradient(#4a3c22, #241c10); color: #f3dfa2; font: 13px/1 var(--jx-font); cursor: pointer; }
.jxw-x:hover { filter: brightness(1.3); }
.jxw-body { position: relative; z-index: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #6e5c34 transparent; }
/* the cu muon lam than cua so: bo khung / chieu cao cu */
.jxw-body > .tab { height: auto; overflow: visible; padding: 2px 2px 6px; }

/* dien thoai: cua so phu gan kin man hinh */
@media (max-width: 640px), (orientation: portrait) {
  .jxw-layer { padding: 4px; align-items: stretch; }
  .jxw { width: 100%; padding: 60px 12px 22px; }
  .jxw-title { left: 52px; right: 52px; }
}

/* bo nut thu phong (che do gon): giao dien JX luon toan man hinh, thanh nut duoi luon hien (dai ca 06/10/2026) */
body.jx-ui #compactBtn { display: none !important; }
body.jx-ui.compact #tabs { display: flex !important; }

/* thong bao noi (#toast) kieu JX: khung den vien vang, goc vuong; dat giua man o tren nhu thong bao he thong JX1, khong de day cua so */
body.jx-ui #toast { top: 22%; bottom: auto; max-width: min(92%, 520px); padding: 7px 14px; border: 1px solid #8a7240; border-radius: 0;
  background: rgba(16, 13, 9, .94); box-shadow: 0 0 0 1px #000, 0 6px 18px #000a; color: #f3dfa2; font: 13px/1.4 var(--jx-font);
  text-align: center; text-shadow: 1px 1px 0 #000; z-index: 30; }
/* dien thoai: #app phong 125% roi thu 0.8 -> chan trang bi cuon lech khi mo hop thoai / focus o nhap */
html { overflow-x: hidden; }
body.jx-ui.mob { overflow: hidden; }

/* nut Chuot/Joystick xuong day, chung hang voi nut Tan gau; nut Tan gau cung kieu (icon + chu) — dai ca 06/10/2026 */
body.jx-ui #inBtn { left: 10px !important; right: auto !important; top: auto !important; bottom: 10px !important; height: 32px; min-height: 32px; box-sizing: border-box; }
body.jx-ui #worldChat .wc-toggle { display: inline-flex; align-items: center; gap: 7px; width: auto; height: 32px; min-height: 32px; box-sizing: border-box;
  padding: 3px 12px 3px 9px; border: 1px solid var(--gold2); border-radius: 12px; background: #000a; color: var(--gold);
  font: 12px/1 var(--font); white-space: nowrap; box-shadow: 0 3px 9px #000b; }
body.jx-ui #worldChat .wc-toggle .input-mode-icon { display: block; flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 1px 2px #0009); }
body.jx-ui #worldChat .wc-toggle .wc-unread { position: absolute; top: -4px; right: -4px; }
/* may tinh: Tan gau dung ngay ben phai nut Chuot / Joystick (--jx-chat-x do jx-shell.js do theo be rong nut); dien thoai giu cho joystick nhu cu */
body.jx-ui.deskland #worldChat .wc-toggle { left: var(--jx-chat-x, 102px); }
/* dien thoai: #app thu 0.8 -> nut Tan gau to hon cho de cham (~32px that) */
body.jx-ui.mob #worldChat .wc-toggle { height: 40px; min-height: 40px; padding: 4px 14px 4px 10px; font-size: 14px; }
body.jx-ui.mob #worldChat .wc-toggle .input-mode-icon { flex-basis: 24px; width: 24px; height: 24px; }
/* bo o qua tren thanh tren (dai ca 06/10/2026): qua mo trong Hoat dong; cham do qua da hien tren nut Hoat dong (#dotAct, jx-act.js) */
body.jx-ui #giftBtn { display: none !important; }
/* bo o tien tren thanh tren (dai ca 06/10/2026): tien dong + KNB xem trong Hanh trang */
body.jx-ui #top .gold { display: none !important; }