/**
 * Paril – Components
 * All reusable UI components: buttons, cards, inputs, badges, etc.
 */

/* ============================================================
   UNIT HEADER CARDS
   ============================================================ */
.unit-card {
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

@media (max-width: 480px) {
  .unit-card {
    padding: 1.1rem 1rem !important;
    gap: 10px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
  }
  .unit-card-icon-wrap {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 14px !important;
  }
  .unit-card-title {
    font-size: 1.2rem !important;
  }
  .unit-card-main {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .unit-card-title,
  .unit-card-objective {
    text-align: left !important;
  }
  .unit-card-subtitle {
    font-size: 0.75rem !important;
    white-space: normal !important;
  }
  .unit-card-badge {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0 !important;
    padding: 7px 10px !important;
  }
}

/* ============================================================
   BUTTONS (Duolingo 3D Tactile Buttons)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--border-radius-md);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-extrabold);
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  min-height: 52px;
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.btn:active:not(:disabled) {
  transform: translateY(4px);
}

.btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  box-shadow: var(--shadow-disabled) !important;
  background: var(--surface-disabled) !important;
  color: var(--text-disabled) !important;
  transform: none !important;
}

/* Primary Button (Green) */
.btn-primary {
  background: var(--color-primary);
  color: var(--text-on-primary);
  box-shadow: var(--shadow-button-primary);
}
.btn-primary:active:not(:disabled) { box-shadow: var(--shadow-button-primary-pressed); }

/* Secondary Button (Blue) */
.btn-secondary {
  background: var(--color-secondary);
  color: var(--text-on-secondary);
  box-shadow: var(--shadow-button-secondary);
}
.btn-secondary:active:not(:disabled) { box-shadow: var(--shadow-button-secondary-pressed); }

/* Outline Button */
.btn-outline {
  background: var(--surface-default);
  color: var(--color-primary);
  border: 2px solid var(--border-color);
  box-shadow: var(--shadow-button-neutral);
}
.btn-outline:active:not(:disabled) { box-shadow: var(--shadow-button-neutral-pressed); }

/* Success Button */
.btn-success {
  background: var(--color-success);
  color: var(--text-on-success);
  box-shadow: var(--shadow-button-success);
}
.btn-success:active:not(:disabled) { box-shadow: var(--shadow-button-success-pressed); }

/* Danger / Error Button (Red) */
.btn-danger {
  background: var(--color-error);
  color: var(--text-on-error);
  box-shadow: var(--shadow-button-error);
}
.btn-danger:active:not(:disabled) { box-shadow: var(--shadow-button-error-pressed); }

/* Backwards-compatible lesson button names. */
.btn-error {
  background: var(--color-error);
  color: var(--text-on-error);
  box-shadow: var(--shadow-button-error);
}
.btn-error:active:not(:disabled) { box-shadow: var(--shadow-button-error-pressed); }

/* Ghost / Neutral Button */
.btn-ghost {
  background: var(--surface-default);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  box-shadow: var(--shadow-button-neutral);
}
.btn-ghost:active:not(:disabled) { box-shadow: var(--shadow-button-neutral-pressed); }

/* Speaking Button – Teal */
.btn-speaking {
  background: var(--color-speaking);
  color: var(--text-inverse);
  box-shadow: var(--shadow-button-speaking);
}
.btn-speaking:active:not(:disabled) { box-shadow: var(--shadow-button-speaking-pressed); }

/* Full width */
.btn-full,
.btn-block { width: 100%; }

/* Size variants */
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  min-height: 40px;
  border-radius: var(--border-radius-sm);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
  min-height: 58px;
  border-radius: var(--border-radius-lg);
}

.btn-icon {
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: var(--border-radius-md);
}

/* ============================================================
   CARDS (Duolingo Round Clean Bordered Cards)
   ============================================================ */

.card {
  background: var(--card-neutral-background);
  border-radius: var(--border-radius-xl);
  border: 2px solid var(--card-neutral-border);
  padding: var(--space-6);
  color: var(--card-neutral-text);
  box-shadow: none;
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.card-interactive {
  cursor: pointer;
  box-shadow: var(--card-neutral-shadow);
}

.card-interactive:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-card-secondary-pressed);
}

.card-primary {
  background: var(--card-primary-background);
  border-color: var(--card-primary-border);
  color: var(--card-primary-text);
}

.card-primary.card-interactive {
  box-shadow: var(--card-primary-shadow);
}

/* ============================================================
   INPUTS
   ============================================================ */

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.input-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius-md);
  border: 2px solid var(--border-color);
  background: var(--color-neutral-100);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  min-height: 50px;
}

.input:focus {
  border-color: var(--color-secondary);
  background: var(--surface-default);
}

.input::placeholder { color: var(--text-tertiary); }

.input.input-error { border-color: var(--color-error); }
.input.input-success { border-color: var(--color-success); }

/* ============================================================
   PROGRESS BAR
   ============================================================ */

.progress-container {
  width: 100%;
  position: relative;
}

.progress-bar {
  width: 100%;
  height: 12px;
  background: var(--color-neutral-150);
  border-radius: var(--border-radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--border-radius-full);
  background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary));
  transform-origin: left;
  transition: width 0.5s var(--ease-spring), transform 0.6s var(--ease-spring);
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--surface-white-30) 50%,
    transparent 100%
  );
  border-radius: inherit;
  animation: shimmer 2s linear infinite;
}

.progress-bar-sm { height: 8px; }
.progress-bar-lg { height: 18px; }

.progress-success .progress-fill {
  background: linear-gradient(90deg, var(--color-success-light), var(--color-success));
}

/* ============================================================
   XP BAR
   ============================================================ */

.xp-bar-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border-radius: var(--border-radius-lg);
  border: 1.5px solid var(--border-color);
}

.xp-level-badge {
  width: 38px;
  height: 38px;
  border-radius: var(--border-radius-full);
  background: linear-gradient(135deg, var(--color-xp), var(--color-xp-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-sm);
  color: var(--text-inverse);
  flex-shrink: 0;
  box-shadow: var(--shadow-xp-glow);
}

.xp-bar-content { flex: 1; }

.xp-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.xp-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-xp);
}

.xp-bar .progress-fill {
  background: linear-gradient(90deg, var(--color-xp-light), var(--color-xp));
}

/* ============================================================
   STREAK BADGE
   ============================================================ */

.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--gradient-streak-badge);
  border-radius: var(--border-radius-full);
  border: 1.5px solid var(--color-streak-soft-border);
}

.streak-badge .streak-icon {
  font-size: var(--text-lg);
  line-height: 1;
  animation: heartbeat 2s ease-in-out infinite;
}

.streak-badge .streak-count {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  color: var(--color-streak);
  line-height: 1;
}

.streak-badge .streak-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-streak);
  opacity: 0.8;
}

/* ============================================================
   CHIPS / TAGS
   ============================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--border-radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-family: var(--font-display);
  white-space: nowrap;
}

.chip-primary { background: var(--card-primary-background); color: var(--card-primary-text); }
.chip-success { background: var(--card-success-background); color: var(--card-success-text); }
.chip-warning { background: var(--card-warning-background); color: var(--card-warning-text); }
.chip-error { background: var(--card-error-background); color: var(--card-error-text); }
.chip-xp { background: var(--card-xp-background); color: var(--card-xp-text); }
.chip-speaking { background: var(--card-speaking-background); color: var(--card-speaking-text); }

/* ============================================================
   AVATAR
   ============================================================ */

.avatar {
  border-radius: var(--border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  color: var(--text-inverse);
  flex-shrink: 0;
  overflow: hidden;
}

.avatar-sm { width: 36px; height: 36px; font-size: var(--text-sm); }
.avatar-md { width: 52px; height: 52px; font-size: var(--text-lg); }
.avatar-lg { width: 80px; height: 80px; font-size: var(--text-2xl); }
.avatar-xl { width: 110px; height: 110px; font-size: var(--text-3xl); }

/* ============================================================
   MODAL
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-4) + env(safe-area-inset-top, 0px))
           calc(var(--space-4) + env(safe-area-inset-right, 0px))
           calc(var(--space-4) + env(safe-area-inset-bottom, 0px))
           calc(var(--space-4) + env(safe-area-inset-left, 0px));
  background: var(--bg-overlay);
  animation: overlayFade var(--duration-base) var(--ease-standard) both;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--border-radius-xl);
  padding: var(--space-8);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-xl);
  animation: scaleSpring var(--duration-modal) var(--ease-spring) both;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
}

.modal-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.modal-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius-full);
  background: var(--color-neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--duration-fast);
}

@media (max-width: 400px) {
  .btn-full,
  .btn-block,
  .btn-lg {
    white-space: normal;
    text-align: center;
  }

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

/* Bottom Sheet (mobile) */
.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-modal);
  background: var(--bg-card);
  border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
  padding: var(--space-6) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-xl);
  animation: slideUpModal var(--duration-slow) var(--ease-decelerate) both;
  max-height: 90vh;
  overflow-y: auto;
}

.bottom-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--color-neutral-200);
  border-radius: var(--border-radius-full);
  margin: 0 auto var(--space-6);
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

#toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 320px;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-800);
  color: var(--text-inverse);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  animation: toastSlide var(--duration-slow) var(--ease-spring) both;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.toast.toast-success { background: var(--color-success-dark); }
.toast.toast-error { background: var(--color-error-dark); }
.toast.toast-warning { background: var(--color-warning-dark); color: var(--color-neutral-900); }
.toast.toast-xp { background: var(--color-xp-dark); }

.toast-icon { font-size: var(--text-lg); flex-shrink: 0; }
.toast-text { flex: 1; }

/* ============================================================
   ACHIEVEMENT CARD
   ============================================================ */

.achievement-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-card);
  border-radius: var(--border-radius-lg);
  border: 1.5px solid var(--border-color);
  transition: all var(--duration-base) var(--ease-standard);
}

.achievement-card.unlocked {
  border-color: var(--card-warning-border);
  background: var(--card-warning-background);
}

.achievement-card.locked {
  opacity: 0.5;
  filter: grayscale(0.6);
}

.achievement-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  background: var(--color-warning-xlight);
}

.achievement-info { flex: 1; }
.achievement-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--text-primary);
}
.achievement-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ============================================================
   LIVES (HEARTS) SYSTEM
   ============================================================ */

.lives-container {
  display: flex;
  gap: var(--space-1);
}

.life-heart {
  font-size: 24px;
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease-spring);
}

.life-heart.lost {
  opacity: 0.2;
  filter: grayscale(1);
}

.life-heart.losing {
  animation: pulse 0.3s var(--ease-spring);
}

/* ============================================================
   WORD CHIP (for sentence building - Duolingo 3D style)
   ============================================================ */

.word-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  min-width: 44px;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-md);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: var(--shadow-card-neutral);
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.word-chip:active {
  transform: translateY(3px);
  box-shadow: var(--shadow-card-neutral-pressed);
}

.word-chip.selected {
  border-color: var(--card-secondary-border);
  background: var(--card-secondary-background);
  color: var(--card-secondary-text);
  box-shadow: var(--card-secondary-shadow);
}
.word-chip.selected:active { box-shadow: var(--shadow-card-secondary-pressed); }

.word-chip.correct {
  border-color: var(--card-success-border);
  background: var(--card-success-background);
  color: var(--card-success-text);
  box-shadow: var(--card-success-shadow);
  animation: correctPop 0.3s var(--ease-spring);
}
.word-chip.correct:active { box-shadow: var(--shadow-card-success-pressed); }

.word-chip.wrong {
  border-color: var(--card-error-border);
  background: var(--card-error-background);
  color: var(--card-error-text);
  box-shadow: var(--card-error-shadow);
  animation: shake 0.4s var(--ease-standard);
}
.word-chip.wrong:active { box-shadow: var(--shadow-card-error-pressed); }

/* ============================================================
   MICROPHONE BUTTON
   ============================================================ */

.mic-btn {
  width: 80px;
  height: 80px;
  border-radius: var(--border-radius-full);
  background: var(--gradient-speaking);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(var(--color-speaking-rgb), 0.45);
  transition:
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) var(--ease-standard);
  cursor: pointer;
  position: relative;
  overflow: visible;
  border: none;
}

.mic-btn:active { transform: scale(0.92); }

.mic-btn.recording {
  animation: pulse 1.2s var(--ease-standard) infinite;
  box-shadow: 0 0 0 0 rgba(var(--color-speaking-rgb), 0.4);
}

.mic-btn.recording::before,
.mic-btn.recording::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: var(--border-radius-full);
  border: 2px solid var(--color-speaking);
  opacity: 0;
  animation: levelUpRing 1.5s var(--ease-standard) infinite;
}

.mic-btn.recording::after {
  animation-delay: 0.5s;
}

.mic-btn svg {
  width: 36px;
  height: 36px;
  stroke: var(--text-inverse);
  stroke-width: 2.5;
}

/* Audio waveform visualization */
.waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 32px;
}

.waveform-bar {
  width: 4px;
  border-radius: var(--border-radius-full);
  background: var(--color-speaking);
  animation: microWave 0.8s ease-in-out infinite;
  min-height: 4px;
}

.waveform-bar:nth-child(2) { animation-delay: 0.15s; }
.waveform-bar:nth-child(3) { animation-delay: 0.3s; }
.waveform-bar:nth-child(4) { animation-delay: 0.45s; }
.waveform-bar:nth-child(5) { animation-delay: 0.6s; }
.waveform-bar:nth-child(6) { animation-delay: 0.45s; }
.waveform-bar:nth-child(7) { animation-delay: 0.3s; }

/* ============================================================
   SCORE RING
   ============================================================ */

.score-ring {
  position: relative;
  width: 80px;
  height: 80px;
}

.score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.score-ring-bg {
  fill: none;
  stroke: var(--color-neutral-150);
  stroke-width: 7;
}

.score-ring-fill {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1s var(--ease-spring);
}

.score-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-lg);
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  color: var(--text-primary);
}

.section-action {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  cursor: pointer;
}

/* ============================================================
   LESSON NODE (Learning Path Map)
   ============================================================ */

.lesson-node {
  width: 68px;
  height: 68px;
  border-radius: var(--border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring);
  flex-shrink: 0;
}

.lesson-node:active { transform: scale(0.92); }

.lesson-node-inner {
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border: 3px solid transparent;
}

.lesson-node.completed .lesson-node-inner {
  background: var(--color-success);
  border-color: var(--color-success-dark);
  box-shadow: 0 4px 16px rgba(var(--color-success-rgb), 0.4);
}

.lesson-node.active .lesson-node-inner {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-button-primary);
  animation: pulse 2s var(--ease-standard) infinite;
}

.lesson-node.locked .lesson-node-inner {
  background: var(--color-neutral-150);
  border-color: var(--color-neutral-200);
  filter: grayscale(1);
  opacity: 0.5;
}

.lesson-node.boss .lesson-node-inner {
  background: var(--gradient-secondary);
  border-color: var(--color-secondary-dark);
  box-shadow: 0 4px 16px rgba(var(--color-streak-rgb), 0.4);
  transform: scale(1.15);
}

/* ============================================================
   FEEDBACK OVERLAY (Correct/Wrong)
   ============================================================ */

.feedback-bar {
  position: fixed;
  bottom: var(--nav-height);
  left: 0;
  right: 0;
  z-index: var(--z-raised);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  animation: slideUp var(--duration-base) var(--ease-decelerate) both;
  min-height: 90px;
}

.feedback-bar.correct {
  background: var(--card-success-background);
  border-top: 2px solid var(--card-success-border);
}

.feedback-bar.wrong {
  background: var(--card-error-background);
  border-top: 2px solid var(--card-error-border);
}

.feedback-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.feedback-content { flex: 1; }

.feedback-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

.feedback-bar.correct .feedback-title { color: var(--color-success-dark); }
.feedback-bar.wrong .feedback-title { color: var(--color-error-dark); }

.feedback-text {
  font-size: var(--text-sm);
  margin-top: 2px;
}

.feedback-bar.correct .feedback-text { color: var(--color-success); }
.feedback-bar.wrong .feedback-text { color: var(--color-error); }

/* ============================================================
   TYPING INDICATOR
   ============================================================ */

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-100);
  border-radius: var(--border-radius-lg);
  width: fit-content;
}

.typing-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--border-radius-full);
  background: var(--color-neutral-400);
}

.typing-dot:nth-child(1) { animation: typing 1.2s 0s infinite; }
.typing-dot:nth-child(2) { animation: typing 1.2s 0.2s infinite; }
.typing-dot:nth-child(3) { animation: typing 1.2s 0.4s infinite; }

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  gap: var(--space-4);
}

.empty-state-icon { font-size: 64px; line-height: 1; }

.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.empty-state-desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  max-width: 280px;
}

/* ============================================================
   DIVIDER
   ============================================================ */

.divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-4) 0;
}

.divider-text {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

/* ============================================================
   OPTION CARDS (Multiple Choice)
   ============================================================ */

.option-card {
  width: 100%;
  padding: clamp(8px, 1.4vh, 16px) clamp(12px, 2vw, 20px);
  background: var(--bg-card);
  border: 2.5px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.8vh, 1.05rem);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast);
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 16px);
  min-height: clamp(50px, 6vh, 62px);
  box-shadow: var(--shadow-card-neutral);
}

.option-card:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: var(--shadow-card-neutral-pressed);
}

.option-card.selected {
  border-color: var(--card-secondary-border);
  background: var(--card-secondary-background);
  color: var(--card-secondary-text);
  box-shadow: var(--card-secondary-shadow);
}
.option-card.selected:active:not(:disabled) { box-shadow: var(--shadow-card-secondary-pressed); }

.option-card.correct {
  border-color: var(--card-success-border);
  background: var(--card-success-background);
  color: var(--card-success-text);
  box-shadow: var(--card-success-shadow);
  animation: correctPop 0.3s var(--ease-spring);
}
.option-card.correct:active:not(:disabled) { box-shadow: var(--shadow-card-success-pressed); }

.option-card.wrong {
  border-color: var(--card-error-border);
  background: var(--card-error-background);
  color: var(--card-error-text);
  box-shadow: var(--card-error-shadow);
  animation: shake 0.4s var(--ease-standard);
}
.option-card.wrong:active:not(:disabled) { box-shadow: var(--shadow-card-error-pressed); }

.option-letter {
  width: 30px;
  height: 30px;
  border-radius: var(--border-radius-sm);
  background: var(--color-neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  transition: background var(--duration-fast);
}

.option-card.selected .option-letter { background: var(--color-secondary); color: var(--text-on-secondary); }
.option-card.correct .option-letter { background: var(--color-success); color: var(--text-on-success); }
.option-card.wrong .option-letter { background: var(--color-error); color: var(--text-on-error); }

/* ============================================================
   FLOATING XP BADGE
   ============================================================ */

.xp-float {
  position: fixed;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-lg);
  color: var(--color-xp);
  text-shadow: var(--shadow-xp-text);
  animation: xpFloat 1.2s var(--ease-standard) forwards;
  z-index: var(--z-toast);
}

/* ============================================================
   SKELETON LOADERS
   ============================================================ */

.skeleton {
  background: linear-gradient(90deg,
    var(--color-neutral-100) 0%,
    var(--color-neutral-150) 50%,
    var(--color-neutral-100) 100%
  );
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--border-radius-md);
}

.skeleton-text { height: 16px; }
.skeleton-title { height: 24px; }
.skeleton-card { height: 100px; }

/* ============================================================
   PARI – CSS LEARNING FOX
   Simple, scalable mascot built entirely from CSS shapes.
   ============================================================ */
.pari-mascot {
  --fox-orange: var(--color-mascot-fur);
  --fox-orange-dark: var(--color-mascot-fur-dark);
  --fox-cream: var(--color-mascot-cream);
  position: relative;
  display: inline-block;
  width: var(--pari-size, 120px);
  height: calc(var(--pari-size, 120px) * 1.08);
  flex: 0 0 auto;
  isolation: isolate;
}

.pari-mascot span,
.pari-mascot i,
.pari-mascot b {
  position: absolute;
  display: block;
}

.pari-tail {
  right: -3%;
  bottom: 7%;
  z-index: -1;
  width: 48%;
  height: 37%;
  border: max(2px, calc(var(--pari-size) * 0.025)) solid var(--fox-orange-dark);
  border-radius: 70% 55% 65% 45%;
  background: var(--fox-orange);
  transform: rotate(-18deg);
  transform-origin: left bottom;
}

.pari-tail i {
  right: -3%;
  bottom: -2%;
  width: 40%;
  height: 62%;
  border-radius: 45% 70% 65% 45%;
  background: var(--fox-cream);
  transform: rotate(6deg);
}

.pari-body {
  left: 26%;
  bottom: 3%;
  z-index: 1;
  width: 48%;
  height: 46%;
  border: max(2px, calc(var(--pari-size) * 0.025)) solid var(--fox-orange-dark);
  border-radius: 45% 45% 38% 38%;
  background: var(--fox-orange);
}

.pari-belly {
  left: 24%;
  top: 17%;
  width: 52%;
  height: 72%;
  border-radius: 50% 50% 42% 42%;
  background: var(--fox-cream);
}

.pari-ear {
  top: 2%;
  z-index: 1;
  width: 33%;
  height: 37%;
  background: var(--fox-orange-dark);
  clip-path: polygon(50% 0, 100% 100%, 0 84%);
}

.pari-ear > i {
  left: 24%;
  top: 18%;
  width: 55%;
  height: 62%;
  background: var(--color-mascot-ear);
  clip-path: polygon(50% 0, 100% 100%, 0 84%);
}

.pari-ear-left {
  left: 12%;
  transform: rotate(-9deg);
}

.pari-ear-right {
  right: 12%;
  transform: scaleX(-1) rotate(-9deg);
}

.pari-head {
  left: 13%;
  top: 17%;
  z-index: 3;
  width: 74%;
  height: 61%;
  overflow: hidden;
  border: max(2px, calc(var(--pari-size) * 0.025)) solid var(--fox-orange-dark);
  border-radius: 42% 42% 48% 48%;
  background: var(--fox-orange);
  box-shadow: inset 0 calc(var(--pari-size) * -0.045) 0 rgba(var(--color-mascot-fur-dark-rgb), 0.18);
}

.pari-face-patch {
  left: 8%;
  bottom: -10%;
  width: 84%;
  height: 57%;
  border-radius: 50% 50% 42% 42%;
  background: var(--fox-cream);
  clip-path: polygon(0 30%, 25% 8%, 50% 30%, 75% 8%, 100% 30%, 92% 100%, 8% 100%);
}

.pari-eye {
  top: 31%;
  z-index: 2;
  width: 21%;
  height: 27%;
  border: max(1px, calc(var(--pari-size) * 0.014)) solid var(--color-mascot-eye);
  border-radius: 50%;
  background: var(--surface-default);
}

.pari-eye-left { left: 23%; }
.pari-eye-right { right: 23%; }

.pari-eye b {
  left: 31%;
  top: 28%;
  width: 43%;
  height: 50%;
  border-radius: 50%;
  background: var(--color-mascot-eye);
}

.pari-eye b::after {
  content: '';
  position: absolute;
  left: 16%;
  top: 13%;
  width: 35%;
  height: 30%;
  border-radius: 50%;
  background: var(--surface-default);
}

.pari-muzzle {
  bottom: 15%;
  z-index: 3;
  width: 30%;
  height: 24%;
  border-radius: 50%;
  background: var(--color-mascot-muzzle);
}

.pari-muzzle-left {
  left: 24%;
  transform: rotate(8deg);
}

.pari-muzzle-right {
  right: 24%;
  transform: rotate(-8deg);
}

.pari-nose {
  left: 43%;
  bottom: 27%;
  z-index: 4;
  width: 14%;
  height: 11%;
  border-radius: 55% 55% 65% 65%;
  background: var(--color-mascot-nose);
}

.pari-smile {
  left: 39%;
  bottom: 12%;
  z-index: 4;
  width: 22%;
  height: 13%;
  border-bottom: max(2px, calc(var(--pari-size) * 0.018)) solid var(--color-mascot-smile);
  border-radius: 50%;
}

.pari-scarf {
  left: 23%;
  top: 68%;
  z-index: 5;
  width: 54%;
  height: 13%;
  border-radius: 35% 35% 55% 55%;
  background: var(--color-mascot-scarf);
  transform: rotate(-2deg);
}

.pari-scarf::after {
  content: '';
  position: absolute;
  right: -10%;
  top: 43%;
  width: 27%;
  height: 70%;
  border-radius: 20% 60% 45% 20%;
  background: var(--color-mascot-scarf-dark);
  transform: rotate(28deg);
}