/* ============================================
   LifeRPG V5.1 — Onboarding
   ============================================ */

.onboarding-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--bg-base); z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.onboarding-container { width: 100%; max-width: 420px; }
.onboarding-step { display: none; animation: pageIn 0.35s ease; }
.onboarding-step.active { display: block; }

.onboarding-hero { text-align: center; margin-bottom: 36px; }
.onboarding-hero .hero-icon { font-size: 3rem; margin-bottom: 16px; }
.onboarding-hero h1 { font-size: 1.5rem; margin-bottom: 6px; }
.onboarding-hero .hero-subtitle { font-size: 0.88rem; color: var(--accent); font-weight: 500; margin-bottom: 4px; }
.onboarding-hero .hero-desc { color: var(--text-secondary); font-size: 0.82rem; }
.onboarding-step h2 { font-size: 1.2rem; margin-bottom: 4px; }
.onboarding-desc { color: var(--text-secondary); font-size: 0.82rem; margin-bottom: 22px; }

.step-actions { display: flex; gap: 10px; margin-top: 20px; }
.step-actions .btn { flex: 1; }

/* 身份选择卡片 */
.identity-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.identity-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; transition: all 0.2s ease;
}
.identity-card:hover { border-color: var(--border-visible); }
.identity-card.selected { border-color: var(--accent); background: var(--accent-dim); }
.identity-card .id-icon { font-size: 1.6rem; }
.identity-card .id-name { font-weight: 600; font-size: 0.9rem; }
.identity-card .id-desc { font-size: 0.72rem; color: var(--text-tertiary); }

/* 第一个成就动画 */
.first-achievement { text-align: center; padding: 30px 0; }
.first-achievement .ach-icon { font-size: 3rem; animation: bounceIn 0.6s ease; margin-bottom: 14px; }
.first-achievement .ach-text { font-size: 1.1rem; font-weight: 700; color: var(--warning); margin-bottom: 6px; }
.first-achievement .ach-sub { font-size: 0.85rem; color: var(--text-secondary); }