/* ==========================================================
   Result Page Styles
   ========================================================== */

/* --- HP Earned (hero section) --- */

.result-hp-section {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
}

.result-hp-value {
  font-size: 56px;
  font-weight: var(--weight-bold);
  color: var(--tg-theme-text-color);
  line-height: 1.1;
}

.result-hp-label {
  font-size: var(--font-md);
  color: var(--tg-theme-hint-color);
  margin-top: var(--space-sm);
}

/* --- Weekly Goals --- */

.result-goals {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
}

.result-goal-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--tg-theme-secondary-bg-color);
  border-radius: var(--radius-md);
  font-size: var(--font-md);
  font-weight: var(--weight-medium);
  color: var(--tg-theme-text-color);
}

/* --- New Badges --- */

.result-badges {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
}

.result-badge-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--tg-theme-secondary-bg-color);
  border-radius: var(--radius-md);
  animation: badge-pop 500ms ease both;
}

.result-badge-emoji {
  font-size: 28px;
  flex-shrink: 0;
}

.result-badge-name {
  font-size: var(--font-md);
  font-weight: var(--weight-semibold);
  color: var(--tg-theme-text-color);
}

/* --- Streak --- */

.result-streak {
  text-align: center;
  padding: var(--space-lg);
}

.result-streak-value {
  font-size: var(--font-2xl);
  font-weight: var(--weight-bold);
  color: var(--tg-theme-text-color);
}

.result-streak-label {
  font-size: var(--font-sm);
  color: var(--tg-theme-hint-color);
  margin-top: var(--space-xs);
}

.result-streak-multiplier {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  color: var(--tg-theme-button-text-color);
  background: var(--tg-theme-button-color);
  border-radius: var(--radius-full);
}

/* --- Action Buttons --- */

.result-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) 0 var(--space-2xl);
}

/* --- Animations --- */

@keyframes badge-pop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}