/* ── artwork: การ์ดแปลงที่ดิน ── */
.tile-art { position: relative; aspect-ratio: 1/0.82; overflow: hidden;
  background: radial-gradient(circle at 50% 62%, #3a4a3a, #1a1512); }
.tile-img, .tile-over { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 118%; height: auto; display: block; }
.tile-over { width: 62%; top: 42%; filter: drop-shadow(0 4px 8px #0007); }
.tile.q-bg-rich .tile-art { background: radial-gradient(circle at 50% 62%, #4a4326, #1a1512); }
.tile.q-bg-prime .tile-art { background: radial-gradient(circle at 50% 62%, #4a2a44, #1a1512); }
.tile.q-bg-unknown .tile-art { background: radial-gradient(circle at 50% 62%, #2e3440, #14171c); }
.tile-unknown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 800; color: #6b7484; }
.tile-workers { position: absolute; bottom: 6px; left: 8px; font-size: 14px; letter-spacing: -3px;
  filter: drop-shadow(0 2px 3px #000); }

/* ── ตัวละครใน UI — เรนเดอร์จากโมเดล voxel ตัวเดียวกับในแมป (js/portrait.js) ── */
.av { position: relative; display: inline-block; }
.av-img { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 3px 5px #0007); }
.av-shadow { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  width: 58%; height: 11%; background: radial-gradient(ellipse, #000a, #0000 70%); }
.av-aura { position: absolute; bottom: -6%; left: 50%; transform: translateX(-50%);
  width: 96%; height: 30%; border-radius: 50%;
  background: radial-gradient(ellipse, var(--ac), transparent 68%); opacity: .55;
  animation: pl 2.2s ease-in-out infinite; }

/* ── ร้านสกิน ── */
.skin-pv { width: 100%; height: 54px; object-fit: contain; object-position: bottom center; margin-bottom: 2px; }
.skin-aura { display: block; width: 100%; height: 54px; border-radius: 8px;
  background: radial-gradient(ellipse at 50% 78%, var(--ac), transparent 66%); }