/*
 * Most popular cards for one investigator (assets/js/popular-cards.js).
 * Used by the Community Decks popup and the investigator popup on the
 * investigators page.
 */
.ahpc { min-width: 0; }
.ahpc-note { margin: 0 0 12px; font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.ahpc-note a { color: #fff; text-decoration: underline; }
.ahpc-list { column-width: 400px; column-gap: 28px; }
.ahpc-row {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 4px; border-radius: 6px;
  break-inside: avoid; -webkit-column-break-inside: avoid; cursor: default;
}
.ahpc-row:hover { background: rgba(255, 255, 255, 0.06); }
.ahpc-rank { flex: 0 0 24px; font-size: 12px; color: rgba(255, 255, 255, 0.6); text-align: right; }
.ahpc-thumb { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.ahpc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transform: scale(1.6); transform-origin: 50% 30%; }
.ahpc-glyph { font-family: 'ArkhamIcons'; font-style: normal; font-weight: 400; line-height: 1; }
.ahpc-fac { flex: 0 0 20px; width: 20px; text-align: center; font-size: 17px; color: rgba(255, 255, 255, 0.75); }
.ahpc-fac.guardian { color: #4a86b8; } .ahpc-fac.seeker { color: #d29a2e; } .ahpc-fac.rogue { color: #2f9b71; }
.ahpc-fac.mystic { color: #6e5cc8; } .ahpc-fac.survivor { color: #b54a4f; }
.ahpc-card { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ahpc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: #fff; }
.ahpc-sub { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.ahpc-sub .ahpc-glyph { font-size: 12px; }
.ahpc-sub em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahpc-count { flex: 0 0 124px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; white-space: nowrap; color: rgba(255, 255, 255, 0.85); }
.ahpc-bar { width: 110px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.ahpc-bar span { display: block; height: 100%; background: var(--accent, #258075); }
.ahpc-empty { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.75); }

#ahpcPreview {
  position: fixed; z-index: 30000; width: min(430px, 44vw); display: none; pointer-events: none;
  border-radius: 14px; overflow: hidden; background: #111a22; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65);
}
#ahpcPreview.show { display: block; }
#ahpcPreview.is-landscape { width: min(600px, 60vw); }
#ahpcPreview img { display: block; width: 100%; height: auto; max-height: calc(100vh - 16px); object-fit: contain; }

@media (max-width: 932px) {
  .ahpc-count { flex-basis: 96px; }
  .ahpc-bar { width: 84px; }
  #ahpcPreview { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(380px, 92vw); }
  #ahpcPreview.is-landscape { width: min(520px, 96vw); }
}