#graph { --map-art-size: .84; }
#graph[data-zoom="far"] { --map-art-size: .65; }
#graph[data-zoom="near"] { --map-art-size: 1; }
[data-light-map] #graph[data-zoom="far"] { --map-art-size: .79; }
[data-native-terrain-art] #graph .m-trees { opacity: .38; }

#graph .map-art-frame { transform: scale(var(--map-art-size)); transform-origin: 0 0; }
#graph .map-art-foot { fill: #0b0c14; opacity: .26; pointer-events: none; }
#graph .map-art-sprite { pointer-events: bounding-box; }
#graph [data-map-art]:not([data-map-art-ready]) > .map-art-frame { visibility: hidden; }
#graph .poi[data-map-art-ready] > :is(.ic,.ring2,.hole,.mark,.swarm,.glow,.rk-t,[class^="mk-"]),
#graph .node[data-map-art-ready] > :is(.body,.ring,.glyph,.aura,.halo),
#graph .badge[data-map-art-ready] > :is(path,circle),
#graph .m-route-art[data-map-art-ready] > .m-caravan { visibility: hidden; }
#graph .poi[data-map-art-ready]:hover .map-art-foot,
#graph .node[data-map-art-ready].sel .map-art-foot { fill: var(--gold); opacity: .8; }
#graph .badge .map-art-frame { transform: none; pointer-events: none; }
#graph .badge .map-art-sprite { pointer-events: none; }
#graph .m-route-art { pointer-events: none; }
#graph .m-route-art .map-art-frame { transform: scale(var(--map-art-route-scale, 1)); }
#graph .m-route-art .map-art-sprite { pointer-events: none; }
#graph[data-zoom="far"] .m-route-art > .map-art-frame { display: none; }
#graph[data-zoom="far"] .m-route-art[data-map-art-ready] > .m-caravan { visibility: visible; }
#graph[data-zoom="far"] .poi[data-map-art-extra]:not([data-map-art-pinned]),
#graph:not([data-zoom="near"]) .poi:is([data-map-art-extra="port"],[data-map-art-extra="ore"],[data-map-art-extra="fishery"],[data-map-art-extra="farm"]):not([data-map-art-pinned]) { display: none; }
.native-map-art-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 104px), 1fr)); column-gap: 6px; }
.native-map-art-layers label { line-height: 1.3; }
@media (pointer: coarse) {
  .native-map-settings :is(select, fieldset label) { min-height: 44px; }
}

/* ---------- avatar hook (ชุด A: โครงให้ชุด B เติมรูป; B ถือ avatar-art.css) ----------
   เมื่อ decoratePeople/attach() ติดรูป avatar ให้โหนดแล้ว คลาส .glyph จะถูกซ่อน
   ด้วยกฎ #graph .node[data-map-art-ready] > :is(...) ด้านบนอยู่แล้ว
   - วงกลม: ตัดรูปเป็นวงกลมให้ตรงกับ .pt ของคน
   - L0 fallback: โหนดเล็ก (r < 8) ยังใช้ตัวอักษร (.glyph) ตามเดิม — ห้ามซ่อน */
#graph .node .map-art-sprite[data-art-kind="avatar"] { clip-path: circle(50%); }
#graph .node[data-art-kind="avatar"] .map-art-foot { opacity: .18; }