/* =====================================================================
 * HOAN LẠC TRẤN — giao diện pixel dùng chung (khung 9-slice + nút gọn + chữ Noto Sans).
 * Chỉ áp khi wx_pixel_frames.js đã dựng khung (class .wx-pf trên <html>); nếu không, các tệp CSS cũ vẫn chạy như trước.
 * Khung/nút là ảnh sinh từ canvas, đưa vào biến --wx-i-* (btn, btn-h, btn-a, btn-p, btn-ph, btn-pa, box, panel, frame, slot, slot-on).
 * Nạp SAU wx_game.css, wx_uishell.css. Dùng :where() để giữ độ ưu tiên thấp, các quy tắc riêng (hộp thoại NPC) vẫn thắng.
 * 1 điểm UI = 2px. Nút cao 12 điểm; vùng bấm vẫn đủ 44px nhờ ::after.
 * ===================================================================== */

html.wx-pf { --wx-font: "Noto Sans", Arial, sans-serif; --wx-ink: #1b1418; }

/* ---------- Nút gọn ---------- */
html.wx-pf :where(
  .wx-btn, .wx-tut-box button, .wx-panel-wrap button:not(.wx-panel-x), .wx-game-inner button:not(.wx-menu-btn):not(.wx-move-btn):not(.wx-choice-btn),
  .wx-journey-content button, .wx-journey-nav button, .wx-journey-open, .wx-tabs button, .wx-hub-nav button, .wx-world-map-tabs button,
  .wx-bonus-box button, .wx-char-info button, .wx-shell-actions button, .wx-shell-hub button, .wx-world-map-head button, .wx-skip
) {
  position: relative; box-sizing: border-box; min-height: 24px; height: auto; min-width: 0;
  padding: 2px 8px; margin-top: 0;
  border: 4px solid #6b5230; border-image: var(--wx-i-btn) 2 fill stretch; border-radius: 0;
  background: none; box-shadow: none; transition: none;
  color: #e8dcc0; font: 600 13px/1.25 var(--wx-font); letter-spacing: 0; text-shadow: 1px 1px 0 var(--wx-ink);
  cursor: pointer;
}
html.wx-pf :where(.wx-btn, .wx-tut-box button, .wx-panel-wrap button:not(.wx-panel-x), .wx-game-inner button:not(.wx-menu-btn):not(.wx-move-btn):not(.wx-choice-btn),
  .wx-journey-content button, .wx-journey-nav button, .wx-journey-open, .wx-tabs button, .wx-hub-nav button, .wx-world-map-tabs button,
  .wx-bonus-box button, .wx-char-info button, .wx-shell-actions button, .wx-shell-hub button, .wx-world-map-head button, .wx-skip)::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: -10px; bottom: -10px;
}
html.wx-pf :where(.wx-btn, .wx-tut-box button, .wx-panel-wrap button:not(.wx-panel-x), .wx-game-inner button:not(.wx-menu-btn):not(.wx-move-btn):not(.wx-choice-btn),
  .wx-journey-content button, .wx-journey-nav button, .wx-journey-open, .wx-tabs button, .wx-hub-nav button, .wx-world-map-tabs button,
  .wx-bonus-box button, .wx-char-info button, .wx-shell-actions button, .wx-shell-hub button, .wx-world-map-head button, .wx-skip):hover:not(:disabled) {
  border-image-source: var(--wx-i-btn-h); color: #f0d58c;
}
html.wx-pf :where(.wx-btn, .wx-tut-box button, .wx-panel-wrap button:not(.wx-panel-x), .wx-game-inner button:not(.wx-menu-btn):not(.wx-move-btn):not(.wx-choice-btn),
  .wx-journey-content button, .wx-journey-nav button, .wx-journey-open, .wx-tabs button, .wx-hub-nav button, .wx-world-map-tabs button,
  .wx-bonus-box button, .wx-char-info button, .wx-shell-actions button, .wx-shell-hub button, .wx-world-map-head button, .wx-skip):active:not(:disabled) {
  border-image-source: var(--wx-i-btn-a); padding-top: 4px; padding-bottom: 0; text-shadow: none;
}
/* nút chính / đang chọn */
html.wx-pf :is(.wx-shell-hub button.wx-shell-hub-main, .wx-btn.pri, .wx-tut-box button.pri, button.wx-primary) {
  border-color: #a8352a; border-image-source: var(--wx-i-btn-p); color: #fff2c8; background: none; font-weight: 600;
}
html.wx-pf :is(.wx-shell-hub button.wx-shell-hub-main, .wx-btn.pri, .wx-tut-box button.pri, button.wx-primary):hover:not(:disabled) { border-image-source: var(--wx-i-btn-ph); color: #fff; }
html.wx-pf :is(.wx-shell-hub button.wx-shell-hub-main, .wx-btn.pri, .wx-tut-box button.pri, button.wx-primary):active:not(:disabled) { border-image-source: var(--wx-i-btn-pa); }
html.wx-pf :is(.wx-tabs button.on, .wx-hub-nav button.on, .wx-world-map-tabs button.on, .wx-journey-nav [aria-pressed="true"]) {
  border-image-source: var(--wx-i-btn-h); color: #f0d58c; outline: 0;
}
html.wx-pf :is(.wx-btn, .wx-tut-box button, .wx-panel-wrap button, .wx-game-inner button, .wx-journey-content button, .wx-shell-hub button, .wx-shell-actions button):disabled { opacity: .5; cursor: default; }
html.wx-pf :is(.wx-tut-box button, .wx-tut-btns button).wx-secondary { border-color: #4a3b28; color: #c9b98f; }
html.wx-pf .wx-tut-btns button { flex: 1; }

/* Hub và nút góc: kích thước riêng */
html.wx-pf .wx-shell-hub button { min-height: 28px; padding: 3px 9px; font-size: 12px; white-space: nowrap; }
html.wx-pf .wx-shell-actions button { min-height: 24px; min-width: 64px; padding: 2px 6px; font-size: 11px; }
html.wx-pf .wx-journey-open { position: fixed; min-height: 28px; padding: 3px 10px; }
html.wx-pf .wx-skip { position: absolute; top: max(12px, env(safe-area-inset-top)); }

/* ---------- Nút dạng thẻ (nhiều dòng) ---------- */
html.wx-pf :where(.wx-menu-btn, .wx-move-btn, .wx-choice-btn, .wx-choice) {
  box-sizing: border-box; border: 4px solid #6b5230; border-image: var(--wx-i-btn) 2 fill stretch; border-radius: 0;
  background: none; box-shadow: none; transition: none; color: #e8dcc0;
  font-family: var(--wx-font); font-weight: 600; text-shadow: 1px 1px 0 var(--wx-ink);
}
html.wx-pf :where(.wx-menu-btn, .wx-move-btn, .wx-choice-btn, .wx-choice):hover:not(:disabled) { border-image-source: var(--wx-i-btn-h); background: none; color: #f0d58c; }
html.wx-pf :where(.wx-menu-btn, .wx-move-btn, .wx-choice-btn, .wx-choice):active:not(:disabled) { border-image-source: var(--wx-i-btn-a); text-shadow: none; }
html.wx-pf :where(.wx-menu-btn, .wx-move-btn, .wx-choice-btn) small { font-weight: 500; text-shadow: none; }
html.wx-pf .wx-choice-label { font-weight: 600; }

/* Nút đóng (×) của panel: chữ trần, không khung */
html.wx-pf .wx-panel-x { font-family: var(--wx-font); font-weight: 600; text-shadow: 1px 1px 0 var(--wx-ink); border: 0; background: none; }

/* ---------- Khung nền ---------- */
html.wx-pf :where(.wx-hud, .wx-panel, .wx-tut-box, .wx-world-map, .wx-world-detail, .wx-game-hud, .wx-combat-log, .wx-char-preview-wrap, .wx-bonus-box, .wx-rewards) {
  box-sizing: border-box; border: 4px solid #a8874e; border-image: var(--wx-i-panel) 2 fill stretch; border-radius: 0;
  background: none; box-shadow: none;
}
html.wx-pf :where(.wx-shell-quest, .wx-shell-legend, .wx-map-toast, .wx-shell-hub) {
  box-sizing: border-box; border: 4px solid #a8874e; border-image: var(--wx-i-box) 2 fill stretch; border-radius: 0;
  background: none; box-shadow: none;
}
html.wx-pf .wx-hud::before, html.wx-pf .wx-shell-quest::after { display: none; }
html.wx-pf .wx-shell-hub { padding: 1px 3px; }
html.wx-pf .wx-hud { padding: 4px 8px; }
html.wx-pf .wx-shell-quest { padding: 4px 8px; }
html.wx-pf .wx-shell-legend { padding: 2px 8px; }
html.wx-pf .wx-map-toast { padding: 6px 14px; font-family: var(--wx-font); font-weight: 600; text-shadow: 1px 1px 0 var(--wx-ink); }
html.wx-pf .wx-shell-minimap { box-sizing: border-box; border: 4px solid #a8874e; border-image: var(--wx-i-panel) 2 fill stretch; border-radius: 0; outline: 0; box-shadow: none; }
html.wx-pf :where(.wx-inv-item, .wx-equip-slot, .wx-skill-slot, .wx-world-node) {
  box-sizing: border-box; border: 4px solid #5c4529; border-image: var(--wx-i-slot) 2 fill stretch; border-radius: 0; background: none; box-shadow: none;
}
html.wx-pf :is(.wx-inv-item.equipped, .wx-equip-slot.pick, .wx-world-node.here) { border-image-source: var(--wx-i-slot-on); box-shadow: none; }
html.wx-pf .wx-world-node { min-width: 72px; }
html.wx-pf .wx-panel-head { font-family: var(--wx-font); font-weight: 600; letter-spacing: 1px; text-shadow: 1px 1px 0 var(--wx-ink); }
html.wx-pf :where(.wx-spk-img, .wx-fighter img) { border: 4px solid #a8874e; border-image: var(--wx-i-frame) 3 fill stretch; border-width: 6px; border-radius: 0; box-sizing: content-box; }

/* ---------- Chữ ---------- */
html.wx-pf :where(.wx-hud, .wx-shell-quest, .wx-shell-legend, .wx-game-hud) { font-family: var(--wx-font); }
html.wx-pf :where(.wx-hud-name, .wx-shell-quest-title, .wx-hud-bac b, .wx-hud-fame b) { font-weight: 600; text-shadow: 1px 1px 0 var(--wx-ink); }
html.wx-pf :where(.wx-hud-bar-label, .wx-hud-bar-num, .wx-hud-realm, .wx-hud-bac, .wx-hud-fame, .wx-shell-quest-obj) { font-weight: 500; text-shadow: 1px 1px 0 var(--wx-ink); }

/* ---------- Thanh tài nguyên: ba tông phẳng, đỉnh sáng / thân / đáy tối, không bo, không gradient mượt ---------- */
html.wx-pf .wx-hud-bar-track, html.wx-pf .wx-bar {
  border: 2px solid var(--wx-ink); border-radius: 0; background: #0d0a07; box-shadow: none; overflow: hidden;
}
html.wx-pf .wx-hud-bar-fill, html.wx-pf .wx-bar > div { border-radius: 0; box-shadow: none; transition: width .2s steps(8, end); }
html.wx-pf .wx-hud-bar--hp .wx-hud-bar-fill, html.wx-pf .wx-bar-hp > div { background: linear-gradient(#ef6a54 0 2px, #c43a2e 2px calc(100% - 2px), #8a2018 0); }
html.wx-pf .wx-hud-bar--noiLuc .wx-hud-bar-fill, html.wx-pf .wx-bar-nl > div { background: linear-gradient(#7aa4f0 0 2px, #3f6fd0 2px calc(100% - 2px), #1f3a7a 0); }
html.wx-pf .wx-hud-bar--theLuc .wx-hud-bar-fill, html.wx-pf .wx-bar-tl > div { background: linear-gradient(#7ad07e 0 2px, #3f9a4a 2px calc(100% - 2px), #1f5a2a 0); }
html.wx-pf .wx-hud-bar--the .wx-hud-bar-fill { background: linear-gradient(#f0b45a 0 2px, #d0842a 2px calc(100% - 2px), #7a4a14 0); }
html.wx-pf .wx-hud-bar--tamCanh .wx-hud-bar-fill { background: linear-gradient(#b884e8 0 2px, #8a4ac0 2px calc(100% - 2px), #4a2478 0); }
html.wx-pf .wx-shell-top .wx-hud-bar-track { height: 8px; }

/* ---------- Hộp thoại mở đầu (prologue): cùng khung mờ như hộp thoại NPC ---------- */
html.wx-pf .wx-dialog {
  border: 4px solid #a8874e; border-image: var(--wx-i-box) 2 fill stretch; border-radius: 0; background: none; box-shadow: none;
  padding: 14px 20px 10px;
}
html.wx-pf .wx-dialog.has-portrait { padding-left: 108px; min-height: 100px; }
html.wx-pf .wx-portrait { left: 16px; top: 14px; width: 64px; height: 64px; box-sizing: content-box; border: 6px solid #a8874e; border-image: var(--wx-i-frame) 3 fill stretch; border-radius: 0; background: none; }
html.wx-pf .wx-speaker {
  position: absolute; top: -20px; left: 24px; box-sizing: border-box; height: 24px; min-width: 56px; margin: 0; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
  border: 4px solid #a8352a; border-image: var(--wx-i-btn-p) 2 fill stretch; color: #fff2c8; letter-spacing: 0;
  font: 600 13px/1 var(--wx-font); text-shadow: 1px 1px 0 var(--wx-ink);
}
html.wx-pf .wx-dialog.has-portrait .wx-speaker { left: 100px; }
html.wx-pf .wx-next-hint { letter-spacing: 2px; }
/* Lời nhân vật (hộp có chân dung) dùng Noto Sans như hộp thoại NPC; lời dẫn truyện và thẻ chương giữ Noto Serif. */
html.wx-pf .wx-dialog.has-portrait .wx-text { font: 600 15px/1.7 var(--wx-font); text-shadow: 1px 1px 0 var(--wx-ink); }
@media (max-width: 600px) {
  html.wx-pf .wx-dialog.has-portrait { padding-left: 96px; }
  html.wx-pf .wx-portrait { width: 56px; height: 56px; left: 14px; top: 12px; }
  html.wx-pf .wx-dialog.has-portrait .wx-speaker { left: 88px; }
}

/* ---------- Màn hình chờ: giữ nút lớn, đổi sang khung pixel ---------- */
html.wx-pf #wx-boot button {
  box-sizing: border-box; border: 4px solid #a8352a; border-image: var(--wx-i-btn-p) 2 fill stretch; border-radius: 0; background: none;
  color: #fff2c8; padding: 12px 14px; font: 600 16px/1.2 var(--wx-font); letter-spacing: 1px; text-shadow: 1px 1px 0 var(--wx-ink);
}
html.wx-pf #wx-boot button:hover { border-image-source: var(--wx-i-btn-ph); color: #fff; }
html.wx-pf #wx-boot button.wx-secondary { border-color: #6b5230; border-image-source: var(--wx-i-btn); color: #e8dcc0; }
html.wx-pf #wx-boot button.wx-secondary:hover { border-image-source: var(--wx-i-btn-h); color: #f0d58c; }