/* ---------- the name scan "สแกน" (2026-10-18, js/scan.js): a Lordnine-style list of who is around. The button sits in the right
   column under the minimap in the slot frame of อัญเชิญ (js/gacha.js); the panel is light obsidian glass with a thin gold edge
   (the HUD's Obsidian Gold). Rows carry the name-plate colours of js/mmo.js: blue party, red may fight you, orange PvP on,
   green others. Made easy to read the same day ("ให้เข้าใจง่ายดูง่าย"): pill tabs with count badges, whole names on two
   lines, HP bar with %, metres, badges, ⚙ settings sheet. Sized in HUD units (--u on #ui). ---------- */
#scanbtn {
  position: fixed; z-index: 880; width: 58px; height: 58px; padding: 0; border: 0; cursor: pointer; display: grid; place-items: center;
  background: url(../assets/ui_book/hud_item_slot.png) center / 100% 100% no-repeat; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
  transition: transform 0.12s;
}
#scanbtn img { width: 86%; height: 86%; object-fit: contain; pointer-events: none; }
#scanbtn b {
  position: absolute; left: 50%; bottom: calc(-11px * var(--u)); transform: translateX(-50%); padding: 1px calc(8px * var(--u)); border-radius: 999px;
  white-space: nowrap; pointer-events: none; font: 800 calc(12px * var(--u)) / calc(16px * var(--u)) 'Mali', sans-serif; color: #ffe7a6;
  background: #1d1410; border: 1px solid #b8893a;
}
#scanbtn kbd {
  position: absolute; left: calc(-4px * var(--u)); top: calc(-4px * var(--u)); min-width: calc(16px * var(--u)); height: calc(16px * var(--u)); padding: 0 2px;
  display: grid; place-items: center; box-sizing: border-box; pointer-events: none;
  background: url(../assets/ui_book/hud_key.png) center / 100% 100% no-repeat; color: #241a0e; font: 800 calc(10px * var(--u)) 'Mali', sans-serif;
}
#scanbtn:hover { transform: scale(1.08); }
#scanbtn.on { filter: drop-shadow(0 0 calc(6px * var(--u)) rgba(125, 255, 176, 0.75)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); }
#scanbtn.on b { color: #c9ffdc; border-color: #5fd08f; }
#scanbtn .sc-badge {   /* players who may fight you right now, near */
  position: absolute; right: calc(-5px * var(--u)); top: calc(-5px * var(--u)); min-width: calc(18px * var(--u)); height: calc(18px * var(--u));
  padding: 0 calc(4px * var(--u)); box-sizing: border-box; border-radius: 999px; display: grid; place-items: center; pointer-events: none;
  background: #e2392f; color: #fff; font: 700 calc(11.5px * var(--u)) / 1 Fredoka, 'Segoe UI', Arial, sans-serif; font-style: normal;
  box-shadow: 0 0 0 2px #2a1408, 0 0 8px rgba(255, 90, 74, 0.8);
}
#scanbtn.alert { animation: scAlert 0.7s ease-in-out infinite; }
@keyframes scAlert { 50% { transform: scale(1.1); filter: drop-shadow(0 0 calc(10px * var(--u)) rgba(255, 70, 60, 0.95)); } }

#scanpanel {
  position: fixed; z-index: 879; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden;
  container: scan / inline-size;   /* (narrow: the parts that can go, go - @container below) */
  width: min(calc(320px * var(--u)), calc(100vw - 16px));
  padding: calc(6px * var(--u));
  border-radius: calc(10px * var(--u));
  background: linear-gradient(180deg, rgba(22, 24, 36, 0.9), rgba(10, 11, 18, 0.9));
  border: 1px solid rgba(214, 178, 96, 0.7);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 236, 180, 0.1), 0 calc(6px * var(--u)) calc(16px * var(--u)) rgba(0, 0, 0, 0.4);
  color: #f3ead2; font: 600 calc(12px * var(--u)) Mali, Fredoka, sans-serif;
  animation: scIn 0.22s ease-out;
}
#scanpanel[hidden] { display: none; }
#scanpanel [hidden] { display: none !important; }
@keyframes scIn { from { opacity: 0; transform: translateX(calc(24px * var(--u))); } }
/* the scan's sweep when it opens: a green light passes down the list once */
#scanpanel::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(125, 255, 176, 0.16) 70%, rgba(125, 255, 176, 0.38) 96%, transparent);
}
#scanpanel.sweep::after { animation: scSweep 0.75s ease-out; }
@keyframes scSweep { 0% { opacity: 1; transform: translateY(-100%); } 100% { opacity: 0.2; transform: translateY(250%); } }

/* the title line: drags the panel (js/hudbox.js); ⟳ ⚙ ? ✕ on the right */
#scanpanel .sc-h { flex: none; display: flex; align-items: center; gap: calc(4px * var(--u)); padding: 0 calc(1px * var(--u)) calc(6px * var(--u)); cursor: move; touch-action: none; }
#scanpanel .sc-h img { flex: none; width: calc(24px * var(--u)); height: calc(24px * var(--u)); object-fit: contain; }
#scanpanel .sc-h b { flex: none; color: #ffd977; font-weight: 800; font-size: calc(14.5px * var(--u)); letter-spacing: 0.02em; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8); }
#scanpanel .sc-st { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b9ae94; font-size: calc(10.5px * var(--u)); }
#scanpanel .sc-hb {
  flex: none; width: calc(26px * var(--u)); height: calc(26px * var(--u)); display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid rgba(214, 178, 96, 0.35); border-radius: 50%; background: rgba(255, 255, 255, 0.04);
  color: #e9dfc4; font: 700 calc(13px * var(--u)) / 1 Fredoka, 'Segoe UI', Arial, sans-serif;
}
#scanpanel .sc-hb:hover { background: rgba(255, 217, 119, 0.18); color: #fff; border-color: #d9a443; }
#scanpanel .sc-re.need { color: #7dffb0; border-color: #5fd08f; box-shadow: 0 0 calc(6px * var(--u)) rgba(125, 255, 176, 0.5); }   /* (no live refresh: ⟳ is the way) */
#scanpanel .sc-x { border-color: transparent; background: transparent; }

/* tabs: pills with the count in a little badge; they wrap rather than run into each other */
#scanpanel .sc-tabs { flex: none; display: flex; flex-wrap: wrap; gap: calc(3px * var(--u)); margin-bottom: calc(6px * var(--u)); }
#scanpanel .sc-tabs button {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: calc(4px * var(--u)); min-width: 0;
  padding: calc(4px * var(--u)) calc(5px * var(--u)) calc(4px * var(--u)) calc(8px * var(--u));
  border: 1px solid rgba(214, 178, 96, 0.3); border-radius: 999px; background: rgba(255, 255, 255, 0.05); cursor: pointer;
  color: #d8cdb0; font: 700 calc(11px * var(--u)) Mali, Fredoka, sans-serif; white-space: nowrap;
}
#scanpanel .sc-tabs button em {
  font: normal 700 calc(10px * var(--u)) / calc(15px * var(--u)) Fredoka, 'Segoe UI', Arial, sans-serif; min-width: calc(15px * var(--u));
  padding: 0 calc(4px * var(--u)); box-sizing: border-box; border-radius: 999px; background: rgba(0, 0, 0, 0.5); color: #f3ead2; text-align: center;
}
#scanpanel .sc-tabs button:hover { background: rgba(255, 217, 119, 0.12); color: #fff; }
#scanpanel .sc-tabs button.on { background: linear-gradient(180deg, rgba(255, 217, 119, 0.34), rgba(160, 112, 30, 0.34)); border-color: #d9a443; color: #fff1c6; }
#scanpanel .sc-tabs button.on em { background: #ffd977; color: #2a1c08; }
#scanpanel .sc-tabs button.hot em { background: #e2392f; color: #fff; }

/* how to use (?) */
#scanpanel .sc-help { flex: none; margin: 0 0 calc(6px * var(--u)); padding: calc(6px * var(--u)) calc(8px * var(--u)); border-radius: calc(8px * var(--u)); background: rgba(255, 217, 119, 0.08); border: 1px solid rgba(214, 178, 96, 0.3); }
#scanpanel .sc-help p { display: flex; gap: calc(6px * var(--u)); margin: calc(2px * var(--u)) 0; color: #e9dfc4; font-size: calc(11px * var(--u)); line-height: 1.35; }
#scanpanel .sc-help b { flex: none; width: calc(16px * var(--u)); text-align: center; color: #ffd977; }

/* the list */
#scanpanel .sc-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: calc(4px * var(--u));
  scrollbar-width: thin; scrollbar-color: rgba(214, 178, 96, 0.5) transparent; touch-action: pan-y;
}
#scanpanel .sc-row {
  --rc: #c9ffb8;
  position: relative; display: flex; align-items: center; gap: calc(7px * var(--u)); flex: none;
  padding: calc(5px * var(--u)) calc(5px * var(--u)) calc(5px * var(--u)) calc(8px * var(--u)); box-sizing: border-box;
  border-radius: calc(8px * var(--u)); background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; cursor: pointer; outline: none;
  user-select: none; -webkit-user-select: none;
}
#scanpanel .sc-row::before {   /* the relation colour along the left edge */
  content: ''; position: absolute; left: 0; top: calc(7px * var(--u)); bottom: calc(7px * var(--u)); width: calc(3px * var(--u)); border-radius: 0 3px 3px 0; background: var(--rc);
}
#scanpanel .sc-row:hover, #scanpanel .sc-row:focus-visible { background: rgba(255, 255, 255, 0.1); }
#scanpanel .sc-row.sel { background: linear-gradient(90deg, rgba(255, 217, 119, 0.24), rgba(255, 217, 119, 0.07)); border-color: #e3b04c; box-shadow: 0 0 calc(6px * var(--u)) rgba(255, 210, 100, 0.35); }
#scanpanel .sc-row.atk { background: linear-gradient(90deg, rgba(255, 90, 74, 0.32), rgba(255, 90, 74, 0.07)); border-color: #ff7a5a; box-shadow: 0 0 calc(6px * var(--u)) rgba(255, 90, 74, 0.4); }
#scanpanel .sc-row.r-party { --rc: #8fd8ff; }
#scanpanel .sc-row.r-foe { --rc: #ff8a7a; }
#scanpanel .sc-row.r-pvp { --rc: #ffbe7a; }
#scanpanel .sc-row.r-npc { --rc: #bfe6ff; }
#scanpanel .sc-row.r-mob { --rc: #9a8f78; }
#scanpanel .sc-row.r-elite { --rc: #ffb347; }
#scanpanel .sc-row.r-mini { --rc: #ff9ab8; }
#scanpanel .sc-row.r-boss { --rc: #ffd24a; }
#scanpanel .sc-row.dead { opacity: 0.45; }
#scanpanel .sc-ic {
  position: relative; flex: none; width: calc(38px * var(--u)); height: calc(38px * var(--u)); display: grid; place-items: center; border-radius: calc(7px * var(--u));
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.35)); box-shadow: inset 0 0 0 1px rgba(214, 178, 96, 0.35);
}
#scanpanel .sc-ic img { width: 92%; height: 92%; object-fit: contain; }
#scanpanel .sc-aim {   /* the locked target / the one being fought: a mark on its picture */
  position: absolute; right: calc(-5px * var(--u)); top: calc(-5px * var(--u)); display: none; font-style: normal; font-size: calc(13px * var(--u)); line-height: 1;
  filter: drop-shadow(0 1px 1px #000);
}
#scanpanel .sc-row.sel .sc-aim, #scanpanel .sc-row.atk .sc-aim { display: block; }
#scanpanel .sc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2px * var(--u)); }
#scanpanel .sc-nm {   /* the whole name: two lines when long */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
  color: var(--rc); font-weight: 800; font-size: calc(13px * var(--u)); line-height: 1.2; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}
#scanpanel .sc-row.r-mob .sc-nm { color: #f6eedb; }
#scanpanel .sc-l2 { display: flex; align-items: center; flex-wrap: wrap; gap: calc(3px * var(--u)) calc(4px * var(--u)); min-width: 0; }
#scanpanel .sc-lv {
  flex: none; padding: 0 calc(5px * var(--u)); border-radius: calc(5px * var(--u)); background: rgba(0, 0, 0, 0.45);
  font: normal 700 calc(10.5px * var(--u)) / calc(16px * var(--u)) Fredoka, 'Segoe UI', Arial, sans-serif; color: #fff3d6;
}
#scanpanel .sc-bd { display: contents; }
#scanpanel .sc-bd i {
  flex: none; font-style: normal; padding: 0 calc(5px * var(--u)); border-radius: calc(5px * var(--u)); font: 800 calc(10px * var(--u)) / calc(16px * var(--u)) Mali, Fredoka, sans-serif;
  color: #1c1308; background: #c9bfa6;
}
#scanpanel .sc-bd .b-boss { background: linear-gradient(180deg, #ffe28a, #e0a93a); }
#scanpanel .sc-bd .b-mini { background: #ff9ab8; }
#scanpanel .sc-bd .b-elite { background: #ffb347; }
#scanpanel .sc-bd .b-foe { background: #ff6a5a; color: #fff; }
#scanpanel .sc-bd .b-pvp { background: #ffbe7a; }
#scanpanel .sc-bd .b-party { background: #8fd8ff; }
#scanpanel .sc-bd .b-quest { background: #8be37b; }
#scanpanel .sc-bd .b-busy { background: rgba(255, 255, 255, 0.18); color: #e9dfc4; }
#scanpanel .sc-bd .b-dead { background: #555; color: #ddd; }
#scanpanel .sc-sub { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b9ae94; font-size: calc(10.5px * var(--u)); }
#scanpanel .sc-row.r-party .sc-sub, #scanpanel .sc-row.r-pl .sc-sub, #scanpanel .sc-row.r-foe .sc-sub, #scanpanel .sc-row.r-pvp .sc-sub { color: #9fe8b4; }
/* HP: a clear bar and its % */
#scanpanel .sc-hpw { display: flex; align-items: center; gap: calc(5px * var(--u)); }
#scanpanel .sc-hp { flex: 1; height: calc(7px * var(--u)); border-radius: 4px; background: rgba(0, 0, 0, 0.6); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7); }
#scanpanel .sc-hp i { display: block; height: 100%; background: linear-gradient(180deg, #ff8a78, #c8322a); transition: width 0.25s; }
#scanpanel .sc-row.r-party .sc-hp i, #scanpanel .sc-row.r-pl .sc-hp i, #scanpanel .sc-row.r-pvp .sc-hp i, #scanpanel .sc-row.r-npc .sc-hp i { background: linear-gradient(180deg, #9be88a, #3f9a3a); }
#scanpanel .sc-pc { flex: none; min-width: calc(30px * var(--u)); text-align: right; font: 700 calc(10.5px * var(--u)) Fredoka, 'Segoe UI', Arial, sans-serif; color: #f3ead2; }
#scanpanel .sc-hpw.low .sc-pc { color: #ff8a78; }
/* right side: the distance and ⓘ */
#scanpanel .sc-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: calc(4px * var(--u)); }
#scanpanel .sc-d { white-space: nowrap; color: #e9dfc4; font: 600 calc(11.5px * var(--u)) Fredoka, Mali, 'Segoe UI', sans-serif; }
#scanpanel .sc-info {
  width: calc(24px * var(--u)); height: calc(24px * var(--u)); display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid rgba(214, 178, 96, 0.55); border-radius: 50%; background: rgba(0, 0, 0, 0.35);
  color: #ffd977; font: italic 800 calc(12px * var(--u)) Georgia, serif;
}
#scanpanel .sc-info:hover { background: rgba(255, 217, 119, 0.2); color: #fff; }
#scanpanel .sc-empty { margin: calc(10px * var(--u)) calc(6px * var(--u)); color: #b9ae94; font-size: calc(11.5px * var(--u)); text-align: center; line-height: 1.45; }

/* the settings sheet (⚙): over the list, its own scroll */
#scanpanel .sc-set {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(40px * var(--u)); z-index: 2; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(20, 22, 33, 0.98), rgba(10, 11, 18, 0.98)); border-top: 1px solid rgba(214, 178, 96, 0.5);
}
#scanpanel .ss-h { flex: none; display: flex; align-items: center; justify-content: space-between; padding: calc(6px * var(--u)) calc(8px * var(--u)); }
#scanpanel .ss-h b { color: #ffd977; font-size: calc(13px * var(--u)); }
#scanpanel .ss-done {
  padding: calc(3px * var(--u)) calc(12px * var(--u)); border-radius: 999px; border: 1px solid #d9a443; cursor: pointer;
  background: linear-gradient(180deg, #f4cf6c, #c58f2c); color: #2a1c08; font: 800 calc(11.5px * var(--u)) Mali, Fredoka, sans-serif;
}
#scanpanel .ss-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 calc(8px * var(--u)) calc(8px * var(--u)); scrollbar-width: thin; scrollbar-color: rgba(214, 178, 96, 0.5) transparent; touch-action: pan-y; }
#scanpanel .ss-body section { margin-bottom: calc(8px * var(--u)); }
#scanpanel .ss-body h5 { margin: 0 0 calc(4px * var(--u)); color: #e9c97a; font: 700 calc(11px * var(--u)) Mali, sans-serif; }
#scanpanel .ss-chips, #scanpanel .ss-seg { display: flex; flex-wrap: wrap; gap: calc(4px * var(--u)); }
#scanpanel .ss-chips button, #scanpanel .ss-seg button {
  flex: 1 1 auto; padding: calc(4px * var(--u)) calc(8px * var(--u)); border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(214, 178, 96, 0.3); background: rgba(255, 255, 255, 0.04); color: #cfc4a8; font: 700 calc(11px * var(--u)) Mali, Fredoka, sans-serif;
}
#scanpanel .ss-chips button::before { content: '○ '; }
#scanpanel .ss-chips button.on::before { content: '✓ '; }
#scanpanel .ss-chips button.on, #scanpanel .ss-seg button.on { background: linear-gradient(180deg, rgba(255, 217, 119, 0.34), rgba(160, 112, 30, 0.34)); border-color: #d9a443; color: #fff1c6; }
#scanpanel .ss-sws { display: flex; flex-direction: column; gap: calc(5px * var(--u)); }
#scanpanel .ss-sw {
  display: flex; align-items: center; gap: calc(8px * var(--u)); width: 100%; padding: calc(5px * var(--u)) calc(6px * var(--u)); text-align: left; cursor: pointer;
  border: 1px solid rgba(214, 178, 96, 0.22); border-radius: calc(8px * var(--u)); background: rgba(255, 255, 255, 0.03); color: #e9dfc4; font: 700 calc(11.5px * var(--u)) Mali, Fredoka, sans-serif;
}
#scanpanel .ss-sw i {   /* the switch */
  position: relative; flex: none; width: calc(30px * var(--u)); height: calc(16px * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.18); transition: background 0.15s;
}
#scanpanel .ss-sw i::after { content: ''; position: absolute; left: calc(2px * var(--u)); top: calc(2px * var(--u)); width: calc(12px * var(--u)); height: calc(12px * var(--u)); border-radius: 50%; background: #f3ead2; transition: left 0.15s; }
#scanpanel .ss-sw.on i { background: #5fc46f; }
#scanpanel .ss-sw.on i::after { left: calc(16px * var(--u)); }
#scanpanel .ss-sw span { display: flex; flex-direction: column; min-width: 0; }
#scanpanel .ss-sw small { color: #9c927b; font-weight: 600; font-size: calc(10px * var(--u)); }
#scanpanel .ss-foot { display: flex; flex-wrap: wrap; gap: calc(6px * var(--u)); margin-top: calc(4px * var(--u)); }
#scanpanel .ss-foot button {
  flex: 1 1 auto; padding: calc(5px * var(--u)) calc(8px * var(--u)); border-radius: calc(8px * var(--u)); cursor: pointer;
  border: 1px solid rgba(214, 178, 96, 0.4); background: rgba(255, 255, 255, 0.04); color: #e9dfc4; font: 700 calc(11px * var(--u)) Mali, Fredoka, sans-serif;
}
#scanpanel .ss-foot button:hover, #scanpanel .ss-chips button:hover, #scanpanel .ss-seg button:hover, #scanpanel .ss-sw:hover { background: rgba(255, 217, 119, 0.12); color: #fff; }

/* narrow (a panel pulled thin, a phone): the side notes go, the name keeps its room */
@container scan (max-width: 270px) {
  #scanpanel .sc-st { display: none; }
  #scanpanel .sc-sub { display: none; }
  #scanpanel .sc-ic { width: calc(32px * var(--u)); height: calc(32px * var(--u)); }
}
@container scan (max-width: 230px) {
  #scanpanel .sc-tabs button { padding-left: calc(7px * var(--u)); padding-right: calc(6px * var(--u)); font-size: calc(10.5px * var(--u)); }
  #scanpanel .sc-pc { min-width: 0; }
}
@media (pointer: coarse) { #scanpanel .sc-hb { width: 30px; height: 30px; font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { #scanpanel, #scanpanel.sweep::after, #scanbtn.alert { animation: none; } }