/**
 * menu-center.css — Cartão central do menu principal (JOGAR / servidor / avisos).
 *
 * TUDO aqui é escopado em `body:not(.menu-single-column)` e numa media query de
 * largura: o menu do celular (mobile.css + mobile-menu-v2.css) não é tocado.
 * O único bloco mobile está no fim do arquivo e serve só para o menu ocupar a
 * tela inteira, que era o que faltava lá.
 */

@media (min-width: 861px) {
    body:not(.menu-single-column) #menu-center-stack {
        gap: 12px;
        max-width: 500px;
    }

    /* ── Cartão ───────────────────────────────────────────────────────────── */
    body:not(.menu-single-column) #helloDialog {
        max-width: 500px;
        padding: 0 0 18px;
        overflow: hidden;
        border: 1px solid rgba(120, 200, 255, 0.28);
        border-radius: 22px;
        background:
            radial-gradient(120% 90% at 50% -20%, rgba(0, 190, 255, 0.16), transparent 62%),
            linear-gradient(180deg, rgba(14, 20, 34, 0.95), rgba(8, 12, 22, 0.96));
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    }
    /* Fio de luz no topo do cartão */
    body:not(.menu-single-column) #helloDialog::before {
        content: '';
        display: block;
        height: 2px;
        background: linear-gradient(90deg, transparent, #38d0ff 22%, #a06bff 55%, transparent);
        opacity: 0.85;
    }

    /* ── Cabeçalho ────────────────────────────────────────────────────────── */
    body:not(.menu-single-column) #pxm-head {
        padding: 22px 26px 16px;
        text-align: center;
    }
    body:not(.menu-single-column) #title {
        margin: 0;
        font-size: 34px;
        line-height: 1.05;
        letter-spacing: 3px;
    }
    body:not(.menu-single-column) #pxm-tag {
        display: block;
        margin-top: 5px;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 2.6px;
        text-transform: uppercase;
        color: #6f86a6;
    }

    /* Faixa de status do servidor selecionado */
    body:not(.menu-single-column) #pxm-status {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 14px 26px 0;
        padding: 8px 12px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background: rgba(255, 255, 255, 0.035);
        font-size: 12px;
        color: #9db0cb;
    }
    body:not(.menu-single-column) .pxm-st { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
    body:not(.menu-single-column) .pxm-st b { color: #eaf2ff; font-variant-numeric: tabular-nums; }
    body:not(.menu-single-column) .pxm-st i { font-size: 11px; color: #58c8ff; }
    body:not(.menu-single-column) .pxm-dot {
        width: 7px; height: 7px; border-radius: 50%;
        background: #6ff0a5;
        box-shadow: 0 0 8px rgba(111, 240, 165, 0.9);
        animation: pxmPulse 2.2s ease-in-out infinite;
    }
    body:not(.menu-single-column) .pxm-dot.off { background: #ff8fa3; box-shadow: 0 0 8px rgba(255, 143, 163, 0.8); }
    body:not(.menu-single-column) .pxm-sep { color: rgba(255, 255, 255, 0.16); }
    @keyframes pxmPulse { 50% { opacity: 0.35; } }

    /* ── Formulário ───────────────────────────────────────────────────────── */
    body:not(.menu-single-column) #helloDialog form {
        gap: 11px;
        padding: 16px 26px 0;
    }
    body:not(.menu-single-column) .pxm-label {
        margin: 4px 0 -4px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: #5d7189;
    }
    body:not(.menu-single-column) #helloDialog .form-control,
    body:not(.menu-single-column) #helloDialog #nick,
    body:not(.menu-single-column) #helloDialog #gamemode {
        height: 50px;
        border-radius: 14px;
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.045);
        font-size: 15px;
    }
    body:not(.menu-single-column) #helloDialog #gamemode {
        padding-right: 40px;
        background-image:
            linear-gradient(45deg, transparent 50%, #7fb6ff 50%),
            linear-gradient(135deg, #7fb6ff 50%, transparent 50%);
        background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
        background-size: 6px 6px, 6px 6px;
        background-repeat: no-repeat;
    }

    /* ── Botões ───────────────────────────────────────────────────────────── */
    body:not(.menu-single-column) .menu-action-buttons { gap: 10px; margin-top: 4px; }
    body:not(.menu-single-column) #play-btn {
        height: 56px;
        border-radius: 15px;
        font-size: 17px;
        letter-spacing: 1.6px;
        background: linear-gradient(135deg, #00c2ff 0%, #0a84ff 48%, #7b5bff 100%);
        border: 0;
        box-shadow: 0 12px 30px rgba(0, 140, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
        transition: transform 0.14s ease, box-shadow 0.16s ease, filter 0.16s ease;
    }
    body:not(.menu-single-column) #play-btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.07);
        box-shadow: 0 18px 40px rgba(0, 140, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    body:not(.menu-single-column) #play-btn:active { transform: translateY(0); }
    body:not(.menu-single-column) #spectate-btn {
        height: 56px;
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.05);
        color: #cfe0f5;
        font-weight: 700;
        transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    body:not(.menu-single-column) #spectate-btn:hover {
        background: rgba(0, 190, 255, 0.12);
        border-color: rgba(0, 190, 255, 0.4);
        color: #fff;
    }

    /* ── Dicas de tecla ───────────────────────────────────────────────────── */
    body:not(.menu-single-column) .menu-controls-hint {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 7px;
        margin: 16px 26px 0;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    body:not(.menu-single-column) .menu-controls-hint span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11.5px;
        color: #8496b3;
    }
    body:not(.menu-single-column) .menu-controls-hint kbd {
        min-width: 26px;
        padding: 3px 7px;
        border-radius: 7px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-bottom-width: 2px;
        background: rgba(255, 255, 255, 0.07);
        color: #eaf2ff;
        font-family: 'Ubuntu', monospace;
        font-size: 11px;
        font-weight: 800;
        text-align: center;
    }

    /* Versão */
    body:not(.menu-single-column) #helloDialog > div:last-child { margin-top: 14px !important; }

    /* ── Avisos ───────────────────────────────────────────────────────────── */
    body:not(.menu-single-column) #notices-carousel {
        max-width: 500px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        background: linear-gradient(180deg, rgba(14, 20, 34, 0.92), rgba(8, 12, 22, 0.92));
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    }
}

/* ============================================================================
   MOBILE — o menu tinha que ocupar a tela inteira e sobrava fundo embaixo.
   Só mexe em altura/preenchimento; o layout do mobile-menu-v2 continua igual.
   ========================================================================= */
@media (max-width: 860px) {
    body.menu-single-column #overlays {
        height: 100dvh;                 /* barra do navegador entra na conta */
        min-height: 100%;
        align-content: stretch;
    }
    body.px-mmv2.menu-single-column #overlays[data-mobile-panel="game"] {
        grid-template-rows: minmax(0, 1fr);
    }
    body.px-mmv2.menu-single-column #overlays[data-mobile-panel="game"] #menu-center-stack {
        min-height: 100%;
    }
    body.px-mmv2 #mmv2-main { min-height: 100%; }
}