/* ============================================================================
   MOBILE-MENU-V2.CSS — Design System + LAYOUT do MENU MOBILE (v2, 28/07)
   Réplica do launcher da referência: topbar, rail de navegação à esquerda e,
   em paisagem, três colunas — hero | loja + notícias | ranking.
   Dark UI futurista, glassmorphism, neon #13C7FF, Inter.

   TUDO exige body.px-mmv2 — classe que o mobile-menu-v2.js só liga em
   APARELHO MÓVEL no modo lobby. O desktop nunca recebe a classe.
   ============================================================================ */

body.px-mmv2 {
    --mm-bg: #060913;
    --mm-panel: #0E1323;
    --mm-panel2: #151B2D;
    --mm-neon: #13C7FF;
    --mm-blue: #188CFF;
    --mm-green: #2DFF77;
    --mm-orange: #FFAE00;
    --mm-red: #FF4D6D;
    --mm-txt: #FFFFFF;
    --mm-txt2: #B6BDD2;
    --mm-txt3: #6E768C;
    --mm-border: rgba(19, 199, 255, 0.22);
    --mm-border-strong: rgba(19, 199, 255, 0.45);
    --mm-glass: linear-gradient(168deg, rgba(14, 19, 35, 0.86), rgba(10, 14, 27, 0.92));
    --mm-glow: 0 0 22px rgba(19, 199, 255, 0.13);
    --mm-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
    --mm-font: 'Inter', 'Ubuntu', -apple-system, sans-serif;
    --mm-ease: cubic-bezier(0.22, 0.8, 0.36, 1);
    --mm-rail: 132px;   /* largura do rail em landscape */
    --mm-mid: 236px;    /* coluna do meio (loja + notícias) */
    --mm-side: 236px;   /* coluna direita (ranking) */
    --mm-top: 54px;     /* altura da topbar */
}

/* Peças novas escondidas até o JS confirmar o lobby mobile. */
#mmv2-topbar, #mmv2-rail, #mmv2-main, .mmv2-player { display: none; }

/* ── Animações ────────────────────────────────────────────────────────────── */
@keyframes mmv2FadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mmv2Breath {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(24, 140, 255, 0.5)); }
    50%      { filter: drop-shadow(0 0 28px rgba(19, 199, 255, 0.72)); }
}
@keyframes mmv2Pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(0.72); opacity: 0.6; }
}
@keyframes mmv2Drift {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
@keyframes mmv2Flash {
    0%, 100% { box-shadow: var(--mm-shadow), var(--mm-glow); border-color: var(--mm-border); }
    50%      { box-shadow: 0 0 30px rgba(19, 199, 255, 0.5); border-color: var(--mm-border-strong); }
}
.mmv2-flash { animation: mmv2Flash 0.9s ease-in-out; }

/* ============================================================================
   FUNDO
   ============================================================================ */
body.px-mmv2.menu-single-column #overlays {
    background:
        radial-gradient(1.2px 1.2px at 12% 22%, rgba(255,255,255,0.5) 49%, transparent 51%),
        radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,0.4) 49%, transparent 51%),
        radial-gradient(1.4px 1.4px at 62% 64%, rgba(255,255,255,0.32) 49%, transparent 51%),
        radial-gradient(1px 1px at 30% 82%, rgba(255,255,255,0.38) 49%, transparent 51%),
        radial-gradient(1px 1px at 90% 46%, rgba(255,255,255,0.3) 49%, transparent 51%),
        radial-gradient(560px 380px at 8% -8%, rgba(64, 27, 130, 0.34), transparent 62%),
        radial-gradient(700px 460px at 108% 14%, rgba(24, 140, 255, 0.15), transparent 64%),
        radial-gradient(520px 420px at 86% 104%, rgba(96, 22, 120, 0.26), transparent 60%),
        linear-gradient(170deg, #070b18 0%, #060913 46%, #04060e 100%) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* NUNCA mexer no `display` daqui: o ui.js esconde o menu por style inline
       (display:none), e um !important nosso deixaria o overlay preso na tela
       durante a partida. O grid de 1 célula do mobile.css continua valendo. */
    padding: calc(var(--mm-top) + env(safe-area-inset-top, 0px) + 8px) 12px
             calc(14px + env(safe-area-inset-bottom, 0px)) 12px !important;
}

/* Células flutuando (decoração) */
body.px-mmv2.menu-single-column #overlays::before,
body.px-mmv2.menu-single-column #overlays::after {
    content: '';
    position: fixed;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1.5px);
    animation: mmv2Drift 7s ease-in-out infinite;
}
body.px-mmv2.menu-single-column #overlays::before {
    width: 120px; height: 120px;
    left: -34px; bottom: 96px;
    background: radial-gradient(circle at 32% 30%, rgba(190, 255, 120, 0.42), rgba(70, 180, 40, 0.26) 55%, transparent 72%);
}
body.px-mmv2.menu-single-column #overlays::after {
    width: 88px; height: 88px;
    right: -20px; top: 40%;
    background: radial-gradient(circle at 34% 30%, rgba(190, 120, 255, 0.4), rgba(120, 40, 190, 0.24) 55%, transparent 72%);
    animation-delay: -3.2s;
}

/* ============================================================================
   TOPBAR — ☰ + logo · atalhos · diamantes · online
   ============================================================================ */
body.px-mmv2 #mmv2-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 230;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: calc(var(--mm-top) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(6, 9, 19, 0.97), rgba(8, 12, 24, 0.86));
    border-bottom: 1px solid var(--mm-border);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    font-family: var(--mm-font);
    animation: mmv2FadeUp 0.35s var(--mm-ease) both;
}
.mmv2-top-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mmv2-burger {
    width: 38px; height: 38px;
    display: none;                     /* só aparece quando o rail é gaveta */
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(21, 27, 45, 0.9), rgba(14, 19, 35, 0.9));
    border: 1px solid var(--mm-border);
    color: var(--mm-txt);
    font-size: 15px;
    cursor: pointer;
    box-shadow: var(--mm-glow);
    -webkit-tap-highlight-color: transparent;
}
.mmv2-logo { display: flex; flex-direction: column; line-height: 0.9; user-select: none; }
.mmv2-logo b {
    font-size: 19px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.3px;
    color: var(--mm-txt);
    text-shadow: 0 2px 14px rgba(19, 199, 255, 0.35);
}
.mmv2-logo b i {
    font-style: italic;
    background: linear-gradient(135deg, var(--mm-neon), var(--mm-blue));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mmv2-logo span {
    align-self: flex-end;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 2.6px;
    background: linear-gradient(135deg, var(--mm-neon), var(--mm-blue));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(19, 199, 255, 0.5));
}

/* Atalhos centrais (Amigos · Loja · Ranking · Clã) — centrados de verdade,
   independente da largura do logo e dos chips. */
.mmv2-quick {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mmv2-quick-btn {
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(21, 27, 45, 0.85), rgba(14, 19, 35, 0.9));
    border: 1px solid var(--mm-border);
    color: var(--mm-txt2);
    font-size: 15px;
    cursor: pointer;
    box-shadow: var(--mm-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: all 250ms var(--mm-ease);
    -webkit-tap-highlight-color: transparent;
}
.mmv2-quick-btn:active {
    transform: scale(1.02);
    color: var(--mm-neon);
    border-color: var(--mm-border-strong);
}

.mmv2-top-right { display: flex; align-items: center; gap: 8px; }
.mmv2-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px;
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(21, 27, 45, 0.9), rgba(14, 19, 35, 0.9));
    border: 1px solid var(--mm-border);
    box-shadow: var(--mm-glow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--mm-txt);
    font-family: var(--mm-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 250ms var(--mm-ease), border-color 250ms;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.mmv2-chip:active { transform: scale(1.02); border-color: var(--mm-border-strong); }
#mmv2-coins i.fa-gem {
    font-size: 13px;
    background: linear-gradient(135deg, var(--mm-neon), var(--mm-blue));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(19, 199, 255, 0.6));
}
#mmv2-coins .mmv2-coins-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    margin-left: 2px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--mm-neon), var(--mm-blue));
    color: #04121f;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 12px rgba(19, 199, 255, 0.55);
}
#mmv2-online { cursor: default; font-weight: 600; color: var(--mm-txt2); }
#mmv2-online b { color: var(--mm-txt); font-weight: 800; }
#mmv2-online .mmv2-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--mm-green);
    box-shadow: 0 0 10px rgba(45, 255, 119, 0.9);
    animation: mmv2Pulse 2s ease-in-out infinite;
}

/* Botões antigos do topo saem: as funções vivem no rail/topbar. */
body.px-mmv2.menu-single-column .top-settings-dock,
body.px-mmv2.menu-single-column #main-store-button { display: none !important; }

/* ────────────────────────────────────────────────────────────────────────
   MENU ABERTO = TELA INTEIRA. Toda a HUD de partida sai da frente.
   O mobile.css só empurra a HUD para trás do #overlays quando `px-menu-open`
   está no body — classe que nem sempre chega a ser aplicada, e aí chat,
   classificação, minimapa e companhia apareciam por cima do menu. A classe
   `mmv2-menu-open` é nossa (observer no #overlays), então é confiável.
   Ficam de fora da lista: #notifications-area (avisos de login/erro) e
   #admin-button (acesso do admin).
   ──────────────────────────────────────────────────────────────────────── */
body.px-mmv2.mmv2-menu-open #spx-corner-bar,
body.px-mmv2.px-menu-open #spx-corner-bar,
body.px-mmv2.mmv2-menu-open #px-chat,
body.px-mmv2.mmv2-menu-open #px-hud-left,
body.px-mmv2.mmv2-menu-open #px-score,
body.px-mmv2.mmv2-menu-open #px-radio,
body.px-mmv2.mmv2-menu-open #px-mbar,
body.px-mmv2.mmv2-menu-open #px-menu-btn,
body.px-mmv2.mmv2-menu-open #eps-leaderboard,
body.px-mmv2.mmv2-menu-open #eps-mm-wrap,
body.px-mmv2.mmv2-menu-open #eps-status,
body.px-mmv2.mmv2-menu-open #game-hud-bottom,
body.px-mmv2.mmv2-menu-open #game-hud,
body.px-mmv2.mmv2-menu-open #level-bar-ui,
body.px-mmv2.mmv2-menu-open #power-slot-ui,
body.px-mmv2.mmv2-menu-open #shop-button,
body.px-mmv2.mmv2-menu-open #team-quick-button,
body.px-mmv2.mmv2-menu-open #team-quick-panel,
body.px-mmv2.mmv2-menu-open #team-hud-panel,
body.px-mmv2.mmv2-menu-open #chat_textbox,
body.px-mmv2.mmv2-menu-open #chat-voice-btn,
body.px-mmv2.mmv2-menu-open #chat-channel-toggle,
body.px-mmv2.mmv2-menu-open #chat-icon-badge,
body.px-mmv2.mmv2-menu-open #tut-help-btn,
body.px-mmv2.mmv2-menu-open #premium-badge,
body.px-mmv2.mmv2-menu-open #fullscreen-btn,
body.px-mmv2.mmv2-menu-open #mc,
body.px-mmv2.mmv2-menu-open #mc-cfg { display: none !important; }

/* ============================================================================
   RAIL — navegação principal à esquerda (landscape)
   ============================================================================ */
body.px-mmv2 #mmv2-rail {
    position: fixed;
    z-index: 225;
    top: calc(var(--mm-top) + env(safe-area-inset-top, 0px));
    bottom: 0;
    left: 0;
    width: var(--mm-rail);
    box-sizing: border-box;
    padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px));
    display: none;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(180deg, rgba(10, 14, 27, 0.92), rgba(6, 9, 19, 0.96));
    border-right: 1px solid var(--mm-border);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    font-family: var(--mm-font);
}
.mmv2-rail-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mmv2-rail-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    height: 42px;
    padding: 0 11px;
    box-sizing: border-box;
    border-radius: 13px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--mm-txt2);
    font-family: var(--mm-font);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 250ms var(--mm-ease);
    -webkit-tap-highlight-color: transparent;
}
.mmv2-rail-btn i { width: 17px; text-align: center; font-size: 15px; flex: 0 0 auto; }
.mmv2-rail-btn:active { background: rgba(255, 255, 255, 0.04); }
.mmv2-rail-btn.active {
    color: var(--mm-neon);
    background: linear-gradient(90deg, rgba(19, 199, 255, 0.16), rgba(19, 199, 255, 0.02));
    border-color: var(--mm-border);
    box-shadow: inset 3px 0 0 var(--mm-neon), 0 0 16px rgba(19, 199, 255, 0.13);
}
.mmv2-rail-btn.active i { filter: drop-shadow(0 0 7px rgba(19, 199, 255, 0.7)); }

.mmv2-rail-foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 9px; }
/* Perfil do rail em COLUNA: na horizontal o nome sobrava pouco espaço e
   virava "Art…". Assim ele usa a largura inteira do card. */
.mmv2-rail-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 9px 8px;
    border-radius: 15px;
    background: var(--mm-glass);
    border: 1px solid var(--mm-border);
    box-shadow: var(--mm-glow);
    cursor: pointer;
    text-align: center;
}
.mmv2-rail-player-info { min-width: 0; width: 100%; }
.mmv2-rail-player-info b {
    display: block;
    color: var(--mm-txt);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}
.mmv2-rail-player-info .mmv2-xp-txt {
    display: block;
    margin-top: 4px;
    font-size: 8.5px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.mmv2-rail-links { display: flex; gap: 7px; }
.mmv2-rail-link img { width: 17px; height: 17px; object-fit: contain; display: block; }
.mmv2-rail-link {
    flex: 1 1 0;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(21, 27, 45, 0.85), rgba(14, 19, 35, 0.9));
    border: 1px solid var(--mm-border);
    color: var(--mm-txt2);
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: all 250ms var(--mm-ease);
}
.mmv2-rail-link:active { color: var(--mm-neon); border-color: var(--mm-border-strong); }

/* ============================================================================
   LAYOUT PRINCIPAL — hero · lateral · cards
   ============================================================================ */
/* O painel "Início" ocupa a célula inteira do grid e rola por dentro (o
   #overlays segue com overflow:hidden do mobile.css). */
body.px-mmv2.menu-single-column #overlays[data-mobile-panel="game"] #menu-center-stack {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 1;
}
/* Duas colunas em FLEX (nunca grid com linha compartilhada: a lateral alta
   esticava as linhas e abria buracos em volta do hero e dos cards). */
body.px-mmv2 #mmv2-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
}
body.px-mmv2 #mmv2-col,
body.px-mmv2 #mmv2-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
body.px-mmv2 #mmv2-cards {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
}

/* Painéis social/ranking ocupam a área ao lado do rail */
body.px-mmv2.menu-single-column #social-sidebar,
body.px-mmv2.menu-single-column #settings-sidebar {
    background: var(--mm-glass) !important;
    border: 1px solid var(--mm-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--mm-shadow), var(--mm-glow) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    font-family: var(--mm-font);
    animation: mmv2FadeUp 0.35s var(--mm-ease) both;
}
body.px-mmv2.menu-single-column #social-sidebar button,
body.px-mmv2.menu-single-column #social-sidebar input,
body.px-mmv2.menu-single-column #settings-sidebar button,
body.px-mmv2.menu-single-column #settings-sidebar input { font-family: var(--mm-font); }

/* Os painéis viram coluna flex: cabeçalho fixo e a lista rolando por dentro,
   ocupando a altura toda (antes o conteúdo parava no meio da tela). */
body.px-mmv2.menu-single-column #social-sidebar,
body.px-mmv2.menu-single-column #settings-sidebar {
    display: flex !important;
    flex-direction: column;
    padding: 16px !important;
    gap: 10px;
}
body.px-mmv2.menu-single-column #social-sidebar > *,
body.px-mmv2.menu-single-column #settings-sidebar > * {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}
body.px-mmv2.menu-single-column #social-sidebar .social-list,
body.px-mmv2.menu-single-column #settings-sidebar .settings-body,
body.px-mmv2.menu-single-column #settings-sidebar .ranking-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* respiro no fim: a última linha não encosta na borda parecendo cortada */
    padding-bottom: 10px;
}
/* Mesma folga para as áreas roláveis do lobby. */
body.px-mmv2.menu-single-column #overlays[data-mobile-panel="game"] #menu-center-stack { padding-bottom: 10px; }
/* Painel escondido continua escondido (o display:flex acima é só estilo). */
body.px-mmv2.menu-single-column #overlays[data-mobile-panel="game"] #social-sidebar,
body.px-mmv2.menu-single-column #overlays[data-mobile-panel="game"] #settings-sidebar,
body.px-mmv2.menu-single-column #overlays[data-mobile-panel="social"] #settings-sidebar,
body.px-mmv2.menu-single-column #overlays[data-mobile-panel="ranking"] #social-sidebar,
body.px-mmv2.menu-single-column #overlays[data-mobile-panel="settings"] #social-sidebar { display: none !important; }

/* Abas e pódio do ranking preenchendo a largura */
body.px-mmv2.menu-single-column .ranking-tabs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
body.px-mmv2.menu-single-column .ranking-tabs button {
    height: 46px;
    border-radius: 14px !important;
    font-family: var(--mm-font);
    font-weight: 800;
    letter-spacing: 1px;
}
body.px-mmv2.menu-single-column .ranking-podium { width: 100%; }
body.px-mmv2.menu-single-column .social-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

/* ============================================================================
   HERO (#helloDialog)
   ============================================================================ */
body.px-mmv2.menu-single-column #helloDialog {
    background: var(--mm-glass) !important;
    border: 1px solid var(--mm-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--mm-shadow), var(--mm-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: 16px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box;
    font-family: var(--mm-font);
    animation: mmv2FadeUp 0.4s var(--mm-ease) both;
}
body.px-mmv2.menu-single-column #helloDialog #title,
body.px-mmv2.menu-single-column .menu-controls-hint { display: none !important; }

/* MODO ABA/BOT NÃO EXISTE NO MOBILE — 2º apelido e 2ª skin sempre fora
   (as configurações salvas na conta reativavam as classes). */
body.px-mmv2 #nick2,
body.px-mmv2 .dual-nick-input,
body.px-mmv2 #dual-skin-preview-trigger,
body.px-mmv2 .dual-skin-preview-trigger,
body.px-mmv2 #dual-toggle-btn { display: none !important; }

/* ── Linha do jogador ────────────────────────────────────────────────────── */
body.px-mmv2 .mmv2-player {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 14px;
    font-family: var(--mm-font);
}
.mmv2-ava-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 54px; height: 54px;
    border-radius: 50%;
    padding: 2.5px;
    background: conic-gradient(from 210deg, #13C7FF, #8b5cf6, #2DFF77, #FFAE00, #13C7FF);
    box-shadow: 0 0 18px rgba(19, 199, 255, 0.32);
    cursor: pointer;
}
.mmv2-ava-wrap.sm { width: 38px; height: 38px; padding: 2px; }
.mmv2-ava-wrap img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--mm-panel);
    display: block;
    border: 2px solid #060913;
    box-sizing: border-box;
}
.mmv2-ava-lvl {
    position: absolute;
    right: -5px; bottom: -5px;
    min-width: 19px; height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--mm-neon), var(--mm-blue));
    border: 2.5px solid #060913;
    color: #04121f;
    font-size: 10px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(19, 199, 255, 0.5);
}
.mmv2-ava-wrap.sm .mmv2-ava-lvl { min-width: 16px; height: 16px; font-size: 8.5px; border-width: 2px; }
.mmv2-player-info { flex: 1 1 auto; min-width: 0; }
.mmv2-player-name {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--mm-txt);
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mmv2-player-name .mmv2-verified {
    flex: 0 0 auto;
    color: var(--mm-neon);
    font-size: 15px;
    filter: drop-shadow(0 0 6px rgba(19, 199, 255, 0.7));
}
.mmv2-xp-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mmv2-xp-track {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.mmv2-xp-fill {
    height: 100%;
    width: 0;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--mm-blue), var(--mm-neon));
    box-shadow: 0 0 10px rgba(19, 199, 255, 0.6);
    transition: width 0.5s var(--mm-ease);
}
.mmv2-xp-txt {
    flex: 0 0 auto;
    color: var(--mm-txt3);
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.mmv2-login-btn {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid var(--mm-border-strong);
    background: rgba(19, 199, 255, 0.10);
    color: var(--mm-neon);
    font-family: var(--mm-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--mm-glow);
    transition: all 250ms var(--mm-ease);
}
.mmv2-login-btn:active { transform: scale(1.02); background: rgba(19, 199, 255, 0.2); }

/* ── Campos ──────────────────────────────────────────────────────────────── */
body.px-mmv2.menu-single-column #helloDialog form { gap: 10px; }
body.px-mmv2.menu-single-column .nick-skin-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px;
}
.mmv2-nick-wrap { position: relative; min-width: 0; }
.mmv2-nick-wrap .mmv2-nick-edit {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--mm-txt3);
    font-size: 13px;
    pointer-events: none;
}
body.px-mmv2.menu-single-column #nick {
    width: 100%;
    box-sizing: border-box;
    height: 50px;
    padding: 0 38px 0 16px;
    font-family: var(--mm-font);
    font-size: 14.5px;
    font-weight: 600;
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(21, 27, 45, 0.75), rgba(14, 19, 35, 0.85));
    border: 1px solid var(--mm-border);
    color: var(--mm-txt);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: border-color 250ms, box-shadow 250ms;
}
body.px-mmv2.menu-single-column #nick::placeholder { color: var(--mm-txt3); font-weight: 500; }
body.px-mmv2.menu-single-column #nick:focus {
    border-color: var(--mm-border-strong);
    box-shadow: 0 0 0 3px rgba(19, 199, 255, 0.12), inset 0 2px 6px rgba(0, 0, 0, 0.3);
    outline: none;
}
body.px-mmv2.menu-single-column .skin-preview-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    width: auto !important;
    height: 50px !important;
    min-height: 50px;
    padding: 0 14px 0 12px;
    border-radius: 15px !important;
    background: linear-gradient(180deg, rgba(21, 27, 45, 0.85), rgba(14, 19, 35, 0.9));
    border: 1px solid var(--mm-border);
    box-shadow: var(--mm-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 250ms var(--mm-ease), border-color 250ms;
}
body.px-mmv2.menu-single-column .skin-preview-trigger:active {
    transform: scale(1.02);
    border-color: var(--mm-border-strong);
}
body.px-mmv2.menu-single-column .skin-preview-cell { width: 34px; height: 34px; }
/* Sem skin escolhida o index.css escreve "Skin" dentro do círculo — como o
   botão já diz "Skin", aqui vira um "+" (escolher). */
body.px-mmv2.menu-single-column .skin-preview-cell.empty {
    border-style: dashed;
    border-color: var(--mm-border-strong);
}
body.px-mmv2.menu-single-column .skin-preview-cell.empty::after {
    content: "+";
    font-size: 17px;
    font-weight: 700;
    color: var(--mm-neon);
    letter-spacing: 0;
}
body.px-mmv2.menu-single-column .hat-preview-img { top: -46px; width: 54px; height: 54px; }
.mmv2-skin-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--mm-txt2);
    font-family: var(--mm-font);
    font-size: 13.5px;
    font-weight: 700;
}
.mmv2-skin-label i { color: var(--mm-neon); font-size: 13px; filter: drop-shadow(0 0 5px rgba(19,199,255,0.5)); }

.mmv2-select-wrap { position: relative; display: flex; align-items: center; }
.mmv2-select-wrap > i.mmv2-sel-ico {
    position: absolute; left: 15px;
    color: var(--mm-neon); font-size: 13px; pointer-events: none;
    filter: drop-shadow(0 0 5px rgba(19, 199, 255, 0.5));
}
.mmv2-select-wrap > i.mmv2-sel-chev {
    position: absolute; right: 15px;
    color: var(--mm-txt2); font-size: 12px; pointer-events: none;
}
body.px-mmv2.menu-single-column #gamemode {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 52px;
    padding: 0 40px;
    font-family: var(--mm-font);
    font-size: 14px;
    font-weight: 700;
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(21, 27, 45, 0.75), rgba(14, 19, 35, 0.85));
    border: 1px solid var(--mm-border);
    color: var(--mm-txt);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}
body.px-mmv2.menu-single-column #gamemode:focus { border-color: var(--mm-border-strong); outline: none; }
body.px-mmv2.menu-single-column #gamemode option { background: var(--mm-panel); color: var(--mm-txt); }

/* ── JOGAR + SPECTATOR ───────────────────────────────────────────────────── */
body.px-mmv2.menu-single-column .menu-action-buttons { gap: 10px; margin-top: 4px; }
body.px-mmv2.menu-single-column #play-btn {
    height: 64px !important;
    font-family: var(--mm-font);
    font-size: 21px !important;
    font-weight: 900;
    letter-spacing: 4px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 42%),
        linear-gradient(180deg, #2fc5ff 0%, #188CFF 52%, #0e63d8 100%);
    border: 1px solid rgba(150, 226, 255, 0.85);
    border-radius: 16px;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px),
                       calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
    /* box-shadow morre no clip-path — o brilho vem do drop-shadow */
    animation: mmv2Breath 2.6s ease-in-out infinite;
    text-shadow: 0 2px 8px rgba(0, 40, 90, 0.55);
    padding: 0 24px;
    transition: transform 250ms var(--mm-ease);
}
body.px-mmv2.menu-single-column #play-btn:active { transform: scale(1.02); }
body.px-mmv2.menu-single-column #spectate-btn {
    width: 104px;
    height: 64px;
    border-radius: 16px;
    font-family: var(--mm-font);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: linear-gradient(180deg, rgba(21, 27, 45, 0.85), rgba(14, 19, 35, 0.92));
    border: 1px solid var(--mm-border);
    color: var(--mm-txt2);
    box-shadow: var(--mm-glow);
    transition: all 250ms var(--mm-ease);
}
body.px-mmv2.menu-single-column #spectate-btn:active {
    transform: scale(1.02);
    border-color: var(--mm-border-strong);
    color: var(--mm-txt);
}
body.px-mmv2.menu-single-column #spectate-btn i { display: block; margin: 0 auto 4px; font-size: 15px; color: var(--mm-neon); }

body.px-mmv2.menu-single-column #mc-config-btn-menu { margin-top: 12px !important; }
body.px-mmv2.menu-single-column #mc-config-btn-menu button {
    height: 46px !important;
    border-radius: 14px !important;
    border: 1px solid var(--mm-border) !important;
    background: rgba(19, 199, 255, 0.06) !important;
    color: var(--mm-neon) !important;
    font-family: var(--mm-font);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    box-shadow: var(--mm-glow);
    transition: all 250ms var(--mm-ease);
}
body.px-mmv2.menu-single-column #mc-config-btn-menu button:active {
    transform: scale(1.02);
    background: rgba(19, 199, 255, 0.14) !important;
}
body.px-mmv2.menu-single-column #helloDialog > div:last-child {
    font-family: var(--mm-font);
    color: var(--mm-txt3) !important;
    font-size: 11px !important;
}

/* ============================================================================
   CARDS
   ============================================================================ */
.mmv2-card {
    border-radius: 20px;
    border: 1px solid var(--mm-border);
    background: var(--mm-glass);
    box-shadow: var(--mm-shadow), var(--mm-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    padding: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: mmv2FadeUp 0.45s var(--mm-ease) both;
    font-family: var(--mm-font);
}
#mmv2-side .mmv2-card:nth-child(1) { animation-delay: 0.06s; }
#mmv2-side .mmv2-card:nth-child(3) { animation-delay: 0.12s; }
#mmv2-cards .mmv2-card:nth-child(1) { animation-delay: 0.10s; }
#mmv2-cards .mmv2-card:nth-child(2) { animation-delay: 0.16s; }
#mmv2-cards .mmv2-card:nth-child(3) { animation-delay: 0.22s; }

.mmv2-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    color: var(--mm-txt);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.mmv2-card-head i {
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(19, 199, 255, 0.10);
    border: 1px solid var(--mm-border);
    color: var(--mm-neon);
    font-size: 12.5px;
    box-shadow: 0 0 12px rgba(19, 199, 255, 0.14);
    flex: 0 0 auto;
}
.mmv2-card-head .mmv2-head-extra {
    margin-left: auto;
    color: var(--mm-txt3);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
.mmv2-cta {
    width: 100%;
    height: 42px;
    margin-top: auto;
    border-radius: 13px;
    border: 1px solid var(--mm-border-strong);
    background: rgba(19, 199, 255, 0.07);
    color: var(--mm-neon);
    font-family: var(--mm-font);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--mm-glow);
    transition: all 250ms var(--mm-ease);
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;      /* rótulo nunca quebra em duas linhas */
    padding: 0 10px;
}
.mmv2-card > .mmv2-cta { margin-top: 13px; }
.mmv2-cta:active { transform: scale(1.02); background: rgba(19, 199, 255, 0.16); }
.mmv2-cta.mmv2-cta-solid {
    border: 1px solid rgba(150, 226, 255, 0.7);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%),
                linear-gradient(180deg, #2fc5ff 0%, #188CFF 60%, #0e63d8 100%);
    color: #fff;
    text-shadow: 0 1px 5px rgba(0, 40, 90, 0.5);
    box-shadow: 0 0 18px rgba(24, 140, 255, 0.4);
}

/* ── Ranking ─────────────────────────────────────────────────────────────── */
#mmv2-rank-list { display: flex; flex-direction: column; gap: 1px; }
.mmv2-rank-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 10px;
    color: var(--mm-txt2);
    font-size: 13px;
}
.mmv2-rank-row:nth-child(odd) { background: rgba(21, 27, 45, 0.5); }
.mmv2-rank-pos {
    flex: 0 0 auto;
    width: 22px;
    font-weight: 800;
    font-size: 12px;
    color: var(--mm-txt3);
    font-variant-numeric: tabular-nums;
}
.mmv2-rank-row.top1 .mmv2-rank-pos { color: var(--mm-orange); text-shadow: 0 0 10px rgba(255, 174, 0, 0.55); }
.mmv2-rank-row.top2 .mmv2-rank-pos { color: #dfe6f5; }
.mmv2-rank-row.top3 .mmv2-rank-pos { color: #ff9d5c; }
.mmv2-rank-row.me {
    background: rgba(19, 199, 255, 0.10);
    border: 1px solid var(--mm-border);
}
.mmv2-rank-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    color: var(--mm-txt);
}
.mmv2-rank-row.top1 .mmv2-rank-name { color: #ffd88a; }
.mmv2-rank-pts {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 12px;
    color: var(--mm-txt2);
    font-variant-numeric: tabular-nums;
}
.mmv2-rank-empty {
    padding: 14px 8px;
    text-align: center;
    color: var(--mm-txt3);
    font-size: 12.5px;
}
























/* ── Loja ────────────────────────────────────────────────────────────────── */
.mmv2-store-sub { margin: -3px 0 12px; }
.mmv2-store-sub b {
    display: block;
    color: var(--mm-txt);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.mmv2-store-sub span { display: block; margin-top: 3px; color: var(--mm-txt2); font-size: 12px; }
#mmv2-store-skins { display: flex; justify-content: center; gap: 16px; padding: 2px 0 12px; }
.mmv2-skin-orb {
    width: 62px; height: 62px;
    border-radius: 50%;
    padding: 2.5px;
    background: conic-gradient(from 140deg, rgba(19, 199, 255, 0.9), rgba(139, 92, 246, 0.9), rgba(45, 255, 119, 0.85), rgba(19, 199, 255, 0.9));
    box-shadow: 0 0 16px rgba(19, 199, 255, 0.28), 0 8px 20px rgba(0, 0, 0, 0.4);
    animation: mmv2Drift 6s ease-in-out infinite;
    cursor: pointer;
}
.mmv2-skin-orb:nth-child(2) { animation-delay: -2s; }
.mmv2-skin-orb:nth-child(3) { animation-delay: -4s; }
.mmv2-skin-orb img,
.mmv2-skin-orb span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--mm-panel);
    border: 2px solid #060913;
    box-sizing: border-box;
    color: var(--mm-blue);
    font-size: 21px;
}









/* ── Notícias (carrossel de avisos) ──────────────────────────────────────── */
body.px-mmv2.menu-single-column #notices-carousel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 20px;
    border: 1px solid var(--mm-border);
    background: var(--mm-glass);
    box-shadow: var(--mm-shadow), var(--mm-glow);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    font-family: var(--mm-font);
    animation: mmv2FadeUp 0.5s var(--mm-ease) 0.09s both;
}
body.px-mmv2.menu-single-column #notices-carousel .ncar-head {
    font-family: var(--mm-font);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mm-txt);
}
body.px-mmv2.menu-single-column #notices-carousel .ncar-head i { color: var(--mm-neon); }
body.px-mmv2.menu-single-column #notices-carousel .ncar-count { color: var(--mm-txt3); }

/* ============================================================================
   MODAIS alcançáveis pelo menu
   ============================================================================ */
body.px-mmv2 .settings-modal-card,
body.px-mmv2 .auth-modal-card,
body.px-mmv2 .coin-store-card,
body.px-mmv2 #gallery-modal .modal-content,
body.px-mmv2 .clips-card {
    background: linear-gradient(168deg, #0E1323 0%, #0a0f1e 100%) !important;
    border: 1px solid var(--mm-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--mm-shadow), var(--mm-glow) !important;
    font-family: var(--mm-font);
    animation: mmv2FadeUp 0.3s var(--mm-ease) both;
}
body.px-mmv2 .auth-submit,
body.px-mmv2 .coin-store-tab.active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 42%),
                linear-gradient(180deg, #2fc5ff 0%, #188CFF 60%, #0e63d8 100%) !important;
    border: 1px solid rgba(150, 226, 255, 0.7) !important;
    color: #fff !important;
    border-radius: 13px !important;
    box-shadow: 0 0 16px rgba(24, 140, 255, 0.35) !important;
}

/* ============================================================================
   BARRA INFERIOR — só no portrait (no landscape quem manda é o rail)
   ============================================================================ */
body.px-mmv2.menu-single-column .mobile-menu-tabs {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 4px !important;
    padding: 7px !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(14, 19, 35, 0.97), rgba(10, 14, 26, 0.97)) !important;
    border: 1px solid var(--mm-border) !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6), var(--mm-glow) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}
body.px-mmv2.menu-single-column .mobile-menu-tabs button {
    flex-direction: column !important;
    gap: 4px !important;
    height: 54px !important;
    padding: 0 2px;
    border-radius: 14px !important;
    font-family: var(--mm-font) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--mm-txt3) !important;
    transition: all 250ms var(--mm-ease) !important;
    -webkit-tap-highlight-color: transparent;
}
body.px-mmv2.menu-single-column .mobile-menu-tabs button i { font-size: 17px; line-height: 1; }
body.px-mmv2.menu-single-column .mobile-menu-tabs button.active {
    color: var(--mm-neon) !important;
    background: rgba(19, 199, 255, 0.10) !important;
    border-color: var(--mm-border-strong) !important;
    box-shadow: 0 0 16px rgba(19, 199, 255, 0.18);
}
body.px-mmv2.menu-single-column .mobile-menu-tabs button.active i {
    filter: drop-shadow(0 0 7px rgba(19, 199, 255, 0.7));
}

/* ============================================================================
   LANDSCAPE — layout completo da referência (rail + hero + lateral + cards)
   É como o jogo roda no celular (o lobby pede paisagem).
   ============================================================================ */
@media (orientation: landscape) {
    body.px-mmv2 #mmv2-rail { display: flex; }
    body.px-mmv2.menu-single-column .mobile-menu-tabs { display: none !important; }

    body.px-mmv2.menu-single-column #overlays {
        padding-left: calc(var(--mm-rail) + 12px) !important;
        padding-top: calc(var(--mm-top) + env(safe-area-inset-top, 0px) + 10px) !important;
    }

    /* PONTA A PONTA: o mobile.css prende os painéis do lobby em
       `max-width:600px; margin:0 auto` com !important e 2 ids — só um seletor
       com o mesmo atributo (e mais uma classe) derruba isso. */
    body.px-mmv2.menu-single-column #overlays[data-mobile-panel="game"] #menu-center-stack,
    body.px-mmv2.menu-single-column #overlays[data-mobile-panel="social"] #social-sidebar,
    body.px-mmv2.menu-single-column #overlays[data-mobile-panel="ranking"] #settings-sidebar,
    body.px-mmv2.menu-single-column #overlays[data-mobile-panel="settings"] #settings-sidebar {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* TRÊS COLUNAS, TUDO NA TELA:
       [ hero ] [ loja · notícias ] [ ranking ]
       Nada de rolagem de página: o que passa do tamanho rola DENTRO do card
       (lista do ranking e texto do aviso). */
    body.px-mmv2 #mmv2-main {
        flex-direction: row;
        align-items: stretch;
        height: 100%;
        min-height: 0;
    }
    body.px-mmv2 #mmv2-col {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
    }
    body.px-mmv2 #mmv2-cards,
    body.px-mmv2 #mmv2-side {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 0;
    }
    body.px-mmv2 #mmv2-cards { flex: 0 0 var(--mm-mid); width: var(--mm-mid); }
    body.px-mmv2 #mmv2-side  { flex: 0 0 var(--mm-side); width: var(--mm-side); }

    /* Loja com altura do próprio conteúdo (nunca encolhe a ponto de cortar
       as skins e o botão); Notícias fica com o resto da coluna. */
    body.px-mmv2 #mmv2-cards > #mmv2-store-card { flex: 0 0 auto; overflow: visible; }
    body.px-mmv2 #mmv2-cards > #notices-carousel {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* Ranking ocupa a coluna inteira: as 10 posições cabem sem corte. */
    body.px-mmv2 #mmv2-side > #mmv2-rank-card { flex: 1 1 auto; min-height: 130px; overflow: hidden; }
    body.px-mmv2 #mmv2-rank-list {
        overflow-y: auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.px-mmv2 #mmv2-rank-list::-webkit-scrollbar { width: 0; }
    /* Aviso comprido rola dentro do card, sem esticar a coluna. */
    body.px-mmv2.menu-single-column #notices-carousel .ncar-viewport {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Hero: se a tela for baixa demais, ele rola por dentro em vez de
       empurrar o resto do lobby para fora. */
    body.px-mmv2.menu-single-column #mmv2-col > #helloDialog {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        padding: 14px !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }
    /* Sem rolagem de página no lobby. */
    body.px-mmv2.menu-single-column #overlays[data-mobile-panel="game"] #menu-center-stack {
        overflow: hidden !important;
        padding-bottom: 0;
    }
}

/* Landscape de telefone (altura baixa): tudo mais compacto */
@media (orientation: landscape) and (max-height: 540px) {
    body.px-mmv2 { --mm-top: 48px; --mm-rail: 118px; --mm-side: 208px; }
    .mmv2-logo b { font-size: 16px; }
    .mmv2-logo span { font-size: 9px; letter-spacing: 2px; }
    .mmv2-chip { height: 32px; font-size: 12px; padding: 0 10px; }
    .mmv2-quick-btn { width: 34px; height: 34px; font-size: 13px; border-radius: 11px; }
    .mmv2-rail-btn { height: 38px; font-size: 11px; gap: 9px; padding: 0 9px; }
    .mmv2-rail-btn i { font-size: 13px; width: 15px; }
    body.px-mmv2 .mmv2-player { margin-bottom: 11px; }
    .mmv2-ava-wrap { width: 46px; height: 46px; }
    .mmv2-player-name { font-size: 15px; }
    body.px-mmv2.menu-single-column #nick,
    body.px-mmv2.menu-single-column .skin-preview-trigger { height: 44px !important; min-height: 44px; }
    body.px-mmv2.menu-single-column #gamemode { height: 46px; }
    body.px-mmv2.menu-single-column #play-btn { height: 54px !important; font-size: 18px !important; }
    body.px-mmv2.menu-single-column #spectate-btn { height: 54px; width: 92px; }
    .mmv2-card { padding: 13px; border-radius: 18px; }
    .mmv2-card-head { margin-bottom: 10px; font-size: 11.5px; }
    .mmv2-card-head i { width: 25px; height: 25px; font-size: 11.5px; }
    .mmv2-skin-orb { width: 50px; height: 50px; }
    #mmv2-store-skins { gap: 12px; padding-bottom: 10px; }
    .mmv2-cta { height: 38px; font-size: 11px; }
    body.px-mmv2 #mmv2-cards { min-height: 172px; }
    /* Versão ocupa uma linha inteira à toa no lobby baixinho */
    body.px-mmv2.menu-single-column #helloDialog > div:last-child { margin-top: 8px !important; font-size: 10px !important; }
    body.px-mmv2.menu-single-column #overlays::before,
    body.px-mmv2.menu-single-column #overlays::after { display: none; }
}

/* Larguras das colunas por tamanho de tela (celular deitado é 844–932px na
   maioria dos aparelhos: as 3 colunas precisam encolher para caber). */
@media (orientation: landscape) and (max-width: 999px) {
    body.px-mmv2 { --mm-mid: 206px; --mm-side: 206px; --mm-rail: 122px; }
}
@media (orientation: landscape) and (max-width: 880px) {
    body.px-mmv2 { --mm-mid: 182px; --mm-side: 186px; --mm-rail: 108px; }
    .mmv2-rail-btn { font-size: 10px; letter-spacing: 0.3px; padding: 0 8px; gap: 7px; }
    .mmv2-card { padding: 11px; }
    .mmv2-card-head { gap: 7px; margin-bottom: 8px; font-size: 10.5px; letter-spacing: 0.9px; }
    .mmv2-card-head i { width: 22px; height: 22px; font-size: 10.5px; border-radius: 8px; }
    .mmv2-cta { height: 34px; font-size: 10px; letter-spacing: 1px; }
    .mmv2-rank-row { padding: 5px 6px; font-size: 12px; gap: 7px; }
    .mmv2-skin-orb { width: 44px; height: 44px; }
    #mmv2-store-skins { gap: 9px; }
}

/* CELULAR DEITADO (altura útil de ~390 a 560px): tudo mais rasteiro para o
   lobby caber inteiro, sem rolagem e sem nada cortado. Tablet (mais alto)
   continua com as medidas folgadas do bloco anterior. */
@media (orientation: landscape) and (max-height: 560px) {
    body.px-mmv2 { --mm-top: 44px; }
    body.px-mmv2 .mmv2-player { margin-bottom: 8px; }
    .mmv2-ava-wrap { width: 40px; height: 40px; }
    .mmv2-player-name { font-size: 14px; }
    .mmv2-xp-txt { font-size: 9.5px; }
    body.px-mmv2.menu-single-column #helloDialog form { gap: 7px; }
    body.px-mmv2.menu-single-column #nick,
    body.px-mmv2.menu-single-column .skin-preview-trigger { height: 40px !important; min-height: 40px; border-radius: 12px !important; }
    body.px-mmv2.menu-single-column #gamemode { height: 40px; border-radius: 12px; }
    body.px-mmv2.menu-single-column #play-btn { height: 46px !important; font-size: 16px !important; letter-spacing: 3px; }
    body.px-mmv2.menu-single-column #spectate-btn { height: 46px; width: 84px; }
    body.px-mmv2.menu-single-column #mc-config-btn-menu { margin-top: 8px !important; }
    body.px-mmv2.menu-single-column #mc-config-btn-menu button { height: 36px !important; font-size: 11px; }
    body.px-mmv2.menu-single-column #helloDialog > div:last-child { margin-top: 6px !important; font-size: 9.5px !important; }
    .mmv2-rank-empty { padding: 10px 6px; font-size: 11.5px; }

    /* ── Ranking: as 10 linhas + cabeçalho + botão precisam caber na coluna,
       então as linhas ficam rasteiras (nada de rolar e cortar a 10ª). ── */
    .mmv2-card-head { margin-bottom: 7px; }
    #mmv2-rank-list { gap: 0; }
    .mmv2-rank-row { padding: 3px 6px; font-size: 11.5px; gap: 6px; border-radius: 8px; }
    .mmv2-rank-pos { width: 18px; font-size: 11px; }
    .mmv2-rank-pts { font-size: 11px; }
    #mmv2-side > #mmv2-rank-card { padding: 12px 12px 11px; }
    #mmv2-rank-card .mmv2-cta { margin-top: 9px; height: 32px; }

    /* ── Loja compacta: sub numa linha, orbes menores ── */
    #mmv2-store-card { padding: 12px; }
    .mmv2-store-sub { margin: -2px 0 8px; }
    .mmv2-store-sub b { font-size: 11px; letter-spacing: 0.5px; }
    .mmv2-store-sub span { margin-top: 2px; font-size: 10.5px; }
    #mmv2-store-skins { gap: 10px; padding: 0 0 9px; }
    .mmv2-skin-orb { width: 40px; height: 40px; padding: 2px; }
    .mmv2-skin-orb img, .mmv2-skin-orb span { font-size: 16px; border-width: 1.5px; }
    #mmv2-store-card .mmv2-cta { height: 32px; }

    /* ── Notícias compactas ── */
    body.px-mmv2.menu-single-column #notices-carousel .ncar-head { padding: 7px 11px; font-size: 11px; }
    body.px-mmv2.menu-single-column #notices-carousel .ncar-slide { padding: 10px 12px 12px; min-height: 0; }
    body.px-mmv2.menu-single-column #notices-carousel .ncar-slide h3 { font-size: 12.5px; margin-bottom: 4px; }
    body.px-mmv2.menu-single-column #notices-carousel .ncar-body { font-size: 11.5px; line-height: 1.42; }
    body.px-mmv2.menu-single-column #notices-carousel .ncar-dots { padding-bottom: 8px; }

    /* ── Hero: rótulo do servidor cabe inteiro ── */
    body.px-mmv2.menu-single-column #gamemode { font-size: 12.5px; padding: 0 34px 0 36px; }
    body.px-mmv2.menu-single-column #nick { font-size: 13.5px; }
    .mmv2-skin-label { font-size: 12.5px; }

    /* ── Rail mais enxuto ── */
    .mmv2-rail-player { padding: 8px 7px; gap: 6px; }
    .mmv2-ava-wrap.sm { width: 34px; height: 34px; }
    .mmv2-rail-player-info b { font-size: 10.5px; margin-bottom: 4px; }
    .mmv2-rail-player-info .mmv2-xp-txt { font-size: 8px; }
    .mmv2-rail-link { height: 30px; font-size: 13px; }
    .mmv2-rail-link img { width: 15px; height: 15px; }
}

/* Landscape estreito (telas pequenas): rail vira gaveta pelo ☰ e a coluna
   lateral desce para a fileira de cards. */
@media (orientation: landscape) and (max-width: 720px) {
    body.px-mmv2 .mmv2-burger { display: inline-flex; }
    body.px-mmv2.menu-single-column #overlays { padding-left: 12px !important; }
    body.px-mmv2 #mmv2-rail {
        transform: translateX(-100%);
        transition: transform 250ms var(--mm-ease);
        box-shadow: 24px 0 60px rgba(0, 0, 0, 0.6);
    }
    body.px-mmv2.mmv2-rail-open #mmv2-rail { transform: translateX(0); }
    /* Sem espaço para 3 colunas: hero em cima, cards e lateral embaixo,
       com rolagem da página (aqui não tem como caber tudo). */
    body.px-mmv2 #mmv2-main { flex-direction: column; height: auto; min-height: 100%; }
    body.px-mmv2 #mmv2-cards,
    body.px-mmv2 #mmv2-side {
        flex: 0 0 auto;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.px-mmv2 #mmv2-side > #mmv2-rank-card { grid-column: 1 / -1; flex: none; overflow: visible; }
    body.px-mmv2 #mmv2-rank-list { overflow: visible; }
    body.px-mmv2 #mmv2-cards > .mmv2-card { flex: none; }
    body.px-mmv2.menu-single-column #mmv2-col > #helloDialog {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.px-mmv2.menu-single-column #overlays[data-mobile-panel="game"] #menu-center-stack {
        overflow-y: auto !important;
        padding-bottom: 10px;
    }
}

/* Portrait: uma coluna, rail escondido, barra inferior de volta. */
@media (orientation: portrait) {
    body.px-mmv2 #mmv2-rail { display: none; }
    body.px-mmv2.menu-single-column #overlays {
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.px-mmv2 .mmv2-quick { display: none; }   /* sem espaço na topbar */
    body.px-mmv2 #mmv2-main { flex-direction: column; height: auto; min-height: 0; }
    body.px-mmv2 #mmv2-cards,
    body.px-mmv2 #mmv2-side { width: 100%; display: flex; flex-direction: column; gap: 12px; }
    body.px-mmv2 #mmv2-cards > .mmv2-card,
    body.px-mmv2 #mmv2-side > .mmv2-card { flex: none; overflow: visible; }
    body.px-mmv2 #mmv2-rank-list { overflow: visible; }
    body.px-mmv2.menu-single-column #mmv2-col > #helloDialog {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.px-mmv2.menu-single-column #overlays[data-mobile-panel="game"] #menu-center-stack {
        overflow-y: auto !important;
        padding-bottom: 10px;
    }
}