/**
 * =====================================================
 * NEW ACTIVITIES SHARED STYLES · "Amber Solace"
 * Uses design system tokens from 00-variables.css
 * =====================================================
 */

/* ── Global: module buttons always show readable text ── */
.atr-option,
.ws-letter-btn,
.ws-btn,
.lc-btn,
.lc-option,
.sp-option,
.sp-option:not(:disabled),
.module-page button {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

/* Buttons with colored backgrounds stay white */
.ws-check,
.lc-listen,
.lc-quiz,
.atr-next,
.atr-correct,
.sp-correct,
.ws-btn.ws-check,
.ws-btn.ws-clear,
.ws-btn.ws-hint-btn {
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

/* ── Activity Header ── */
.activity-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
  animation: slideIn 0.5s ease;
}

.activity-header h1 {
  font-size: var(--font-size-3xl);
  color: var(--ink);
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
}

.activity-header p {
  color: var(--ink-muted);
  font-size: var(--font-size-lg);
}

/* ── Activity Container ── */
.activity-container {
  max-width: 900px;
  margin: var(--spacing-3xl) auto;
  padding: var(--spacing-xl);
}

/* ── Results Card ── */
.results-card {
  background: var(--surface);
  padding: var(--spacing-3xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.results-card h2 {
  font-size: var(--font-size-3xl);
  color: var(--ink);
  margin-bottom: var(--spacing-lg);
}

.score-display {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary);
  margin: var(--spacing-lg) 0;
  animation: slideIn 0.5s ease;
}

.percentage {
  font-size: var(--font-size-2xl);
  color: var(--ink-secondary);
  font-weight: 600;
  margin-bottom: var(--spacing-xl);
}

.feedback {
  font-size: var(--font-size-lg);
  color: var(--ink-muted);
  margin: var(--spacing-md) 0;
}

/* ── Animations ── */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideIn {
  animation: slideIn 0.5s ease;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .activity-container {
    padding: var(--spacing-lg);
  }

  .activity-header h1 {
    font-size: var(--font-size-2xl);
  }

  .score-display {
    font-size: 2.25rem;
  }

  .percentage {
    font-size: var(--font-size-xl);
  }
}

@media (max-width: 640px) {
  .activity-header h1 {
    font-size: var(--font-size-xl);
  }

  .activity-container {
    padding: var(--spacing-md);
  }

  .results-card {
    padding: var(--spacing-xl);
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .activity-header,
  .score-display,
  .animate-slideIn {
    animation: none;
  }
}