/*
 * UX DO CELULAR (21/10/2026 — "o pessoal tá reclamando muito do mobile").
 * Camada por último (depois do mobile.css):
 *  1. O jogo começa limpo: a barra de baixo vira UM botão "Menu" que abre a
 *     grade de opções (mobileTela.ts); Jornada, Captura, Combate, Sessão e
 *     Inventário começam recolhidos em pílulas pequenas.
 *  2. Módulo aberto é opaco (Jornada e Prey estavam transparentes).
 *  3. Caçadas: filtros numa linha que rola de lado; sem o par de caminhada.
 *  4. Banco › Pokémon: Equipe e Box em sanfona (um aberto por vez, tela toda).
 *  5. Macro: abas e perfil não se espremem.
 */

/* ── 2. módulos opacos (todo aparelho) ─────────────────────────────────── */
body .panel:not(.coluna > .panel):not(#market) { --hud-a: max(var(--hud-base), .96); }

/* ── 3. Caçadas: o par manual/automática saiu (fica no cartão do treinador) */
#hp-modo { display: none !important; }

@media (max-width: 720px) {
  /* ── 1. o botão Menu ──────────────────────────────────────────────────── */
  body.dock-mini #dock { display: none !important; }
  #dock-abrir {
    position: fixed; right: 10px; left: auto !important; transform: none !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px !important; min-height: 0;
    border-radius: 999px !important; font: 800 13px var(--ui) !important; letter-spacing: .04em;
    color: #fff !important; background: linear-gradient(180deg, var(--red-hi), var(--red)) !important;
    border: 1px solid #ff8a90 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 14px rgba(255, 70, 80, .3);
    z-index: 21;
  }
  #dock-abrir[hidden] { display: none !important; }
  /* O menu aberto: uma folha com a grade, por cima do jogo. */
  body:not(.dock-mini) #dock { border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .6); background: rgba(16, 18, 24, .98) !important; }
  #dock .dock-min { top: -34px !important; height: 30px !important; width: auto !important; padding: 0 12px; font-size: 12px; }
  #dock .dock-min::after { content: ' Fechar'; font: 700 11px var(--ui); }

  /* Recolhidos: pílulas pequenas (só o título). */
  .coluna > .panel.minimizado { padding: 4px 6px 4px 9px !important; border-radius: 10px !important; min-height: 0 !important; }
  .coluna > .panel.minimizado > header, .coluna > .panel.minimizado > .alca { min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
  .coluna > .panel.minimizado .lead { font-size: 10px !important; letter-spacing: .08em; }
  .coluna > .panel.minimizado .bt-min { width: 26px !important; height: 26px !important; min-width: 0 !important; min-height: 0 !important; font-size: 13px !important; }
  .coluna > .panel.minimizado .bt-fechar { display: none !important; }
  .coluna > .panel.minimizado #inv-valor, .coluna > .panel.minimizado .zone-name + *:not(#r-stop) { display: none; }
  .coluna { gap: 4px !important; }

  /* ── 3. Caçadas: filtros numa linha só, que rola de lado ─────────────── */
  #hp-regioes, #hp-tipos { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  #hp-regioes::-webkit-scrollbar, #hp-tipos::-webkit-scrollbar { display: none; }
  #hp-regioes > *, #hp-tipos > * { flex: 0 0 auto; }
  #browser .hp-filtros { gap: 6px; }
  #browser .hp-filtros .hp-so { font-size: 12px; white-space: nowrap; }

  /* ── 4. Banco › Pokémon: sanfona ─────────────────────────────────────── */
  #depot.aba-mon:not(.vendendo) #depot-cols { display: flex !important; flex-direction: column; gap: 6px; }
  #depot.aba-mon:not(.vendendo) .depot-col { flex: 0 0 auto; min-height: 0; }
  #depot.aba-mon:not(.vendendo) .depot-col.aberta { flex: 1 1 auto; }
  #depot.aba-mon:not(.vendendo) .depot-col:not(.aberta) .depot-list { display: none !important; }
  #depot.aba-mon:not(.vendendo) .depot-col > .lead {
    cursor: pointer; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .04);
    align-items: center;
  }
  #depot.aba-mon:not(.vendendo) .depot-col.aberta > .lead { border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .1); }
  #depot.aba-mon:not(.vendendo) .depot-col > .lead::after { content: '▸'; margin-left: 8px; color: var(--dim); }
  #depot.aba-mon:not(.vendendo) .depot-col.aberta > .lead::after { content: '▾'; }
  #depot.aba-mon:not(.vendendo) .depot-col.aberta .depot-list { flex: 1 1 auto; max-height: none !important; }
  #depot-rarity { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  #depot-rarity > * { flex: 0 0 auto; }

  /* ── 5. Macro: abas e perfil com altura própria ───────────────────────── */
  #macro > nav, #macro > .mc-perfis, #macro > header { flex: 0 0 auto !important; }
  #macro .mc-tabs { overflow: visible !important; display: grid !important; grid-template-columns: repeat(3, 1fr); }
  #macro .mc-tabs button { min-height: 36px; }
  .mc-perfis { padding: 0 !important; }
  .mcp-linha { flex-wrap: wrap; }
  .mcp-sel { flex: 1 1 150px !important; min-height: 38px; }
  .mcp-rot { display: none; }

  /* Com o menu recolhido, o módulo termina acima do botão Menu. */
  body.dock-mini :is(#bag, #dex, #depot, #prof, #gyms, #browser, #helper, #diamond, #macro, #shop, #ranking, #analisador, #jornada, #prey, #wiki, #calendario) {
    bottom: calc(68px + env(safe-area-inset-bottom)) !important;
  }
  /* Banco: as setas de ordem da equipe cabem na linha. */
  .row.mon .eq-ordem button, .eq-ordem button { min-height: 0 !important; height: 26px !important; }
  /* Avisos rápidos: no meio de baixo, longe do cartão do treinador. */
  #toast-nivel { top: auto !important; bottom: calc(150px + env(safe-area-inset-bottom)); }
  #toast-nivel .tn { font-size: 12px; }
  /* Menu aberto: o selo BETA sai da frente do "Fechar". */
  body:not(.dock-mini) #faixa-beta { display: none !important; }
}