/* ==========================================================================
   v3-mobile.css — design novo no menu inicial do celular (mobile-menu-v2,
   body.px-mmv2, até 1024 px) e no HUD de partida das telas estreitas.
   Usa os tokens de v3-base.css. Os modais (Login, Loja, Aparência…), o chat
   e o HUD da equipe são repintados nos arquivos das outras áreas.
   ========================================================================== */

/* ---------- Variáveis do menu do celular → tokens do tema novo ------------
   O mobile-menu-v2.css usa --mm-* em ~160 lugares; trocar aqui já repinta a
   maior parte. O resto (gradientes e cantos fixos) vem logo abaixo. */
html body.px-mmv2 {
    --mm-bg: var(--pc-ink);
    --mm-panel: var(--pc-panel);
    --mm-panel2: var(--pc-panel-2);
    --mm-neon: var(--pc-acid);
    --mm-blue: var(--pc-acid);
    --mm-green: var(--pc-ok);
    --mm-orange: var(--pc-gold);
    --mm-red: var(--pc-hot);
    --mm-txt: var(--pc-text);
    --mm-txt2: #b8c1b6;
    --mm-txt3: var(--pc-dim);
    --mm-border: var(--pc-line-2);
    --mm-border-strong: var(--pc-acid);
    --mm-glass: var(--pc-panel);
    --mm-glow: 0 0 0 transparent;
    --mm-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9);
    --mm-font: var(--pc-body);
    font-family: var(--pc-body);
}

/* ---------- Fundo: placa de Petri (pontilhado + vinheta) ------------------- */
html body.px-mmv2.menu-single-column #overlays {
    background:
        radial-gradient(circle at 50% 40%, transparent 0 40vmax, rgba(11, 13, 12, .7) 80vmax),
        radial-gradient(rgba(233, 239, 228, .07) 1px, transparent 1.2px) 0 0 / 22px 22px,
        var(--pc-ink) !important;
}
html body.px-mmv2.menu-single-column #overlays::before,
html body.px-mmv2.menu-single-column #overlays::after { display: none !important; }

/* ---------- Barra do topo ------------------------------------------------- */
html body.px-mmv2 #mmv2-topbar {
    background: var(--pc-ink-2) !important;
    border-bottom: 1px solid var(--pc-line) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html body.px-mmv2 .mmv2-logo { flex-direction: row; align-items: center; gap: 1px; line-height: 1; }
html body.px-mmv2 .mmv2-logo b {
    font: 900 17px/1 var(--pc-display);
    font-style: normal;
    letter-spacing: -.03em;
    color: var(--pc-text);
    text-shadow: none;
}
html body.px-mmv2 .mmv2-logo-o { width: 16px; height: 16px; margin: 0 1px; flex: 0 0 auto; }

html body.px-mmv2 .mmv2-burger,
html body.px-mmv2 .mmv2-quick-btn,
html body.px-mmv2 .mmv2-chip,
html body.px-mmv2 .mmv2-rail-link {
    background: var(--pc-panel) !important;
    border: 1px solid var(--pc-line) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: var(--pc-dim);
}
html body.px-mmv2 .mmv2-quick-btn:active,
html body.px-mmv2 .mmv2-rail-link:active { color: var(--pc-acid); border-color: var(--pc-acid) !important; transform: none; }
html body.px-mmv2 .mmv2-chip { font: 600 12px var(--pc-mono); color: var(--pc-text); }
html body.px-mmv2 #mmv2-coins i.fa-gem {
    background: none;
    -webkit-text-fill-color: var(--pc-gold);
    color: var(--pc-gold);
    filter: none;
}
html body.px-mmv2 #mmv2-coins .mmv2-coins-add {
    border-radius: 2px;
    background: var(--pc-acid);
    color: var(--pc-acid-ink);
    box-shadow: none;
}
html body.px-mmv2 #mmv2-online { color: var(--pc-dim); }
html body.px-mmv2 #mmv2-online .mmv2-dot { width: 7px; height: 7px; background: var(--pc-acid); box-shadow: 0 0 0 3px var(--pc-acid-soft); }

/* ---------- Gaveta / rail de navegação ------------------------------------ */
html body.px-mmv2 #mmv2-rail {
    background: var(--pc-ink-2) !important;
    border-right: 1px solid var(--pc-line) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html body.px-mmv2 .mmv2-rail-btn {
    border-radius: 0;
    border: 0;
    border-left: 2px solid transparent;
    font: 500 11px var(--pc-mono);
    letter-spacing: .1em;
    color: var(--pc-dim);
}
html body.px-mmv2 .mmv2-rail-btn i { color: var(--pc-faint); }
html body.px-mmv2 .mmv2-rail-btn.active {
    color: var(--pc-text);
    background: var(--pc-acid-soft);
    border-left-color: var(--pc-acid);
    box-shadow: none;
}
html body.px-mmv2 .mmv2-rail-btn.active i { color: var(--pc-acid); filter: none; }
html body.px-mmv2 .mmv2-rail-player { border-radius: 2px; background: var(--pc-panel); border: 1px solid var(--pc-line); box-shadow: none; }

/* ---------- Cartão do jogador (topo do "Início") -------------------------- */
html body.px-mmv2 .mmv2-ava-wrap { background: var(--pc-line-2) !important; box-shadow: none !important; }
html body.px-mmv2 .mmv2-ava-wrap img { border-color: var(--pc-ink) !important; }
html body.px-mmv2 .mmv2-ava-lvl {
    border-radius: 2px !important;
    background: var(--pc-acid) !important;
    color: var(--pc-acid-ink) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: var(--pc-mono) !important;
}
html body.px-mmv2 .mmv2-player-name { font-family: var(--pc-body); font-weight: 800; }
html body.px-mmv2 .mmv2-player-name .mmv2-verified { color: var(--pc-info); filter: none; }
html body.px-mmv2 .mmv2-xp-track { border-radius: 0; background: var(--pc-line); height: 4px; }
html body.px-mmv2 .mmv2-xp-fill { border-radius: 0; background: var(--pc-acid); box-shadow: none; }
html body.px-mmv2 .mmv2-xp-txt { font-family: var(--pc-mono); color: var(--pc-dim); }
html body.px-mmv2 .mmv2-login-btn {
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--pc-acid);
    color: var(--pc-acid);
    box-shadow: none;
    font: 600 11px var(--pc-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ---------- Campos, JOGAR, Spectar ---------------------------------------- */
html body.px-mmv2.menu-single-column #nick,
html body.px-mmv2.menu-single-column #nick2,
html body.px-mmv2.menu-single-column #gamemode,
html body.px-mmv2.menu-single-column .skin-preview-trigger {
    background: var(--pc-ink) !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: var(--pc-text) !important;
}
html body.px-mmv2.menu-single-column #nick,
html body.px-mmv2.menu-single-column #nick2 { font: 700 16px var(--pc-body) !important; }
html body.px-mmv2.menu-single-column #gamemode { font: 600 12.5px var(--pc-mono) !important; }
html body.px-mmv2.menu-single-column #nick:focus,
html body.px-mmv2.menu-single-column #nick2:focus { border-color: var(--pc-acid) !important; box-shadow: inset 3px 0 0 var(--pc-acid) !important; }
html body.px-mmv2 .mmv2-select-wrap > i.mmv2-sel-ico,
html body.px-mmv2 .mmv2-skin-label i { color: var(--pc-acid); filter: none; }
html body.px-mmv2 .mmv2-skin-label { font: 600 11px var(--pc-mono); letter-spacing: .08em; text-transform: uppercase; }
html body.px-mmv2 .skin-preview-cell { border-radius: 50% !important; border: 1px dashed var(--pc-line-2) !important; background: var(--pc-ink-2) !important; box-shadow: none !important; }
html body.px-mmv2 #px-nick-pick { border-radius: 2px; border-color: var(--pc-line-2); background: transparent; color: var(--pc-dim); }
html body.px-mmv2 #px-nick-pick[aria-expanded="true"] { border-color: var(--pc-acid); color: var(--pc-acid); background: var(--pc-acid-soft); }
html body.px-mmv2 #dual-toggle-btn {
    background: var(--pc-ink) !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    color: var(--pc-text) !important;
    box-shadow: none !important;
}

html body.px-mmv2.menu-single-column #play-btn {
    position: relative;
    background: var(--pc-acid) !important;
    border: 0 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: var(--pc-acid-ink) !important;
    text-shadow: none !important;
    font: 800 18px/1 var(--pc-display) !important;
    letter-spacing: .06em !important;
}
html body.px-mmv2.menu-single-column #play-btn > span { font: inherit !important; letter-spacing: inherit !important; }
/* Tema "AgarioBR" (escolhido no painel admin): JOGAR verde, igual ao do PC. */
html body.px-mmv2.theme-agariobr.menu-single-column #play-btn {
    background: linear-gradient(180deg, #00b944, #007a2e) !important;
    color: #fff !important;
}
html body.px-mmv2.menu-single-column #play-btn:active { transform: translateY(1px) !important; }
html body.px-mmv2.menu-single-column #spectate-btn,
html body #mc-config-btn-menu button,
html body.px-mmv2.menu-single-column #mc-config-btn-menu button {
    background: transparent !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: var(--pc-text) !important;
    font: 600 10.5px var(--pc-mono) !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}
html body.px-mmv2.menu-single-column #spectate-btn i,
html body #mc-config-btn-menu button i,
html body.px-mmv2.menu-single-column #mc-config-btn-menu button i { color: var(--pc-acid) !important; filter: none !important; }

/* Rodapé (versão, Novidades, termos, sobre) */
html body.px-mmv2 #helloDialog .menu-foot { border-top: 1px solid var(--pc-line); padding-top: 12px; }
html body.px-mmv2 #helloDialog .menu-foot-ver,
html body.px-mmv2 #helloDialog .seo-about-links { font: 500 10.5px/1.6 var(--pc-mono) !important; color: var(--pc-faint) !important; }
html body.px-mmv2 #helloDialog .menu-foot-ver a { color: var(--pc-acid) !important; }
html body.px-mmv2 #helloDialog .seo-about-links a { color: var(--pc-dim) !important; text-decoration: none !important; }

/* ---------- Cartões (hero, loja, ranking, avisos) ------------------------- */
html body.px-mmv2.menu-single-column #helloDialog,
html body.px-mmv2 .mmv2-card,
html body.px-mmv2.menu-single-column #notices-carousel,
html body.px-mmv2.menu-single-column #settings-sidebar {
    background: var(--pc-corners), var(--pc-panel) !important;
    border: 1px solid var(--pc-line) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html body.px-mmv2.menu-single-column #helloDialog::before,
html body.px-mmv2.menu-single-column #helloDialog::after,
html body.px-mmv2 .mmv2-card::before,
html body.px-mmv2 .mmv2-card::after { display: none !important; }
html body.px-mmv2 .mmv2-card-head {
    font: 500 10.5px var(--pc-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pc-text);
}
html body.px-mmv2 .mmv2-card-head i {
    border-radius: 2px;
    background: var(--pc-acid-soft);
    color: var(--pc-acid);
    border: 1px solid rgba(212, 255, 58, .3);
    box-shadow: none;
}
html body.px-mmv2 .mmv2-cta {
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--pc-line-2);
    color: var(--pc-text);
    box-shadow: none;
    font: 600 10.5px var(--pc-mono);
    letter-spacing: .1em;
}
html body.px-mmv2 .mmv2-cta i { color: var(--pc-acid); filter: none; }
html body.px-mmv2 .mmv2-cta:active { border-color: var(--pc-acid); }
html body.px-mmv2 .mmv2-cta.mmv2-cta-solid { background: var(--pc-acid); border-color: var(--pc-acid); color: var(--pc-acid-ink); }
html body.px-mmv2 .mmv2-cta.mmv2-cta-solid i { color: var(--pc-acid-ink); }
html body.px-mmv2 .mmv2-store-sub b { font: 800 14px var(--pc-display); letter-spacing: -.01em; }
html body.px-mmv2 .mmv2-store-sub span { color: var(--pc-dim); }
html body.px-mmv2 .mmv2-skin-orb {
    background: var(--pc-ink) !important;
    border: 1px solid var(--pc-line-2) !important;
    box-shadow: none !important;
    color: var(--pc-acid) !important;
}
html body.px-mmv2 .mmv2-skin-orb i { color: var(--pc-acid) !important; filter: none !important; background: none !important; -webkit-text-fill-color: currentColor !important; }

/* Ranking compacto (Top 10) */
html body.px-mmv2 .mmv2-rank-row {
    border-radius: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--pc-line);
    font-family: var(--pc-body);
}
html body.px-mmv2 .mmv2-rank-row.me { background: var(--pc-acid-soft); box-shadow: inset 2px 0 0 var(--pc-acid); color: var(--pc-acid); }
html body.px-mmv2 .mmv2-rank-empty { font: 500 10.5px var(--pc-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pc-dim); }

/* ---------- Abas de baixo (Jogo · Social · Ranking) ----------------------- */
html body.px-mmv2.menu-single-column .mobile-menu-tabs {
    background: var(--pc-ink-2) !important;
    border-top: 1px solid var(--pc-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html body.px-mmv2.menu-single-column .mobile-menu-tabs button {
    border-radius: 2px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    color: var(--pc-dim) !important;
    font: 500 10.5px var(--pc-mono) !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}
html body.px-mmv2.menu-single-column .mobile-menu-tabs button.active {
    color: var(--pc-text) !important;
    background: var(--pc-acid-soft) !important;
    border-color: rgba(212, 255, 58, .35) !important;
}
html body.px-mmv2.menu-single-column .mobile-menu-tabs button i { color: inherit !important; filter: none !important; }
html body.px-mmv2.menu-single-column .mobile-menu-tabs button.active i { color: var(--pc-acid) !important; }

/* O painel de Ranking (aba Ranking) usa as regras do pc-redesign.css, que
   desde a 3.8.0 valem em todas as telas. */
/* JOGAR: sem o recorte chanfrado e sem o brilho azul pulsante (drop-shadow) */
html body.px-mmv2.menu-single-column #play-btn { clip-path: none !important; -webkit-clip-path: none !important; animation: none !important; filter: none !important; }

/* ==========================================================================
   HUD de partida em telas estreitas (≤ 1024 px; o PC largo usa o
   pc-redesign). Só cor, borda e fonte: tamanhos e posições do mobile.css
   continuam. Chat e HUD da equipe ficam no v3-social.css.
   ========================================================================== */
@media (max-width: 1024px) {
    html body .eps-glass,
    html body #eps-minimap,
    html body #eps-status,
    html body #px-menu-btn {
        border-radius: 2px !important;
        border-color: var(--pc-line) !important;
        box-shadow: none !important;
    }
    html body #px-menu-btn { color: var(--pc-text) !important; }

    /* Pontuação: leitura de instrumento */
    html body #px-score { border-radius: 2px !important; }
    html body #px-score .px-score-label { font-family: var(--pc-mono) !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--pc-dim) !important; }
    html body #px-score .px-score-value { font-family: var(--pc-display) !important; color: var(--pc-acid) !important; text-shadow: none !important; }

    /* Classificação */
    html body #eps-leaderboard .eps-lb-head { border-bottom: 1px solid var(--pc-line) !important; text-align: left !important; }
    html body #eps-leaderboard .eps-lb-title {
        font: 500 9.5px var(--pc-mono) !important;
        letter-spacing: .16em !important;
        text-transform: uppercase !important;
        color: var(--pc-dim) !important;
        background: none !important;
        -webkit-text-fill-color: currentColor !important;
        text-shadow: none !important;
    }
    html body #eps-leaderboard .eps-lb-title::before { content: '● '; color: var(--pc-hot); }
    html body #eps-leaderboard .eps-lb-row { font-family: var(--pc-body) !important; color: var(--pc-text) !important; border-left: 2px solid transparent !important; }
    html body #eps-leaderboard .eps-lb-rank { font-family: var(--pc-mono) !important; color: var(--pc-faint) !important; }
    html body #eps-leaderboard .eps-lb-row:nth-child(1) .eps-lb-rank { color: var(--pc-gold) !important; }
    html body #eps-leaderboard .eps-lb-row.me,
    html body #eps-leaderboard .eps-lb-row.is-me,
    html body #eps-leaderboard .eps-lb-row.self { background: var(--pc-acid-soft) !important; border-left-color: var(--pc-acid) !important; color: var(--pc-acid) !important; }
    html body #eps-leaderboard .eps-lb-footer { border-top: 1px solid var(--pc-line) !important; font-family: var(--pc-mono) !important; color: var(--pc-faint) !important; text-transform: uppercase !important; }

    /* Status e minimapa */
    html body #eps-status .eps-st { font-family: var(--pc-mono) !important; color: var(--pc-text) !important; }
    html body #eps-status .eps-st i { color: var(--pc-faint) !important; }

    /* Rádio */
    html body #px-radio .px-radio-btn { background: var(--pc-acid) !important; color: var(--pc-acid-ink) !important; border: 0 !important; box-shadow: none !important; }
    html body #px-radio .px-radio-name { font-family: var(--pc-body) !important; color: var(--pc-text) !important; }
    html body #px-radio .px-radio-state { font-family: var(--pc-mono) !important; color: var(--pc-dim) !important; text-transform: uppercase !important; }
    html body #px-radio .px-radio-range { accent-color: var(--pc-acid) !important; }

    /* Botões de canto, ajuda e tela cheia */
    html body #spx-corner-bar button,
    html body #tut-help-btn,
    html body #fullscreen-btn {
        background: var(--pc-panel) !important;
        border: 1px solid var(--pc-line) !important;
        border-radius: 2px !important;
        color: var(--pc-dim) !important;
        box-shadow: none !important;
    }
}

/* ---------- Tablet deitado / janela estreita: layout de 3 colunas ---------
   O mobile.css põe o #helloDialog na coluna do meio, mas desde que ele foi
   embrulhado pelo #menu-center-stack quem ocupa a célula do grid é o
   embrulho — que ficava na coluna 1, escondido atrás do painel Social. */
@media (max-width: 1024px) and (orientation: landscape) and (min-height: 541px) {
    html body.menu-single-column:not(.px-mmv2) #overlays[data-mobile-panel] #menu-center-stack {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        max-width: none;
        min-width: 0;
    }
}

/* Em aparelho móvel o mobile-menu-v2.js sempre move o card central para
   dentro de #mmv2-main > #mmv2-col, mas esse embrulho só aparece com
   body.px-mmv2. Tablet deitado ou maior (sem px-mmv2) ficava sem o card do
   JOGAR: aí o embrulho vira "transparente" e as colunas extras somem. */
html body:not(.px-mmv2) #mmv2-main,
html body:not(.px-mmv2) #mmv2-col { display: contents !important; }
html body:not(.px-mmv2) #mmv2-cards,
html body:not(.px-mmv2) #mmv2-side { display: none !important; }
/* O rótulo "Skin" do botão de skin é do layout do celular; fora dele o botão
   já mostra a bolinha da skin. */
html body:not(.px-mmv2) .mmv2-skin-label { display: none !important; }

/* ---------- Controles de toque (joystick, dividir, ejetar) ----------------
   Os círculos translúcidos continuam (combinam com fundo claro e escuro); no
   fundo escuro o toque e o joystick ganham o verde-ácido. */
html body .mc-dark #mc-joy-inner { background: rgba(212, 255, 58, .22); border-color: rgba(212, 255, 58, .6); box-shadow: none; }
html body .mc-dark #mc-split.mc-btn-pressed,
html body .mc-dark #mc-eject.mc-btn-pressed { background: var(--pc-acid-soft) !important; border-color: var(--pc-acid) !important; }
html body #mc-split::after,
html body #mc-eject::after { font-family: var(--pc-mono) !important; letter-spacing: .08em; }

/* Editor "Configurar controles" e o aviso dele */
html body #mc-edit-overlay .mc-edit-header,
html body #mc-edit-overlay .mc-edit-size-panel {
    background: rgba(17, 20, 18, .96) !important;
    border-color: var(--pc-line) !important;
    font-family: var(--pc-body) !important;
    color: var(--pc-text) !important;
}
html body #mc-edit-overlay .mc-edit-btn,
html body #mc-edit-overlay .mc-sz-btn {
    background: transparent !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    color: var(--pc-text) !important;
    box-shadow: none !important;
    font-family: var(--pc-mono) !important;
    text-transform: uppercase;
    letter-spacing: .06em;
}
html body #mc-edit-overlay .mc-edit-btn.mc-edit-save { background: var(--pc-acid) !important; border-color: var(--pc-acid) !important; color: var(--pc-acid-ink) !important; }
html body #mc-edit-overlay .mc-edit-size-row span { font-family: var(--pc-mono) !important; }
html body .mc-toast {
    background: var(--pc-panel) !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    color: var(--pc-text) !important;
    font-family: var(--pc-body) !important;
    box-shadow: var(--pc-shadow) !important;
}