/* Achievement Cards Display
 * =========================
 * Shows player achievements as clickable cards in the narrative area.
 * Cards open a modal with full achievement details.
 */

/* Container */
.achievement-cards-container {
  margin: var(--space-3) 0;
  animation: achievementFadeIn 0.3s ease-out;
}

@keyframes achievementFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.achievement-cards {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Header */
.achievement-cards__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border-default);
}

.achievement-cards__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-gold);
}

.achievement-cards__close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
  transition: color var(--transition-fast);
}

.achievement-cards__close:hover {
  color: var(--color-text-primary);
}

/* Progress Bar */
.achievement-cards__progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.achievement-cards__progress-bar {
  flex: 1;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.achievement-cards__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent-gold-light, #fcd34d));
  border-radius: var(--radius-full);
  transition: width var(--transition-normal) ease-out;
}

.achievement-cards__progress-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Grid */
.achievement-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
}

.achievement-cards__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-6);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Individual Achievement Card */
.achievement-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  width: 100%;
}

.achievement-card:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--overlay-gold-light, rgba(251, 191, 36, 0.2));
}

.achievement-card:focus {
  outline: none;
  border-color: var(--color-accent-gold);
  box-shadow: 0 0 0 3px var(--overlay-gold-medium, rgba(251, 191, 36, 0.3));
}

.achievement-card__icon {
  font-size: 2.5rem;
  line-height: 1;
}

.achievement-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.achievement-card__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.achievement-card__category {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.achievement-card__unlocked {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Category-specific styling */
.achievement-card--combat {
  border-color: var(--color-combat-subtle, rgba(239, 68, 68, 0.3));
}

.achievement-card--combat:hover {
  border-color: var(--color-combat-medium, rgba(239, 68, 68, 0.7));
  box-shadow: 0 4px 12px var(--overlay-combat-light, rgba(239, 68, 68, 0.2));
}

.achievement-card--exploration {
  border-color: var(--color-exploration-subtle, rgba(34, 197, 94, 0.3));
}

.achievement-card--exploration:hover {
  border-color: var(--color-exploration-medium, rgba(34, 197, 94, 0.7));
  box-shadow: 0 4px 12px var(--overlay-exploration-light, rgba(34, 197, 94, 0.2));
}

.achievement-card--social {
  border-color: var(--color-social-subtle, rgba(168, 85, 247, 0.3));
}

.achievement-card--social:hover {
  border-color: var(--color-social-medium, rgba(168, 85, 247, 0.7));
  box-shadow: 0 4px 12px var(--overlay-social-light, rgba(168, 85, 247, 0.2));
}

.achievement-card--milestone {
  border-color: var(--color-milestone-subtle, rgba(59, 130, 246, 0.3));
}

.achievement-card--milestone:hover {
  border-color: var(--color-milestone-medium, rgba(59, 130, 246, 0.7));
  box-shadow: 0 4px 12px var(--overlay-milestone-light, rgba(59, 130, 246, 0.2));
}

/* Achievement Modal Overlay */
.achievement-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-dark, rgba(0, 0, 0, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: achievementOverlayFadeIn 0.2s ease-out;
}

@keyframes achievementOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Achievement Modal */
.achievement-modal {
  position: relative;
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-accent-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 400px;
  width: 90%;
  text-align: center;
  animation: achievementModalSlideIn 0.3s ease-out;
  box-shadow: 0 0 40px var(--overlay-gold-medium, rgba(251, 191, 36, 0.3)),
              0 0 80px var(--overlay-gold-subtle, rgba(251, 191, 36, 0.1));
}

@keyframes achievementModalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.achievement-modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
  transition: color var(--transition-fast);
}

.achievement-modal__close:hover {
  color: var(--color-text-primary);
}

.achievement-modal__icon {
  font-size: 4rem;
  margin-bottom: var(--space-3);
  animation: achievementIconBounce 0.5s ease-out;
}

@keyframes achievementIconBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.achievement-modal__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-gold);
  margin: 0 0 var(--space-2) 0;
}

.achievement-modal__category {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--color-bg-tertiary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.achievement-modal__description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4) 0;
  line-height: 1.6;
}

.achievement-modal__unlocked {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

/* Responsive */
@media (max-width: 640px) {
  .achievement-cards__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .achievement-card {
    padding: var(--space-2);
  }

  .achievement-card__icon {
    font-size: 2rem;
  }

  .achievement-card__name {
    font-size: var(--font-size-xs);
  }

  .achievement-modal {
    padding: var(--space-4);
  }

  .achievement-modal__icon {
    font-size: 3rem;
  }
}