/* Activity-specific styles only.
   Shared styles (layout, feedback, typography) come from shared/css/.
   Use CSS custom properties from variables.css for all colors, spacing, fonts.
   See docs/DESIGN-SYSTEM.md for the full design language. */

/* Hide the decorative content area; gameplay relies on audio + options only */
.content-area {
  display: none;
}

/* === Answer Area — Combination Cards === */
.answer-area {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-lg);
  justify-content: center;
  align-items: center;
  padding: var(--space-md) var(--space-lg) var(--space-xl);
}

/* Each option card — image-based */
.combination-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  min-height: 280px;
  aspect-ratio: 1 / 1;
  padding: var(--space-md);
  background: var(--color-bg-card);
  border: none;
  border-radius: var(--radius-md);
  filter: drop-shadow(0 12px 20px color-mix(in srgb, var(--color-primary) 10%, transparent));
  cursor: pointer;
  transition: transform var(--duration-fast) var(--easing-smooth),
              box-shadow var(--duration-fast) var(--easing-smooth),
              border-color var(--duration-fast) var(--easing-smooth);
  user-select: none;
}

.combination-card:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.combination-card:active {
  transform: scale(0.95);
}

.combination-card.disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* Option card image */
.card-image {
  width: 220px;
  height: 220px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  pointer-events: none;
}