/* ==========================================================================
   menu-v3.css — acabamento do menu principal (3.7.7)
   Carregado depois do pc-redesign.css.
     1. Seletor de nicks da conta no campo Apelido (todas as telas).
     2. Botão "Novidades" ao lado de Configurações e rodapé do card central.
     3. Barra de ícones fora de cima do ranking com o menu aberto (PC).
     4. Tema do PC (mesma media query do pc-redesign, tela larga): os três painéis com a
        mesma altura e o painel Social logado no estilo "Placa de Petri".
   ========================================================================== */

/* ---------- 1. Seletor de nicks ------------------------------------------- */

.px-nick-field { position: relative; min-width: 0; }
.px-nick-field > #nick { width: 100%; box-sizing: border-box; }
.px-nick-field.has-picker > #nick { padding-right: 46px !important; }
.px-nick-field.has-picker .mmv2-nick-edit { display: none; }

#px-nick-pick {
    display: none;
    position: absolute;
    top: 50%; right: 6px;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    color: #9fd9ff;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.px-nick-field.has-picker #px-nick-pick { display: inline-flex; }
#px-nick-pick:hover,
#px-nick-pick[aria-expanded="true"] { background: rgba(0, 212, 255, .14); border-color: rgba(0, 212, 255, .5); color: #fff; }
#px-nick-pick[aria-expanded="true"] i { transform: rotate(180deg); }
#px-nick-pick i { transition: transform .15s; }

#px-nick-menu {
    position: absolute;
    z-index: 100050;
    box-sizing: border-box;
    padding: 6px;
    max-height: min(320px, 60vh);
    overflow-y: auto;
    border-radius: 12px;
    background: rgba(10, 16, 26, .98);
    border: 1px solid rgba(0, 212, 255, .3);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
    font-family: 'Inter', 'Ubuntu', sans-serif;
    animation: pxnIn .14s ease-out;
}
@keyframes pxnIn { from { opacity: 0; transform: translateY(-4px); } }
#px-nick-menu .pxn-head {
    padding: 6px 10px 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: #6f86a6;
}
#px-nick-menu .pxn-opt,
#px-nick-menu .pxn-manage {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-height: 40px;
    padding: 8px 10px;
    border: 0; border-radius: 8px;
    background: transparent;
    color: #e6eefb;
    font: 600 14.5px 'Inter', 'Ubuntu', sans-serif;
    text-align: left;
    cursor: pointer;
}
#px-nick-menu .pxn-opt:hover,
#px-nick-menu .pxn-opt:focus-visible { background: rgba(0, 212, 255, .1); outline: none; }
#px-nick-menu .pxn-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#px-nick-menu .pxn-tag {
    flex: 0 0 auto;
    padding: 2px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #5ee0ff; background: rgba(94, 224, 255, .12);
}
#px-nick-menu .pxn-ok { flex: 0 0 14px; font-size: 12px; color: #6ff0a5; visibility: hidden; }
#px-nick-menu .pxn-opt.is-on .pxn-ok { visibility: visible; }
#px-nick-menu .pxn-opt.is-on .pxn-name { color: #fff; }
#px-nick-menu .pxn-manage {
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-radius: 0 0 8px 8px;
    color: #8fb2d6; font-size: 12.5px; font-weight: 700;
}
#px-nick-menu .pxn-manage:hover { color: #fff; background: rgba(255, 255, 255, .05); }

/* ---------- 2. Novidades + rodapé do card central ------------------------- */

.menu-news-button {
    position: absolute;
    top: 0;
    right: calc(50% + 130px);
    z-index: 7;
    min-width: 126px;
    height: 44px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(0, 212, 255, .4);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, rgba(8, 24, 38, .98), rgba(10, 44, 66, .94));
    color: #c9f1ff;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
}
.menu-news-button strong { font-size: 13px; font-weight: 700; }
.menu-news-button:hover { filter: brightness(1.12); }
body.menu-single-column .menu-news-button { display: none !important; }

#helloDialog .menu-foot { margin-top: 16px; text-align: center; }
#helloDialog .menu-foot-ver {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px;
    font-size: 11px; color: rgba(255, 255, 255, .3);
}
#helloDialog .menu-foot-ver a { color: rgba(0, 212, 255, .75); text-decoration: none; font-weight: 700; }
#helloDialog .menu-foot-ver a:hover,
#helloDialog .menu-foot-ver a:focus-visible { color: #00d4ff; text-decoration: underline; }

/* Nome embaixo do ícone nas abas do Social (o tema do PC refina abaixo) */
#social-sidebar .social-tabs > button:has(.px-tab-lbl) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
}
#social-sidebar .social-tabs .px-tab-lbl {
    display: block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Barra de ícones (Social / Votações / Bug) com o menu aberto no PC: deitada no
   canto, fora de cima do painel de ranking. (No 1º acesso o menu aparece sem a
   classe game-menu-open, por isso o :has.) */
@media (min-width: 1025px) {
    html body:not(.menu-single-column):not(:has(#overlays[style*="display: none"])) #spx-corner-bar {
        right: 16px !important;
        bottom: 14px !important;
        flex-direction: row !important;
    }
}

/* ---------- 4. Tema do PC ------------------------------------------------- */
/* Mesmo gate do pc-redesign.css: tela larga, com mouse ou tablet deitado. */

@media (min-width: 1025px), (hover: hover) and (pointer: fine), (min-width: 821px) and (orientation: landscape) and (min-height: 541px) {

/* Três colunas com a mesma altura e o mesmo topo. A altura é a do card
   central (só o conteúdo dele, sem sobra); Social e Ranking esticam até ela e
   rolam por dentro. O `contain: size` impede os laterais de empurrarem a
   linha do grid com o conteúdo deles. */
html body:not(.menu-single-column) #overlays {
    grid-template-rows: auto;
    align-items: stretch !important;
}
html body:not(.menu-single-column) #social-sidebar,
html body:not(.menu-single-column) #settings-sidebar {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    contain: size;
}

/* Telas grandes: colunas um pouco mais largas */
@media (min-width: 1600px) and (min-height: 860px) {
    html body:not(.menu-single-column) #overlays {
        grid-template-columns: minmax(320px, 372px) minmax(420px, 516px) minmax(320px, 372px) !important;
        gap: 18px !important;
    }
    html body:not(.menu-single-column) #menu-center-stack,
    html body:not(.menu-single-column) #helloDialog { max-width: 516px !important; }
}

/* Barra superior: Novidades no mesmo estilo de Configurações / Loja */
html body .menu-news-button {
    background: var(--pc-panel) !important;
    border: 1px solid var(--pc-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 2px 2px !important;
    color: var(--pc-text) !important;
    box-shadow: none !important;
    filter: none !important;
}
html body .menu-news-button strong {
    font: 500 11px var(--pc-mono) !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}
html body .menu-news-button > span { color: var(--pc-acid); font-size: 12px; }
html body .menu-news-button:hover { background: var(--pc-panel-2) !important; border-color: var(--pc-line-2) !important; }

/* Rodapé do card central */
html body #helloDialog .menu-foot { border-top: 1px solid var(--pc-line); }
html body #helloDialog .menu-foot-ver,
html body #helloDialog .seo-about-links {
    font: 500 10.5px/1.5 var(--pc-mono) !important;
    letter-spacing: .04em;
    color: var(--pc-faint) !important;
}
html body #helloDialog .menu-foot-ver a,
html body #helloDialog .seo-about-links a {
    color: var(--pc-dim) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color .15s;
}
html body #helloDialog .menu-foot-ver a { color: var(--pc-acid) !important; }
html body #helloDialog .menu-foot-ver a:hover,
html body #helloDialog .seo-about-links a:hover,
html body #helloDialog .seo-about-links a:focus-visible { color: var(--pc-acid) !important; text-decoration: underline !important; }
html body #helloDialog .seo-about-links { margin: 6px 0 0 !important; }

/* Seletor de nicks */
html body #px-nick-pick {
    border-radius: 2px;
    border-color: var(--pc-line-2);
    background: transparent;
    color: var(--pc-dim);
}
html body #px-nick-pick:hover,
html body #px-nick-pick[aria-expanded="true"] { border-color: var(--pc-acid); background: var(--pc-acid-soft); color: var(--pc-acid); }
html body #px-nick-menu {
    border-radius: 2px;
    background: var(--pc-panel);
    border-color: var(--pc-line-2);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
    font-family: var(--pc-body);
}
html body #px-nick-menu .pxn-head { font: 500 10px var(--pc-mono); letter-spacing: .14em; color: var(--pc-faint); }
html body #px-nick-menu .pxn-opt,
html body #px-nick-menu .pxn-manage { border-radius: 2px; font-family: var(--pc-body); color: var(--pc-text); }
html body #px-nick-menu .pxn-opt:hover { background: var(--pc-panel-2); }
html body #px-nick-menu .pxn-opt.is-on { box-shadow: inset 3px 0 0 var(--pc-acid); }
html body #px-nick-menu .pxn-tag { border-radius: 2px; font-family: var(--pc-mono); color: var(--pc-acid); background: var(--pc-acid-soft); }
html body #px-nick-menu .pxn-ok { color: var(--pc-acid); }
html body #px-nick-menu .pxn-manage { border-top-color: var(--pc-line); font: 500 11px var(--pc-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pc-dim); }
html body #px-nick-menu .pxn-manage:hover { color: var(--pc-acid); background: transparent; }

/* ---------- Painel Social (logado) --------------------------------------- */

html body #social-sidebar.px-social-v2 { padding: 16px 16px 14px !important; }

/* Cabeçalho: sino e contador */
html body #social-sidebar.px-social-v2 .social-panel-top-actions { gap: 6px !important; }
html body #social-sidebar.px-social-v2 .social-notification-bell,
html body #social-sidebar.px-social-v2 .social-panel-count {
    height: 26px !important;
    border-radius: 2px !important;
    background: transparent !important;
    border: 1px solid var(--pc-line-2) !important;
    color: var(--pc-dim) !important;
    box-shadow: none !important;
    font: 500 10px var(--pc-mono) !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}
html body #social-sidebar.px-social-v2 .social-notification-bell.has-notifications { border-color: var(--pc-acid) !important; color: var(--pc-acid) !important; }

/* Cartão do perfil */
html body #social-sidebar.px-social-v2 .social-login-card {
    background: var(--pc-ink) !important;
    border: 1px solid var(--pc-line) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
html body #social-sidebar.px-social-v2 .social-login-card::before,
html body #social-sidebar.px-social-v2 .social-login-card::after { display: none !important; }
html body #social-sidebar.px-social-v2 .px-avatar-wrap .social-avatar {
    border: 1px solid var(--pc-line-2) !important;
    box-shadow: none !important;
}
html body #social-sidebar.px-social-v2 .px-avatar-wrap {
    padding: 1px !important;
    background: var(--pc-line-2) !important;
    box-shadow: none !important;
}
html body #social-sidebar.px-social-v2 .px-avatar-lvl {
    border-radius: 2px !important;
    background: var(--pc-acid) !important;
    border: 0 !important;
    color: var(--pc-acid-ink) !important;
    font: 700 9px var(--pc-mono) !important;
    letter-spacing: .04em !important;
    box-shadow: none !important;
}
html body #social-sidebar.px-social-v2 .social-login-name span {
    font: 700 16px var(--pc-body) !important;
    color: var(--pc-text) !important;
}
html body #social-sidebar.px-social-v2 .px-head-actions .language-flag-btn,
html body #social-sidebar.px-social-v2 .px-head-actions .social-logout-icon {
    width: 28px !important; height: 28px !important;
    border-radius: 2px !important;
    background: transparent !important;
    border: 1px solid var(--pc-line-2) !important;
    color: var(--pc-dim) !important;
    box-shadow: none !important;
}
html body #social-sidebar.px-social-v2 .px-head-actions .language-flag-btn:hover,
html body #social-sidebar.px-social-v2 .px-head-actions .social-logout-icon:hover { border-color: var(--pc-acid) !important; color: var(--pc-acid) !important; }
html body #social-sidebar.px-social-v2 .px-meta-chip,
html body #social-sidebar.px-social-v2 .social-clan-chip {
    border-radius: 2px !important;
    background: transparent !important;
    border: 1px solid var(--pc-line-2) !important;
    color: var(--pc-dim) !important;
    box-shadow: none !important;
    font: 500 11px var(--pc-mono) !important;
}
html body #social-sidebar.px-social-v2 .px-meta-chip b { color: var(--pc-text) !important; font-weight: 600 !important; }
html body #social-sidebar.px-social-v2 .px-meta-chip.is-coins i { color: var(--pc-gold) !important; }
html body #social-sidebar.px-social-v2 .social-clan-chip:hover { border-color: var(--pc-acid) !important; color: var(--pc-acid) !important; }
html body #social-sidebar.px-social-v2 .px-xp-info,
html body #social-sidebar.px-social-v2 .px-xp-info b {
    font: 500 10px var(--pc-mono) !important;
    letter-spacing: .08em !important;
    color: var(--pc-dim) !important;
}
html body #social-sidebar.px-social-v2 .px-xp-info b { color: var(--pc-text) !important; letter-spacing: 0 !important; }
html body #social-sidebar.px-social-v2 .social-level-bar {
    height: 8px !important;
    border-radius: 0 !important;
    background: var(--pc-panel-2) !important;
    border: 1px solid var(--pc-line) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
html body #social-sidebar.px-social-v2 .social-level-fill {
    border-radius: 0 !important;
    background: var(--pc-acid) !important;
    box-shadow: none !important;
}
html body #social-sidebar.px-social-v2 .social-level-bar > span { display: none !important; }

/* Abas: ícone + nome, sublinhado na ativa (igual às abas do ranking) */
html body #social-sidebar.px-social-v2 .social-tabs {
    gap: 0 !important;
    margin-top: 12px !important;
    border-bottom: 1px solid var(--pc-line) !important;
}
html body #social-sidebar.px-social-v2 .social-tabs button {
    position: relative;
    height: auto !important;
    min-height: 50px !important;
    padding: 7px 2px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--pc-faint) !important;
    box-shadow: none !important;
    transition: color .15s, background .15s !important;
}
html body #social-sidebar.px-social-v2 .social-tabs button::after {
    content: '';
    position: absolute; left: 10%; right: 10%; bottom: -1px;
    height: 2px;
    background: transparent;
}
html body #social-sidebar.px-social-v2 .social-tabs button:hover { color: var(--pc-text) !important; background: rgba(233, 239, 228, .03) !important; transform: none !important; }
html body #social-sidebar.px-social-v2 .social-tabs button.active { color: var(--pc-acid) !important; }
html body #social-sidebar.px-social-v2 .social-tabs button.active::after {
    left: 10% !important; right: 10% !important;
    border-radius: 0 !important;
    background: var(--pc-acid) !important;
    box-shadow: none !important;
}
html body #social-sidebar.px-social-v2 .social-tabs .social-tab-icon { color: inherit !important; filter: none !important; opacity: 1 !important; }
html body #social-sidebar.px-social-v2 .social-tabs .social-tab-icon { width: 18px !important; height: 18px !important; }
html body #social-sidebar.px-social-v2 .social-tabs .px-tab-lbl {
    font: 500 9.5px/1 var(--pc-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
html body #social-sidebar.px-social-v2 .social-tabs .tab-badge,
html body #social-sidebar.px-social-v2 .social-tabs .notif-badge {
    position: absolute; top: 4px; right: 18%;
    border-radius: 2px !important;
    background: var(--pc-hot) !important;
    color: #fff !important;
}
html body #social-sidebar.px-social-v2 .social-tabs button[data-tooltip]::before,
html body #social-sidebar.px-social-v2 .social-tabs button[data-tooltip]::after { white-space: pre-line; }

/* Lista */
html body #social-sidebar.px-social-v2 .social-list { padding-top: 10px !important; gap: 6px !important; }
html body #social-sidebar.px-social-v2 .social-empty {
    font: 500 10.5px var(--pc-mono) !important;
    letter-spacing: .06em !important;
    color: var(--pc-faint) !important;
    text-transform: uppercase;
    padding: 2px 2px 4px !important;
    background: none !important;
    border: 0 !important;
}
/* Estado vazio de verdade (último item da lista): caixa tracejada centralizada */
html body #social-sidebar.px-social-v2 .social-list > .social-empty:last-child {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    margin-top: 2px;
    padding: 18px !important;
    border: 1px dashed var(--pc-line-2) !important;
    background: radial-gradient(rgba(233, 239, 228, .05) 1px, transparent 1.2px) 0 0 / 14px 14px !important;
    text-align: center;
    color: var(--pc-dim) !important;
}
html body #social-sidebar.px-social-v2 .social-row {
    border-radius: 2px !important;
    background: var(--pc-ink) !important;
    border: 1px solid var(--pc-line) !important;
    box-shadow: none !important;
    transition: border-color .15s, background .15s;
}
html body #social-sidebar.px-social-v2 .social-row:hover { border-color: var(--pc-line-2) !important; background: #0f1210 !important; }
html body #social-sidebar.px-social-v2 .social-row-main strong { font: 700 13.5px var(--pc-body) !important; color: var(--pc-text) !important; }
html body #social-sidebar.px-social-v2 .social-row-main strong.offline { color: var(--pc-dim) !important; }
html body #social-sidebar.px-social-v2 .social-row-main span:not(.presence-dot) { font: 500 10px var(--pc-mono) !important; color: var(--pc-faint) !important; letter-spacing: .02em; }
html body #social-sidebar.px-social-v2 .social-row-avatar { border-radius: 50% !important; border: 1px solid var(--pc-line-2) !important; }
html body #social-sidebar.px-social-v2 .presence-dot.online { background: var(--pc-acid) !important; box-shadow: 0 0 0 3px var(--pc-acid-soft) !important; }
html body #social-sidebar.px-social-v2 .social-row > button:not(.social-row-main),
html body #social-sidebar.px-social-v2 .social-team-actions button {
    border-radius: 2px !important;
    background: transparent !important;
    border: 1px solid var(--pc-line-2) !important;
    color: var(--pc-text) !important;
    box-shadow: none !important;
    font: 500 10px var(--pc-mono) !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}
html body #social-sidebar.px-social-v2 .social-row > button:not(.social-row-main):hover:not(:disabled),
html body #social-sidebar.px-social-v2 .social-team-actions button:hover { border-color: var(--pc-acid) !important; color: var(--pc-acid) !important; }
html body #social-sidebar.px-social-v2 .social-row > button:disabled { opacity: .35; }
html body #social-sidebar.px-social-v2 .social-row > button:not(.social-row-main) { height: 30px !important; min-width: 0 !important; padding: 0 9px !important; }
html body #social-sidebar.px-social-v2 .social-team-actions button { width: 100%; height: 38px !important; border-color: var(--pc-acid) !important; color: var(--pc-acid) !important; }
html body #social-sidebar.px-social-v2 .social-team-actions button:hover { background: var(--pc-acid-soft) !important; }

/* Etiqueta dos ícones da barra deitada: sobe em vez de sair para a esquerda */
html body:not(:has(#overlays[style*="display: none"])) #spx-corner-bar button[data-tip]::after {
    right: 50%;
    top: auto;
    bottom: calc(100% + 8px);
    transform: translate(50%, 4px);
}
html body:not(:has(#overlays[style*="display: none"])) #spx-corner-bar button[data-tip]:hover::after { transform: translate(50%, 0); }
html body:not(:has(#overlays[style*="display: none"])) #spx-corner-bar button:hover { transform: translateY(-2px); }

}