/* Avatar วงกลม — สไตล์เฉพาะที่ (ไม่แตะ tokens.css / native-layout.css / divine-ui.css)
 * โหลดหลัง map-art.css ตาม tools/compile_native.mjs
 *
 * 1) แผนที่: <image> ของ avatar ถูก clip เป็นวงกลม (สไปรต์มอนสเตอร์ไม่โดน)
 * 2) รายชื่อ "ดูแลโลก": แถวเป็น avatar 36 | เนื้อหา | ★ + content-visibility
 * 3) fallback ตัวอักษร (.av-letter) เมื่อ NativeAvatar ใช้ไม่ได้ หรือแถวเกินเพดาน avatar
 */

/* ---------- 1) แผนที่ ---------- */
#graph .map-art-sprite[data-art-kind="avatar"] {
  clip-path: circle(50% at 50% 50%);
}

/* ---------- 2) รายชื่อ (ค้นหา/ติดตาม) ---------- */
#player-tools .player-person {
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  content-visibility: auto;
  contain-intrinsic-size: 62px;
  contain-intrinsic-size: auto 62px;
}
#player-tools .player-person-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  min-height: 56px;
  padding: 6px 8px;
  text-align: start;
}
#player-tools .player-person-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
#player-tools .player-person-body b {
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#player-tools .player-person small {
  overflow-wrap: anywhere;
}
#player-tools .player-person-av {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  align-self: center;
}
#player-tools .player-person-av .pt {
  width: 36px;
  height: 36px;
  border-width: 1.5px;
}
#player-tools .player-person-av .pt.av-letter {
  line-height: 33px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--panel) 82%, var(--bg));
}

/* ---------- 3) จอแคบ: 320–360px ต้องไม่ล้น (ลดคอลัมน์ avatar + ฟอนต์) ---------- */
@media (max-width: 380px) {
  #player-tools .player-person { grid-template-columns: minmax(0, 1fr) 40px; }
  #player-tools .player-person-main {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 8px;
    padding: 5px 6px;
  }
  #player-tools .player-person-av,
  #player-tools .player-person-av .pt { width: 32px; height: 32px; }
  #player-tools .player-person-av .pt.av-letter { line-height: 29px; font-size: 14px; }
  #player-tools .player-person-body b { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  #graph .map-art-sprite[data-art-kind="avatar"] { transition: none; }
}