/* MONSTERIDLE — modo celular (telas até 700px de largura).
 * Carregado por ÚLTIMO no index.html: só ajusta o que já existe, não cria
 * estrutura nova. No computador nada daqui vale.
 *
 * O que muda no celular:
 *  - HUD de cima compacta: avatar menor, nome/nível/HP/EXP numa coluna só,
 *    moedas e boosts numa faixa fina; a segunda barra (dex, shinies, online,
 *    roadmap, apoiar) vira uma fileira única que rola para o lado.
 *  - Toda janela (as do menu, Hunts, Cash Shop, Amigos, Chat) abre como uma
 *    folha de tela cheia entre a HUD e o menu de baixo, por cima de tudo, e
 *    ignora a posição arrastada no computador.
 *  - Menu de baixo mais baixo, rolando para o lado, sem ficar escondido pelo
 *    botão do chat.
 */
@media (max-width:700px){
  /* recorte da tela (notch / barra de gestos): com viewport-fit=cover o
     conteúdo vai até a borda; estes recuos deixam HUD, menu e chat fora do
     recorte. No app instalado (standalone) é onde isso mais aparece. */
  header{padding-top:calc(6px + env(safe-area-inset-top, 0px)) !important}
  .aba-bar.nav{padding-bottom:calc(4px + env(safe-area-inset-bottom, 0px)) !important}
  .chat-btn{bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important}
  .abas.aberto .janela,#janela-amigos,#janela-houses,.chat{bottom:calc(58px + env(safe-area-inset-bottom, 0px)) !important}
  .portao-instalar{width:100%;text-align:center}
  /* toque: nada de zoom acidental no duplo toque, nem seleção de texto ao segurar botões */
  button,.aba-bar.nav,.acao-golpe,.acao-slot,.mon .acoes{touch-action:manipulation;-webkit-user-select:none;user-select:none}
  /* input com fonte <16px faz o iPhone dar zoom ao focar */
  input,select,textarea{font-size:16px !important}

  /* ================= HUD DE CIMA ================= */
  header{padding:6px 6px 0 !important;gap:4px !important;flex-direction:column;align-items:stretch}
  header .mi-char{max-width:none !important;width:100%;flex-wrap:nowrap !important;align-items:center !important;
    gap:0 !important;padding:6px 8px !important;border-radius:14px !important;border-width:1.5px}
  header .mi-char .avatar{width:46px !important;height:46px !important;margin:0 8px 0 0 !important;align-self:center !important}
  header .mi-char .avatar .anel{width:46px !important;height:46px !important}
  header .mi-char .avatar .anel img{width:38px !important;height:38px !important}
  header .mi-char .avatar .bola{width:16px !important;height:16px !important;border-width:1.5px !important;right:-3px !important;bottom:-2px !important}
  header .mi-char .avatar .bola::after{width:5px !important;height:5px !important;border-width:1.5px !important}
  /* selo VIP vira um pontinho dourado em cima da foto (o chip VIP ao lado já diz o resto) */
  header .mi-char .avatar .vip{top:-6px !important;padding:0 5px !important;font-size:7.5px !important;letter-spacing:.5px}
  header .mi-char .avatar .vip svg{width:8px !important;height:8px !important}
  header .mi-char .quem{flex:1;min-width:0;gap:2px}
  header .mi-char .quem .nome{gap:6px;min-width:0}
  header .mi-char .quem .nome b{font-size:13.5px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  header .mi-char .quem .nome .mi-bt.icone{width:22px;min-width:22px;min-height:22px;height:22px;border-radius:6px}
  header .mi-char .quem .nome .mi-bt.icone svg{width:11px;height:11px}
  header #h-versao{display:none}
  header .mi-char .quem .nivel{font-size:11px !important;margin:0 !important}
  header .mi-char .quem .linha{gap:6px !important;margin:0 !important;min-height:0}
  header .mi-char .quem .linha .ico{transform:scale(.8);transform-origin:left center}
  header .mi-char .quem .linha .ico.exp{font-size:8px !important;padding:0 5px !important}
  header .mi-char .quem .mi-barra{height:6px !important}
  header .mi-char .quem .val{font-size:10.5px !important;min-width:0 !important}
  header .mi-char .divisor{display:none !important}
  /* moedas + boosts: coluna estreita à direita */
  /* moedas + boosts: segunda linha do cartão, largura toda */
  header .mi-char{flex-wrap:wrap !important;row-gap:5px !important}
  header .mi-char .quem .val{white-space:nowrap}
  header .mi-char .lado{flex:0 0 100% !important;width:100%;display:flex !important;flex-direction:row !important;align-items:center;
    gap:6px !important;margin:0 !important;padding:0 !important;border:none !important}
  header .mi-char .recursos{flex-direction:row !important;gap:5px !important;flex:1;min-width:0}
  header .mi-char .recurso{flex:1;min-width:0;padding:2px 3px 2px 6px !important;gap:5px !important;min-height:0 !important;height:26px}
  header .mi-char .recurso b{font-size:12px !important;min-width:0 !important;flex:1;overflow:hidden;text-overflow:ellipsis}
  header .mi-char .recurso .moeda,header .mi-char .recurso .dia{transform:scale(.8);flex:none}
  header .mi-char .recurso .mi-bt.mais{width:20px !important;min-width:20px !important;height:20px !important;min-height:20px !important;font-size:12px !important;padding:0 !important}
  header .mi-char .boosts{display:flex !important;flex-direction:row !important;gap:3px !important;flex:none;margin:0 !important}
  header .mi-char .boost{width:26px !important;min-width:0 !important;height:26px !important;padding:0 !important;border-radius:7px !important;
    display:flex !important;align-items:center;justify-content:center;flex-direction:column}
  header .mi-char .boost .rot,header .mi-char .boost .tempo{display:none !important}
  header .mi-char .boost svg{width:12px !important;height:12px !important}
  header .mi-char .boost:not(.off) .tempo{display:block !important;font-size:6.5px !important;line-height:1}

  /* segunda barra: uma fileira só, rolando para o lado */
  header .h-lado{width:100%;display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:6px !important;
    padding:4px 6px !important;border-radius:12px !important;overflow-x:auto;scrollbar-width:none;align-items:center}
  header .h-lado::-webkit-scrollbar{display:none}
  header .h-lado .h-coluna{flex-direction:row !important;flex-wrap:nowrap !important;gap:5px !important;flex:none}
  header .h-lado .h-divisor{display:none}
  header .h-lado .mi-hud,header .h-lado .pilula{padding:3px 8px !important;font-size:10.5px !important;min-height:24px !important;white-space:nowrap}
  header .h-lado .pilula *{font-size:10.5px}

  /* ================= MAPA / FLUTUANTES ================= */
  /* card do pokémon ativo: faixa de ponta a ponta logo abaixo da HUD;
     itens e golpes: embaixo, acima do menu, um em cada canto. A posição
     arrastada do computador não vale aqui (no toque o arrasto brigava com
     a rolagem). */
  .mi-flut-meu,.mi-flut-meu.flut-custom{left:6px !important;right:6px !important;width:auto !important;top:var(--flut-topo,54px) !important;transform:none !important}
  .mi-flut-itens,.mi-flut-itens.flut-custom{left:6px !important;right:auto !important;top:auto !important;bottom:66px !important;transform:none !important}
  .mi-flut-golpes,.mi-flut-golpes.flut-custom{right:6px !important;left:auto !important;top:auto !important;bottom:66px !important;transform:none !important}
  .mi-flut-alca{display:none !important}
  #topo-poke .meu{padding:4px 8px !important}
  .mi-flut-golpes .acao-grupo,.mi-flut-itens .acao-grupo{padding:5px !important;gap:4px !important}
  .acao-golpe{width:48px !important;height:48px !important}
  .acao-golpe .acao-ico{top:15px !important;width:26px !important;height:26px !important}
  .acao-slot{width:44px !important;height:44px !important}
  #faixa-lugar{left:6px !important;right:6px !important;transform:none !important;flex-wrap:wrap;gap:6px !important;font-size:12px}

  /* ================= MENU DE BAIXO ================= */
  .aba-bar.nav{padding:4px 64px 4px 4px !important;gap:2px !important}
  /* etiquetas longas (Hunt Analyzer, Cash Shop, Farm offline) invadiam o
     botão vizinho: largura mínima maior e corte com reticências */
  .aba-bar.nav button{min-width:66px !important;max-width:76px;padding:3px 2px !important;font-size:8.5px !important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0 !important}
  .aba-bar.nav button i,.aba-bar.nav button i img{width:30px !important;height:30px !important}
  .aba-bar.nav button kbd{display:none}
  .aba-bar.nav .nav-sep{display:none}
  .chat-btn{width:48px !important;height:48px !important;right:6px !important;bottom:8px !important}

  /* ================= JANELAS: folha de tela cheia =================
     Ocupam a tela toda do topo até o menu de baixo, por
     cima da HUD, e sem a posição arrastada do PC. */
  .abas.aberto .janela,.abas.aberto .janela.solta,
  #janela-amigos,#janela-amigos.solta,
  #janela-houses,#janela-houses.solta,
  .chat,.chat.solta{
    position:fixed !important;left:0 !important;right:0 !important;top:0 !important;bottom:58px !important;
    width:auto !important;height:auto !important;max-width:none !important;max-height:none !important;
    margin:0 !important;transform:none !important;border-radius:0 0 16px 16px !important;z-index:45 !important}
  /* .abas mora dentro do <main> (z 10), abaixo da HUD (z 30): com janela aberta o main sobe */
  main:has(.abas.aberto){z-index:46 !important}
  .abas.aberto{z-index:46 !important}
  .janela-cab,.mi-janela-cab,.chat-topo{padding:8px 10px !important;cursor:default !important}
  .janela-corpo{padding:10px !important}
  .janela-x,.mi-janela-x{width:34px !important;height:34px !important;font-size:15px !important}

  /* modais (Hunts, Cash Shop, foto de perfil, etc.): também tela cheia */
  .modal{padding:0 !important;align-items:stretch !important;z-index:50 !important}
  .modal .hunts-box,.modal .cash-box,.modal .hunts-box.solta,.modal .cash-box.solta{
    position:fixed !important;inset:0 !important;width:100vw !important;height:100dvh !important;max-width:none !important;max-height:none !important;
    margin:0 !important;border-radius:0 !important;transform:none !important}
  .modal .box,.modal .avatar-modal-box{max-width:none !important;width:100% !important;min-height:100dvh;border-radius:0 !important}

  /* Cash Shop: menu de categorias vira faixa horizontal em cima */
  .cash-cab{flex-wrap:wrap;gap:6px !important;padding:10px 12px !important}
  .cash-cab small{display:none !important}
  .cash-corpo-wrap{flex-direction:column !important;min-height:0}
  .cash-nav{width:auto !important;display:flex !important;flex-direction:row !important;overflow-x:auto;gap:6px;padding:8px !important;
    border-right:none !important;border-bottom:1px solid var(--mi-fio);flex:none;scrollbar-width:none}
  .cash-nav::-webkit-scrollbar{display:none}
  #modal-cash .cash-cat{flex:none;width:auto !important;min-height:40px !important;margin:0 !important;padding:4px 10px 4px 4px !important}
  #modal-cash .cash-cat-ico{width:30px !important;height:30px !important}
  .cash-corpo{padding:10px !important;min-width:0}
  .cash-grade{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important}

  /* Hunts */
  .hunts-cab{flex-wrap:wrap;gap:8px;padding:10px 12px !important}
  .hunts-cards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important}

  /* grades das janelas mais estreitas */
  .grade{grid-template-columns:repeat(auto-fill,minmax(148px,1fr)) !important;gap:8px !important}
  .rol-carta{transform:scale(.9)}

  /* Mark e outras linhas de loja: ícone + nome numa linha, botões na de baixo */
  .loja-item{flex-wrap:wrap !important;row-gap:6px !important;column-gap:8px !important}
  .loja-item > div:not(.espaco){flex:1 1 calc(100% - 110px) !important;min-width:0}
  .loja-item .espaco{display:none !important}
  .loja-item .loja-tem{flex:0 0 auto}
  .loja-item > button{flex:1 1 20% !important;min-width:0 !important;padding:7px 2px !important}

  /* balões de dica: no toque não há "passar o mouse", e eles grudavam na tela */
  [data-dica]::after,[data-dica]::before{display:none !important}
}

/* celular deitado / telas bem baixas: HUD ainda mais fina */
@media (max-width:900px) and (max-height:480px){
  header .h-lado{display:none !important}
  header .mi-char .boosts{display:none !important}
}