/**
 * 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;
  }
  .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-subtitle {
    font-size: 0.75rem !important;
  }
  .unit-card-badge {
    padding: 6px 10px !important;
    min-width: 82px !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: 50px;
  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);
  box-shadow: 0 0 0 transparent !important;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: 0 4px 0 #CECECE !important;
  background: #E5E5E5 !important;
  color: #AFAFAF !important;
  transform: none !important;
}

/* Primary Button (Green) */
.btn-primary {
  background: var(--color-primary);
  color: #FFFFFF;
  box-shadow: 0 4px 0 var(--color-primary-shadow);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-light);
}

/* Secondary Button (Blue) */
.btn-secondary {
  background: var(--color-secondary);
  color: #FFFFFF;
  box-shadow: 0 4px 0 var(--color-secondary-shadow);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-secondary-light);
}

/* Outline Button */
.btn-outline {
  background: #FFFFFF;
  color: var(--color-primary);
  border: 2px solid var(--border-color);
  box-shadow: 0 4px 0 var(--border-color);
}
.btn-outline:hover:not(:disabled) {
  background: var(--color-neutral-100);
}

/* Success Button */
.btn-success {
  background: var(--color-success);
  color: #FFFFFF;
  box-shadow: 0 4px 0 var(--color-success-shadow);
}

/* Danger / Error Button (Red) */
.btn-danger {
  background: var(--color-error);
  color: #FFFFFF;
  box-shadow: 0 4px 0 var(--color-error-shadow);
}
.btn-danger:hover:not(:disabled) {
  background: var(--color-error-light);
}

/* Ghost / Neutral Button */
.btn-ghost {
  background: #FFFFFF;
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  box-shadow: 0 4px 0 var(--border-color);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--color-neutral-100);
}

/* Speaking Button – Teal */
.btn-speaking {
  background: var(--color-speaking);
  color: #FFFFFF;
  box-shadow: 0 4px 0 var(--color-speaking-shadow);
}
.btn-speaking:hover:not(:disabled) {
  background: var(--color-speaking-light);
}

/* Full width */
.btn-full { 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: 56px;
  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(--bg-card);
  border-radius: var(--border-radius-xl);
  border: 2px solid var(--border-color);
  padding: var(--space-6);
  box-shadow: 0 4px 0 var(--border-color);
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  border-color: var(--color-secondary);
  box-shadow: 0 4px 0 var(--color-secondary-shadow);
}

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

.card-primary {
  background: var(--color-primary);
  border-color: var(--color-primary-shadow);
  color: white;
  box-shadow: 0 4px 0 var(--color-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: #FFFFFF;
}

.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%,
    hsla(0,0%,100%,0.3) 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: white;
  flex-shrink: 0;
  box-shadow: 0 2px 8px hsla(270, 78%, 62%, 0.4);
}

.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: linear-gradient(135deg, hsl(25, 95%, 92%), hsl(25, 95%, 85%));
  border-radius: var(--border-radius-full);
  border: 1.5px solid hsl(25, 90%, 78%);
}

.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(--color-primary-xlight); color: var(--color-primary-dark); }
.chip-success { background: var(--color-success-xlight); color: var(--color-success-dark); }
.chip-warning { background: var(--color-warning-xlight); color: var(--color-warning-dark); }
.chip-error { background: var(--color-error-xlight); color: var(--color-error-dark); }
.chip-xp { background: var(--color-xp-xlight); color: var(--color-xp-dark); }
.chip-speaking { background: var(--color-speaking-xlight); color: var(--color-speaking); }

/* ============================================================
   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: white;
  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: var(--space-4);
  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;
  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: 36px;
  height: 36px;
  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);
}

.modal-close:hover {
  background: var(--color-neutral-150);
  color: var(--text-primary);
}

/* 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: white;
  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(--color-warning-light);
  background: linear-gradient(135deg, var(--color-warning-xlight), white);
}

.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: 0 4px 0 var(--border-color);
  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:hover {
  border-color: var(--color-secondary);
  background: #FFFFFF;
}

.word-chip:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--border-color);
}

.word-chip.selected {
  border-color: var(--color-secondary);
  background: var(--color-secondary-xlight);
  color: var(--color-secondary-dark);
  box-shadow: 0 4px 0 var(--color-secondary-shadow);
}

.word-chip.correct {
  border-color: var(--color-success);
  background: var(--color-success-xlight);
  color: var(--color-success-dark);
  box-shadow: 0 4px 0 var(--color-success-shadow);
  animation: correctPop 0.3s var(--ease-spring);
}

.word-chip.wrong {
  border-color: var(--color-error);
  background: var(--color-error-xlight);
  color: var(--color-error-dark);
  box-shadow: 0 4px 0 var(--color-error-shadow);
  animation: shake 0.4s var(--ease-standard);
}

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

.mic-btn {
  width: 80px;
  height: 80px;
  border-radius: var(--border-radius-full);
  background: linear-gradient(135deg, var(--color-speaking-light), var(--color-speaking));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px hsla(175, 72%, 42%, 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 hsla(175, 72%, 42%, 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: white;
  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 hsla(152, 68%, 42%, 0.4);
}

.lesson-node.active .lesson-node-inner {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-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: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
  border-color: var(--color-secondary-dark);
  box-shadow: 0 4px 16px hsla(22, 90%, 58%, 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(--color-success-xlight);
  border-top: 2px solid var(--color-success);
}

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

.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(44px, 5.5vh, 58px);
}

.option-card:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-xlight);
  transform: translateX(4px);
}

.option-card:active:not(:disabled) { transform: scale(0.98); }

.option-card.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-xlight);
}

.option-card.correct {
  border-color: var(--color-success);
  background: var(--color-success-xlight);
  color: var(--color-success-dark);
  animation: correctPop 0.3s var(--ease-spring);
}

.option-card.wrong {
  border-color: var(--color-error);
  background: var(--color-error-xlight);
  color: var(--color-error-dark);
  animation: shake 0.4s var(--ease-standard);
}

.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-primary); color: white; }
.option-card.correct .option-letter { background: var(--color-success); color: white; }
.option-card.wrong .option-letter { background: var(--color-error); color: white; }

/* ============================================================
   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: 0 2px 8px hsla(270, 78%, 62%, 0.5);
  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; }