/* ==== Card Viewer overrides (scoped to viewer only) ==== */
[data-view="collection"] #paragon-display { position: relative; z-index: 0; }
[data-view="collection"] #paragon-bg      { position: absolute; inset: 0; z-index: 0; }
[data-view="collection"] #paragon-list    { position: absolute; inset: 0; z-index: 2; pointer-events: auto !important; }

/* Make sure images are actually visible and clickable */
[data-view="collection"] #paragon-list img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  /* keep size sane in case another CSS zeroes it */
  width: 125px !important;
  height: auto !important;
  z-index: 3 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* When something is "selected", give it the center pose and pop */
[data-view="collection"] #paragon-list img.selected {
  transform: translateX(-50%) scale(1.4) !important;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.6)) !important;
}

/* Ensure pose classes still position properly */
[data-view="collection"] #paragon-list img.left   { left: 18% !important; transform: translateX(-50%) scale(1.3) !important; }
[data-view="collection"] #paragon-list img.center { left: 50% !important; transform: translateX(-50%) scale(1.3) !important; }
[data-view="collection"] #paragon-list img.right  { left: 82% !important; transform: translateX(-50%) scale(1.3) !important; }