/* ============================================================================
   CELLMENU.CSS — menu do nome aberto SOBRE O MAPA (translúcido) e painel
   rápido de administração ao lado dele (cellmenu.js).
   Segue a linguagem do jogo: vidro escuro, borda ciano, cantos arredondados.
   ============================================================================ */

/* ── Menu do nome quando aberto pela célula do mapa ─────────────────────── */
.pxc-usermenu.pxc-um-onmap {
    background: rgba(10, 14, 24, 0.62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: rgba(0, 200, 255, 0.34);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
.pxc-usermenu.pxc-um-onmap .pxc-um-item { color: #e9f2ff; }
.pxc-usermenu.pxc-um-onmap:hover { background: rgba(10, 14, 24, 0.86); }

/* Botão "Admin" (injetado no fim do menu do nome) */
.pxc-um-item.pxa-open { color: #ff9db1; }
.pxc-um-item.pxa-open i { color: #ff6a8a; }
.pxc-um-item.pxa-open:hover { background: rgba(255, 77, 109, 0.16); color: #fff; }

/* ── Painel rápido de admin ─────────────────────────────────────────────── */
.pxa-quick {
    position: fixed;
    z-index: 100001;
    width: 232px;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    padding: 8px;
    border-radius: 14px;
    background: rgba(12, 10, 20, 0.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 77, 109, 0.42);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 60, 100, 0.14);
    font-family: 'Inter', 'Ubuntu', sans-serif;
    animation: pxaIn 0.14s ease;
    -webkit-overflow-scrolling: touch;
}
@keyframes pxaIn { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }

.pxa-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 4px 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    color: #ffd7de;
    font-size: 11.5px;
    font-weight: 700;
}
.pxa-head i { color: #ff6a8a; }
.pxa-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxa-head b { color: #fff; }
/* Selo do pID: é por ele que os comandos do servidor acham o jogador, então
   fica à vista para o admin conferir que pegou a pessoa certa. */
.pxa-pid {
    flex: none;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(0, 200, 255, 0.16);
    border: 1px solid rgba(0, 200, 255, 0.35);
    color: #9ee3ff !important;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.pxa-pid.wait { opacity: 0.6; animation: pxaPulse 1s ease-in-out infinite; }
.pxa-pid.err {
    background: rgba(255, 77, 109, 0.16);
    border-color: rgba(255, 77, 109, 0.4);
    color: #ffa8b8 !important;
    animation: none;
}
@keyframes pxaPulse { 50% { opacity: 0.25; } }

.pxa-x {
    margin-left: auto;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    color: #b9c2d4;
    cursor: pointer;
    font-size: 11px;
}
.pxa-x:hover { background: rgba(255, 77, 109, 0.2); color: #fff; }

.pxa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.pxa-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 9px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #dfe7f5;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}
.pxa-btn i { width: 13px; text-align: center; color: #7fd0ff; font-size: 11px; }
.pxa-btn:hover { background: rgba(0, 200, 255, 0.14); border-color: rgba(0, 200, 255, 0.4); color: #fff; }
.pxa-btn.wide { grid-column: 1 / -1; }
.pxa-btn.danger i { color: #ff6a8a; }
.pxa-btn.danger:hover { background: rgba(255, 77, 109, 0.18); border-color: rgba(255, 77, 109, 0.5); }
/* Célula-mãe: mesma cor da bolinha rosa que ela cria no mapa (#ce6363). */
.pxa-btn.mother i { color: #ff8f8f; }
.pxa-btn.mother:hover { background: rgba(206, 99, 99, 0.22); border-color: rgba(206, 99, 99, 0.55); }

/* Sub-área (nome / massa / cor / skin / confirmação) */
.pxa-sub { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.pxa-label {
    display: block;
    margin-bottom: 5px;
    color: #93a0b8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.pxa-row { display: flex; gap: 6px; align-items: center; }
.pxa-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 9px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    outline: none;
}
.pxa-input:focus { border-color: rgba(0, 200, 255, 0.5); }
.pxa-mini {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 11px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #dfe7f5;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}
.pxa-mini.ok { border-color: rgba(0, 200, 255, 0.45); color: #7fd0ff; }
.pxa-mini.danger { border-color: rgba(255, 77, 109, 0.5); color: #ff9db1; }
.pxa-mini.wide { width: 100%; margin-top: 6px; }
.pxa-mini:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.pxa-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pxa-chip {
    padding: 4px 8px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #c9d4e6;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
}
.pxa-chip:hover { background: rgba(0, 200, 255, 0.16); color: #fff; }

.pxa-confirm p { margin: 0 0 8px; color: #e6ecf7; font-size: 12px; }

/* Paleta de cores */
.pxa-colors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 7px; }
.pxa-color {
    height: 24px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
    padding: 0;
}
.pxa-color:hover { transform: scale(1.08); border-color: #fff; }
.pxa-picker {
    flex: 1 1 auto;
    height: 32px;
    padding: 2px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
}

/* Galeria pequena de skins */
.pxa-skins {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    max-height: 148px;
    overflow-y: auto;
    margin-top: 6px;
    padding-right: 2px;
}
.pxa-skins::-webkit-scrollbar { width: 5px; }
.pxa-skins::-webkit-scrollbar-thumb { background: rgba(0, 200, 255, 0.35); border-radius: 3px; }
.pxa-skin {
    aspect-ratio: 1 / 1;
    padding: 2px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
}
.pxa-skin img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.pxa-skin:hover { border-color: rgba(0, 200, 255, 0.6); }
.pxa-hint { grid-column: 1 / -1; padding: 10px 4px; color: #7d879b; font-size: 11px; text-align: center; }

/* Celular: painel um pouco maior para o toque, colado à direita */
@media (pointer: coarse) {
    .pxa-quick { width: 244px; }
    .pxa-btn { padding: 10px; font-size: 12px; }
    .pxa-skins { grid-template-columns: repeat(4, 1fr); max-height: 132px; }
}