/* Map popup (<dialog>). Full screen on phones. */
.popup {
  width: min(940px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; overflow-y: auto;
  background: #15171c; color: var(--fg);
  border: 1px solid var(--line); border-radius: 14px;
}
.popup::backdrop { background: rgba(0, 0, 0, 0.72); }

.popup-close {
  position: sticky; top: 10px; float: right; z-index: 2; margin: 10px 10px 0 0;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: #1f2229; border: 1px solid var(--line); border-radius: 10px;
}

/* Narrow: one column — the map, the item, then where the shop is (.popup-map lets
   its two parts sit in the column on their own). Wide: map + shop on the left,
   the item on the right. */
.popup-body { display: flex; flex-direction: column; gap: 20px; padding: 20px; }
.popup-map { display: contents; }
.popup-place { order: 1; display: flex; flex-direction: column; gap: 14px; }
.popup-info { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 820px) {
  .popup-body { flex-direction: row; }
  .popup-map {
    flex: 1.25 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px;
    container-type: inline-size;   /* 100cqw = the column's width, for the map's max height */
  }
  .popup-info { flex: 1 1 0; }
  /* beside a tall item the map grows up to its tallest shape (--map-max-ratio, set by
     mapView.js), and the shop's place stays right under it */
  .popup-map .map-wrap { max-height: calc(var(--map-max-ratio) * 100cqw); }
}

.popup-head { display: flex; align-items: center; gap: 12px; padding-right: 44px; }
.popup-icon {
  flex: none; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  background: var(--card); border-radius: var(--radius);
}
.popup-icon svg { width: 44px; height: 44px; }
.popup-title { margin: 0; font-size: 22px; line-height: 1.3; }
.popup-price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.popup-price strong { font-size: 26px; }

.info-grid {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px;
  padding: 14px; background: var(--card); border-radius: var(--radius);
  overflow-wrap: anywhere;
}

/* map — the wrap fills the map column; mapView.js draws the view in its shape */
.map-wrap { position: relative; flex: 1; }
.map-view {
  position: relative; width: 100%; border-radius: var(--radius); overflow: hidden;
  container-type: inline-size;  /* lets the shop label size itself in cqw */
  background-color: #3a3125; background-repeat: no-repeat;
  border: 1px solid #4a3f30;
}
.map-missing {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 4 / 3; border-radius: var(--radius); background: #2b241b; color: var(--muted);
}
.map-zoom { position: absolute; left: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; }
.map-zoom-btn {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: rgba(17, 19, 23, 0.85); border: 1px solid var(--line); border-radius: 8px;
  font-size: 22px; font-weight: 700; line-height: 1;
}
.map-zoom-btn:hover:not([disabled]) { border-color: var(--gold); color: var(--gold); }
.map-zoom-btn[disabled] { opacity: 0.35; cursor: default; }
.marker { position: absolute; width: 0; height: 0; }
.marker-ring {
  position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(245, 179, 1, 0.25); border: 2px solid rgba(245, 179, 1, 0.6);
  animation: pulse 1.6s ease-out infinite;
}
.marker-dot {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--bg);
}
/* shop name · x,y — a long name ends in "…" so it stays inside the map; x,y always shows.
   Its max width and place (.marker-right / -left / -center, + -below) are set in mapView.js. */
.marker-label {
  position: absolute; left: 14px; top: -36px; white-space: nowrap;
  display: flex; gap: 4px;
  padding: 4px 8px; border-radius: 6px; background: var(--bg); color: var(--gold); font-size: 12px; font-weight: 600;
}
.marker-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.marker-xy { flex: none; }
.marker-left .marker-label { left: auto; right: 14px; }
.marker-center .marker-label { left: 0; top: -50px; transform: translateX(-50%); }
.marker-below .marker-label { top: 26px; }
@keyframes pulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .marker-ring { animation: none; } }

.map-inset {
  position: absolute; right: 8px; bottom: 8px; width: 88px; height: 88px;
  background-size: 100% 100%;
  border: 1px solid #5a4c38; border-radius: 6px;
}
.inset-box { position: absolute; border: 1.5px solid var(--gold); }
.inset-name { position: absolute; left: 6px; bottom: 4px; font-size: 10px; color: #e8dcc8; text-shadow: 0 1px 2px #000; }

@media (max-width: 600px) {
  .popup { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; border: 0; }
  .popup-body { padding: 12px; }
  /* close button over the map's corner (a float here made the whole page narrower) */
  .popup > .popup-close { position: fixed; top: 18px; right: 18px; float: none; margin: 0; }
  .popup-place .btn-wide { padding: 0 14px; }   /* more room for "คัดลอก /navi ... ไปวางในเกม" */
}

/* "ราคาขายจริง" box (marketPrice.js): median of real sales; the badge (this shop vs
   the median, .market-badge in card.css) goes after the shop's price in .popup-price */
.market, .buyers, .item-desc { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--card); border-radius: var(--radius); }
.market-head { display: flex; justify-content: space-between; gap: 8px; }
.market p { margin: 0; }
.market-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.market-main strong { font-size: 20px; color: var(--gold); }
.market-line, .market-none { font-size: 13px; }

/* "มีคนรับซื้อ N คน" (buyersList.js): one row per member's รับซื้อ post, in the board's colour */
.buyers-title { color: #f87171; font-weight: 600; }
.buyers-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.buyer { padding: 6px 0; border-top: 1px solid var(--card-line); }
.buyer:first-child { border-top: 0; }
.buyer-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.buyer-price { color: var(--gold); white-space: nowrap; }
.buyer-price.is-none { color: var(--muted); font-weight: 400; font-size: 13px; }
.buyer-wants {
  margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* "รายละเอียดไอเท็ม" (itemDescription.js): the game's text, colours set per part */
.desc-line { margin: 0; min-height: 1.45em; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.item-desc.is-folded .desc-extra { display: none; }
.desc-more { align-self: flex-start; padding: 2px 0; background: none; border: 0; color: var(--gold); font-size: 13px; cursor: pointer; }

/* "การ์ดที่ใส่" (cardRow.js): card names are buttons; the chosen card's text under the row */
.card-chips { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.card-chip {
  padding: 0; background: none; border: 0; color: var(--card-slot); text-align: left;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.card-chip:hover, .card-chip[aria-expanded="true"] { color: var(--gold); }
.card-effect { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #1b1e24; border-radius: 8px; }
.card-effect[hidden] { display: none; }
.card-effect-name { color: var(--card-slot); font-size: 14px; }