/* 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 — Three option cards === */

.answer-area {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-lg);
  justify-content: center;
  align-items: center;
  padding: var(--space-lg) 0 var(--space-xl);
}

.option-card {
  min-width: 280px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  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);
  padding: var(--space-md);
  user-select: none;
}

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

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

.option-card.disabled {
  pointer-events: none;
  opacity: 0.7;
}

.option-card img {
  max-width: 220px;
  max-height: 220px;
  object-fit: contain;
}

/* Placeholder text shown when image is not available */
.option-card .option-placeholder {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-align: center;
  padding: var(--space-md);
}

/* === Highlight for auto-reveal (timeout) === */

.option-card.highlight {
  border-color: var(--color-correct);
  box-shadow: var(--shadow-glow-correct);
}