/*
 * MOBILE FIRST (20/10/2026 — "deixar o jogo o mais responsivo, fácil de
 * manipular, visualizar todas as funções no mobile"). Camada final do
 * celular: vem DEPOIS do <style> do index.html, então ganha dele.
 *
 *  1. A barra de baixo mostra TODAS as funções (fileiras de ícones), nada
 *     escondido para o lado.
 *  2. Todo módulo é uma folha de altura inteira: do topo (fora do entalhe)
 *     até a barra. Nada de módulo pequeno no meio da tela.
 *  3. Dedo: alvo de toque de 40 px, campo de texto com 16 px (o iPhone não
 *     dá zoom ao focar), abas que rolam de lado.
 *  4. Módulo de duas colunas vira uma coluna (Banco, Ginásios).
 */
@media (max-width: 720px) {
  /* ── 1. barra com tudo ─────────────────────────────────────────────── */
  #dock {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 2px 2px;
    overflow: visible !important;
    padding: 6px 6px calc(4px + env(safe-area-inset-bottom)) !important;
    scroll-snap-type: none;
  }
  .dock-btn { width: auto !important; flex: none !important; min-width: 0; padding: 4px 0 3px !important; gap: 1px; }
  .dock-btn span { font-size: 10px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .dock-btn img, .dock-btn img[src*="/assets/dock/"] { width: 26px !important; height: 26px !important; }
  #dock .dock-comunidade { display: none; }
  #dock .dock-min { position: absolute; top: -26px; right: 8px; width: 40px; height: 24px; border-radius: 10px 10px 0 0; }

  /* ── 2. módulo = folha de altura inteira ──────────────────────────── */
  #bag, #dex, #depot, #prof, #gyms, #browser, #helper, #diamond, #macro, #shop, #ranking, #analisador, #jornada {
    left: 4px !important; right: 4px !important;
    top: calc(env(safe-area-inset-top) + 6px) !important;
    bottom: calc(var(--dock-h, 110px) + env(safe-area-inset-bottom) + 4px) !important;
    width: auto !important; height: auto !important;
    max-height: none !important; max-width: none !important;
    transform: none !important;
    border-radius: 16px !important;
    display: flex; flex-direction: column;
  }
  #gyms { display: grid !important; }
  #bag[hidden], #dex[hidden], #depot[hidden], #prof[hidden], #gyms[hidden], #browser[hidden], #helper[hidden],
  #diamond[hidden], #macro[hidden], #shop[hidden], #ranking[hidden], #analisador[hidden], #jornada[hidden] { display: none !important; }

  /* ── 3. dedo ───────────────────────────────────────────────────────── */
  .panel header .close, .panel header [role="button"], .panel header button, .panel .pn-min, .panel .min {
    min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  }
  .panel input[type="text"], .panel input[type="search"], .panel input[type="number"], .panel input:not([type]), .panel select, .panel textarea,
  #gate input, #cidade-chat input {
    font-size: 16px !important; min-height: 40px;
  }
  .panel button { min-height: 36px; }
  .panel .lead { font-size: 13px; }
  /* Abas e filtros: rolam de lado em vez de cortar o último. */
  #bag-abas, #depot-tabs, #diamond nav, #macro nav, .tabs, [id$="-abas"], [id$="-tabs"] {
    display: flex; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  #bag-abas::-webkit-scrollbar, #depot-tabs::-webkit-scrollbar, [id$="-abas"]::-webkit-scrollbar, [id$="-tabs"]::-webkit-scrollbar { display: none; }
  #bag-abas > *, #depot-tabs > *, [id$="-abas"] > *, [id$="-tabs"] > * { flex: 0 0 auto; }
  #dex select { max-width: none; flex: 1 1 45%; }
  #dex .frow, #depot-filters .frow { flex-wrap: wrap; gap: 6px; }
  #depot-filters .frow > * { flex: 1 1 45%; min-width: 0; }

  /* ── 4. uma coluna ─────────────────────────────────────────────────── */
  #depot-cols { grid-template-columns: 1fr !important; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .depot-list { min-height: 0; }
  #gyms { grid-template-columns: 1fr !important; grid-template-rows: auto auto minmax(0, 1fr) !important; padding: 10px !important; }
  #gym-list { flex-direction: row !important; overflow-x: auto; overflow-y: hidden; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  #gym-list > * { flex: 0 0 auto; min-width: 128px; }

  /* Tabelas largas rolam dentro do módulo, não a página. */
  .panel table { display: block; overflow-x: auto; max-width: 100%; }

  /* A página nunca rola de lado. */
  html, body { overflow-x: hidden; }
}

/* Celular deitado: pouca altura — a barra volta a ser uma fileira. */
@media (max-width: 920px) and (max-height: 480px) {
  #dock { display: flex !important; overflow-x: auto !important; }
  #dock .dock-btn { flex: 0 0 56px !important; }
}

/* ── VENDER POKÉMON NO CELULAR (20/10/2026: "reclamaram bastante da venda
   de pokémons no mobile"). Antes a barra de venda ocupava meia tela e o box
   mostrava um pokémon por vez; a equipe (que nunca é vendida) ficava no
   caminho do dedo. Agora: no modo venda some a equipe e o box ocupa tudo;
   a barra é uma faixa fina embaixo (selecionados + Vender). ─────────────── */
@media (max-width: 720px) {
  #depot.aba-mon #depot-cols { grid-template-rows: minmax(0, .75fr) minmax(0, 1.25fr); }
  #depot.aba-mon #depot-foot { display: none !important; }
  #depot.vendendo #depot-cols { grid-template-rows: minmax(0, 1fr) !important; }
  #depot.vendendo .depot-col:first-child { display: none !important; }
  #depot.vendendo #depot-filters #depot-rarity { display: none; }

  #depot-venda { flex-wrap: nowrap; padding: 6px 8px; gap: 6px; }
  #depot.aba-mon:not(.vendendo) #depot-venda { display: grid !important; grid-template-columns: 1fr 1fr; }
  #depot-venda button { padding: 8px 10px; font-size: 13px; }
  #depot.vendendo #depot-venda { display: grid !important; grid-template-columns: auto 1fr; align-items: center; }
  #depot.vendendo #depot-comparar { display: none; }
  #depot.vendendo #depot-vacoes { display: grid !important; grid-template-columns: 1fr auto; gap: 4px 6px; flex: none; }
  #depot.vendendo #depot-vinfo { grid-column: 1 / -1; font-size: 12px; text-align: right; }
  #depot.vendendo #depot-vfiltro { font-size: 12px; padding: 8px 6px; }
  #depot.vendendo #depot-vender { min-width: 112px; }

  /* Linhas de pokémon: alvo de dedo maior, caixinha de marcar maior. */
  #depot .row.mon { min-height: 54px; height: auto !important; max-height: none !important; overflow: visible; }
  #depot .row.mon > * { min-width: 0; }
  .row.mon.vendendo { padding-left: 38px !important; }
  .row.mon.vendendo::before { left: 10px; width: 20px; height: 20px; margin-top: -10px; border-radius: 6px; }
}
@media (max-width: 720px) {
  /* Cada linha de pokémon em 3 linhas fixas: o que não cabe vira "…" (antes o "+2%" vazava para a linha de baixo). */
  .row.mon .col { min-width: 0; overflow: hidden; }
  .row.mon .nm, .row.mon .meta, .row.mon .atrib { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 720px) {
  /* A barra de golpes (cooldowns) ficava por baixo da barra do zoom/câmera
     (20/10/2026): no celular as duas ficam empilhadas — o zoom logo acima da
     barra de baixo, os golpes acima do zoom, centralizados e sem passar da tela. */
  #golpes {
    bottom: calc(var(--dock-h, 110px) + env(safe-area-inset-bottom) + 56px) !important;
    left: 6px !important; right: 6px !important; transform: none !important;
    width: fit-content; margin: 0 auto; max-width: calc(100vw - 12px); flex-wrap: wrap; justify-content: center;
  }
}
@media (max-width: 720px) {
  /* O botão e a janela do chat sobem para cima dos golpes (antes ficavam atrás da barra do zoom).
     Sem !important: se o jogador arrastou, o lugar dele vale. */
  #cc-toggle { left: 6px; bottom: calc(var(--dock-h, 110px) + env(safe-area-inset-bottom) + 98px); width: 40px; height: 40px; }
  #cidade-chat { bottom: calc(var(--dock-h, 110px) + env(safe-area-inset-bottom) + 98px); }
}
/* O ícone que abre a barra do zoom/câmera só existe no celular. */
#hud-vista #hud-vista-menu { display: none; }
/* PC: a barra recolhida vira só a lupa; clicar nela abre de novo. */
#hud-vista #hud-vista-min { opacity: .7; }
#hud-vista #hud-vista-min:hover { opacity: 1; }
@media (min-width: 721px) {
  #hud-vista.mini #hud-vista-menu { display: grid; place-items: center; }
  #hud-vista.mini > :not(#hud-vista-menu) { display: none !important; }
}
@media (max-width: 720px) {
  /* Fechada: só o ícone, no canto, colado na barra de baixo. Aberta: a barra
     inteira ali mesmo (por cima dos golpes só enquanto estiver aberta). */
  #hud-vista { bottom: calc(var(--dock-h, 110px) + env(safe-area-inset-bottom) + 8px) !important; left: 6px !important; z-index: 21; }
  #hud-vista #hud-vista-menu { display: grid; place-items: center; width: 38px !important; height: 38px !important; }
  #hud-vista:not(.aberta) { padding: 3px; gap: 0; }
  #hud-vista:not(.aberta) > :not(#hud-vista-menu) { display: none !important; }
  #hud-vista #hud-vista-min { display: none !important; }
  #hud-vista.aberta #hud-vista-menu { color: var(--red-hi, #ff6b72); }
  /* Os golpes descem para logo acima da barra de baixo, sem encostar no ícone. */
  #golpes {
    bottom: calc(var(--dock-h, 110px) + env(safe-area-inset-bottom) + 8px) !important;
    max-width: calc(100vw - 104px) !important;
  }
  #cc-toggle { bottom: calc(var(--dock-h, 110px) + env(safe-area-inset-bottom) + 84px); }
  #cidade-chat { bottom: calc(var(--dock-h, 110px) + env(safe-area-inset-bottom) + 84px); }
}