/* yes-no-tarot.html CSS [N] Two-card reveal overrides. JS: js/yes-no-page.js, five-card-reveal.js */
/*
  CSS MAP (yes-no-tarot.html [N]):
    N1 — desktop tighter pair (arc-span + inward translateX, data-pick-limit="2")
    N2 — mobile tighter pair
    N3 — not-flippable lock after first flip (data-reading-mode="yes-no")
*/

/* ==== N. YES-NO REVEAL — tighter pair (original yes-no-tarot: cards lean inward, close gap) ==== */

/* ==== N1. DESKTOP — reduced arc-span + inward translateX ==== */
@media (min-width: 670px) {
  .tarot-select-stage[data-pick-limit="2"].reveal-active.reveal-desktop .card-axis.selected {
    --arc-span: 32 !important;
  }

  .tarot-select-stage[data-pick-limit="2"].reveal-active.reveal-desktop .card-axis.circle.selected .card-wrapper,
  .tarot-select-stage[data-pick-limit="2"].reveal-active.reveal-desktop .card-axis.circleOpened.selected .card-wrapper {
    transform: translateY(0) translateX(calc((0.5 - var(--selected-order)) * 18%)) !important;
  }
}

/* ==== N2. MOBILE — reduced arc-span + inward translateX ==== */
@media (max-width: 669px) {
  .tarot-select-stage[data-pick-limit="2"].reveal-active.reveal-mobile .card-axis {
    --arc-span: 34 !important;
  }

  .tarot-select-stage[data-pick-limit="2"].reveal-active.reveal-mobile.openingClickable .card-axis.selected .card-wrapper,
  .tarot-select-stage[data-pick-limit="2"].reveal-active.reveal-mobile.opening-clickable .card-axis.selected .card-wrapper {
    transform: translateX(calc((0.5 - var(--selected-order)) * 16%)) rotate(0deg) !important;
  }
}

/* ==== N3. YES-NO FLIP — lock unchosen card after first flip ==== */
.tarot-select-stage[data-reading-mode="yes-no"] .card-el.selected.not-flippable {
  pointer-events: none;
  opacity: 0.55;
  cursor: default;
}