/* the admin's boss tuning (js/bosstune.js): the F10 panel's 🐉 ปรับบอส tab - a list of every boss, one boss's editor */
.bt-host { color: #f3e9d2; font-family: Mali, Fredoka, sans-serif; display: flex; flex-direction: column; gap: 8px; }
.bt-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bt-where { color: #b9ab8c; font-size: 0.82rem; }
.bt-n { margin-left: auto; color: #ffe2a0; font-size: 0.85rem; }
.bt-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bt-chip {
  min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(201, 162, 74, 0.45);
  background: rgba(255, 255, 255, 0.05); color: #f3e9d2; font: 700 0.86rem Mali, Fredoka, sans-serif; cursor: pointer;
}
.bt-chip small { color: #b9ab8c; font-weight: 400; }
.bt-chip.on { background: #c9a24a; color: #20160a; border-color: #ffe2a0; }
.bt-chip.on small { color: #3a2a10; }
.bt-q { margin-left: auto; min-width: 200px; min-height: 34px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(201, 162, 74, 0.45); background: rgba(0, 0, 0, 0.3); color: #f3e9d2; }

/* the list: one equal line a boss */
.bt-head, .bt-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) 44px 108px 88px 112px 58px; gap: 8px; align-items: center; }
.bt-head { padding: 0 8px 0 10px; color: #b9ab8c; font-size: 0.74rem; }
.bt-rows { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; padding-right: 2px; }
.bt-row {
  min-height: 40px; padding: 3px 8px 3px 10px; border-radius: 9px; border: 1px solid rgba(201, 162, 74, 0.22);
  background: rgba(255, 255, 255, 0.04); cursor: pointer; white-space: nowrap; font-size: 0.88rem;
}
.bt-row:hover { background: rgba(255, 226, 160, 0.09); border-color: rgba(232, 185, 74, 0.6); }
.bt-row.tuned { border-color: rgba(120, 200, 255, 0.55); }
.bt-row > * { overflow: hidden; text-overflow: ellipsis; }
.bt-name { color: #ffe2a0; }
.bt-mark { font-style: normal; font-size: 0.7rem; color: #8fd0ff; }
.bt-w { color: #cfc3a6; font-size: 0.8rem; }
.bt-lv, .bt-hp, .bt-dm, .bt-ar { font-family: Fredoka, Mali, sans-serif; text-align: right; }
.bt-ar { color: #b9ab8c; font-size: 0.8rem; }
.bt-ch { color: #8fd0ff; font-weight: 700; }

/* one boss */
.bt-ed { display: flex; flex-direction: column; gap: 10px; }
.bt-edtop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bt-edtop b { font-size: 1.15rem; color: #ffe2a0; }
.bt-edtop small { color: #b9ab8c; font-size: 0.78rem; }
.bt-set { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.bt-set label { display: flex; align-items: center; gap: 8px; min-width: 92px; font-weight: 700; }
.bt-set input { width: 170px; min-height: 34px; font: 700 1rem Fredoka, Mali, sans-serif; }
.bt-x { min-width: 56px; color: #8fd0ff; font-family: Fredoka, Mali, sans-serif; }
.bt-warn { color: #ff9a7a; font-size: 0.8rem; margin: 4px 0 0; }
.bt-drops { display: flex; flex-direction: column; gap: 4px; }
.bt-drop {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 70px 118px 170px; gap: 8px; align-items: center;
  min-height: 42px; padding: 2px 8px 2px 4px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(201, 162, 74, 0.2);
}
.bt-drop.off { opacity: 0.45; }
.bt-ic { width: 36px; height: 36px; padding: 0; border-radius: 8px; border: 1px solid rgba(201, 162, 74, 0.45); background: rgba(0, 0, 0, 0.35); cursor: pointer; }
.bt-ic[disabled] { cursor: default; }
.bt-ic img { width: 100%; height: 100%; object-fit: contain; }
.bt-dn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; }
.bt-dn small { color: #b9ab8c; font-size: 0.72rem; }
.bt-dq { color: #cfc3a6; font-size: 0.82rem; text-align: right; }
.bt-dp { text-align: right; font-family: Fredoka, Mali, sans-serif; white-space: nowrap; }
.bt-dp input { width: 76px; }
.bt-da { display: flex; justify-content: flex-end; align-items: center; gap: 6px; white-space: nowrap; }
.bt-da input { width: 56px; }
.bt-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.bt-add #bt-addb { flex: 1; min-width: 220px; min-height: 34px; }
.bt-add input[type="number"] { width: 70px; }
.bt-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bt-foot small { color: #b9ab8c; font-size: 0.78rem; }