/* ==========================================================================
   v3-perfil.css — design novo: Conta/Perfil (account.js), cartão de jogador (usermenu.js), detalhes de perfil/ranking do ui.js, patentes.
   Usa os tokens de v3-base.css. Vale em todas as telas (PC e celular).

   Partes:
     1. Painel da conta (#px-account-modal, .pxac-*)
     2. Conquistas (.pxmd) e trilha de patentes (#pxpat-ladder, .pxpl-*)
     3. Menu do nome (.pxc-usermenu)
     4. Perfil público (#pxc-profile)
     5. Denúncia (#pxr-modal)
     6. Fichas do ui.js: amigo do Discord e ranking XP (.discord-details-*), selo VIP
     7. Celular
   O CSS antigo (hud.css, index.css) usa ids e !important: aqui tudo vai
   prefixado com "html body" e com !important onde precisa vencer.
   ========================================================================== */

/* ---------- 1. Painel da conta --------------------------------------------- */

html body #px-account-backdrop { display: none; z-index: 10050; }
html body #px-account-modal {
    display: none;
    z-index: 10051;
    width: min(780px, calc(100vw - 24px));
    height: min(700px, calc(100vh - 32px));
    max-height: calc(100vh - 32px);
    overflow: hidden;
    font-size: 13px;
    animation: pxacIn .16s ease-out both;
}
@keyframes pxacIn { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* Cabeçalho */
html body #px-account-modal .pxac-hero {
    position: relative;
    display: flex; align-items: center; gap: 16px;
    flex: 0 0 auto;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--pc-line);
}
html body #px-account-modal .pxac-av {
    width: 72px; height: 72px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    border-radius: 50%;
    border: 1px solid var(--pc-line-2);
    box-shadow: 0 0 0 3px var(--pc-ink), 0 0 0 4px var(--pc-acid);
    background: var(--pc-panel-2);
    font: 800 24px var(--pc-display); color: var(--pc-text);
}
html body #px-account-modal .pxac-av img { width: 100%; height: 100%; object-fit: cover; }
html body #px-account-modal .pxac-hero-tt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
html body #px-account-modal .pxac-hero-tt h3 {
    margin: 0;
    font: 800 22px/1.1 var(--pc-display); letter-spacing: -.02em; text-transform: uppercase;
    color: var(--pc-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #px-account-modal .pxac-hero-sub { font: 500 11px var(--pc-mono); letter-spacing: .04em; color: var(--pc-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #px-account-modal .pxac-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
html body #px-account-modal .pxac-chip-btn { background: transparent; cursor: pointer; font-family: var(--pc-mono); }
html body #px-account-modal .pxac-chip-btn:hover { color: var(--pc-text); border-color: var(--pc-text); }
html body #px-account-modal .pxac-chip-btn i { color: var(--pc-acid); }
html body #px-account-modal .pxac-hero-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
html body #px-account-modal .pxac-patbox {
    flex: 0 0 auto; align-self: stretch;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-width: 116px; margin-right: 44px; padding: 10px 14px;
    background: var(--pc-ink); border: 1px solid var(--pc-line); border-radius: 2px;
    color: var(--pc-text); cursor: pointer;
    transition: border-color .12s;
}
html body #px-account-modal .pxac-patbox:hover { border-color: var(--pc-acid); }
html body #px-account-modal .pxac-patbox b { font: 700 12px var(--pc-body); color: var(--pc-text); }
html body #px-account-modal .pxac-patbox span { font: 500 10px var(--pc-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-dim); }
html body #px-account-modal .pxac-close { position: absolute; top: 16px; right: 16px; margin: 0; }

/* Abas */
html body #px-account-modal .pxac-tabs { flex: 0 0 auto; padding: 0 12px; }
html body #px-account-modal .pxac-tab { display: inline-flex; align-items: center; }

/* Corpo */
html body #px-account-modal .pxac-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 18px;
    padding: 18px 20px 22px;
    scrollbar-width: thin; scrollbar-color: var(--pc-line-2) transparent;
}
html body #px-account-modal .pxac-body::-webkit-scrollbar { width: 6px; }
html body #px-account-modal .pxac-body::-webkit-scrollbar-thumb { background: var(--pc-line-2); }
html body #px-account-modal .pxac-sec { display: flex; flex-direction: column; gap: 10px; }
html body #px-account-modal .pxac-sec-title {
    display: flex; align-items: center; gap: 10px;
    font: 500 10px var(--pc-mono); letter-spacing: .16em; text-transform: uppercase;
    color: var(--pc-acid);
}
html body #px-account-modal .pxac-sec-title::after { content: ''; flex: 1; height: 1px; background: var(--pc-line); order: 1; }
html body #px-account-modal .pxac-count { order: 2; color: var(--pc-dim); letter-spacing: .08em; }
html body #px-account-modal .pxac-note { font: 400 12px/1.5 var(--pc-body); color: var(--pc-dim); }
html body #px-account-modal .pxac-note strong { color: var(--pc-text); }
html body #px-account-modal .pxac-note a { color: var(--pc-acid); text-decoration: underline; text-underline-offset: 2px; }
html body #px-account-modal .pxac-btns { display: flex; flex-wrap: wrap; gap: 8px; }
html body #px-account-modal .pxac-inline { display: flex; gap: 8px; align-items: stretch; }
html body #px-account-modal .pxac-inline .v3-input { flex: 1 1 auto; min-width: 0; }
html body #px-account-modal .pxac-inline .v3-btn { flex: 0 0 auto; }
html body #px-account-modal .pxac-stack { display: flex; flex-direction: column; gap: 8px; }
html body #px-account-modal .pxac-stack > .v3-btn { align-self: flex-start; }
html body #px-account-modal .v3-input:disabled { opacity: .45; }
html body #px-account-modal .v3-empty { min-height: 96px; }

/* Linha com rótulo + ação (telefone, segurança) */
html body #px-account-modal .pxac-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--pc-ink); border: 1px solid var(--pc-line); border-radius: 2px;
}
html body #px-account-modal .pxac-row.is-ok { box-shadow: inset 2px 0 0 var(--pc-ok); }
html body #px-account-modal .pxac-row-l { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--pc-text); font: 500 13px var(--pc-body); }
html body #px-account-modal .pxac-row-l > i { width: 18px; text-align: center; color: var(--pc-faint); }
html body #px-account-modal .pxac-row-l > span { display: flex; flex-direction: column; min-width: 0; }
html body #px-account-modal .pxac-row-l b { font: 600 13px var(--pc-body); }
html body #px-account-modal .pxac-row-l small { font: 400 12px var(--pc-body); color: var(--pc-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #px-account-modal .pxac-cap { height: 3px; }

/* Estatísticas: cartões de nível e patente */
html body #px-account-modal .pxac-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html body #px-account-modal .pxac-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 14px; text-align: left;
    background: var(--pc-ink-2); border: 1px solid var(--pc-line); border-radius: 2px;
    color: var(--pc-text);
}
html body #px-account-modal .pxac-card-link { cursor: pointer; transition: border-color .12s; }
html body #px-account-modal .pxac-card-link:hover,
html body #px-account-modal .pxac-card-link:focus-visible { border-color: var(--pc-acid); outline: none; }
html body #px-account-modal .pxac-card-h {
    display: flex; align-items: center; gap: 8px;
    margin: -14px -14px 0; padding: 9px 14px;
    border-bottom: 1px solid var(--pc-line);
    font: 500 10px var(--pc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pc-acid);
}
html body #px-account-modal .pxac-card-h span { margin-left: auto; color: var(--pc-dim); letter-spacing: .08em; }
html body #px-account-modal .pxac-prog-row { display: flex; align-items: center; gap: 14px; }
html body #px-account-modal .pxac-big { font: 800 40px/1 var(--pc-display); color: var(--pc-text); min-width: 56px; text-align: center; }
html body #px-account-modal .pxac-prog-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
html body #px-account-modal .pxac-prog-tx > span { font: 600 12px var(--pc-mono); color: var(--pc-text); font-variant-numeric: tabular-nums; }
html body #px-account-modal .pxac-prog-tx .pxac-strong { font: 700 14px var(--pc-body); }
html body #px-account-modal .pxac-prog-tx small { font: 400 11.5px var(--pc-body); color: var(--pc-dim); }
html body #px-account-modal .pxac-prog-tx small b { color: var(--pc-text); }
html body #px-account-modal .pxac-more { font: 500 10px var(--pc-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-acid); }

/* Números */
html body #px-account-modal .pxac-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
html body #px-account-modal .pxac-stat span { display: flex; align-items: center; gap: 6px; }
html body #px-account-modal .pxac-stat span i { color: var(--pc-faint); font-size: 10px; }
html body #px-account-modal .pxac-stat b { font-size: 19px; }
html body #px-account-modal .pxac-stat.is-rec { border-color: rgba(255, 201, 74, .4); background: linear-gradient(var(--pc-gold-soft), var(--pc-gold-soft)), var(--pc-ink); }
html body #px-account-modal .pxac-stat.is-rec b,
html body #px-account-modal .pxac-stat.is-rec span i { color: var(--pc-gold); }

/* Foto */
html body #px-account-modal .pxac-photo { display: flex; align-items: center; gap: 16px; }
html body #px-account-modal .pxac-av-lg { width: 80px; height: 80px; font-size: 26px; }
html body #px-account-modal .pxac-photo-actions { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }

/* Nicks */
html body #px-account-modal .pxac-niklist { display: flex; flex-direction: column; gap: 6px; }
html body #px-account-modal .pxac-nik {
    display: flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 6px 8px 6px 12px;
    background: var(--pc-ink); border: 1px solid var(--pc-line); border-radius: 2px;
}
html body #px-account-modal .pxac-nik.is-main { box-shadow: inset 3px 0 0 var(--pc-acid); }
html body #px-account-modal .pxac-nik-name { flex: 1 1 auto; min-width: 0; font: 600 14px var(--pc-body); color: var(--pc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #px-account-modal .pxac-nik-rm { width: 30px; padding: 0; }

/* Skins */
html body #px-account-modal .pxac-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
html body #px-account-modal .pxac-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 16px;
    background: var(--pc-ink); border: 1px solid var(--pc-line); border-radius: 2px;
}
html body #px-account-modal .pxac-tile-ic { font-size: 20px; color: var(--pc-acid); }
html body #px-account-modal .pxac-tile b { font: 800 14px var(--pc-display); text-transform: uppercase; color: var(--pc-text); }
html body #px-account-modal .pxac-tile span { flex: 1; font: 400 12px/1.45 var(--pc-body); color: var(--pc-dim); }

/* Clã */
html body #px-account-modal .pxac-myclan { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--pc-ink); border: 1px solid var(--pc-line); border-radius: 2px; }
html body #px-account-modal .pxac-myclan .pxch-crest { flex: 0 0 auto; border-radius: 2px; }
html body #px-account-modal .pxac-myclan-tx { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html body #px-account-modal .pxac-myclan-n { display: flex; align-items: center; gap: 6px; font: 800 18px var(--pc-display); text-transform: uppercase; color: var(--pc-text); }
html body #px-account-modal .pxac-myclan-sub { font: 400 12px var(--pc-body); color: var(--pc-dim); }
html body #px-account-modal .pxac-myclan-sub i { color: var(--pc-acid); }
html body #px-account-modal .pxac-clanlist { display: flex; flex-direction: column; gap: 6px; }
html body #px-account-modal .pxac-clan {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px;
    background: var(--pc-ink); border: 1px solid var(--pc-line); border-radius: 2px;
}
html body #px-account-modal .pxac-clan:hover { border-color: var(--pc-line-2); }
html body #px-account-modal .pxac-clan .pxch-crest { flex: 0 0 auto; border-radius: 2px; }
html body #px-account-modal .pxac-clan-info {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
    padding: 0; background: transparent; border: 0; text-align: left; cursor: pointer; color: inherit;
}
html body #px-account-modal .pxac-clan-info b { font: 600 14px var(--pc-body); color: var(--pc-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #px-account-modal .pxac-clan-info:hover b { color: var(--pc-acid); }
html body #px-account-modal .pxac-clan-info span { font: 500 10.5px var(--pc-mono); letter-spacing: .04em; color: var(--pc-dim); }
html body #px-account-modal .pxac-clan-tag {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 1px solid var(--pc-line-2); border-radius: 2px;
    font: 700 11px var(--pc-mono); color: var(--pc-acid);
}

/* ---------- 2. Conquistas e trilha de patentes ----------------------------- */

.pxac-medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 6px; }
.pxmd {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: var(--pc-ink); border: 1px solid var(--pc-line); border-radius: 2px;
}
.pxmd-ic {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 1px dashed var(--pc-line-2); border-radius: 2px;
    color: var(--pc-faint); font-size: 14px;
}
.pxmd-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pxmd-tx b { font: 600 13px var(--pc-body); color: var(--pc-dim); }
.pxmd-tx small { font: 400 11px var(--pc-body); color: var(--pc-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxmd-bar { display: block; height: 2px; margin-top: 3px; background: var(--pc-line); }
.pxmd-bar i { display: block; height: 100%; background: var(--pc-dim); }
.pxmd.is-got { border-color: rgba(212, 255, 58, .3); }
.pxmd.is-got .pxmd-ic { border: 1px solid var(--pc-acid); background: var(--pc-acid-soft); color: var(--pc-acid); }
.pxmd.is-got .pxmd-tx b { color: var(--pc-text); }
.pxmd.is-got .pxmd-tx small { color: var(--pc-dim); }

html body #pxpat-ladder-back { z-index: 100010; }
html body #pxpat-ladder { z-index: 100011; width: min(640px, calc(100vw - 24px)); height: min(720px, calc(100vh - 32px)); }
html body #pxpat-ladder .v3-x { margin-left: auto; }
html body #pxpat-ladder .v3-foot { line-height: 1.45; }
html body #pxpat-ladder .v3-foot i { color: var(--pc-acid); }
.pxpl-sum { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--pc-line); background: var(--pc-ink-2); }
.pxpl-sum-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pxpl-sum-tx b { font: 700 15px var(--pc-body); color: var(--pc-text); }
.pxpl-sum-tx small { font: 400 12px var(--pc-body); color: var(--pc-dim); }
.pxpl-list { display: flex; flex-direction: column; gap: 6px; }
.pxpl-row {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 10px 12px;
    background: var(--pc-ink); border: 1px solid var(--pc-line); border-radius: 2px;
}
.pxpl-row .pxpat { margin-top: 2px; }
.pxpl-row.is-cur { border-color: var(--pc-acid); box-shadow: inset 3px 0 0 var(--pc-acid); background: linear-gradient(var(--pc-acid-soft), var(--pc-acid-soft)), var(--pc-ink); }
.pxpl-row.is-next .pxpat { filter: grayscale(.85) brightness(.75); }
.pxpl-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pxpl-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pxpl-name b { font: 800 14px var(--pc-display); text-transform: uppercase; color: var(--pc-text); }
.pxpl-row.is-next .pxpl-name b { color: var(--pc-dim); }
.pxpl-thr { font: 500 10.5px var(--pc-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pc-faint); }
.pxpl-rw { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pxpl-rw .v3-chip { font-size: 10px; padding: 2px 6px; }
.pxpl-rw .v3-chip i { color: var(--pc-gold); }

/* ---------- 3. Menu do nome (chat, ranking, célula) ------------------------- */

html body .pxc-usermenu {
    min-width: 200px;
    padding: 4px !important;
    border-radius: 2px !important;
    background: var(--pc-corners), var(--pc-panel) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 1px solid var(--pc-line-2) !important;
    box-shadow: 0 18px 50px -10px rgba(0, 0, 0, .85) !important;
    font-family: var(--pc-body) !important;
}
/* A variante sobre o mapa (.pxc-um-onmap) e o item "Admin" ficam no v3-diversos.css (cellmenu). */
html body .pxc-usermenu .pxc-um-head {
    padding: 8px 8px 9px !important; margin: 0 0 4px !important;
    border-bottom: 1px solid var(--pc-line) !important;
    font: 700 13px var(--pc-body) !important; color: var(--pc-text) !important;
}
html body .pxc-usermenu .pxc-um-rbtn {
    width: 28px; height: 26px; border-radius: 2px !important;
    border: 1px solid var(--pc-line-2) !important; background: transparent !important; color: var(--pc-dim) !important;
}
html body .pxc-usermenu .pxc-um-rbtn.like:hover { border-color: var(--pc-ok) !important; color: var(--pc-ok) !important; background: var(--pc-ok-soft) !important; }
html body .pxc-usermenu .pxc-um-rbtn.dis:hover { border-color: var(--pc-hot) !important; color: var(--pc-hot) !important; background: var(--pc-hot-soft) !important; }
html body .pxc-usermenu .pxc-um-item {
    gap: 10px !important; padding: 8px 10px !important;
    border-radius: 0 !important;
    font: 500 11px var(--pc-mono) !important; letter-spacing: .08em !important; text-transform: uppercase !important;
    color: var(--pc-text) !important; background: transparent !important;
}
html body .pxc-usermenu .pxc-um-item i { width: 16px; color: var(--pc-faint) !important; }
html body .pxc-usermenu .pxc-um-item:hover,
html body .pxc-usermenu .pxc-um-item:focus-visible { background: var(--pc-panel-2) !important; box-shadow: inset 2px 0 0 var(--pc-acid); outline: none; }
html body .pxc-usermenu .pxc-um-item:hover i { color: var(--pc-acid) !important; }
html body .pxc-usermenu .pxc-um-item.danger,
html body .pxc-usermenu .pxc-um-item.danger i { color: var(--pc-hot) !important; }
html body .pxc-usermenu .pxc-um-item.danger:hover { background: var(--pc-hot-soft) !important; box-shadow: inset 2px 0 0 var(--pc-hot); }
html body .pxc-um-p2,
html body .pxc-prof-p2 {
    border-radius: 2px !important;
    background: rgba(183, 155, 255, .08) !important;
    border: 1px solid rgba(183, 155, 255, .3) !important;
    font-family: var(--pc-body) !important;
}

/* ---------- 4. Perfil público ----------------------------------------------- */

html body #pxc-profile-back { z-index: 100001; }
html body #pxc-profile {
    z-index: 100002;
    width: min(460px, calc(100vw - 24px));
    max-height: calc(100vh - 32px);
    padding: 0;
    overflow: hidden;
    border-radius: 2px;
    background: var(--pc-corners), var(--pc-panel);
    border: 1px solid var(--pc-line-2);
    box-shadow: var(--pc-shadow);
    font-family: var(--pc-body);
    animation: none;
}
html body #pxc-profile .pxc-prof-top { position: relative; gap: 14px; padding: 18px 18px 14px; align-items: center; }
html body #pxc-profile .pxc-prof-av {
    position: relative;
    width: 64px; height: 64px; flex: 0 0 auto;
    border-radius: 50%; overflow: visible;
    display: flex; align-items: center; justify-content: center;
    background: var(--pc-panel-2); border: 1px solid var(--pc-line-2);
    font: 800 22px var(--pc-display); color: var(--pc-text);
}
html body #pxc-profile .pxc-prof-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
html body #pxc-profile .pxc-prof-av.is-on::after {
    content: ''; position: absolute; right: 1px; bottom: 3px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--pc-ok); box-shadow: 0 0 0 3px var(--pc-panel);
}
html body #pxc-profile .pxc-prof-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html body #pxc-profile .pxc-prof-name {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    font: 800 19px/1.15 var(--pc-display); letter-spacing: -.02em; color: var(--pc-text);
}
html body #pxc-profile .pxc-prof-name { flex-wrap: nowrap; }
html body #pxc-profile .pxc-prof-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #pxc-profile .pxc-prof-name .px-clantag { flex: 0 0 auto; }
html body #pxc-profile .pxc-prof-sub { font: 500 11px var(--pc-mono); letter-spacing: .04em; color: var(--pc-dim); margin: 0; }
html body #pxc-profile .pxc-prof-sub i { color: var(--pc-acid); }
html body #pxc-profile .pxc-prof-x { position: static; align-self: flex-start; font-size: 14px; }
html body #pxc-profile .pxc-prof-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 16px; }
html body #pxc-profile .pxc-prof-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
html body #pxc-profile .pxc-prof-badges .v3-chip i { font-size: 8px; }
html body #pxc-profile .pxc-prof-p2 { margin: 0; color: var(--pc-text) !important; }
html body #pxc-profile .pxc-prof-duo { display: grid; grid-template-columns: 1fr 112px; gap: 8px; }
html body #pxc-profile .pxc-prof-pat {
    display: flex; align-items: center; gap: 12px; margin: 0;
    padding: 10px 12px; border-radius: 2px;
    background: var(--pc-ink); border: 1px solid var(--pc-line);
    cursor: pointer; transition: border-color .12s;
}
html body #pxc-profile .pxc-prof-pat:hover,
html body #pxc-profile .pxc-prof-pat:focus-visible { border-color: var(--pc-acid); outline: none; }
html body #pxc-profile .pxc-prof-prog { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html body #pxc-profile .pxc-prof-prog b { font: 700 14px var(--pc-body); color: var(--pc-text); }
html body #pxc-profile .pxc-prof-prog span { font: 500 11px var(--pc-mono); color: var(--pc-dim); }
html body #pxc-profile .pxc-prof-lvl {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: 10px 12px; border-radius: 2px;
    background: var(--pc-ink); border: 1px solid var(--pc-line);
}
html body #pxc-profile .pxc-prof-lvl b { font: 800 26px/1 var(--pc-display); color: var(--pc-text); }
html body #pxc-profile .pxc-prof-rep { display: flex; align-items: stretch; gap: 8px; margin: 0; }
html body #pxc-profile .pxc-rate {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 10px;
    border-radius: 2px; border: 1px solid var(--pc-line-2); background: transparent;
    color: var(--pc-dim); font: 600 13px var(--pc-mono);
}
html body #pxc-profile .pxc-rate:disabled { opacity: .4; cursor: default; }
html body #pxc-profile .pxc-rate.like:hover:not(:disabled),
html body #pxc-profile .pxc-rate.like.on { border-color: var(--pc-ok); background: var(--pc-ok-soft); color: var(--pc-ok); }
html body #pxc-profile .pxc-rate.dis:hover:not(:disabled),
html body #pxc-profile .pxc-rate.dis.on { border-color: var(--pc-hot); background: var(--pc-hot-soft); color: var(--pc-hot); }
html body #pxc-profile .pxc-repscore {
    min-width: 96px; padding: 4px 12px; border-radius: 2px;
    border: 1px solid var(--pc-line-2); background: var(--pc-ink);
}
html body #pxc-profile .pxc-repscore span { font: 500 9px var(--pc-mono); letter-spacing: .14em; color: var(--pc-faint); }
html body #pxc-profile .pxc-repscore b { font: 700 18px var(--pc-mono); color: var(--pc-text); }
html body #pxc-profile .pxc-repscore.up { border-color: rgba(75, 227, 138, .45); background: var(--pc-ok-soft); }
html body #pxc-profile .pxc-repscore.up b { color: var(--pc-ok); }
html body #pxc-profile .pxc-repscore.down { border-color: rgba(255, 84, 112, .45); background: var(--pc-hot-soft); }
html body #pxc-profile .pxc-repscore.down b { color: var(--pc-hot); }
html body #pxc-profile .pxc-prof-sect {
    display: flex; align-items: center; gap: 10px;
    font: 500 10px var(--pc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pc-acid);
}
html body #pxc-profile .pxc-prof-sect::after { content: ''; flex: 1; height: 1px; background: var(--pc-line); }
html body #pxc-profile .pxc-prof-sect span { color: var(--pc-dim); letter-spacing: .08em; order: 2; }
html body #pxc-profile .pxc-prof-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
html body #pxc-profile .pxc-stat {
    flex-direction: row; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border-radius: 2px;
    background: var(--pc-ink); border: 1px solid var(--pc-line); text-align: left;
}
html body #pxc-profile .pxc-stat span { display: flex; align-items: center; gap: 6px; font: 500 10px var(--pc-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-faint); white-space: nowrap; }
html body #pxc-profile .pxc-stat span i { font-size: 10px; color: var(--pc-faint); margin: 0; }
html body #pxc-profile .pxc-stat b { font: 700 13px var(--pc-mono); color: var(--pc-text); }
html body #pxc-profile .pxc-prof-medals { display: flex; flex-wrap: wrap; gap: 5px; }
.pxc-medal {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px;
    border: 1px solid rgba(212, 255, 58, .35); border-radius: 2px; background: var(--pc-acid-soft);
    font: 500 10.5px var(--pc-mono); letter-spacing: .04em; color: var(--pc-text);
}
.pxc-medal i { color: var(--pc-acid); }
.pxc-medal-none { font: 400 12px var(--pc-body); color: var(--pc-faint); }
html body #pxc-profile .pxc-prof-foot { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 12px 18px; }
html body #pxc-profile .pxc-prof-foot .v3-btn { flex: 1 1 auto; }
html body #pxc-profile .pxc-prof-foot .v3-btn[data-act="copy"],
html body #pxc-profile .pxc-prof-foot .v3-btn[data-act="report"] { flex: 0 0 auto; width: 38px; padding: 0; }

/* ---------- 5. Denúncia ------------------------------------------------------ */

html body #pxr-back { z-index: 100003; }
html body #pxr-modal {
    z-index: 100004;
    width: min(480px, calc(100vw - 24px));
    padding: 0;
    border-radius: 2px;
    background: var(--pc-corners), var(--pc-panel);
    border: 1px solid var(--pc-line-2);
    box-shadow: var(--pc-shadow);
    font-family: var(--pc-body);
    animation: none;
}
html body #pxr-modal .v3-head i { color: var(--pc-hot); }
html body #pxr-modal .v3-kicker { color: var(--pc-hot); }
html body #pxr-modal .pxr-target {
    display: flex; align-items: center; gap: 8px; margin: 0 0 4px;
    padding: 10px 12px; background: var(--pc-ink); border: 1px solid var(--pc-line); border-radius: 2px;
    font: 400 13px var(--pc-body); color: var(--pc-dim);
}
html body #pxr-modal .pxr-target i { color: var(--pc-faint); }
html body #pxr-modal .pxr-target b { color: var(--pc-text); }
html body #pxr-modal .pxr-label { display: block; margin: 14px 0 6px; }
html body #pxr-modal .pxr-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
html body #pxr-modal .pxr-reason {
    padding: 7px 10px;
    background: transparent; border: 1px solid var(--pc-line-2); border-radius: 2px;
    font: 500 12px var(--pc-body); color: var(--pc-dim); cursor: pointer;
}
html body #pxr-modal .pxr-reason:hover { color: var(--pc-text); border-color: var(--pc-text); }
html body #pxr-modal .pxr-reason.is-on { color: var(--pc-hot); border-color: var(--pc-hot); background: var(--pc-hot-soft); }
html body #pxr-modal .pxr-text { min-height: 100px; }
html body #pxr-modal .pxr-text:focus { border-color: var(--pc-hot); box-shadow: inset 3px 0 0 var(--pc-hot); }
html body #pxr-modal .pxr-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
html body #pxr-modal .pxr-status { margin: 0; min-height: 15px; font: 400 12px var(--pc-body); color: var(--pc-dim); }
html body #pxr-modal .pxr-status.err { color: var(--pc-hot); }
html body #pxr-modal .pxr-count { font: 500 10px var(--pc-mono); color: var(--pc-faint); }
html body #pxr-modal .pxr-actions { margin: 0; }
html body #pxr-modal .pxr-hint { flex: 1; min-width: 0; }

/* ---------- 6. Fichas do ui.js (amigo do Discord / ranking XP) -------------- */

html body #discord-details-modal,
html body #ranking-details-modal {
    background: var(--pc-backdrop) !important;
    -webkit-backdrop-filter: blur(4px) saturate(.5); backdrop-filter: blur(4px) saturate(.5);
}
html body #discord-details-modal .discord-details-card,
html body #ranking-details-modal .discord-details-card {
    width: min(440px, calc(100vw - 24px)) !important;
    padding: 20px !important;
    border-radius: 2px !important;
    background: var(--pc-corners), var(--pc-panel) !important;
    border: 1px solid var(--pc-line-2) !important;
    box-shadow: var(--pc-shadow) !important;
    color: var(--pc-text) !important;
    font-family: var(--pc-body) !important;
}
html body .discord-details-card .discord-details-close {
    top: 14px !important; right: 14px !important;
    width: 34px !important; height: 34px !important;
    border-radius: 2px !important; border: 1px solid var(--pc-line-2) !important;
    background: transparent !important; color: var(--pc-dim) !important;
    font: 500 13px var(--pc-mono) !important; text-transform: uppercase;
}
html body .discord-details-card .discord-details-close:hover { color: var(--pc-hot) !important; border-color: var(--pc-hot) !important; }
html body .discord-details-card .discord-details-head { gap: 14px !important; padding: 0 44px 16px 0 !important; border-bottom: 1px solid var(--pc-line); }
html body .discord-details-card .discord-details-avatar {
    width: 64px !important; height: 64px !important; flex: 0 0 auto;
    border-radius: 50% !important; border: 1px solid var(--pc-line-2) !important; background: var(--pc-panel-2);
    object-fit: cover;
}
html body .discord-details-card .discord-details-title {
    font: 800 18px/1.15 var(--pc-display) !important; letter-spacing: -.02em; text-transform: uppercase; color: var(--pc-text) !important;
    overflow-wrap: anywhere;
}
html body .discord-details-card .discord-details-sub { font: 500 11px var(--pc-mono) !important; letter-spacing: .06em; color: var(--pc-dim) !important; text-transform: uppercase; }
html body .discord-details-card .discord-details-grid {
    grid-template-columns: 140px 1fr !important;
    gap: 0 !important; margin-top: 14px !important;
    border: 1px solid var(--pc-line); border-radius: 2px;
}
html body .discord-details-card .discord-details-grid > span,
html body .discord-details-card .discord-details-grid > strong { padding: 8px 12px; border-bottom: 1px solid var(--pc-line); }
html body .discord-details-card .discord-details-grid > span:nth-last-child(2),
html body .discord-details-card .discord-details-grid > strong:last-child { border-bottom: 0; }
html body .discord-details-card .discord-details-grid > span {
    font: 500 10px var(--pc-mono) !important; letter-spacing: .1em; text-transform: uppercase;
    color: var(--pc-faint) !important; background: var(--pc-ink);
}
html body .discord-details-card .discord-details-grid > strong { font: 600 13px var(--pc-body) !important; color: var(--pc-text) !important; }
/* Botão "Solicitar amizade" do ui.js (secundário: o principal é "Ver perfil completo") */
html body #ranking-details-modal .discord-details-card > button:not(.discord-details-close) {
    min-height: 38px; margin-top: 12px !important;
    border-radius: 2px !important; border: 1px solid var(--pc-line-2) !important;
    background: transparent !important; color: var(--pc-text) !important;
    font: 600 11px var(--pc-mono) !important; letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer; box-shadow: none !important;
}
html body #ranking-details-modal .discord-details-card > button:not(.discord-details-close):hover { border-color: var(--pc-acid) !important; color: var(--pc-acid) !important; }
.pxdd-acts { display: flex; gap: 6px; margin-top: 12px; }
.pxdd-acts .v3-btn { flex: 1 1 auto; min-width: 0; padding: 0 10px; }
.pxdd-acts .v3-btn[data-act="copy"] { flex: 0 0 auto; width: 38px; padding: 0; }

/* Selo "★ PREMIUM" que o ui.js põe no canto da tela (estilo inline) */
html body #premium-badge {
    padding: 4px 8px !important;
    border-radius: 2px !important;
    background: var(--pc-gold-soft) !important;
    border: 1px solid rgba(255, 201, 74, .45) !important;
    color: var(--pc-gold) !important;
    font: 600 10px var(--pc-mono) !important; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- 7. Celular -------------------------------------------------------- */

@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
    html body #px-account-modal { width: 100vw; height: 100vh; height: 100dvh; max-height: none; animation: none; }
    html body #px-account-modal .pxac-hero { gap: 12px; padding: 14px 14px 12px; align-items: flex-start; flex-wrap: wrap; }
    html body #px-account-modal .pxac-av { width: 52px; height: 52px; font-size: 18px; }
    html body #px-account-modal .pxac-hero-tt { flex-basis: calc(100% - 120px); }
    html body #px-account-modal .pxac-hero-tt h3 { font-size: 17px; padding-right: 44px; }
    html body #px-account-modal .pxac-patbox {
        order: 3; flex: 1 1 100%; margin: 0;
        flex-direction: row; justify-content: flex-start; gap: 10px; min-width: 0; padding: 8px 12px;
    }
    html body #px-account-modal .pxac-patbox span { margin-left: auto; }
    html body #px-account-modal .pxac-patbox .pxpat { --sz: 30px !important; }
    html body #px-account-modal .pxac-patbox .pxpat-tier { display: none; }
    html body #px-account-modal .pxac-close { top: 12px; right: 12px; }
    html body #px-account-modal .pxac-tabs { padding: 0 6px; }
    html body #px-account-modal .pxac-tab { padding: 12px 11px; }
    html body #px-account-modal .pxac-body { padding: 14px 14px 22px; gap: 16px; }
    html body #px-account-modal .pxac-duo { grid-template-columns: 1fr; }
    html body #px-account-modal .pxac-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body #px-account-modal .pxac-big { font-size: 32px; min-width: 44px; }
    html body #px-account-modal .pxac-inline .v3-btn { min-width: 0; }
    html body #px-account-modal .pxac-photo { align-items: flex-start; }
    html body #px-account-modal .pxac-av-lg { width: 64px; height: 64px; }
    html body #px-account-modal .pxac-row { flex-wrap: wrap; }
    html body #px-account-modal .v3-input { font-size: 16px; } /* sem zoom automático no iOS */
    .pxac-medals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pxmd { padding: 7px 8px; gap: 8px; }
    .pxmd-ic { width: 28px; height: 28px; font-size: 12px; }

    html body #pxpat-ladder { width: 100vw; height: 100vh; height: 100dvh; }
    .pxpl-sum { padding: 12px 14px; }

    html body #pxc-profile { width: 100vw; max-height: none; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
    html body #pxc-profile .pxc-prof-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; }
    html body #pxc-profile .pxc-prof-top { padding: 14px; }
    html body #pxc-profile .pxc-prof-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
    html body #pxc-profile .pxc-prof-duo { grid-template-columns: 1fr 96px; }
    html body #pxc-profile .pxc-stat { flex-direction: column; align-items: flex-start; gap: 3px; }
    html body #pxc-profile .pxc-prof-foot { flex-wrap: nowrap; }
    html body #pxc-profile .pxc-prof-foot .v3-btn { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 10px; letter-spacing: .04em; gap: 6px; }
    html body #pxc-profile .pxc-prof-foot .v3-btn[data-act="copy"],
    html body #pxc-profile .pxc-prof-foot .v3-btn[data-act="report"] { flex: 0 0 40px; width: 40px; }

    html body #pxr-modal { width: 100vw; display: flex; flex-direction: column; }
    html body #pxr-modal .pxr-text { font-size: 16px; }
    html body #pxr-modal .pxr-hint { display: none; }
    html body #pxr-modal .pxr-actions .v3-btn { flex: 1 1 0; }

    html body .pxc-usermenu .pxc-um-item { padding: 11px 12px !important; }
    html body .discord-details-card .discord-details-grid { grid-template-columns: 112px 1fr !important; }
    html body #discord-details-modal .discord-details-card,
    html body #ranking-details-modal .discord-details-card { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }
}
/* Celular deitado (em jogo): pouca altura, cabeçalho da conta mais baixo */
@media (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
    html body #px-account-modal .pxac-hero { flex-wrap: nowrap; align-items: center; }
    html body #px-account-modal .pxac-hero-acts,
    html body #px-account-modal .pxac-hero-sub { display: none; }
    html body #px-account-modal .pxac-patbox { order: 0; flex: 0 0 auto; margin-right: 48px; }
    html body #px-account-modal .pxac-duo { grid-template-columns: 1fr 1fr; }
    html body #px-account-modal .pxac-stats { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .pxac-medals { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}