/* ── Onboarding Modal ─────────────────────────────────────── */
#onboardingOverlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: obFadeIn 0.3s ease;
}

@keyframes obFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ob-modal {
  background: #12121e; border: 1px solid #2a2a3e;
  border-radius: 20px; width: 100%; max-width: 520px;
  overflow: hidden; position: relative;
  animation: obSlideUp 0.35s ease;
}

@keyframes obSlideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.ob-progress {
  height: 3px; background: #1e1e30; width: 100%;
}

.ob-progress-bar {
  height: 100%; background: #00e5ff;
  transition: width 0.4s ease; border-radius: 0 2px 2px 0;
}

.ob-step {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 36px 32px 32px;
  gap: 12px;
}

.ob-icon { font-size: 52px; line-height: 1; margin-bottom: 4px; }

.ob-step h2 {
  color: #e8e8f0; font-size: 1.5rem; margin: 0;
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
}

.ob-step > p {
  color: #888; font-size: 15px; margin: 0; line-height: 1.6;
  max-width: 380px;
}

.ob-sub { color: #aaa; font-size: 14px; margin-top: 4px; }
.ob-optional { color: #555; font-size: 13px; }

/* Game chips */
.ob-games-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; max-height: 180px;
  overflow-y: auto; width: 100%; padding: 4px 0;
}

.ob-game-chip {
  background: #1a1a2e; border: 1px solid #2a2a3e;
  color: #888; padding: 6px 14px; border-radius: 99px;
  font-size: 13px; cursor: pointer; transition: all 0.15s;
  font-family: inherit;
}

.ob-game-chip:hover   { border-color: #00e5ff; color: #00e5ff; }
.ob-game-chip.selected {
  background: rgba(0,229,255,0.1); border-color: #00e5ff;
  color: #00e5ff;
}

/* Features list */
.ob-features {
  display: flex; flex-direction: column; gap: 16px;
  width: 100%; text-align: left; margin: 4px 0;
}

.ob-feature {
  display: flex; align-items: flex-start; gap: 14px;
  background: #1a1a2e; border-radius: 10px; padding: 14px;
}

.ob-feature-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.ob-feature strong { color: #e8e8f0; font-size: 14px; display: block; margin-bottom: 2px; }
.ob-feature p { color: #666; font-size: 13px; margin: 0; line-height: 1.5; }

/* CTA cards */
.ob-ctas {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; width: 100%;
}

.ob-cta-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px; padding: 16px 10px;
  background: #1a1a2e; border: 1px solid #2a2a3e;
  border-radius: 12px; text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.ob-cta-card:hover {
  border-color: #00e5ff; background: rgba(0,229,255,0.05);
}

.ob-cta-card span   { font-size: 28px; }
.ob-cta-card strong { color: #e8e8f0; font-size: 13px; }
.ob-cta-card p      { color: #666; font-size: 11px; margin: 0; line-height: 1.4; }

/* Buttons */
.ob-btn-primary {
  background: #00e5ff; color: #000; border: none;
  padding: 13px 36px; border-radius: 99px;
  font-weight: 700; font-size: 15px; cursor: pointer;
  font-family: inherit; margin-top: 8px;
  transition: transform 0.1s, background 0.15s;
}

.ob-btn-primary:hover { background: #00ccee; transform: translateY(-1px); }

.ob-btn-secondary {
  background: transparent; color: #555; border: 1px solid #2a2a3e;
  padding: 10px 28px; border-radius: 99px;
  font-size: 14px; cursor: pointer; font-family: inherit;
  margin-top: 8px; transition: color 0.15s, border-color 0.15s;
}

.ob-btn-secondary:hover { color: #888; border-color: #3a3a4e; }

/* Profile empty state CTA */
.empty-cta-btn {
  display: inline-block; margin-top: 12px;
  background: rgba(0,229,255,0.1); color: #00e5ff;
  border: 1px solid rgba(0,229,255,0.3); padding: 8px 20px;
  border-radius: 99px; font-size: 13px; text-decoration: none;
  transition: background 0.15s;
}
.empty-cta-btn:hover { background: rgba(0,229,255,0.2); }

@media (max-width: 480px) {
  .ob-step { padding: 28px 20px 24px; }
  .ob-ctas { grid-template-columns: 1fr; }
  .ob-modal { border-radius: 16px; }
}