/* =============================================
   PuffCase — perfil_publico.css  v3
   ============================================= */

/* ── CURSORES CS2 ──────────────────────────────────────────────────────────── */
body.cursor-knife  { cursor: url('/img/cursors/knife.cur'),  auto !important; }
body.cursor-awp    { cursor: url('/img/cursors/awp.cur'),    auto !important; }
body.cursor-ak     { cursor: url('/img/cursors/ak.cur'),     auto !important; }
body.cursor-pistol { cursor: url('/img/cursors/pistol.cur'), auto !important; }
body.cursor-knife  * { cursor: url('/img/cursors/knife.cur'),  auto; }
body.cursor-awp    * { cursor: url('/img/cursors/awp.cur'),    auto; }
body.cursor-ak     * { cursor: url('/img/cursors/ak.cur'),     auto; }
body.cursor-pistol * { cursor: url('/img/cursors/pistol.cur'), auto; }

/* ── MARCOS ────────────────────────────────────────────────────────────────── */
.marco-dorado  { --marco-c1:#f0c040; --marco-c2:#d4a010; }
.marco-neon    { --marco-c1:#b57bff; --marco-c2:#7c3aed; }
.marco-fuego   { --marco-c1:#ff6b35; --marco-c2:#ff0000; }
.marco-cristal { --marco-c1:#00e5ff; --marco-c2:#0090ff; }
.marco-blanco  { --marco-c1:#ffffff; --marco-c2:#aaaaaa; }
.chat-msg-avatar.marco-dorado  { box-shadow:0 0 0 2px #f0c040,0 0 8px #f0c04060; }
.chat-msg-avatar.marco-neon    { box-shadow:0 0 0 2px #b57bff,0 0 8px #b57bff60; }
.chat-msg-avatar.marco-fuego   { box-shadow:0 0 0 2px #ff6b35,0 0 8px #ff6b3560; }
.chat-msg-avatar.marco-cristal { box-shadow:0 0 0 2px #00e5ff,0 0 8px #00e5ff40; }
.chat-msg-avatar.marco-blanco  { box-shadow:0 0 0 2px #ffffff,0 0 6px #ffffff30; }
.pp-avatar-wrap.marco-dorado  .pp-avatar { box-shadow:0 0 0 3px #f0c040,0 0 14px #f0c04060; }
.pp-avatar-wrap.marco-neon    .pp-avatar { box-shadow:0 0 0 3px #b57bff,0 0 14px #b57bff60; }
.pp-avatar-wrap.marco-fuego   .pp-avatar { box-shadow:0 0 0 3px #ff6b35,0 0 14px #ff6b3560; }
.pp-avatar-wrap.marco-cristal .pp-avatar { box-shadow:0 0 0 3px #00e5ff,0 0 14px #00e5ff50; }
.pp-avatar-wrap.marco-blanco  .pp-avatar { box-shadow:0 0 0 3px #fff,0 0 10px #ffffff30; }
.pp-hero-avatar-frame.marco-dorado  .pp-hero-avatar { box-shadow:0 0 0 3px #f0c040,0 0 20px #f0c04070; }
.pp-hero-avatar-frame.marco-neon    .pp-hero-avatar { box-shadow:0 0 0 3px #b57bff,0 0 20px #b57bff70; }
.pp-hero-avatar-frame.marco-fuego   .pp-hero-avatar { box-shadow:0 0 0 3px #ff6b35,0 0 20px #ff6b3570; }
.pp-hero-avatar-frame.marco-cristal .pp-hero-avatar { box-shadow:0 0 0 3px #00e5ff,0 0 20px #00e5ff60; }
.pp-hero-avatar-frame.marco-blanco  .pp-hero-avatar { box-shadow:0 0 0 3px #fff,0 0 14px #ffffff30; }

/* ── BANNERS ────────────────────────────────────────────────────────────────── */
.banner-default  { background:linear-gradient(135deg,#0d0a1a 0%,#1e1535 40%,#2d1060 70%,#1a0040 100%); }
.banner-cyberpunk{ background:linear-gradient(135deg,#0d0d1a,#1a0040 30%,#ff00ff22 60%,#00ffff11); position:relative;overflow:hidden; }
.banner-cyberpunk::before{ content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 48px,rgba(0,255,255,.04) 49px,rgba(0,255,255,.04) 50px),repeating-linear-gradient(0deg,transparent,transparent 48px,rgba(255,0,255,.04) 49px,rgba(255,0,255,.04) 50px); }
.banner-galaxy   { background:radial-gradient(ellipse at 20% 50%,#1a0070,#0d0a1a 50%,#000428);position:relative;overflow:hidden; }
.banner-galaxy::before{ content:'';position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 80% 10%,#fff,transparent),radial-gradient(1px 1px at 50% 60%,#fff,transparent); }
.banner-fuego    { background:linear-gradient(135deg,#1a0400,#4a0a00 40%,#ff4400 80%,#ff9900);background-size:200% 200%;animation:banner-fuego 4s ease-in-out infinite alternate; }
@keyframes banner-fuego{ from{background-position:0% 50%} to{background-position:100% 50%} }
.banner-dark     { background:linear-gradient(135deg,#0d0a1a,#120e24 50%,#1e1535); }

/* Banners con imagen real — el overlay degradado sigue aplicándose encima */
.pp-banner[style*="background-image"],
.pp-hero-banner[style*="background-image"] {
    background-color: #0d0a1a; /* fallback mientras carga */
}

:root{ --rareza-comun:#a0a0a0;--rareza-raro:#4c9ef5;--rareza-epico:#b57bff;--rareza-legendario:#f0c040; }

/* ═══════════════════════════════════════════════════════
   POPUP DE PERFIL
═══════════════════════════════════════════════════════ */
.pp-overlay{position:fixed;inset:0;background:rgba(5,3,15,.78);backdrop-filter:blur(10px);z-index:600;display:flex;align-items:center;justify-content:center;padding:20px;animation:pp-fade-in .18s ease}
@keyframes pp-fade-in{from{opacity:0}to{opacity:1}}
.pp-card{background:#0f0b1e;border:1px solid rgba(124,58,237,.35);border-radius:20px;box-shadow:0 32px 80px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.04);width:100%;max-width:480px;max-height:88vh;overflow-y:auto;animation:pp-slide-up .25s cubic-bezier(.34,1.56,.64,1);scrollbar-width:thin;scrollbar-color:#3a2d5a transparent}
@keyframes pp-slide-up{from{opacity:0;transform:translateY(28px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.pp-banner{height:90px;border-radius:20px 20px 0 0;position:relative;overflow:hidden;flex-shrink:0}
.pp-banner-default{background:linear-gradient(135deg,#1e1535,#7c3aed 60%,#2d0070)}
.pp-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(15,11,30,.9))}
.pp-avatar-row{display:flex;align-items:flex-end;gap:14px;padding:0 20px;margin-top:-32px;position:relative;z-index:2;margin-bottom:12px}
.pp-avatar-wrap{position:relative;flex-shrink:0}
.pp-avatar{width:68px;height:68px;border-radius:14px;border:3px solid #0f0b1e;object-fit:cover;display:block;box-shadow:0 4px 20px rgba(0,0,0,.6)}
.pp-close{position:absolute;top:10px;right:12px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.12);color:#c4b8e0;width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:.75rem;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .15s;font-family:inherit}
.pp-close:hover{background:rgba(244,67,54,.45);border-color:rgba(244,67,54,.5);color:#fff}
.pp-body{padding:0 20px 20px}
.pp-nombre-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.pp-nombre{font-family:'Rajdhani',sans-serif;font-size:1.35rem;font-weight:700;color:#fff;letter-spacing:.5px}
.pp-rol-badge{font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:8px;background:rgba(124,58,237,.2);border:1px solid rgba(124,58,237,.4);color:#b57bff}
.pp-bio{font-size:.83rem;color:#c4b8e0;line-height:1.55;margin-bottom:14px}
.pp-nivel-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pp-nivel-badge{font-family:'Rajdhani',sans-serif;font-size:1rem;font-weight:700;padding:4px 12px;border-radius:20px;background:linear-gradient(135deg,#7c3aed,#9d5ff5);color:#fff;white-space:nowrap;flex-shrink:0}
.pp-xp-bar-wrap{flex:1}
.pp-xp-bar{height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin-bottom:3px}
.pp-xp-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#b57bff);border-radius:3px;transition:width .5s ease}
.pp-xp-label{font-size:.63rem;color:#7a6a9a}
.pp-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pp-badge{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;font-size:.75rem;font-weight:700;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);cursor:default;transition:transform .15s}
.pp-badge:hover{transform:scale(1.06)}
.pp-badge-icono{font-size:1rem}
.pp-badge--legendario{border-color:rgba(240,192,64,.4);background:rgba(240,192,64,.1);box-shadow:0 0 8px rgba(240,192,64,.2)}
.pp-badge--epico{border-color:rgba(181,123,255,.4);background:rgba(181,123,255,.08)}
.pp-badge--raro{border-color:rgba(76,158,245,.4);background:rgba(76,158,245,.08)}
.pp-logros{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.pp-logro{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-left:3px solid var(--logro-color,#7c3aed);border-radius:0 10px 10px 0;font-size:.82rem}
.pp-logro-icono{font-size:1.1rem;flex-shrink:0}
.pp-logro-nombre{font-weight:700;color:#fff;flex:1}
.pp-logro-desc{font-size:.7rem;color:#7a6a9a}
.pp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.pp-stat{text-align:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px 6px}
.pp-stat-val{display:block;font-family:'Rajdhani',sans-serif;font-size:1.25rem;font-weight:700;color:#fff;line-height:1;margin-bottom:3px}
.pp-stat-lbl{font-size:.63rem;color:#7a6a9a;text-transform:uppercase;letter-spacing:.4px}
.pp-footer{display:flex;gap:8px}
.pp-btn{flex:1;background:linear-gradient(135deg,#7c3aed,#9d5ff5);color:#fff;border:none;border-radius:10px;padding:10px 14px;font-size:.83rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s;text-decoration:none;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.pp-btn:hover{box-shadow:0 4px 16px rgba(124,58,237,.5);transform:translateY(-1px)}
.pp-btn-ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#c4b8e0;flex:0 0 auto;padding:10px 12px}
.pp-btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff;box-shadow:none;transform:none}
.pp-loading,.pp-privado{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 20px;gap:12px;color:#7a6a9a;font-size:.9rem}
.pp-spinner{width:22px;height:22px;border:2px solid rgba(124,58,237,.3);border-top-color:#7c3aed;border-radius:50%;animation:pp-spin .7s linear infinite}
@keyframes pp-spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════
   PÁGINA PÚBLICA
═══════════════════════════════════════════════════════ */
.pp-page{max-width:1080px;margin:0 auto;padding:28px 20px 80px}

/* HERO */
.pp-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid rgba(124,58,237,.3);
    box-shadow: 0 12px 48px rgba(0,0,0,.6);
}

/* El banner ocupa el 75% superior del hero */
.pp-hero-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 75%;
    background-size: cover;
    background-position: center top;
    z-index: 0;
}

/* Difuminado suave: la imagen se desvanece hacia abajo sin corte brusco */
.pp-hero-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 20%,
        rgba(15,11,30,.15) 38%,
        rgba(15,11,30,.50) 52%,
        rgba(15,11,30,.82) 65%,
        rgba(15,11,30,.96) 78%,
        rgba(15,11,30,1)   100%
    );
    z-index: 1;
}

/* El contenido va encima del banner, con fondo transparente */
.pp-hero-content {
    position: relative;
    z-index: 2;
    background: transparent;
    padding: 180px 26px 22px; /* empuja el contenido hacia abajo del banner */
}

.pp-hero-top-row {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-top: 0;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

/* Píldora nivel bajo avatar */
.pp-hero-nivel-pill{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;background:#0f0b1e;border:2px solid var(--nc,#7c3aed);border-radius:20px;padding:3px 10px;white-space:nowrap;box-shadow:0 0 14px color-mix(in srgb,var(--nc,#7c3aed) 45%,transparent)}
.pp-hero-nivel-num{font-family:'Rajdhani',sans-serif;font-size:.92rem;font-weight:800;color:var(--nc,#7c3aed);line-height:1}
.pp-hero-nivel-txt{font-family:'Rajdhani',sans-serif;font-size:.7rem;font-weight:700;color:var(--nc,#7c3aed);opacity:.85;letter-spacing:.3px}

.pp-hero-info{flex:1;min-width:0;padding-top:14px}
.pp-hero-nombre-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pp-hero-nombre{font-family:'Rajdhani',sans-serif;font-size:2.1rem;font-weight:700;color:#fff;letter-spacing:.8px;line-height:1.1}
.pp-hero-rol-badge{font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:20px;background:rgba(124,58,237,.2);border:1px solid rgba(124,58,237,.45);color:#b57bff;white-space:nowrap}
.pp-hero-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.8rem;color:#7a6a9a;margin-bottom:8px}
.pp-hero-redes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pp-hero-bio{font-size:.88rem;color:#c4b8e0;line-height:1.6;max-width:560px}
.pp-red-link{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;text-decoration:none;padding:3px 9px;border-radius:16px;border:1px solid currentColor;opacity:.85;transition:opacity .2s}
.pp-red-link:hover{opacity:1}

/* Barra XP */
.pp-hero-xp-bar-wrap{padding:12px 16px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:12px}
.pp-hero-xp-labels{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:#7a6a9a;margin-bottom:7px;gap:8px;flex-wrap:wrap}
.pp-hero-xp-track{height:7px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden}
.pp-hero-xp-fill{height:100%;border-radius:4px;transition:width .7s cubic-bezier(.34,1.56,.64,1)}

/* STATS */
.pp-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:20px}
.pp-stat-card{background:#0f0b1e;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:18px 14px;text-align:center;position:relative;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;cursor:default}
.pp-stat-card-glow{position:absolute;inset:0;background:var(--stat-glow,transparent);opacity:0;transition:opacity .25s;border-radius:16px}
.pp-stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--stat-color,#7c3aed);border-radius:16px 16px 0 0}
.pp-stat-card:hover{border-color:var(--stat-color,#7c3aed);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.pp-stat-card:hover .pp-stat-card-glow{opacity:1}
.pp-stat-icon{font-size:1.6rem;margin-bottom:8px;display:block}
.pp-stat-valor{font-family:'Rajdhani',sans-serif;font-size:1.8rem;font-weight:700;display:block;line-height:1;margin-bottom:5px}
.pp-stat-label{font-size:.67rem;color:#7a6a9a;text-transform:uppercase;letter-spacing:.4px}

/* SECCIONES */
.pp-section{background:#0f0b1e;border:1px solid rgba(255,255,255,.07);border-radius:18px;margin-bottom:18px;overflow:hidden}
.pp-section-hdr{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.05);background:rgba(124,58,237,.06)}
.pp-section-hdr-icon{font-size:1.1rem}
.pp-section-title{font-family:'Rajdhani',sans-serif;font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:.4px;flex:1}
.pp-section-count{font-size:.72rem;color:#7a6a9a;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:2px 8px}

/* LOGROS & BADGES FUSIONADOS */
.pp-logros-sublbl{padding:10px 20px 4px;font-size:.7rem;font-weight:700;color:#7a6a9a;text-transform:uppercase;letter-spacing:.5px}
.pp-logros-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;padding:8px 16px 16px}
.pp-logro-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-left:3px solid var(--lc,#7c3aed);border-radius:0 14px 14px 0;position:relative;overflow:hidden;transition:background .2s,transform .15s}
.pp-logro-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--lc,#7c3aed) 8%,transparent),transparent 60%);pointer-events:none}
.pp-logro-card:hover{background:rgba(255,255,255,.06);transform:translateX(3px)}
.pp-logro-card--destacado{border-left-color:#f0c040;background:rgba(240,192,64,.05);box-shadow:0 0 0 1px rgba(240,192,64,.1)}
.pp-logro-card-star{position:absolute;top:6px;right:8px;font-size:.7rem;opacity:.75}
.pp-logro-card-icon{font-size:1.6rem;flex-shrink:0}
.pp-logro-card-body{flex:1;min-width:0}
.pp-logro-card-nombre{font-size:.87rem;font-weight:700;color:#fff;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-logro-card-desc{font-size:.7rem;color:#7a6a9a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-logro-card-fecha{font-size:.62rem;color:#7a6a9a;opacity:.7;margin-top:3px}
.pp-logro-card-tipo{font-size:.68rem;font-weight:700;margin-top:2px;text-transform:uppercase;letter-spacing:.3px}
.pp-logro-card-badge-pill{font-size:.55rem;font-weight:800;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.1);color:#c4b8e0;border:1px solid rgba(255,255,255,.12);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.pp-logro-card--legendario{border-left-color:#f0c040;background:rgba(240,192,64,.05)}
.pp-logro-card--legendario .pp-logro-card-badge-pill{background:rgba(240,192,64,.15);border-color:rgba(240,192,64,.35);color:#f0c040}
.pp-logro-card--epico .pp-logro-card-badge-pill{background:rgba(181,123,255,.15);border-color:rgba(181,123,255,.35);color:#b57bff}
.pp-logro-card--raro .pp-logro-card-badge-pill{background:rgba(76,158,245,.15);border-color:rgba(76,158,245,.35);color:#4c9ef5}

/* SKINS */
.pp-skins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:10px;padding:16px 20px}
.pp-skin-item{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:8px;text-align:center;cursor:default;transition:all .2s}
.pp-skin-item:hover{border-color:#7c3aed;background:rgba(124,58,237,.1);transform:scale(1.05)}
.pp-skin-img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:6px;margin-bottom:5px}
.pp-skin-img-ph{width:100%;aspect-ratio:1;background:rgba(255,255,255,.04);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:5px}
.pp-skin-nombre{font-size:.65rem;color:#c4b8e0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.pp-empty{padding:32px 20px;text-align:center;color:#7a6a9a;font-size:.84rem}

/* PANEL PERSONALIZACIÓN */
.pp-edit-section{background:rgba(124,58,237,.05);border:1px solid rgba(124,58,237,.22);border-radius:18px;padding:20px;margin-bottom:18px}
.pp-edit-title{font-family:'Rajdhani',sans-serif;font-size:1rem;font-weight:700;color:#fff;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.pp-edit-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.pp-edit-tab{padding:7px 15px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#c4b8e0;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
.pp-edit-tab.active,.pp-edit-tab:hover{background:#7c3aed;border-color:#7c3aed;color:#fff}
.pp-edit-panel{display:none}
.pp-edit-panel.active{display:block}
.pp-bio-input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 14px;color:#fff;font-size:.87rem;font-family:inherit;resize:vertical;min-height:68px;outline:none;transition:border-color .2s;box-sizing:border-box}
.pp-bio-input:focus{border-color:#7c3aed}
.pp-bio-input::placeholder{color:#7a6a9a}
.pp-edit-row{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
.pp-privado-lbl{display:flex;align-items:center;gap:6px;font-size:.82rem;color:#c4b8e0;cursor:pointer;user-select:none}
.pp-privado-lbl input{accent-color:#7c3aed;cursor:pointer}
.pp-save-btn{background:linear-gradient(135deg,#7c3aed,#9d5ff5);color:#fff;border:none;border-radius:8px;padding:8px 18px;font-size:.83rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s;margin-left:auto}
.pp-save-btn:hover{box-shadow:0 4px 14px rgba(124,58,237,.45);transform:translateY(-1px)}
.pp-inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.pp-inv-item{background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.07);border-radius:12px;padding:12px 10px;text-align:center;cursor:pointer;transition:all .2s;position:relative}
.pp-inv-item:hover{border-color:#7c3aed;background:rgba(124,58,237,.1)}
.pp-inv-item.equipado{border-color:#f0c040;background:rgba(240,192,64,.08);box-shadow:0 0 12px rgba(240,192,64,.2)}
.pp-inv-item-icono{font-size:1.6rem;margin-bottom:6px;display:block}
.pp-inv-item-nombre{font-size:.72rem;font-weight:700;color:#fff;display:block;margin-bottom:2px}
.pp-inv-item-rareza{font-size:.6rem;text-transform:uppercase;letter-spacing:.4px}
.pp-inv-item-equipped-badge{position:absolute;top:6px;right:6px;background:#f0c040;color:#1a1000;font-size:.55rem;font-weight:700;padding:1px 5px;border-radius:6px;text-transform:uppercase}
.pp-badge-selector{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-bottom:14px}
.pp-badge-sel-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;border-radius:12px;cursor:pointer;border:2px solid rgba(255,255,255,.07);background:rgba(255,255,255,.04);transition:all .18s;text-align:center}
.pp-badge-sel-item.seleccionado{border-color:#7c3aed;background:rgba(124,58,237,.15);box-shadow:0 0 0 2px rgba(124,58,237,.2)}
.pp-badge-sel-item.seleccionado::after{content:'✓';font-size:.7rem;font-weight:700;color:#b57bff;margin-top:2px}
.pp-badge-slots-info{font-size:.78rem;color:#7a6a9a;margin-bottom:10px;padding:8px 12px;background:rgba(255,255,255,.04);border-radius:8px}
.pp-edit-msg{font-size:.77rem;margin-top:8px;min-height:16px}
.pp-edit-msg.ok{color:#4caf7d}
.pp-edit-msg.error{color:#f44336}

/* RESPONSIVE */
@media(max-width:640px){
    .pp-card{border-radius:14px}
    .pp-stats-grid{grid-template-columns:repeat(2,1fr)}
    .pp-logros-grid{grid-template-columns:1fr}
    .pp-skins-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}
    .pp-hero-nombre{font-size:1.6rem}
    .pp-hero-avatar{width:80px;height:80px}
    .pp-hero-top-row{gap:14px}
    .pp-hero-content{padding:140px 18px 18px}
}

/* ── SECCIÓN HERO (Avatar y Marco) ── */
.pp-hero-avatar-frame {
    position: relative;
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    z-index: 10;
}

/* 1. EL AVATAR (Al fondo) */
.pp-hero-avatar {
    position: relative;
    z-index: 1; 
    width: 100px;
    height: 100px;
    border-radius: 18px;
    border: 4px solid rgba(15,11,30,.8);
    object-fit: cover;
    display: block;
    box-shadow: 0 6px 28px rgba(0,0,0,.7);
    transition: transform .2s;
}

/* 2. EL MARCO OVERLAY (En el medio) */
.pp-hero-marco-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 136px; /* Ajusta según el tamaño de tu imagen de marco */
    height: 136px;
    object-fit: contain;
    pointer-events: none; /* Crucial para poder hacer click al avatar */
    z-index: 2; 
}

/* 3. LA PÍLDORA DE NIVEL (Al frente) */
.pp-hero-nivel-pill {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    background: #0f0b1e;
    border: 2px solid var(--nc, #7c3aed);
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
    box-shadow: 0 0 14px rgba(124, 58, 237, 0.45);
    z-index: 3;
}

/* ── RESPONSIVE ── */
@media(max-width:640px){
    .pp-card{border-radius:14px}
    .pp-stats-grid{grid-template-columns:repeat(2,1fr)}
    .pp-logros-grid{grid-template-columns:1fr}
    .pp-skins-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}
    .pp-hero-nombre{font-size:1.6rem}
    .pp-hero-avatar, .pp-hero-avatar-frame{width:80px;height:80px}
    .pp-hero-marco-overlay{width:110px;height:110px}
    .pp-hero-top-row{gap:14px;margin-top:-40px}
    .pp-hero-banner{height:120px}
}