/* 마녀의 리뷰 / 카드 UI — 팔레트 (m/ landing.css 와 동일 토큰) */
:root {
  --color-primary: #d4af37;
  --color-secondary: #c0a52f;
  --color-dark: #1a1a1a;
  --color-silver: #e8e8e8;
  --color-text: #2a2a2a;
  --color-bg: #0d0d0d;
}

/* 🎴 카드 셔플 VFX 스타일 */

.shuffle-card {
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.shuffle-card:hover {
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4) !important;
  border-color: rgba(212, 175, 55, 0.4);
}

.shuffle-card.selected {
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.6) !important;
  animation: cardSelected 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cardSelected {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

/* 선택 개수 표시 */
.cards-selection-info {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(26, 26, 26, 0.95);
  border: 2px solid var(--color-primary);
  padding: 15px 30px;
  border-radius: 30px;
  color: var(--color-primary);
  font-family: 'Noto Serif KR', serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.cards-selection-info.complete {
  background: var(--color-primary);
  color: var(--color-dark);
  animation: completeFlash 0.5s ease;
}

@keyframes completeFlash {
  0% {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
  }
  50% {
    box-shadow: 0 0 40px rgba(212, 175, 55, 1);
  }
  100% {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
  }
}