/* profile-page.css — Profile page specific styles */

.pfp-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.pfp-btn {
  background: rgba(10, 10, 20, 0.5);
  border: 2px solid var(--border, #2a2a3e);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 1.4rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.pfp-btn:hover { border-color: var(--accent, #6c63ff); background: rgba(108, 99, 255, 0.1); }
.pfp-btn.selected {
  border-color: var(--accent, #6c63ff);
  background: rgba(108, 99, 255, 0.2);
  box-shadow: 0 0 8px rgba(108, 99, 255, 0.4);
}

#pfp-display {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(108, 99, 255, 0.18);
  border: 2px solid var(--accent, #6c63ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--accent, #6c63ff);
  overflow: hidden;
}
#pfp-display img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.rewards-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.reward-item {
  display: flex; align-items: center; gap: 4px;
  background: rgba(108, 99, 255, 0.08);
  border: 1px solid rgba(108, 99, 255, 0.2);
  border-radius: 6px; padding: 4px 10px;
  font-size: 0.8rem;
}
.reward-item .r-icon { font-size: 1rem; }