/* Card chooser pop-up (cardchooser.js): discards and gold picks. Shares the overlay from tradedialog.css. */
.cc-card {
  pointer-events: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; max-width: min(760px, 94%);
  background: var(--surface); color: var(--text); border: 1px solid var(--accent-border-strong); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.cc-head { display: flex; align-items: center; gap: 8px; cursor: grab; touch-action: none; user-select: none; }
.cc-head::before {
  content: ""; width: 10px; height: 14px; flex: 0 0 auto; opacity: 0.55;
  background-image: radial-gradient(circle, var(--muted) 1.2px, transparent 1.45px);
  background-size: 5px 5px; background-repeat: repeat;
}
.cc-head button, .cc-head a { cursor: pointer; touch-action: auto; }
.cc-head b { font-size: 1.05rem; }
.cc-card.is-dragging .cc-head { cursor: grabbing; }
html.is-dragging-card, html.is-dragging-card * { cursor: grabbing !important; }
.cc-card > p { margin: -4px 0 0; }
.cc-fan { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-top: 18px; }
.cc-pick { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cc-option { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cc-option .pcard { cursor: default; }
.cc-option .pcard:hover { transform: none; }
.cc-stepper { display: flex; align-items: center; gap: 6px; }
.cc-stepper b { min-width: 1.2em; text-align: center; font-family: var(--mono); }
.cc-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.cc-count { margin-right: auto; font-family: var(--mono); color: var(--muted); }
.cc-count.ready { color: var(--found); font-weight: 700; }

/* Steal pop-up (stealpopup.js): face-down cards to pick from. */
.sp-row { display: flex; align-items: center; gap: 16px; padding: 6px 0; border-top: 1px solid var(--border); }
.sp-who { display: flex; flex-direction: column; min-width: 90px; }
.sp-who .swatch { margin-bottom: 2px; }
.sp-backs { display: flex; flex-wrap: wrap; gap: 0; align-items: center; }
.card-back {
  width: 46px; height: 66px; margin-right: -14px; padding: 0; border-radius: 7px; cursor: pointer;
  border: 2px solid #2a221e; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  background: repeating-linear-gradient(45deg, #8a3039 0 6px, #af3d47 6px 12px);
  transition: transform 0.15s ease;
}
.card-back:hover, .card-back:focus-visible { transform: translateY(-10px); background: repeating-linear-gradient(45deg, #9a3a43 0 6px, #c24a55 6px 12px); }
.card-back:last-child { margin-right: 0; }
@media (prefers-reduced-motion: reduce) { .card-back { transition: none; } }