/* PROFILE */
.profile-header { background: linear-gradient(135deg, rgba(224,64,251,.15), rgba(0,229,255,.08)); border: 1px solid var(--border); border-radius: 18px; padding: 20px; margin-bottom: 14px; text-align: center; }
.profile-avatar-big { font-size: 3.5rem; margin-bottom: 8px; display: block; cursor: pointer; }
.profile-pseudo { font-family: 'Bangers', cursive; font-size: 1.8rem; letter-spacing: 4px; }
.profile-level { font-size: .75rem; font-weight: 800; color: var(--accent3); letter-spacing: 2px; margin: 4px 0; }
.xp-bar-w { background: var(--card2); border-radius: 10px; height: 8px; margin: 8px 0; overflow: hidden; }
.xp-bar { height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--accent), var(--accent3)); transition: width .8s; }
.xp-txt { font-size: .7rem; font-weight: 700; color: var(--muted); }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.pstat { background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 14px 8px; text-align: center; }
.pstat-v { font-family: 'Bangers', cursive; font-size: 1.6rem; color: var(--accent); }
.pstat-l { font-size: .65rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

/* BADGES */
.badges-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.badge-item { background: var(--card2); border: 1.5px solid var(--border); border-radius: 13px; padding: 12px 6px; text-align: center; transition: all .2s; }
.badge-item.unlocked { border-color: var(--gold); background: rgba(255,215,64,.07); }
.badge-item.unlocked:hover { transform: translateY(-2px); }
.badge-icon { font-size: 1.6rem; display: block; margin-bottom: 4px; }
.badge-item:not(.unlocked) .badge-icon { filter: grayscale(1); opacity: .3; }
.badge-name { font-size: .62rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.badge-item.unlocked .badge-name { color: var(--gold); }

/* AVATAR PICKER */
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.av-opt { background: var(--card2); border: 1.5px solid var(--border); border-radius: 12px; padding: 10px; font-size: 1.4rem; cursor: pointer; text-align: center; transition: all .2s; }
.av-opt:hover, .av-opt.sel { border-color: var(--accent); background: rgba(224,64,251,.1); transform: scale(1.08); }

/* ONBOARD */
.onboard-wrap { max-width: 420px; margin: 30px auto; text-align: center; }
.onboard-title { font-family: 'Bangers', cursive; font-size: 2rem; letter-spacing: 4px; margin-bottom: 6px; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.onboard-sub { color: var(--muted); font-size: .85rem; font-weight: 700; margin-bottom: 20px; }
.pseudo-input { width: 100%; background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; padding: 14px 16px; color: var(--text); font-size: 1.1rem; font-weight: 800; text-align: center; outline: none; margin-bottom: 14px; }
.pseudo-input:focus { border-color: var(--accent); }

@media(max-width: 480px) {
  .badges-grid { grid-template-columns: repeat(3, 1fr); }
  .avatar-grid { grid-template-columns: repeat(4, 1fr); }
}