/* scene.css — canvas เกม, แผนที่ย่อ, แถบคำสั่งต่อสู้ และหน้าต่างผลการต่อสู้ (Scenes agent) */

#game {
  position: fixed;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  display: block;
  z-index: 0;
  background: #0b0907;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  image-rendering: auto;
}

/* ---------------------------------------------------------------- แผนที่ย่อ */
#minimap {
  --mm: 170px;
  box-sizing: content-box;
  position: fixed;
  top: 10px; right: 10px;
  width: var(--mm);
  z-index: 25;
  padding: 6px 6px 4px;
  background: linear-gradient(180deg, #221a13 0%, #14100c 100%);
  border: 2px solid #c9a45c;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #3a2a16, 0 0 0 3px rgba(201, 164, 92, 0.25), 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 0 12px rgba(0, 0, 0, 0.6);
  user-select: none;
}
#minimap::before, #minimap::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border: 2px solid #e8c77a;
  pointer-events: none;
}
#minimap::before { top: -5px; left: -5px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
#minimap::after { bottom: -5px; right: -5px; border-left: none; border-top: none; border-radius: 0 0 4px 0; }
#minimap .mm-canvas {
  box-sizing: border-box;
  display: block;
  width: var(--mm);
  height: calc(var(--mm) * 0.74);
  background: #0b0907;
  border: 1px solid rgba(201, 164, 92, 0.45);
  border-radius: 3px;
  image-rendering: pixelated;
  cursor: crosshair;
  touch-action: none;
}
#minimap .mm-coord {
  margin-top: 3px;
  font: 500 11px 'Kanit', 'Sarabun', sans-serif;
  color: #e8d8b0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}
@media (max-width: 700px), (max-height: 520px) {
  #minimap { --mm: 118px; top: 8px; right: 8px; padding: 4px 4px 2px; }
  #minimap .mm-coord { font-size: 10px; }
}

/* ---------------------------------------------------------------- ฉากต่อสู้ */
#battle-ui {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  display: none;
  font-family: 'Sarabun', 'Kanit', sans-serif;
  color: #f3e6c8;
}
#battle-ui.on { display: block; animation: bt-ui-in 0.3s ease-out 0.45s both; }
@keyframes bt-ui-in { from { opacity: 0; } to { opacity: 1; } }
#battle-ui button { font-family: 'Kanit', 'Sarabun', sans-serif; }

/* บันทึกการต่อสู้ */
#battle-ui .bt-log {
  position: absolute;
  top: 10px; left: 10px;
  width: min(380px, 42vw);
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.45;
  background: linear-gradient(90deg, rgba(16, 11, 8, 0.78), rgba(16, 11, 8, 0.35));
  border-left: 3px solid #c9a45c;
  border-radius: 0 6px 6px 0;
  pointer-events: auto;
  text-shadow: 0 1px 2px #000;
}
#battle-ui .bt-log:empty { display: none; }
#battle-ui .bt-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#battle-ui .bt-log .ally { color: #d8ecff; }
#battle-ui .bt-log .enemy { color: #ffd2c8; }
#battle-ui .bt-log .sys { color: #ffe08a; }

/* สถานะผู้เล่น/ปาร์ตี้ */
/* มุมขวาบน (แผนที่ย่อซ่อนระหว่างต่อสู้) — ไม่ชนแถบคำสั่งด้านล่าง */
#battle-ui .bt-party {
  position: absolute;
  right: 12px; top: 12px;
  width: 236px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: auto;
}
#battle-ui .bt-pm {
  padding: 3px 7px 5px;
  background: linear-gradient(180deg, rgba(34, 26, 19, 0.92), rgba(20, 16, 12, 0.92));
  border: 1px solid rgba(201, 164, 92, 0.55);
  border-radius: 7px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}
#battle-ui .bt-pm.me { border-color: #e8c77a; box-shadow: 0 0 0 1px rgba(232, 199, 122, 0.35), 0 3px 12px rgba(0, 0, 0, 0.5); }
#battle-ui .bt-pm.dead { filter: grayscale(0.85); opacity: 0.75; }
#battle-ui .bt-pm.gone { opacity: 0.4; }
#battle-ui .bt-pm-name { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 2px; }
#battle-ui .bt-pm-bars { display: flex; gap: 4px; }
#battle-ui .bt-pm-bars .hp { flex: 1.2; }
#battle-ui .bt-pm-bars .mp { flex: 1; }
#battle-ui .bt-pm-bars .bt-bar { margin-top: 0; min-width: 0; }
#battle-ui .bt-pm-name span { font: 600 13px 'Kanit', sans-serif; color: #ffe7a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#battle-ui .bt-pm:not(.me) .bt-pm-name span { color: #d8ecff; }
#battle-ui .bt-pm-name small { font: 400 11px 'Kanit', sans-serif; color: #c8b896; white-space: nowrap; }
#battle-ui .bt-bar {
  position: relative;
  height: 12px;
  margin-top: 2px;
  background: #2a1e18;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 3px;
  overflow: hidden;
}
#battle-ui .bt-bar i { position: absolute; left: 0; top: 0; bottom: 0; transition: width 0.35s ease; }
#battle-ui .bt-bar.hp i { background: linear-gradient(180deg, #ff8a6a, #c8302a); }
#battle-ui .bt-bar.mp i { background: linear-gradient(180deg, #7ab4ff, #2f5fc0); }
#battle-ui .bt-bar em {
  position: absolute; inset: 0;
  font: normal 500 10px/12px 'Kanit', sans-serif;
  white-space: nowrap; overflow: hidden;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 1px #000, 0 0 2px #000;
}

/* แถบคำสั่ง */
#battle-ui .bt-cmd {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  width: min(660px, calc(100vw - 24px));
  padding: 8px 10px 10px;
  background: linear-gradient(180deg, rgba(38, 28, 20, 0.96), rgba(18, 13, 10, 0.96));
  border: 2px solid #c9a45c;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #3a2a16, 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 230, 170, 0.12);
  pointer-events: auto;
  display: none;
  animation: bt-rise 0.22s ease-out;
}
#battle-ui .bt-cmd.on { display: flex; flex-direction: column; }
#battle-ui .bt-cmd.wide { width: min(660px, calc(100vw - 24px)); }
@keyframes bt-rise { from { transform: translate(-50%, 18px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
#battle-ui .bt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
#battle-ui .bt-round { font: 600 13px 'Kanit', sans-serif; color: #ffe08a; white-space: nowrap; }
#battle-ui .bt-timer { flex: 1; height: 8px; background: #2a1e18; border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 4px; overflow: hidden; }
#battle-ui .bt-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #c9a45c, #ffe08a); transition: width 0.25s linear; }
#battle-ui .bt-timer i.low { background: linear-gradient(90deg, #8e2b2b, #ff6a4a); }
#battle-ui .bt-sec { font: 600 13px 'Kanit', sans-serif; min-width: 22px; text-align: right; color: #f3e6c8; }
#battle-ui .bt-auto { display: flex; align-items: center; gap: 4px; font: 500 12px 'Kanit', sans-serif; color: #e8d8b0; cursor: pointer; padding: 2px 8px; border: 1px solid rgba(201, 164, 92, 0.5); border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
#battle-ui .bt-auto input { accent-color: #c9a45c; margin: 0; width: 14px; height: 14px; }
#battle-ui .bt-main { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
#battle-ui .bt-main button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 54px;
  padding: 4px 2px;
  font-size: 14px; font-weight: 500;
  color: #f3e6c8;
  background: linear-gradient(180deg, #5a2420 0%, #3a1614 100%);
  border: 1px solid #c9a45c;
  border-radius: 7px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 210, 160, 0.2), 0 2px 0 #1a0a08;
  transition: transform 0.08s, filter 0.12s, background 0.12s;
  touch-action: manipulation;
}
#battle-ui .bt-main button b { font-size: 19px; line-height: 1.1; font-weight: 400; }
#battle-ui .bt-main button:hover:not(:disabled) { filter: brightness(1.25); }
#battle-ui .bt-main button:active:not(:disabled) { transform: translateY(1px); }
#battle-ui .bt-main button.sel { background: linear-gradient(180deg, #8e3a2a 0%, #5a2018 100%); border-color: #ffe08a; box-shadow: 0 0 0 1px #ffe08a, 0 0 10px rgba(255, 210, 120, 0.4); }
#battle-ui .bt-main button:disabled { filter: grayscale(1); opacity: 0.45; cursor: not-allowed; }
#battle-ui .bt-sub:empty { display: none; }
#battle-ui .bt-sub { margin: 0 0 8px; order: -1; max-height: 38vh; overflow-y: auto; }
#battle-ui .bt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 5px; max-height: 168px; overflow-y: auto; padding-right: 2px; }
#battle-ui .bt-list button {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 6px;
  text-align: left;
  padding: 5px 8px;
  color: #f3e6c8;
  background: rgba(20, 15, 11, 0.9);
  border: 1px solid rgba(201, 164, 92, 0.55);
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
}
#battle-ui .bt-list button:hover:not(:disabled) { background: rgba(80, 40, 24, 0.95); border-color: #ffe08a; }
#battle-ui .bt-list button:disabled { opacity: 0.45; cursor: not-allowed; }
#battle-ui .bt-list .nm { font: 500 13px 'Kanit', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#battle-ui .bt-list .nm em { font-style: normal; font-size: 11px; color: #ffe08a; margin-left: 2px; }
#battle-ui .bt-list .mp { font: 500 11px 'Kanit', sans-serif; color: #8ec0ff; white-space: nowrap; }
#battle-ui .bt-list .tg { font-size: 11px; color: #b8a888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* แถวสกิล: [ไอคอน] ชื่อ Lv / เป้าหมาย · SP */
#battle-ui .bt-list button[data-skill] {
  grid-template-columns: 30px 1fr auto;
  grid-template-areas: "ic nm nm" "ic tg mp";
  border-left: 3px solid var(--elc, #c9a45c);
}
#battle-ui .bt-list button[data-skill] .nm { grid-area: nm; }
#battle-ui .bt-list button[data-skill] .tg { grid-area: tg; }
#battle-ui .bt-list button[data-skill] .mp { grid-area: mp; }
#battle-ui .bt-list button[data-skill] img,
#battle-ui .bt-list button[data-skill] .bt-sk-dot { grid-area: ic; width: 28px; height: 28px; image-rendering: pixelated; border-radius: 5px; }
#battle-ui .bt-list .bt-sk-dot { display: block; background: radial-gradient(circle at 35% 35%, #fff8 0 18%, var(--elc, #c9a45c) 20% 62%, #0006 64%); }
#battle-ui .bt-list.items button { grid-template-columns: 30px 1fr auto; grid-template-rows: auto; }
#battle-ui .bt-list.items img, #battle-ui .bt-list.items i { width: 28px; height: 28px; image-rendering: pixelated; }
#battle-ui .bt-el {
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 5px;
  vertical-align: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.85);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.45);
}
#battle-ui .bt-list .qty { font: 500 12px 'Kanit', sans-serif; color: #ffe08a; }
#battle-ui .bt-empty { padding: 8px; text-align: center; font-size: 13px; color: #c8b896; }
#battle-ui .bt-hint { font: 500 13px 'Kanit', sans-serif; color: #ffe08a; margin-bottom: 6px; }
#battle-ui .bt-hint small { color: #b8a888; font-weight: 400; }
#battle-ui .bt-targets { display: flex; flex-wrap: wrap; gap: 5px; }
#battle-ui .bt-targets button {
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 10px;
  font-size: 13px;
  color: #f3e6c8;
  background: rgba(20, 15, 11, 0.9);
  border: 1px solid rgba(201, 164, 92, 0.55);
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
}
#battle-ui .bt-targets button small { font-size: 10px; color: #c8b896; }
#battle-ui .bt-targets button.foe { border-color: rgba(255, 110, 90, 0.7); }
#battle-ui .bt-targets button.ally { border-color: rgba(110, 255, 150, 0.6); }
#battle-ui .bt-targets button:hover { filter: brightness(1.3); }
#battle-ui .bt-targets .bt-cancel { margin-left: auto; justify-content: center; color: #ffb0a0; border-color: rgba(255, 140, 120, 0.5); }

/* รอผู้เล่นอื่น */
#battle-ui .bt-wait {
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  padding: 9px 18px;
  background: rgba(18, 13, 10, 0.88);
  border: 1px solid rgba(201, 164, 92, 0.7);
  border-radius: 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  display: none;
  text-align: center;
  pointer-events: auto;
  max-width: calc(100vw - 24px);
}
#battle-ui .bt-wait.on { display: block; }
#battle-ui .bt-wait-msg { font: 500 14px 'Kanit', sans-serif; color: #f3e6c8; display: flex; align-items: center; justify-content: center; gap: 8px; }
#battle-ui .bt-wait-msg b { color: #ffe08a; font-weight: 500; min-width: 16px; }
#battle-ui .spin { width: 14px; height: 14px; border: 2px solid rgba(201, 164, 92, 0.35); border-top-color: #ffe08a; border-radius: 50%; animation: bt-spin 0.8s linear infinite; }
@keyframes bt-spin { to { transform: rotate(360deg); } }
#battle-ui .bt-ready { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 4px; font: 400 12px 'Kanit', sans-serif; color: #b8a888; }
#battle-ui .bt-ready .ok { color: #7aff9a; }
#battle-ui .bt-auto-off {
  margin-top: 6px;
  padding: 2px 12px;
  font: 500 12px 'Kanit', sans-serif;
  color: #ffe08a;
  background: rgba(90, 40, 20, 0.6);
  border: 1px solid rgba(201, 164, 92, 0.6);
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
}

/* หน้าต่างผลการต่อสู้ */
#battle-ui .bt-result {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.7));
  pointer-events: auto;
}
#battle-ui .bt-result.on { display: flex; animation: bt-fade 0.3s ease-out; }
@keyframes bt-fade { from { opacity: 0; } to { opacity: 1; } }
#battle-ui .bt-res-box {
  position: relative;
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 18px 22px 18px;
  text-align: center;
  background: linear-gradient(180deg, #2a1f16 0%, #17110c 100%);
  border: 2px solid #c9a45c;
  border-radius: 12px;
  box-shadow: 0 0 0 1px #3a2a16, 0 0 0 5px rgba(201, 164, 92, 0.18), 0 16px 40px rgba(0, 0, 0, 0.7);
  animation: bt-pop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes bt-pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#battle-ui .bt-res-title {
  font: 700 40px/1.2 'Kanit', sans-serif;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fff2c0 10%, #e8b44a 60%, #a8741e 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #3a1a08) drop-shadow(0 0 10px rgba(255, 200, 90, 0.35));
}
#battle-ui .bt-res-box.lose .bt-res-title { background-image: linear-gradient(180deg, #e8d8d0 10%, #a87a70 60%, #5a3a34 100%); filter: drop-shadow(0 2px 0 #1a0a08); }
#battle-ui .bt-res-box.escape .bt-res-title { background-image: linear-gradient(180deg, #eef8ff 10%, #8ec0e8 60%, #3a6a9a 100%); filter: drop-shadow(0 2px 0 #08121a); }
#battle-ui .bt-res-box.lose { border-color: #8a6a5a; }
#battle-ui .bt-res-lv {
  margin: 6px auto 4px;
  display: inline-block;
  padding: 3px 14px;
  font: 600 16px 'Kanit', sans-serif;
  color: #3a1a00;
  background: linear-gradient(180deg, #fff0a8, #e8b030);
  border-radius: 14px;
  box-shadow: 0 0 14px rgba(255, 210, 90, 0.6);
  animation: bt-glow 1.2s ease-in-out infinite alternate;
}
@keyframes bt-glow { from { box-shadow: 0 0 6px rgba(255, 210, 90, 0.4); } to { box-shadow: 0 0 18px rgba(255, 210, 90, 0.85); } }
#battle-ui .bt-res-note { margin: 6px 0; font-size: 14px; color: #d8c8b0; }
#battle-ui .bt-res-note.small { margin: 2px 0 4px; font-size: 12px; color: #e8d090; }
#battle-ui .bt-res-sec { margin: 10px 0 2px; font: 500 12px 'Kanit', sans-serif; color: #c8b896; letter-spacing: 0.3px; }
#battle-ui .bt-res-rows { margin: 10px 0 6px; display: flex; flex-direction: column; gap: 4px; }
#battle-ui .bt-res-rows div { display: flex; justify-content: space-between; padding: 4px 10px; background: rgba(0, 0, 0, 0.28); border-radius: 5px; font-size: 14px; }
#battle-ui .bt-res-rows b { font: 600 15px 'Kanit', sans-serif; }
#battle-ui .bt-res-rows .exp { color: #9fe08a; }
#battle-ui .bt-res-rows .bad { color: #ff9a8a; }
#battle-ui .bt-res-rows .gold { color: #ffd04a; }
#battle-ui .bt-res-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0; }
#battle-ui .bt-res-item { display: flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(201, 164, 92, 0.45); border-radius: 6px; font: 500 13px 'Kanit', sans-serif; }
#battle-ui .bt-res-item img { width: 26px; height: 26px; image-rendering: pixelated; }
#battle-ui .bt-res-quests { margin: 6px 0; text-align: left; font-size: 13px; color: #ffe8b0; display: flex; flex-direction: column; gap: 2px; }
#battle-ui .bt-res-btn {
  margin-top: 12px;
  padding: 9px 26px;
  font: 600 16px 'Kanit', sans-serif;
  color: #fff3d0;
  background: linear-gradient(180deg, #a83a2a, #6a1e16);
  border: 1px solid #ffd27a;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 3px 0 #2a0a06, 0 0 12px rgba(255, 180, 90, 0.25);
  touch-action: manipulation;
}
#battle-ui .bt-res-btn:hover { filter: brightness(1.15); }
#battle-ui .bt-res-btn small { font-weight: 400; color: #f0d0a0; }

/* จอแคบ / แนวตั้ง */
@media (max-width: 700px) {
  #battle-ui .bt-party {
    top: calc(var(--bt-cg) * 2 + var(--bt-cb)); left: var(--bt-cg); right: var(--bt-cg); bottom: auto;   /* ใต้แถบปุ่มมุม */
    width: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
  #battle-ui .bt-pm { padding: 3px 6px 4px; }
  #battle-ui .bt-pm-name span { font-size: 12px; }
  #battle-ui .bt-pm-name small { font-size: 10px; }
  #battle-ui .bt-bar { height: 10px; }
  #battle-ui .bt-bar em { font-size: 9px; line-height: 10px; }
  #battle-ui .bt-log {
    top: auto; bottom: 118px; left: 8px; right: 8px;
    width: auto;
    font-size: 12px;
    padding: 3px 8px;
    background: linear-gradient(90deg, rgba(16, 11, 8, 0.7), rgba(16, 11, 8, 0.2));
  }
  #battle-ui .bt-log div:not(:nth-last-child(-n+2)) { display: none; }
  #battle-ui .bt-cmd { bottom: 8px; padding: 6px 8px 8px; }
  #battle-ui .bt-main { grid-template-columns: repeat(4, 1fr); }   /* 7 ปุ่ม = 4 + 3 บนจอแคบ */
  #battle-ui .bt-main button { min-height: 50px; font-size: 13px; }
  #battle-ui .bt-list { grid-template-columns: repeat(2, 1fr); max-height: 116px; }
  #battle-ui .bt-res-title { font-size: 34px; }
}
@media (max-height: 680px) and (min-width: 701px) {
  #battle-ui .bt-party { width: 176px; gap: 4px; right: 8px; top: 8px; }
  #battle-ui .bt-list { max-height: 112px; }
  #battle-ui .bt-pm { padding: 3px 6px 4px; }
  #battle-ui .bt-pm-name span { font-size: 12px; }
  #battle-ui .bt-pm-name small { font-size: 10px; }
  #battle-ui .bt-bar { height: 10px; }
  #battle-ui .bt-bar em { font-size: 9px; line-height: 10px; }
}
@media (max-height: 520px) and (min-width: 701px) {
  #battle-ui .bt-log { font-size: 12px; width: min(320px, 38vw); }
  #battle-ui .bt-party { width: 200px; gap: 4px; }
  #battle-ui .bt-main button { min-height: 44px; }
  #battle-ui .bt-list { max-height: 110px; }
}

/* ---------------------------------------------------------------- เดินอัตโนมัติทำเควส (autowalk.js + ปุ่มใน HUD) */
.hq-auto {
  float: right; margin: -2px 0 2px 6px; padding: 2px 8px;
  font: 600 11px 'Kanit', sans-serif; color: #ffe7a8; cursor: pointer; pointer-events: auto;
  background: linear-gradient(180deg, #3a5a2e, #22381c); border: 1px solid #8fc06a; border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 2px 6px rgba(0, 0, 0, 0.4);
}
.hq-auto:hover { filter: brightness(1.15); }
.hq-auto.on { background: linear-gradient(180deg, #7a2a22, #4a1612); border-color: #e0786a; }
.hq-next .hq-auto { float: none; display: inline-block; margin: 4px 0 0; }
.auto-pill {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 45;
  display: flex; align-items: center; gap: 10px; max-width: min(500px, calc(100vw - 24px));
  padding: 7px 8px 7px 12px; pointer-events: auto;
  background: linear-gradient(180deg, rgba(30, 44, 24, 0.94), rgba(16, 24, 12, 0.94));
  border: 1.5px solid #8fc06a; border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  animation: ap-in 0.25s ease-out;
}
@keyframes ap-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* จอกว้าง: ล่างกลางจอเป็นแถบช่องลัด (ui/hotbar.js) → ป้ายเดินอัตโนมัติอยู่ใต้ชื่อแผนที่ */
@media (min-width: 641px) { .auto-pill { bottom: auto; top: 128px; } }
.auto-pill .ap-ico { font-size: 20px; animation: ap-spin 3s linear infinite; }
@keyframes ap-spin { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.auto-pill .ap-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.auto-pill .ap-txt b { font: 700 12px 'Kanit', sans-serif; color: #bfe89a; }
.auto-pill .ap-goal { font: 500 13px 'Kanit', sans-serif; color: #f3e6c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-pill .ap-tip { font: 400 11px 'Sarabun', sans-serif; color: #c8d8b0; }
.auto-pill .ap-tip:empty { display: none; }
.auto-pill .ap-stop {
  flex: none; padding: 6px 12px; font: 600 12px 'Kanit', sans-serif; color: #ffe7d8; cursor: pointer;
  background: linear-gradient(180deg, #8e2b2b, #5a1a16); border: 1px solid #e0a070; border-radius: 8px;
}
@media (max-width: 640px) {
  .auto-pill { bottom: 214px; padding: 6px 6px 6px 10px; }
  .auto-pill .ap-goal { font-size: 12px; }
}

/* ---------------------------------------------------------------- v0.4 ภาพความละเอียดสูง
   ภาพตัวละคร/มอนจาก gfx/chars.js · gfx/monsters.js · sprite PNG เป็นภาพเนียน (ไม่ใช่ pixel art แล้ว)
   → ย่อ/ขยายแบบนุ่ม (style.css ของ UI ตั้ง pixelated ไว้สำหรับภาพชุดเดิม — ไอคอนไอเทม/สกิลยังเป็นพิกเซลเหมือนเดิม) */
body .portrait-img.portrait-img,
body .mon-img.mon-img,
body .cp-canvas.cp-canvas {
  image-rendering: auto;
}

/* ปุ่ม จับ (ระบบจับขุนพล/สัตว์เลี้ยง — เร็วๆ นี้) */
#battle-ui .bt-main button { position: relative; }
#battle-ui .bt-main button.soon em {
  position: absolute; top: -7px; right: -3px;
  padding: 0 5px; font: 600 9.5px/15px 'Kanit', sans-serif; font-style: normal; white-space: nowrap;
  color: #2a1a08; background: #e8c77a; border-radius: 7px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
#battle-ui .bt-main button.soon:disabled { opacity: 0.6; }
@media (max-width: 700px) {
  #battle-ui .bt-main { gap: 4px; }
  #battle-ui .bt-main button { font-size: 12px; padding: 4px 1px; }
  #battle-ui .bt-main button b { font-size: 17px; }
}

/* ---------------------------------------------------------------- v0.5 ขุนพล / จับ */
#battle-ui .bt-targets button.no, #battle-ui .bt-targets button:disabled { opacity: 0.45; filter: grayscale(0.8); cursor: not-allowed; }
#battle-ui .bt-targets button em { font-style: normal; font-size: 11px; color: #ffe08a; margin-left: 3px; }
#battle-ui .bt-res-pet {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; padding: 6px 10px; text-align: left;
  background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(201, 164, 92, 0.35); border-radius: 8px;
}
#battle-ui .bt-res-pet img { width: 40px; height: 40px; object-fit: contain; image-rendering: auto; flex: none; }
#battle-ui .bt-res-pet .nm { font: 600 14px 'Kanit', sans-serif; color: #ffe9a8; }
#battle-ui .bt-res-pet .st { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; color: #e8dcc0; }
#battle-ui .bt-res-pet .bad { color: #ff9a8a; }
#battle-ui .bt-res-pet .exp { color: #9fe0ff; }
#battle-ui .bt-res-pet .lv { color: #ffe08a; }
#battle-ui .bt-res-pet .warn { color: #ffb070; }
#battle-ui .bt-res-item.cap { border-color: rgba(255, 216, 74, 0.7); box-shadow: 0 0 8px rgba(255, 216, 74, 0.25); }
#battle-ui .bt-res-item.cap img { image-rendering: auto; }

/* ---------------------------------------------------------------- ปุ่มออโต้ลอยมุมขวา (เห็นตลอดการต่อสู้) */
#battle-ui .bt-autobox { position: absolute; right: 16px; bottom: 16px; z-index: 6; display: flex; align-items: center; gap: 6px; pointer-events: none; }
#battle-ui :is(.bt-autocfg, .bt-charwin) {
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; min-height: 46px; padding: 2px 0;
  font-family: 'Kanit', 'Sarabun', sans-serif; color: #e8d8b0; cursor: pointer; pointer-events: auto; line-height: 1.05;
  background: linear-gradient(180deg, rgba(40, 32, 26, 0.95), rgba(18, 13, 10, 0.95));
  border: 2px solid rgba(201, 164, 92, 0.7); border-radius: 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}
#battle-ui :is(.bt-autocfg, .bt-charwin) b { font-size: 18px; font-weight: 400; }
#battle-ui :is(.bt-autocfg, .bt-charwin) span { font-size: 10.5px; }
#battle-ui :is(.bt-autocfg, .bt-charwin):hover { filter: brightness(1.2); border-color: #f0d28a; }
#battle-ui .bt-autof {
  display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 14px 6px 8px;
  font-family: 'Kanit', 'Sarabun', sans-serif; color: #e8d8b0; cursor: pointer; pointer-events: auto;
  background: linear-gradient(180deg, rgba(40, 32, 26, 0.95), rgba(18, 13, 10, 0.95));
  border: 2px solid rgba(201, 164, 92, 0.7); border-radius: 26px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}
#battle-ui .bt-autof span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
#battle-ui .bt-autof b { font-size: 14px; font-weight: 700; }
#battle-ui .bt-autof small { font-size: 11px; opacity: 0.8; }
#battle-ui .bt-autof .ap {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, #8a8070, #3a332a); border: 2px solid rgba(0, 0, 0, 0.5);
  position: relative;
}
#battle-ui .bt-autof .ap::after { content: 'A'; position: absolute; inset: 0; display: grid; place-items: center; font: 800 14px 'Kanit', sans-serif; color: #f3e6c8; }
#battle-ui .bt-autof.on { color: #eaffd8; border-color: #8fd06a; background: linear-gradient(180deg, rgba(36, 70, 30, 0.95), rgba(16, 36, 14, 0.95)); }
#battle-ui .bt-autof.on .ap { background: radial-gradient(circle at 35% 35%, #b6f08a, #3f8a2e); box-shadow: 0 0 10px rgba(140, 230, 100, 0.8); animation: bt-autof-spin 1.6s linear infinite; }
#battle-ui .bt-autof:hover { filter: brightness(1.15); }
@keyframes bt-autof-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
#battle-ui .bt-result.on ~ .bt-autobox { display: none; }
@media (max-width: 1000px) { #battle-ui .bt-autobox { bottom: 190px; right: 10px; } }
/* มือถือ (แนวตั้งกว้าง ≤ 700 · แนวนอนจอเตี้ย ≤ 500): ตัวละคร + ตั้งค่า มุมบนซ้าย · ออโต้ มุมบนขวา — ไม่ทับการ์ดปาร์ตี้ ตัวนับเวลา และยูนิต
   แนวตั้ง = แถบบนสุด (ตัวนับเวลาอยู่กลางแถบ · แผงปาร์ตี้ต่อใต้แถบ) · แนวนอน = ตั้งค่าใต้ตัวละคร แผงปาร์ตี้ใต้ปุ่มออโต้ (mobile.css)
   ลานต่อสู้ ตัวนับเวลา และปุ่มแชทหลบตามกรอบจริงของปุ่ม (public/js/battle.js computeForm) */
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  #battle-ui { --bt-cb: 44px; --bt-cg: 6px; }   /* ขนาดปุ่มมุม · ระยะขอบ */
  #battle-ui .bt-autobox { display: contents; }
  #battle-ui .bt-autobox > * { position: absolute; z-index: 6; top: var(--bt-cg); }
  #battle-ui .bt-charwin { left: var(--bt-cg); }
  #battle-ui .bt-autocfg { left: calc(var(--bt-cg) * 2 + var(--bt-cb)); }
  #battle-ui :is(.bt-autocfg, .bt-charwin) { width: var(--bt-cb); min-height: var(--bt-cb); padding: 0; }
  #battle-ui :is(.bt-autocfg, .bt-charwin) span { display: none; }
  #battle-ui .bt-autof { right: var(--bt-cg); min-height: var(--bt-cb); padding: 4px 10px 4px 6px; }
  #battle-ui .bt-autof small { display: none; }
}

/* ---------------------------------------------------------------- แผนที่ใหญ่ (M) */
#minimap .bm-open {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 4px; padding: 4px 6px;
  font: 600 12px 'Kanit', 'Sarabun', sans-serif; color: #f3e2b4; cursor: pointer;
  background: linear-gradient(180deg, #5a3e22, #36240f); border: 1px solid #c9a45c; border-radius: 5px;
}
#minimap .bm-open:hover { filter: brightness(1.2); }
#minimap .bm-open kbd { font: 700 10px 'Kanit', sans-serif; padding: 0 4px; border-radius: 3px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(201, 164, 92, 0.6); }
@media (max-width: 700px), (max-height: 520px) { #minimap .bm-open { font-size: 11px; padding: 3px 4px; } #minimap .bm-open kbd { display: none; } }

/* ---------------------------------------------------------------- ขี่ม้า (ui/ride.js): ปุ่ม 🐎 ข้างปุ่มแผนที่ใหญ่ใต้แผนที่ย่อ (เห็นเมื่อมีม้า · สีเขียว = กำลังขี่) */
#minimap { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
#minimap > .mm-canvas, #minimap > .mm-coord { grid-column: 1 / -1; }
#minimap .bm-open { grid-column: 1; grid-row: 3; min-width: 0; white-space: nowrap; }
#minimap .mm-ride {
  position: relative; grid-column: 2; grid-row: 3; display: flex; align-items: center; justify-content: center; margin: 4px 0 0 4px; padding: 2px 6px; min-width: 36px;
  font: 600 12px 'Kanit', 'Sarabun', sans-serif; color: #f3e2b4; cursor: pointer;
  background: linear-gradient(180deg, #5a3e22, #36240f); border: 1px solid #c9a45c; border-radius: 5px;
}
#minimap .mm-ride i { font-style: normal; font-size: 16px; line-height: 1; filter: grayscale(0.5) brightness(0.92); }
#minimap .mm-ride:hover { filter: brightness(1.2); }
#minimap .mm-ride.on { color: #eaffd8; background: linear-gradient(180deg, #3f7c2b, #1f4a16); border-color: #9fe07a; box-shadow: 0 0 6px rgba(150, 230, 110, 0.45); }
#minimap .mm-ride.on i { filter: none; }
#minimap .mm-ride kbd { position: absolute; right: -4px; bottom: -5px; font: 700 9px/1.2 'Kanit', sans-serif; padding: 0 3px; color: #f3e2b4; border-radius: 3px; background: #2a1c10; border: 1px solid rgba(201, 164, 92, 0.7); }
@media (max-width: 700px), (max-height: 520px) { #minimap .mm-ride { min-width: 32px; min-height: 26px; padding: 2px 4px; } #minimap .mm-ride kbd { display: none; } }

.bm-wrap {
  position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; pointer-events: auto;
  background: rgba(6, 4, 2, 0.55); backdrop-filter: blur(2px); padding: 16px; box-sizing: border-box;
}
.bm-wrap.on { display: flex; }
.bm-panel {
  display: flex; flex-direction: column; width: min(1100px, 100%); height: min(760px, 100%);
  background: linear-gradient(180deg, #241b13, #15100b); border: 2px solid #c9a45c; border-radius: 10px;
  box-shadow: 0 0 0 1px #3a2a16, 0 0 0 4px rgba(201, 164, 92, 0.2), 0 18px 48px rgba(0, 0, 0, 0.7);
  color: #ead9b2; font-family: 'Kanit', 'Sarabun', sans-serif; overflow: hidden;
}
.bm-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 1px solid rgba(201, 164, 92, 0.35); background: rgba(0, 0, 0, 0.25); }
.bm-tabs { display: flex; gap: 4px; }
.bm-tabs button {
  font: 600 14px 'Kanit', sans-serif; color: #cdb98c; padding: 6px 14px; cursor: pointer;
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(201, 164, 92, 0.4); border-radius: 6px;
}
.bm-tabs button.on { color: #2a1a08; background: linear-gradient(180deg, #f0d48a, #c9a045); border-color: #f3dc9a; }
.bm-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: #ffe2a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.bm-close { width: 34px; height: 34px; flex: none; font-size: 16px; color: #f3e2b4; cursor: pointer; background: rgba(120, 30, 20, 0.6); border: 1px solid #c9a45c; border-radius: 6px; }
.bm-close:hover { background: rgba(170, 40, 25, 0.8); }
.bm-body { position: relative; flex: 1; min-height: 0; padding: 10px; }
.bm-mapview { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.bm-mapview canvas { display: block; border: 1px solid rgba(201, 164, 92, 0.5); border-radius: 4px; cursor: crosshair; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); image-rendering: pixelated; }
.bm-hint { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 2px 10px; font-size: 12px; color: #e8d8b0; background: rgba(0, 0, 0, 0.6); border-radius: 10px; pointer-events: none; white-space: nowrap; }
.bm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding: 6px 10px 8px; font-size: 12px; color: #d8c69c; border-top: 1px solid rgba(201, 164, 92, 0.25); }
.bm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.bm-legend .bm-lgtip { display: block; text-align: center; }   /* คำแนะนำยาว (มีตัวหนา) ไหลเป็นย่อหน้าเดียว ไม่แตกเป็นคอลัมน์ */
.bm-legend .lg { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.7); display: inline-block; }
.bm-legend .lg.me { background: #ff4a3a; border-color: #fff; }
.bm-legend .lg.pt { background: #5ee08a; }
.bm-legend .lg.pl { background: #f4f0e6; }
.bm-legend .lg.np { background: #ffd04a; }
.bm-legend .lg.mo { background: #e8503a; }
.bm-legend .lg.qm { background: #ffd23a; box-shadow: 0 0 0 2px rgba(255, 210, 58, 0.35); }
.bm-legend .lg.po { background: #8cdcff; border-radius: 2px; }
.bm-legend .lg.bo { background: #7a1020; border: 2px solid #ffd0a0; border-radius: 1px; transform: rotate(45deg); width: 9px; height: 9px; }

.bm-legend .lg.tw { background: #ff6a4a; border-radius: 2px; }
.bm-legend .lg.fd { background: #ffe45a; }
.bm-legend .bm-lgtip { display: block; color: #bfae88; text-align: center; }
.bm-worldview { position: relative; width: 100%; height: 100%; border: 1px solid rgba(201, 164, 92, 0.55); border-radius: 6px; overflow: hidden; background: #eef2f7; box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35); }
.bm-wcanvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.bm-wctrl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.bm-wctrl button {
  min-width: 34px; height: 32px; padding: 0 8px; font: 700 17px 'Kanit', sans-serif; line-height: 1; color: #3a2408; cursor: pointer;
  background: linear-gradient(180deg, #f8e8bc, #d8b670); border: 1px solid #8a6a32; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.bm-wctrl button.wide { font-size: 12px; font-weight: 600; }
.bm-wctrl button:hover { filter: brightness(1.08); }
.bm-tip {
  position: absolute; display: none; z-index: 2; max-width: 260px; padding: 7px 10px; pointer-events: none;
  font: 500 12.5px 'Kanit', 'Sarabun', sans-serif; color: #f3e6c8; line-height: 1.45;
  background: rgba(24, 16, 10, 0.92); border: 1px solid #c9a45c; border-radius: 7px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.bm-tip b { display: block; font-size: 15px; }
.bm-tip b.tw { color: #ff8a64; }
.bm-tip b.fd { color: #ffe45a; }
.bm-tip span { display: block; }
.bm-tip .boss { color: #ffb4a4; }
.bm-tip .warn { color: #ff9a7a; }
.bm-tip .go { color: #9ae8ff; margin-top: 2px; }
.bm-tip .dim { color: #a8987a; }
/* กล่องตัวเลือกของสถานที่ที่คลิก: เดินไป / วาป (bigmap.js pickWorld) */
.bm-pick {
  position: absolute; display: none; z-index: 3; width: min(300px, calc(100% - 12px)); box-sizing: border-box; padding: 8px 10px 9px;
  font: 500 12.5px 'Kanit', 'Sarabun', sans-serif; color: #f3e6c8; line-height: 1.45;
  background: rgba(24, 16, 10, 0.95); border: 1px solid #e0bc6a; border-radius: 8px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(255, 216, 96, 0.18);
}
.bm-pick-x { position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; padding: 0; font-size: 13px; line-height: 1; color: #cdb98c; cursor: pointer; background: transparent; border: 0; border-radius: 5px; }
.bm-pick-x:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.bm-pick-info { padding-right: 22px; }
.bm-pick-info b { display: block; font-size: 15px; }
.bm-pick-info b.tw { color: #ff8a64; }
.bm-pick-info b.fd { color: #ffe45a; }
.bm-pick-info span { display: block; }
.bm-pick-info .boss { color: #ffb4a4; }
.bm-pick-info .warn { color: #ff9a7a; }
.bm-pick-info .go { color: #9ae8ff; }
.bm-pick-acts { display: flex; gap: 6px; margin-top: 8px; }
.bm-pick-acts .btn { flex: 1 1 0; min-width: 0; padding: 4px 8px; }
.bm-pick-acts .btn small { margin-left: 2px; padding: 0 6px; font-size: 11px; line-height: 16px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(234, 255, 246, 0.35); }
.bm-pick-why, .bm-pick-note { margin-top: 6px; font-size: 11.5px; line-height: 1.4; }
.bm-pick-why { color: #ffb08a; }
.bm-pick-note { color: #a9d8c6; }
.bm-loading { position: absolute; inset: 0; display: grid; place-items: center; font: 600 16px 'Kanit', sans-serif; color: #5a6a80; background: #eef2f7; }

/* แผงข้อมูลสถานที่ (ขวา) — มอน + ของดรอป บอส NPC ทางเชื่อม (bigmap.js renderSide) */
.bm-body { display: flex; gap: 10px; }
.bm-views { position: relative; flex: 1; min-width: 0; min-height: 0; }
.bm-side {
  width: 310px; flex: none; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 14px; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(20, 26, 40, 0.96), rgba(14, 18, 28, 0.96)); border: 1px solid rgba(201, 164, 92, 0.55); border-radius: 6px;
  scrollbar-width: thin; scrollbar-color: #c9a45c rgba(0, 0, 0, 0.3);
}
.bs-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid rgba(201, 164, 92, 0.3); }
.bs-name { font: 700 19px 'Kanit', sans-serif; line-height: 1.25; }
.bs-name.tw { color: #ff9a74; } .bs-name.fd { color: #ffe27a; }
.bs-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.bs-chip { padding: 1px 8px; font-size: 11.5px; color: #d8c69c; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(201, 164, 92, 0.4); border-radius: 10px; }
.bs-chip.tw { color: #ffb49a; border-color: rgba(255, 120, 90, 0.5); }
.bs-chip.fd { color: #fff0a8; border-color: rgba(255, 220, 90, 0.5); }
.bs-chip.lv { color: #2a1a08; background: linear-gradient(180deg, #f0d48a, #c9a045); border-color: #f3dc9a; font-weight: 600; }
.bs-here { font-size: 13px; font-weight: 600; color: #ff8a74; }
.bs-go {
  display: block; width: 100%; padding: 8px 10px; font: 600 14.5px 'Kanit', sans-serif; color: #062012; cursor: pointer;
  background: linear-gradient(180deg, #6fe39a, #2fb866); border: 1px solid #a8f0c4; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.bs-go small { font-size: 12px; font-weight: 500; opacity: 0.85; }
.bs-go:hover { filter: brightness(1.08); }
.bs-go.alt { color: #2a1a08; background: linear-gradient(180deg, #f0d48a, #c9a045); border-color: #f3dc9a; }
.bs-warn { font-size: 12.5px; color: #ff9a7a; }
.bs-empty, .bs-dim { font-size: 12.5px; color: #a8987a; }
.bs-empty { padding: 14px 0; text-align: center; }
.bs-sec { margin-top: 12px; }
.bs-title { margin-bottom: 6px; font: 600 13.5px 'Kanit', sans-serif; color: #e3b85c; }
.bs-title small { font-weight: 400; color: #a8987a; }
.bs-sec.boss .bs-title { color: #ff9a8a; }
.bs-monwrap { margin-bottom: 4px; border-radius: 6px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06); }
.bs-mon {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 8px 4px 4px; text-align: left; cursor: pointer;
  font: 500 13.5px 'Kanit', sans-serif; color: #f3e6c8; background: none; border: 0; border-radius: 6px;
}
.bs-mon:hover { background: rgba(201, 164, 92, 0.12); }
.bs-mon.open { background: rgba(201, 164, 92, 0.16); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.bs-mon.boss .bs-mname b { color: #ffb4a4; }
.bs-mon.quest .bs-mname b { color: #ffe08a; }
.bs-caret { width: 12px; flex: none; font-size: 11px; color: #c9a45c; text-align: center; }
.bs-mico { width: 30px; height: 30px; flex: none; object-fit: contain; }
.bs-mname { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.2; }
.bs-mname b { display: flex; align-items: center; gap: 5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-mname small, .bs-mmeta small { font-size: 11px; color: #a8987a; font-weight: 400; white-space: nowrap; }
.bs-el { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
.bs-mmeta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.bs-mmeta b { font-weight: 600; color: #e8d8b0; font-size: 12.5px; }
.bs-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bs-npc { padding: 3px 9px; font-size: 12.5px; color: #e8d8b0; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 5px; }
.bs-links { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.bs-link {
  display: flex; flex-direction: column; align-items: flex-start; padding: 5px 8px; text-align: left; cursor: pointer; font-family: 'Kanit', sans-serif;
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(201, 164, 92, 0.55); border-radius: 6px; color: #f3e6c8;
}
.bs-link b { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.bs-link small { font-size: 11px; color: #a8987a; }
.bs-link.tw b { color: #ffb49a; } .bs-link.fd b { color: #fff0a8; }
.bs-link:hover { border-color: #f0d48a; background: rgba(201, 164, 92, 0.14); }

/* รายการของดรอป (ui/drops.js) — ใช้ทั้งแผงแผนที่ใหญ่และการ์ดมอน */
.dr-list { padding: 2px 6px 6px 22px; }
.dr-list.dr-empty { padding: 6px 10px 8px 26px; font-size: 12px; color: #a8987a; }
.dr-row { display: flex; align-items: center; gap: 7px; padding: 2px 4px; border-radius: 4px; font-size: 13px; }
.dr-row:hover { background: rgba(255, 255, 255, 0.06); }
.dr-ico { width: 24px; height: 24px; flex: none; image-rendering: pixelated; }
.dr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-name em { font-style: normal; color: #d8c69c; font-size: 12px; }
.dr-rate { font: 600 12.5px 'Kanit', sans-serif; color: #e8d8b0; font-variant-numeric: tabular-nums; }
.dr-rate.sure { color: #8fe08f; }
.dr-rate.low { color: #c0a8ff; }

/* การ์ดมอน (ชี้เมาส์ที่มอนบนแผนที่) */
.mon-card { min-width: 240px; max-width: 290px; white-space: normal; }
.mc-head { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid rgba(201, 164, 92, 0.3); }
.mc-ico { width: 44px; height: 44px; flex: none; object-fit: contain; background: rgba(0, 0, 0, 0.35); border: 1px solid #3d3122; border-radius: 6px; }
.mc-name { font: 600 14.5px 'Kanit', sans-serif; color: #ffd0c0; }
.mc-boss { margin-left: 6px; padding: 0 5px; font-size: 10.5px; color: #fff; background: #8a1a1a; border-radius: 3px; vertical-align: 2px; }
.mc-sub { font-size: 11.5px; color: #bfae88; }
.mc-title { margin: 4px 0 2px; font: 600 12px 'Kanit', sans-serif; color: #e3b85c; }
.mon-card .dr-list { padding: 0; }
.mon-card .dr-row { font-size: 12.5px; padding: 1px 0; }
.mon-card .dr-ico { width: 22px; height: 22px; }
.mc-foot { margin-top: 5px; font-size: 11px; color: #9ae8ff; }

@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .bm-body { flex-direction: column; gap: 6px; }
  .bm-side { width: auto; height: 42%; flex: none; padding: 8px; }
  .bs-name { font-size: 17px; }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .bm-body { flex-direction: row; }
  .bm-side { width: 250px; height: auto; }
  .bs-head { gap: 4px; padding-bottom: 6px; }
  .bs-name { font-size: 16px; }
  .bs-go { padding: 5px 8px; font-size: 13.5px; }
  .bs-links { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .bm-wrap { padding: 6px; }
  .bm-head { flex-wrap: wrap; gap: 6px; padding: 6px; }
  .bm-title { order: 3; flex-basis: 100%; font-size: 14px; }
  .bm-close { margin-left: auto; }
  .bm-tabs button { padding: 5px 10px; font-size: 13px; }
  .bm-body { padding: 6px; }
  .bm-hint { font-size: 11px; white-space: normal; text-align: center; width: max-content; max-width: 92%; }
  .bm-legend { font-size: 11px; gap: 3px 10px; }
  .bm-wctrl { right: 6px; top: 6px; gap: 4px; }
  .bm-wctrl button { min-width: 30px; height: 28px; font-size: 15px; }
  .bm-wctrl button.wide { font-size: 11px; padding: 0 6px; }
  .bm-legend .bm-lgtip { flex-basis: 100%; text-align: center; }
}

/* ---------------------------------------------------------------- ตั้งค่าออโต้ (autocfg.js) */
.ac-wrap {
  position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; pointer-events: auto;
  background: rgba(6, 4, 2, 0.5); padding: 16px; box-sizing: border-box; font-family: 'Sarabun', 'Kanit', sans-serif;
}
.ac-wrap.on { display: flex; }
.ac-panel {
  display: flex; flex-direction: column; width: min(520px, 100%); max-height: 100%;
  background: linear-gradient(180deg, #241b13, #15100b); border: 2px solid #c9a45c; border-radius: 10px;
  box-shadow: 0 0 0 1px #3a2a16, 0 0 0 4px rgba(201, 164, 92, 0.2), 0 18px 48px rgba(0, 0, 0, 0.7); color: #ead9b2; overflow: hidden;
}
.ac-head { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; background: linear-gradient(180deg, #742222, #481515); border-bottom: 1px solid #c9a45c; }
.ac-head b { font: 600 16px 'Kanit', sans-serif; color: #f0d28a; white-space: nowrap; }
.ac-head span { flex: 1; min-width: 0; font-size: 11.5px; color: #e0c8a0; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-x { width: 32px; height: 32px; flex: none; font-size: 15px; color: #f3e2b4; cursor: pointer; background: rgba(0, 0, 0, 0.3); border: 1px solid #c9a45c; border-radius: 6px; }
.ac-x:hover { background: rgba(170, 40, 25, 0.8); }
.ac-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.ac-sec { padding: 8px 12px 10px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(201, 164, 92, 0.3); border-radius: 8px; }
.ac-sec.ac-bot { border-color: rgba(143, 192, 106, 0.55); background: rgba(30, 50, 20, 0.3); }
.ac-sec h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 14.5px 'Kanit', sans-serif; color: #ffe2a0; }
.ac-sec h4 em { margin-left: auto; font: 400 11.5px 'Sarabun', sans-serif; font-style: normal; color: #b3a283; }
.ac-sec.off > :not(h4) { opacity: 0.4; pointer-events: none; }
.ac-row { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 13px; }
.ac-row > label { flex: 0 0 150px; color: #d8c8a8; }
.ac-row select {
  flex: 1; min-width: 0; height: 32px; padding: 0 8px; font: 500 13px 'Sarabun', sans-serif; color: #f3e6c8; cursor: pointer;
  background: #1d1712; border: 1px solid rgba(201, 164, 92, 0.55); border-radius: 6px;
}
.ac-row select:disabled { opacity: 0.45; }
.ac-row input[type=range] { flex: 1; min-width: 0; accent-color: #e0a040; cursor: pointer; }
.ac-row output { flex: 0 0 56px; text-align: right; font: 700 15px 'Kanit', sans-serif; color: #ffd27a; white-space: nowrap; }
.ac-row.ac-ck { gap: 8px; cursor: pointer; color: #d8c8a8; }
.ac-row.ac-ck input { width: 17px; height: 17px; accent-color: #e0a040; flex: none; }
.ac-row.ac-sub { gap: 8px; }
.ac-row.ac-sub > label { flex: 0 0 auto; }
.ac-note { margin: 4px 0 0; font-size: 11.5px; color: #a8987a; line-height: 1.4; }
.ac-tg { position: relative; display: inline-block; width: 38px; height: 21px; flex: none; cursor: pointer; }
.ac-tg input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ac-tg i { position: absolute; inset: 0; border-radius: 11px; background: #4a3d30; border: 1px solid rgba(0, 0, 0, 0.5); transition: background 0.15s; pointer-events: none; }
.ac-tg i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #cdbb98; transition: transform 0.15s; }
.ac-tg input:checked + i { background: #4f9a3a; }
.ac-tg input:checked + i::after { transform: translateX(17px); background: #f3ffe8; }
.ac-tg input:focus-visible + i { outline: 2px solid #f0d28a; outline-offset: 1px; }
.ac-bot-go {
  flex: 1; height: 36px; font: 600 14px 'Kanit', sans-serif; color: #eaffd8; cursor: pointer;
  background: linear-gradient(180deg, #3f7a2e, #24461a); border: 1px solid #8fd06a; border-radius: 8px;
}
.ac-bot-go.on { color: #ffe7d8; background: linear-gradient(180deg, #8e2b2b, #5a1a16); border-color: #e0a070; }
.ac-bot-go:disabled { opacity: 0.45; cursor: not-allowed; }
.ac-foot { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid rgba(201, 164, 92, 0.3); background: rgba(0, 0, 0, 0.25); }
.ac-foot button { min-height: 34px; padding: 0 16px; font: 500 13.5px 'Kanit', sans-serif; color: #f3e6c8; cursor: pointer; background: linear-gradient(180deg, #3b2e22, #231a13); border: 1px solid #6e5732; border-radius: 6px; }
.ac-foot .ac-done { color: #fff4dc; background: linear-gradient(180deg, #b63c2f, #761f1f); border-color: #c9a45c; }
.ac-foot button:hover { filter: brightness(1.15); }
@media (max-width: 520px) {
  .ac-wrap { padding: 6px; }
  .ac-row { flex-wrap: wrap; gap: 4px 8px; }
  .ac-row > label { flex: 1 0 100%; font-size: 12.5px; }
  .ac-row.ac-sub > label, .ac-row.ac-ck > span { flex: 1; }
  .ac-head span { display: none; }
}

/* ปุ่มบอท/ตั้งค่าออโต้ บน HUD (ข้างปุ่มออกจากระบบ) */
.hud-tool { pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 9px; font: 500 11.5px 'Kanit', sans-serif; color: #e0cfa8; background: rgba(18, 14, 10, 0.8); border: 1px solid rgba(201, 164, 92, 0.45); border-radius: 13px; cursor: pointer; }
.hud-tool i { font-style: normal; font-size: 13px; }
.hud-tool:hover { color: #fff; border-color: #f0d28a; }
a.hud-tool { text-decoration: none; }   /* ปุ่มลิงก์ (ตลาดกลาง) */
.hud-tool.on { color: #eaffd8; background: rgba(40, 80, 30, 0.9); border-color: #8fd06a; }
@media (max-width: 760px) { .hud-tool { min-height: 32px; padding: 0 8px; } .hud-tool > span { display: none; } .hud-tool i { font-size: 15px; } }
.auto-pill .ap-cfg { flex: none; width: 32px; height: 30px; font-size: 15px; color: #f3e6c8; cursor: pointer; background: rgba(0, 0, 0, 0.3); border: 1px solid #8fc06a; border-radius: 8px; }
.auto-pill.bot .ap-ico { animation: none; }

/* ---------------------------------------------------------------- ออโต้: รูปแบบโจมตี + ช่องสกิล (autocfg.js) */
.ac-seg { display: flex; gap: 4px; margin: 2px 0 6px; padding: 3px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(201, 164, 92, 0.35); border-radius: 8px; }
.ac-seg-b { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 6px; text-align: center; font: 600 12.5px 'Kanit', sans-serif; color: #cdb98c; border-radius: 6px; cursor: pointer; }
.ac-seg-b input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ac-seg-b.on { color: #2a1a08; background: linear-gradient(180deg, #f0d48a, #c9a045); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.ac-seg-b:has(input:focus-visible) { outline: 2px solid #f0d28a; outline-offset: 1px; }
.ac-slots { display: flex; flex-direction: column; gap: 4px; }
.ac-slot { display: grid; grid-template-columns: 20px 30px minmax(0, 1fr) minmax(0, 0.8fr); align-items: center; gap: 6px; padding: 4px 6px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(201, 164, 92, 0.3); border-radius: 7px; }
.ac-slot.empty { opacity: 0.7; border-style: dashed; }
.ac-slot > b { font: 700 13px 'Kanit', sans-serif; color: #ffd27a; text-align: center; }
.ac-slot select { height: 30px; min-width: 0; padding: 0 6px; font: 500 12.5px 'Sarabun', sans-serif; color: #f3e6c8; background: #1d1712; border: 1px solid rgba(201, 164, 92, 0.5); border-radius: 6px; cursor: pointer; }
.ac-slot select:disabled { opacity: 0.4; }
.ac-sl-ico { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 15px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(201, 164, 92, 0.35); image-rendering: pixelated; }
.ac-sl-ico.atk { color: #ffe2a0; background: linear-gradient(180deg, #5a2a1e, #2a140e); }
.ac-slot-tools { flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ac-slot-tools select { flex: 1 1 200px; }
.ac-mini { min-height: 30px; padding: 0 10px; font: 500 12px 'Kanit', sans-serif; color: #f3e6c8; cursor: pointer; background: linear-gradient(180deg, #3b2e22, #231a13); border: 1px solid #6e5732; border-radius: 6px; }
.ac-mini:hover { border-color: #c9a45c; }
@media (max-width: 520px) {
  .ac-slot { grid-template-columns: 18px 28px minmax(0, 1fr); }
  .ac-slot select[data-f="when"] { grid-column: 2 / -1; }
  .ac-seg-b { font-size: 11.5px; min-height: 38px; }
}

/* ---------------------------------------------------------------- ฉากต่อสู้: แผงสั่งขุนพล */
#battle-ui .bt-cmd.pet .bt-main { display: none; }
#battle-ui .bt-pet-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 2px 0 6px; font: 500 13px 'Kanit', sans-serif; color: #f3e6c8; }
#battle-ui .bt-pet-head .bt-pet-ttl { padding: 1px 8px; font-size: 12px; color: #2a1a08; background: linear-gradient(180deg, #f0d48a, #c9a045); border-radius: 10px; }
#battle-ui .bt-pet-head b { font-size: 15px; color: #ffe9a8; }
#battle-ui .bt-pet-head em { font-style: normal; font-size: 12px; color: #ffe08a; }
#battle-ui .bt-pet-head .bt-pet-sp { font-size: 12px; color: #9fd0ff; }
#battle-ui .bt-pet-head small { margin-left: auto; font-size: 11.5px; color: #c8b48c; }
#battle-ui .bt-pet-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
#battle-ui .bt-pet-acts button { flex: 1 1 auto; min-height: 36px; padding: 0 10px; font: 600 13px 'Kanit', sans-serif; color: #f3e6c8; cursor: pointer; background: linear-gradient(180deg, #3b2e22, #231a13); border: 1px solid rgba(201, 164, 92, 0.6); border-radius: 7px; }
#battle-ui .bt-pet-acts button:hover { border-color: #f0d28a; color: #fff; }

/* ---------------------------------------------------------------- ตั้งค่า ภาษา/เสียง (ui/settings.js) — ใช้กรอบ .ac-* ร่วมกับตั้งค่าออโต้ */
.set-wrap { z-index: 130; }   /* เหนือหน้าเข้าสู่ระบบ (.layer-screen = 100) */
.set-panel { width: min(420px, 100%); }
.set-langs { display: flex; gap: 8px; }
.set-lang {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 48px; padding: 6px 8px; cursor: pointer;
  color: #f3e6c8; background: linear-gradient(180deg, #3b2e22, #231a13); border: 1px solid #6e5732; border-radius: 8px;
}
.set-lang b { font: 600 15px 'Kanit', sans-serif; }
.set-lang small { font: 500 10.5px 'Kanit', sans-serif; letter-spacing: 1px; opacity: 0.7; }
.set-lang.on { color: #fff4dc; background: linear-gradient(180deg, #b63c2f, #761f1f); border-color: #f0d28a; box-shadow: 0 0 0 1px rgba(240, 210, 138, 0.35); }
.set-lang:disabled { opacity: 0.4; cursor: not-allowed; }
.set-lang:not(.on):not(:disabled):hover { filter: brightness(1.2); }
/* ตัวเลือก 3 ปุ่ม (ขุนพลเดินตาม): ปุ่มลงบรรทัดใต้ป้ายเต็มความกว้าง ไม่ตัดคำ */
.set-row3 { flex-wrap: wrap; }
.set-row3 .set-langs { flex: 1 1 100%; }
.set-row3 .set-lang { min-height: 40px; }
.set-row3 .set-lang b { font-size: 14px; white-space: nowrap; }
/* บัญชี: ฟอร์มเปลี่ยนรหัสผ่าน */
.set-pass { display: flex; flex-direction: column; gap: 8px; }
.set-pass .input { min-height: 36px; font-size: 14px; }
.set-pass .set-pass-go { align-self: flex-end; }
.set-pass .form-err.good { color: #c9f5cf; background: rgba(40, 110, 50, 0.3); border-left-color: #7ee08a; }
/* ปุ่มลัดภาษา/เสียงมุมขวาบนของหน้าเข้าสู่ระบบ */
.login-tools { position: absolute; top: max(12px, var(--safe-t, 0px)); right: max(12px, var(--safe-r, 0px)); z-index: 3; display: flex; gap: 6px; }
.login-tools button {
  min-width: 40px; height: 36px; padding: 0 10px; font: 600 13px 'Kanit', sans-serif; color: #f3e6c8; cursor: pointer;
  background: rgba(20, 14, 10, 0.6); border: 1px solid rgba(201, 164, 92, 0.6); border-radius: 8px; backdrop-filter: blur(3px);
}
.login-tools button:hover { background: rgba(120, 40, 30, 0.75); }

/* ---------------------------------------------------------------- ช่องลัดสกิล/ยา (ui/hotbar.js)
   ฉากโลก: แถบลอยใน HUD (hotbar.js คำนวณ left/top ไม่ให้ทับแชท/ปุ่มเมนู) · ฉากต่อสู้: แถวล่างของแผงคำสั่ง */
.hb {
  position: fixed; left: 0; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; pointer-events: auto; touch-action: none;
  background: rgba(18, 14, 10, 0.82); border: 1px solid rgba(201, 164, 92, 0.5); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.hb-slot {
  position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; cursor: pointer;
  background: linear-gradient(180deg, #30251b, #18120d); border: 1px solid #6e5732; border-radius: 6px;
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.7); transition: border-color 0.15s, box-shadow 0.15s; -webkit-user-select: none; user-select: none;
}
.hb-slot .sk-img, .hb-slot .item-img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.hb-slot .sk-fb, .hb-slot .item-fb { font-size: 18px; }
.hb-slot.empty { background: rgba(0, 0, 0, 0.35); border-style: dashed; border-color: rgba(201, 164, 92, 0.4); box-shadow: none; }
.hb-slot.empty::after { content: '+'; font: 300 20px/1 'Kanit', sans-serif; color: rgba(201, 164, 92, 0.35); }
.hb-slot kbd { position: absolute; left: 3px; top: 1px; font: 600 9.5px/1.2 'Kanit', sans-serif; color: #cdb98c; text-shadow: 0 1px 1px #000, 0 0 2px #000; pointer-events: none; }
.hb-slot em { position: absolute; right: 2px; bottom: 0; font: normal 600 10.5px/1.3 'Kanit', sans-serif; color: #fff; text-shadow: 0 1px 1px #000, 0 0 3px #000; pointer-events: none; }
.hb-slot em.hb-sp { color: #9fd0ff; }
.hb-slot.dim > img, .hb-slot.dim > span { filter: grayscale(1) brightness(0.75); opacity: 0.5; }
.hb-slot.dim em { color: #ff9a8a; }
.hb-slot:hover { border-color: #f0d28a; box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.7), 0 0 8px rgba(240, 210, 138, 0.45); }
.hb.drop .hb-slot { border-color: rgba(255, 224, 138, 0.75); }
.hb-slot.over { border-color: #ffe08a; box-shadow: 0 0 0 1px #ffe08a, 0 0 12px rgba(255, 210, 120, 0.65); }
.hb-slot.lift > img, .hb-slot.lift > span { opacity: 0.3; }
.hb-slot.fire { animation: hb-fire 0.35s ease-out; }
@keyframes hb-fire { from { transform: scale(0.86); box-shadow: 0 0 0 2px #ffe08a, 0 0 16px rgba(255, 220, 140, 0.9); } to { transform: scale(1); } }
.hb-ghost { position: fixed; left: 0; top: 0; z-index: 400; display: grid; place-items: center; width: 40px; height: 40px; pointer-events: none; opacity: 0.92; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7)); }
.hb-ghost .sk-img, .hb-ghost .item-img { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; }
/* รายการเลือก (แตะช่องว่าง / กดค้าง) */
.popover.hb-pop { width: min(340px, calc(100vw - 12px)); max-width: none; padding: 8px 8px 6px; }
.hb-pick { display: flex; flex-direction: column; gap: 5px; max-height: min(56vh, 430px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.hb-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.hb-pick-head b { font: 600 14px 'Kanit', sans-serif; color: #ffe08a; }
.hb-pick-sec { margin-top: 2px; padding-bottom: 2px; font: 600 11.5px 'Kanit', sans-serif; color: #b3a283; border-bottom: 1px solid rgba(201, 164, 92, 0.25); }
.hb-pick-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.hb-pick-b {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: 'i n' 'i s'; align-items: center; column-gap: 6px;
  min-height: 42px; padding: 3px 6px; text-align: left; color: #f3e6c8; cursor: pointer;
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(201, 164, 92, 0.35); border-radius: 6px;
}
.hb-pick-b > :first-child { grid-area: i; width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }
.hb-pick-b span { grid-area: n; overflow: hidden; font: 500 12.5px/1.3 'Kanit', sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.hb-pick-b small { grid-area: s; font: 500 11px/1.2 'Kanit', sans-serif; color: #9fd0ff; }
.hb-pick-b:hover { border-color: #f0d28a; background: rgba(80, 40, 24, 0.6); }
.hb-pick-b.on { border-color: #ffe08a; box-shadow: inset 0 0 0 1px #ffe08a; }
.hb-pick-none { padding: 3px 2px; font-size: 12px; color: #85765f; }
.skd-hb { font-size: 11.5px; color: #85765f; text-align: center; }
/* ฉากต่อสู้: แถวล่างของแผงคำสั่ง (ซ่อนตอนสั่งขุนพล) */
#battle-ui .bt-cmd .hb { position: static; align-self: center; flex-wrap: nowrap; margin-top: 7px; padding: 0; background: none; border: 0; box-shadow: none; }
#battle-ui .bt-cmd .hb-slot { width: 42px; height: 42px; }
#battle-ui .bt-cmd .hb-slot .sk-img, #battle-ui .bt-cmd .hb-slot .item-img { width: 32px; height: 32px; }
#battle-ui .bt-cmd.pet .hb { display: none; }
@media (hover: none) { .hb-slot kbd { display: none; } }
@media (max-width: 720px), (max-height: 500px) {
  .hb { gap: 3px; padding: 4px; }
  .hb-slot { width: 36px; height: 36px; }
  .hb-slot .sk-img, .hb-slot .item-img { width: 28px; height: 28px; }
  .hb-slot em { font-size: 10px; }
}
@media (max-width: 700px) {
  #battle-ui .bt-cmd .hb { margin-top: 6px; }
  #battle-ui .bt-cmd .hb-slot { width: 38px; height: 38px; }
  #battle-ui .bt-cmd .hb-slot .sk-img, #battle-ui .bt-cmd .hb-slot .item-img { width: 30px; height: 30px; }
  #battle-ui.has-hb .bt-log { bottom: 164px; }
}
@media (max-height: 500px) and (min-width: 701px) {
  #battle-ui .bt-cmd .hb { margin-top: 5px; }
  #battle-ui .bt-cmd .hb-slot { width: 36px; height: 36px; }
  #battle-ui .bt-cmd .hb-slot .sk-img, #battle-ui .bt-cmd .hb-slot .item-img { width: 28px; height: 28px; }
}