/* Deseni Tamamla — 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. */

/* Content area: pattern image centered */
.content-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

/* Pattern scene image (shows the pattern with a missing piece) */
.pattern-image {
  max-width: 100%;
  max-height: 340px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  user-select: none;
  pointer-events: none;
}

/* Answer area: option images */
.answer-area {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  align-items: center;
  padding: var(--space-lg);
}

/* Option card for answer choices */
.option-card {
  width: 160px;
  height: 160px;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  border: none;
  filter: drop-shadow(0 12px 20px color-mix(in srgb, var(--color-primary) 10%, transparent));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform var(--duration-fast) var(--easing-smooth),
              filter var(--duration-fast) var(--easing-smooth),
              background-color var(--duration-fast) var(--easing-smooth),
              box-shadow var(--duration-fast) var(--easing-smooth);
  user-select: none;
  padding: var(--space-sm);
  overflow: visible;
}

.option-card:hover {
  transform: scale(1.05);
}

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

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

/* Image inside option card */
.option-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transition: transform var(--duration-normal) var(--easing-bounce);
}

.option-card.feedback-correct {
  background: var(--color-correct);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--color-correct) 70%, white),
    0 16px 32px color-mix(in srgb, var(--color-correct) 48%, transparent) !important;
  animation: option-card-correct-pop var(--duration-slow) var(--easing-bounce) !important;
}

.option-card.feedback-correct .option-image {
  transform: scale(1.12);
}

@keyframes option-card-correct-pop {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.12) rotate(-6deg);
  }
  50% {
    transform: scale(1.02) rotate(6deg);
  }
  75% {
    transform: scale(1.08) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* Round counter display */