/* Acabamento mobile final: mantém a mesma identidade em retrato e paisagem,
   com alvos de toque confortáveis, texto legível e ações sempre alcançáveis. */
:root {
  --toque-min: 44px;
  --mobile-gap: clamp(8px, 2.4vw, 14px);
}

button, select, input, [role="button"] { touch-action: manipulation; }
button:active, [role="button"]:active { transform: translateY(1px) scale(.985); filter:brightness(1.12); }
.app-em-segundo-plano *, .app-em-segundo-plano *::before, .app-em-segundo-plano *::after { animation-play-state:paused !important; }

/* Preferência para aparelhos modestos: preserva informações e corta apenas
   efeitos caros. */
body.modo-economico *, body.modo-economico *::before, body.modo-economico *::after {
  backdrop-filter:none !important;
  filter:none !important;
  box-shadow:none !important;
}
body.modo-economico .particula,
body.modo-economico .particula-combate,
body.modo-economico .efeito-ambiente { display:none !important; }

/* Acessibilidade em blocos curtos, sem uma página interminável. */
.acc-painel { flex-direction:column; align-items:stretch; gap:10px; width:100%; }
.acc-intro { margin:0 0 2px; color:var(--hda-muted,#cbbda7); line-height:1.45; }
.acc-secao { border:1px solid rgba(224,174,83,.25); border-radius:12px; background:rgba(13,10,19,.46); overflow:hidden; }
.acc-secao > summary { cursor:pointer; min-height:46px; display:flex; align-items:center; padding:9px 12px; font-weight:800; color:#f6e5c2; }
.acc-secao[open] > summary { border-bottom:1px solid rgba(224,174,83,.18); background:rgba(224,174,83,.08); }
.acc-secao-corpo { display:grid; gap:12px; padding:12px; }
.acc-secao-corpo label { display:grid; gap:5px; line-height:1.35; }
.acc-secao-corpo label:has(input[type="checkbox"]) { grid-template-columns:24px 1fr; align-items:center; }
.acc-secao select, .acc-secao input:not([type="checkbox"]) { width:100%; min-height:46px; font:inherit; padding:8px 10px; }
.acc-secao input[type="checkbox"] { width:22px; height:22px; }
.acc-grupo-controles { width:100%; margin:0; padding:0; border:0; display:grid; gap:10px; }
.acc-preview { min-height:70px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px; border-radius:14px; border:1px dashed rgba(224,174,83,.4); background:linear-gradient(135deg,rgba(68,50,96,.45),rgba(12,19,30,.65)); }
.acc-preview span { letter-spacing:6px; font-size:1.15rem; }
.acc-preview b { border:2px solid #e0ae53; border-radius:999px; padding:10px; }
.acc-restaurar { width:100%; min-height:44px; }

/* Missões: resumo fixo e categorias; só o conteúdo escolhido ocupa espaço. */
.missoes-abas { position:sticky; top:0; z-index:4; display:flex; gap:6px; padding:7px 0; overflow-x:auto; scrollbar-width:none; background:linear-gradient(#17111f 75%,transparent); }
.missoes-abas button { flex:1 0 auto; min-height:42px; border-radius:999px; padding:7px 13px; }
.missoes-abas button.ativo { border-color:#f0b646; background:rgba(240,182,70,.18); color:#ffe5a8; }
.missoes-abas b { display:inline-grid; place-items:center; min-width:20px; min-height:20px; margin-left:3px; border-radius:20px; background:rgba(255,255,255,.1); }
.missoes-grupo[hidden] { display:none !important; }
.missao-ver-mapa { margin-top:9px; min-height:42px; }
.missoes-vazio { padding:24px 10px; text-align:center; opacity:.72; }

@media (pointer:coarse) {
  button, select, input[type="button"], input[type="submit"], [role="button"] { min-height:var(--toque-min); }
  button:focus-visible, select:focus-visible, input:focus-visible, [role="button"]:focus-visible { outline:3px solid #ffd36a; outline-offset:2px; }
}

@media (max-width:719px) {
  /* Nunca use texto microscópico para caber: o conteúdo passa a rolar na
     direção apropriada. */
  .party-nivel, .party-vitais small, .hda-ladrilho-rar, .desc, .ld-meta,
  .ld-ajuda, .arv-no-tipo, .arv-no-trava, .arv-no-ok { font-size:max(.75rem,12px); }

  #modal-conteudo { padding-bottom:calc(82px + env(safe-area-inset-bottom)); }
  #modal-conteudo > .fechar { position:sticky; top:0; z-index:12; min-height:44px; }
  /* NAVEGAÇÃO PRINCIPAL NÃO ROLA DE LADO.
     MEDIDO em 320/390/430 px: a barra tem 502 px de conteúdo em 252/315/351
     px de espaço, então a SEGUNDA aba — "💠 Caminhos e Herança" — ficava
     inteira fora da tela (206/140/102 px de folga escondida). Ela rola, sim,
     e portanto nada estava tecnicamente inacessível; o problema é outro e é
     pior: com `scrollbar-width:none` não há nenhuma pista de que existe uma
     segunda aba. Num celular de 390 px o jogador vê UMA aba e conclui que o
     painel tem uma seção só.
     São duas abas. Elas cabem em duas linhas, e duas linhas de 44 px custam
     menos que uma seção inteira invisível. `.arv-abas` (lista de ramos, que
     é longa de verdade) continua rolando. */
  .progressao-heroi-nav { display:flex; overflow-x:visible; flex-wrap:wrap; gap:5px; padding:3px; margin-bottom:4px; }
  .progressao-heroi-nav button { flex:1 1 42%; min-height:44px; padding:5px 8px; font-size:.84rem; }
  /* MEDIDO em 320×700: com a navegação em duas linhas, mais o botão Fechar,
     mais o título, mais as abas, mais a caixa de pontos, o primeiro talento da
     árvore começava a 645 px e o ladrilho terminava 9 px ABAIXO da tela. A
     árvore é o conteúdo da tela — ela não pode nascer cortada. Estes recortes
     são todos de espaço morto: margem de título, respiro de caixa, nada de
     alvo de toque (os 44 px continuam de pé). */
  #modal-conteudo > .fechar { margin:2px 0 4px; }
  #modal-conteudo > h2 { margin:2px 0 6px; font-size:clamp(1rem,4.4vw,1.2rem); }
  .arv-abas { display:flex; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .arv-abas button { flex:1 0 auto; min-height:44px; }
  .arv-sub, .arv-ramo-desc, .arv-no-desc, .arv-no-tipo, .arv-legenda { display:none; }
  .arv-topo { padding:7px 9px; margin-bottom:7px; }
  .arv-no { padding:8px; margin-bottom:5px; }
  .arv-grade { max-height:calc(100dvh - 330px); overflow-y:auto; overscroll-behavior:contain; padding-right:3px; }

  /* Time em trilho horizontal: todos continuam acessíveis sem empurrar a
     mochila vários painéis para baixo. */
  .party-fileira { display:flex !important; flex-wrap:nowrap !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; padding:4px 3px 12px; scrollbar-width:thin; }
  .party-fileira .party-card { flex:0 0 min(74vw,260px); width:auto; scroll-snap-align:start; }
  /* FILTROS E BUSCA DA MOCHILA — corrigido na origem.
     Esta regra dizia `flex-wrap:nowrap !important; overflow-x:auto`: os
     filtros viravam um trilho horizontal e a busca começava em x=661 numa
     tela de 390px. Tecnicamente dava para arrastar até ela; na prática
     ninguém arrasta um trilho sem barra (`scrollbar-width:none`) para
     descobrir que existem mais filtros. Medido: 617px de conteúdo fora da
     área visível em 320, 390 e 430px — a mesma sobra nas três, porque a
     fileira nunca quebrava.
     Agora quebra em linhas. Os filtros se acomodam na largura que houver e a
     busca ocupa uma linha só dela. Sem rolagem horizontal, sem !important
     brigando com a folha de baixo. */
  .party-abas, .party-filtros {
    display:flex; flex-wrap:wrap; overflow-x:visible;
    gap:6px; align-items:center;
  }
  .party-abas > *, .party-filtros > * { flex:0 1 auto; min-height:44px; }
  /* A busca é o único item que ganha a linha inteira: é um campo de texto, e
     dividir linha com chips a deixaria estreita demais para digitar. */
  .party-filtros .party-busca-wrap { flex:1 0 100%; order:99; min-width:0; }
  .party-filtros .party-busca-wrap .party-busca { width:100%; min-height:44px; box-sizing:border-box; }
  /* Os chips de categoria repartem a linha em vez de transbordar. `min-width:0`
     é o que permite o texto encolher em vez de empurrar a caixa. */
  .party-filtros > button, .party-abas > button { min-width:0; }
  .party-carregar-mais { width:100%; margin-top:8px; }

  .missao-rastreada-resumo { padding:12px; }
  .missao-card { align-items:stretch; }
  .missao-card .missao-acoes { width:100%; }
  .missao-card .missao-acoes button { width:100%; }

  .tutorial-topo, .tutorial-rodape { padding-left:max(10px,env(safe-area-inset-left)); padding-right:max(10px,env(safe-area-inset-right)); }
  .tutorial-rodape { gap:6px; }
  .tutorial-rodape > span { font-size:.72rem; text-align:center; }
}

/* Paisagem baixa: duas zonas claras. O jogo permanece à esquerda/centro e
   ações/configuração ganham uma faixa estável sem cobrir combatentes. */
@media (pointer:coarse) and (orientation:landscape) and (max-height:540px) {
  :root { --toque-min:40px; }
  #modal-conteudo { width:min(96vw,1080px); max-height:96dvh; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); }
  #modal-conteudo h2 { font-size:1.05rem; margin:4px 0 7px; }
  #modal-conteudo > .fechar { min-height:38px; }
  .acc-painel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .acc-intro, .acc-painel > .desc, .acc-painel > button { grid-column:1/-1; }
  .acc-secao > summary { min-height:40px; }
  .party-fileira .party-card { flex-basis:min(34vw,230px); }
  .party-fileira .party-card { display:grid; grid-template-columns:52px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; min-height:72px; padding:7px; }
  .party-fileira .party-retrato { grid-row:1/3; width:48px; height:48px; }
  .party-fileira .party-nome { align-self:end; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .party-fileira .party-nivel { align-self:start; }
  .party-fileira .party-vitais, .party-fileira .party-slots { display:none; }
  #modal-conteudo:has(.arv-grade) { display:flex; flex-direction:column; height:96dvh; overflow:hidden; }
  #modal-conteudo:has(.arv-grade) > h2 { display:none; }
  #modal-conteudo:has(.arv-grade) .arv-grade { flex:1 1 auto; min-height:90px; max-height:none; overflow-y:auto; }
  #modal-conteudo:has(.arv-grade) .arv-reset:disabled { display:none; }
  .missoes-abas { padding:4px 0; }
  .missao-rastreada-resumo { display:grid; grid-template-columns:1fr auto; column-gap:12px; align-items:center; }
  .missao-rastreada-resumo h3,.missao-rastreada-resumo p,.missao-rastreada-resumo small { grid-column:1; }
  .missao-rastreada-resumo .missao-ver-mapa { grid-column:2; grid-row:1/5; }
  .tutorial-corpo { grid-template-columns:minmax(220px,.8fr) minmax(360px,1.2fr); overflow:auto; }
  .tutorial-explica { align-self:start; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}