/* ============================================================
   PROFILE CUSTOMIZATION — PFP + Banner picker modal
   ------------------------------------------------------------
   Isolated feature stylesheet. Reuses the app's existing modal
   chrome (.modal-ov / .modal-box / .modal-hdr / .modal-title /
   .modal-close, defined in core/home.css + misc/compat.css) so
   this modal looks native rather than bolted-on. Everything
   below is scoped under the `.pfcz-` prefix and only styles
   markup this feature itself injects, plus two small additions
   to the existing profile hero card (edit affordances) that
   don't change its layout.
   ============================================================ */

.pfcz-box {
  max-width: 420px;
}

.pfcz-section {
  margin-bottom: 18px;
}

.pfcz-label {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 3px;
}

.pfcz-hint {
  font-size: 0.66rem;
  color: var(--muted);
  margin-bottom: 10px;
}

.pfcz-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 16px 0;
}

.pfcz-cancel {
  width: 100%;
  padding: 11px;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

/* ── Option grids ──────────────────────────────────────────── */
.pfcz-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.pfcz-grid-banner {
  grid-template-columns: repeat(2, 1fr);
}

.pfcz-tile {
  width: 100%;
  padding: 0;
  border: 2px solid var(--border);
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pfcz-tile:active {
  transform: scale(0.94);
}

.pfcz-tile-avatar {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.pfcz-tile-banner {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
}

.pfcz-tile-none {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.pfcz-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 0 10px rgba(124, 111, 255, 0.5);
}

.pfcz-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: 0.72rem;
  padding: 10px 0;
}

/* ── Edit affordances added to the existing profile hero card ─
   (#gamiSection / .phc-card, built by buildGami() in script.js)
   The pencil badge already existed as an inert placeholder
   (see premium-ui.css "PROFILE HERO CARD" comment) — this just
   makes it (and a matching badge on the banner) interactive. ── */
.phc-pfp-badge.pfcz-editable {
  cursor: pointer;
}

.pfcz-banner-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(13, 13, 31, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(2px);
}

@media (max-width: 420px) {
  .pfcz-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}