/* Telas estreitas (celular e tablet em pé). O desktop (≥ 901px) não muda: estilo.css manda lá.
   Regras: uma coluna, menu lateral vira gaveta (botão ☰ no topo), campo de caça em 16:9 no fluxo,
   janela flutuante menor, grades de 2+ colunas viram 1 ou 2, tabelas rolam na horizontal. */

.btn-menu, .menu-fundo { display: none; }

@media (max-width: 900px) {
  body { min-width: 0; }
  .app { flex-direction: column; height: 100vh; height: 100dvh; }

  /* menu lateral como gaveta */
  .menu {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(280px, 84vw); z-index: 70;
    transform: translateX(-104%); transition: transform .22s ease; box-shadow: 4px 0 24px #000c;
  }
  .menu.aberto { transform: none; }
  .menu { gap: 8px; padding: 10px 10px 8px; }
  .menu .logo { font-size: 20px; }
  .menu-perfil { padding: 6px 8px; }
  .menu-secao { margin-bottom: 4px; }
  .menu-item { padding: 5px 8px; }
  .menu nav { overscroll-behavior: contain; }
  .menu-fundo { position: fixed; inset: 0; z-index: 65; background: #000a; }
  .menu-fundo:not([hidden]) { display: block; }
  .btn-menu { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; font-size: 20px; flex-shrink: 0; }

  /* topo compacto */
  .topo { height: auto; min-height: 56px; padding: 6px 10px; gap: 8px; flex-wrap: wrap; }
  .saudacao { flex: 1; min-width: 0; }
  .saudacao h1 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .saudacao p { display: none; }
  .moedas { margin-left: 0; gap: 4px; flex-basis: 100%; justify-content: space-between; }
  .moeda { flex: 1; height: 38px; gap: 5px; padding: 0 2px 0 6px; border-radius: 10px; min-width: 0; }
  .moeda .ico-px { width: 22px; height: 22px; }
  .moeda .val b { font-size: 13px; }
  .moeda .val small { display: none; }
  .moeda button { width: 26px; height: 26px; margin-left: 2px; }

  .conteudo { padding: 10px 10px 90px; }

  /* home: uma coluna, campo em 16:9 no fluxo (nada de altura 100%) */
  .home { grid-template-columns: 1fr; height: auto; }
  .home-dir { overflow: visible; padding: 0; }
  .slot-campo { height: auto; }
  .janela-campo.dock { height: auto; }
  .janela-campo.dock .campo-wrap { flex: none; aspect-ratio: 16 / 9; }
  .janela-campo.pip { width: 46vw; height: 30vw; max-width: 260px; max-height: 170px; }
  .janela-campo.pip.canto-bl, .janela-campo.pip.canto-tl { left: 10px; }
  .janela-campo.pip.canto-br, .janela-campo.pip.canto-tr { right: 10px; }
  .janela-campo.pip.canto-bl, .janela-campo.pip.canto-br { bottom: 10px; }
  .janela-campo.pip.canto-tl, .janela-campo.pip.canto-tr { top: 62px; }
  .janela-campo.max { inset: 6px; }
  .janela-campo.min { right: 10px; bottom: 10px; width: calc(100vw - 20px); }
  .barra-hunt .dir { display: none; }
  .chat { height: 260px; }

  /* páginas */
  .pagina-topo { gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
  .pagina-topo h2 { font-size: 20px; }
  .atlas, .gacha, .gacha2, .gacha3, .perfil-duas, .premium-grade, .loja, .loja-grade, .grade-herois,
  .eco-grade2, .vender, .arena-grade, .boss-topo, .boss-lista, .torneio-topo, .pvp-formacoes, .pvp-oponentes,
  .ad-carteiras, .ad-linha, .rk, .wiki, .g-hero, .g-top3 { grid-template-columns: 1fr !important; }
  .perfil-grade, .ad-cards-3, .ad-cards-4, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .resultado { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; }
  .revelacao { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .album { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important; }
  .itens { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; }
  .mercado-filtros { display: flex !important; flex-wrap: wrap; gap: 6px; }
  .mercado-filtros > * { flex: 1 1 120px; min-width: 0; }
  .pvp-topo { display: flex !important; flex-wrap: wrap; gap: 8px; }
  .cr-abas, .ad-abas { flex-wrap: wrap; }
  .oferta { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .oferta > * { min-width: 0; }
  .oferta .selo-desc { font-size: 18px; padding: 6px 10px; }
  .oferta h3 { font-size: 16px; }
  .oferta .precos { margin-left: 0; text-align: left; flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .rk-podio { display: flex !important; flex-direction: column; gap: 8px; }
  .rk-podio-card.p1 { order: -1; }
  .rk-podio-card { padding: 16px 10px 36px; }
  table.ad-tabela, table.cr-tabela, .mercado-tabela table, #modal-corpo table:not(.sem-rolagem) {
    display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
  }
  .cr-linha { flex-wrap: wrap; }
  .cr-linha > input, .cr-linha > select { flex: 1 1 120px; min-width: 0; width: auto !important; }

  /* diálogos e avisos */
  dialog { width: min(980px, calc(100vw - 16px)); max-height: 92vh; max-height: 92dvh; }
  #dialogo-corpo { padding: 12px; max-height: calc(92vh - 64px); }
  .modal-topo { padding: 10px 12px; }
  .modal-topo h2 { font-size: 18px; }
  #toasts { bottom: 12px; width: calc(100vw - 20px); }
  .toast { max-width: 100%; }
  #janela-reabrir { right: 10px; bottom: 10px; }

  /* login */
  .tela-login { overflow-y: auto; place-items: start center; padding: 12px 0 24px; }
  .login-caixa { width: min(440px, calc(100vw - 20px)); padding: 18px 14px; gap: 10px; }
  .logo.grande { font-size: 34px; }
  .login-herois { gap: 6px; }
  .login-heroi img { width: 64px; height: 64px; }
  .login-caixa > p { font-size: 13px; margin: 0; }
  .login-rodape { flex-wrap: wrap; justify-content: center; }
  .login-convidado > div > input { min-width: 0; flex: 1; }
}

@media (max-width: 520px) {
  .iniciais { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px; }
  .perfil-grade, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cb-slots { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 4px; }
  .zoom-botoes button, .janela-botoes button { width: 34px; height: 32px; }
}

/* barra de golpes do campo (client/campo-golpes.mjs): círculos menores na tela estreita */
@media (max-width: 900px) {
  .campo-golpes { --gtam: 30px; gap: 4px; left: 6px; top: 6px; }
  .janela-campo.pip .campo-golpes { --gtam: 20px; gap: 3px; left: 4px; top: 4px; }
}

@media (max-width: 760px) { .topo-voto span { display: none; } .topo-voto { margin-left: 0; padding: 6px 9px; } }