/* v0.9.0 (pedido 35): CELULAR. Tudo aqui só vale com body.toque, que o js/nucleo/toque.js liga em aparelho de toque
   (ponteiro "grosso" ou o 1º toque de verdade). No PC sem toque nenhuma regra daqui pega.
   Carrega por ÚLTIMO (depois de todos os CSS): o que repete aqui, vale aqui.
   Partes: 1. geral (qualquer toque)  2. joystick e golpe  3. aviso de girar  4. celular deitado (altura até 540 px). */

/* =====================================================================
   1. geral: sem zoom/seleção/realce de toque; alvos de pelo menos 44 px
   ===================================================================== */
html.toque, body.toque {
  touch-action: none;                    /* nada de zoom de pinça nem toque duplo na página */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  overscroll-behavior: none;
}
body.toque input, body.toque textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* o que rola por dentro (créditos, conquistas, árvore, ficha da pausa, tela comprida) rola com o dedo */
body.toque .tela, body.toque .caixa-menu, body.toque .aba-painel, body.toque .cq-grade, body.toque .caixa-arvore,
body.toque .arvore-ramos, body.toque .pausa-build, body.toque .pausa-detalhe, body.toque .caixa-pausa,
body.toque .transicao-cartas {
  touch-action: pan-x pan-y; overscroll-behavior: contain;
}
/* revisão: em QUALQUER tamanho de toque (tablet em pé 768x1024 incluso), tela que não cabe rola por dentro em vez de
   esconder o Voltar fora da tela ("safe center" não corta o topo). Sem sobra, nada muda. */
body.toque .tela { overflow-y: auto; justify-content: safe center; }
/* alvo de toque: 44 px no mínimo (todo botão: menus, opções, abas, cards, bandeiras, cartas da pausa, nós da árvore).
   Só em <button>: num card de grade com altura limitada (conquistas) o min-height cortava o conteúdo. */
body.toque #ui button, body.toque #ui .botao { min-height: 44px; min-width: 44px; }
body.toque #ui .bandeira { min-width: 66px; }
/* casinhas do nome no recorde: tocar numa abre o teclado do celular */
body.toque .nome-casa { min-width: 44px; min-height: 44px; }
/* volume: a barra inteira tem 44 px de altura e o "pino" ficou grande pro dedo */
body.toque input.volume { height: 44px; }
body.toque input.volume::-webkit-slider-thumb { width: 30px; height: 40px; margin-top: -17px; }
body.toque input.volume::-moz-range-thumb { width: 30px; height: 40px; }
/* HUD: pausa maior (é o botão de pausa do celular); as moedas andam junto pra não ficar embaixo dele */
body.toque #hud .hud-pausa { width: 52px; height: 52px; padding: 8px; }
body.toque #hud .hud-moedas { right: calc(1.2vw + 52px + 0.8vw); height: 52px; }
/* a tecla "Espaço" da caixa do golpe some: o golpe é o botão redondo da direita */
body.toque .hud-golpe-tecla { display: none; }
/* revisão: notebook com tela de toque que voltou pro teclado: a linha "Celular: ..." do Saiba Mais > Controles some */
body:not(.toque) .controles-toque { display: none; }
/* dicas que só falam de teclado e mouse (revisão: + a da troca de fase, "1 a 8 ... Confirme com Enter") */
body.toque .pausa-cartas-dica, body.toque .caixa-arvore > .dica,
body.toque .transicao-passo[data-passo="cartas"] > .dica { display: none; }

/* =====================================================================
   2. joystick (metade esquerda) e botão do golpe (embaixo à direita)
   ===================================================================== */
#toque { position: absolute; inset: 0; pointer-events: none; }
#toque[hidden] { display: none; }
#toque .toque-zona { position: absolute; left: 0; top: 0; bottom: 0; width: 55%; touch-action: none; }
#toque.jogando .toque-zona { pointer-events: auto; }
#toque .toque-joy {
  position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
  background: rgba(27, 20, 32, 0.35); border: 3px solid rgba(206, 203, 211, 0.55);
  box-shadow: 0 0 0 3px rgba(13, 10, 16, 0.45);
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
}
#toque.jogando .toque-joy { opacity: 0.4; }            /* parado: "fantasma" mostrando onde encostar */
#toque.jogando .toque-joy.ativo { opacity: 0.95; }
#toque .toque-joy-pino {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; border-radius: 50%;
  background: var(--laranja); border: 3px solid #0d0a10; box-shadow: inset 0 -5px 0 var(--laranja-escuro);
  transform: translate(-50%, -50%);
}
#toque .toque-golpe {
  position: absolute; right: max(20px, 3vw); bottom: max(18px, 4vh); width: 86px; height: 86px; border-radius: 50%;
  display: none; touch-action: none; cursor: pointer;
}
#toque.jogando .toque-golpe { display: block; pointer-events: auto; }
#toque.jogando .toque-golpe[hidden] { display: none; }
/* anel = recarga do golpe (enche no sentido do relógio); cheio e aceso = pronto */
#toque .toque-golpe-anel {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#a77bff calc(var(--carga, 1) * 360deg), rgba(43, 29, 46, 0.85) 0);
  box-shadow: 0 0 0 3px #0d0a10, 0 5px 0 3px rgba(13, 10, 16, 0.6);
}
#toque .toque-golpe.pronto .toque-golpe-anel { background: #c9a3ff; }
#toque .toque-golpe-icone {
  position: absolute; inset: 9px; border-radius: 50%; padding: 13px;
  background: #2a1f33; color: #c9a3ff; border: 3px solid #0d0a10;
}
#toque .toque-golpe.pronto .toque-golpe-icone { color: #ffffff; }
#toque .toque-golpe-icone svg { width: 100%; height: 100%; display: block; filter: drop-shadow(1px 1px 0 #0d0a10); }
#toque .toque-golpe.apertado { transform: translateY(3px); }
#toque .toque-golpe.apertado .toque-golpe-icone { background: #4a3560; }

/* =====================================================================
   3. aviso de girar (celular em pé): por cima de tudo, até do rodapé do site
   ===================================================================== */
.toque-girar { display: none; }
@media (orientation: portrait) and (max-width: 700px) {
  body.toque .toque-girar {
    position: fixed; inset: 0; z-index: 9800;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px;
    background: radial-gradient(ellipse at 50% 40%, rgba(149, 116, 177, 0.35), transparent 65%), linear-gradient(180deg, #2a1f33 0%, #1b1420 100%);
    text-align: center; touch-action: none;
  }
}
.toque-girar-celular {
  width: 58px; height: 96px; border: 5px solid var(--quimono); background: #120d16; position: relative;
  box-shadow: 0 6px 0 var(--roxo-escuro); animation: toque-girar 2.2s steps(1) infinite;
}
.toque-girar-celular span { position: absolute; left: 50%; bottom: 6px; width: 12px; height: 4px; margin-left: -6px; background: var(--quimono); }
@keyframes toque-girar { 0%, 45% { transform: rotate(0deg); } 50%, 95% { transform: rotate(-90deg); } }
.toque-girar-titulo { margin: 0; font-size: 30px; font-weight: 700; color: var(--laranja); text-shadow: 3px 3px 0 var(--escuro); }
.toque-girar-texto { margin: 0; max-width: 22em; font-size: 18px; line-height: 1.35; color: var(--quimono); }
@media (prefers-reduced-motion: reduce) { .toque-girar-celular { animation: none; transform: rotate(-90deg); } }

/* =====================================================================
   4. celular DEITADO (altura até 540 px; testado em 844x390, 740x360 e 915x412)
   O que não couber rola DENTRO da tela (nunca a página); "safe center" não corta o topo quando rola.
   ===================================================================== */
@media (max-height: 540px) {
  body.toque .tela { padding: 8px 14px; gap: 6px; overflow-y: auto; justify-content: safe center; }
  body.toque .titulo-tela { font-size: 22px; text-shadow: 2px 2px 0 var(--escuro), 3px 3px 0 var(--roxo-escuro); }
  body.toque .botao { font-size: 17px; padding: 0.4em 1.1em; box-shadow: 0 4px 0 var(--laranja-escuro), 0 4px 0 3px var(--escuro); }
  body.toque .botao-secundario { box-shadow: 0 4px 0 #8f8a99, 0 4px 0 3px var(--escuro); }
  body.toque .botao:disabled, body.toque .botao[aria-disabled="true"] { box-shadow: 0 4px 0 #5c5766, 0 4px 0 3px var(--escuro); }
  body.toque .botoes { gap: 10px; }
  body.toque .frase { font-size: 14px; }
  body.toque .dica { font-size: 12px; }
  body.toque .caixa-menu { max-height: none; padding: 8px 14px; gap: 6px; }

  /* ---------- início: retrato menor, menu em 2 colunas; o top 3 mora nos Recordes ---------- */
  body.toque .inicio-caixa { gap: 18px; }
  body.toque .inicio-retrato { height: min(58vh, 230px); }
  body.toque .titulo { font-size: 34px; text-shadow: 3px 3px 0 var(--escuro), 5px 5px 0 var(--roxo-escuro); }
  body.toque .subtitulo { font-size: 16px; margin: 0.2em 0 0.7em; }
  body.toque .menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
  body.toque .botao-menu { min-width: 0; font-size: 15px; padding: 0.3em 0.7em; white-space: nowrap; }
  body.toque .painel-top { display: none; }
  body.toque .versao { font-size: 12px; bottom: 6px; }
  /* v0.9.4 (pedido 47, resto do INT-15): no menu do celular o aviso de conquista (360 px, canto de baixo à direita) cobria
     os botões de baixo à direita por uns 4 s. Aqui ele vira um aviso compacto no canto de baixo à ESQUERDA, por cima dos
     pés do retrato do Musashi (enfeite, não botão): até 30vw de largura (o menu começa depois do retrato) e letra menor.
     Entra e sai pela esquerda. */
  body.toque[data-cena-atual="inicio"] .toast-conquista {
    top: auto; right: auto; left: 8px; bottom: 8px; width: min(250px, 30vw); gap: 0.5em; padding: 0.4em 0.55em;
    transform: translateX(calc(-100% - 24px));
  }
  body.toque[data-cena-atual="inicio"] .toast-conquista.entrando { transform: translateX(0); }
  body.toque[data-cena-atual="inicio"] .toast-conquista.saindo { transform: translateX(calc(-100% - 24px)); }
  body.toque[data-cena-atual="inicio"] .tc-icone { width: 30px; height: 30px; padding: 4px; border-width: 2px; }
  body.toque[data-cena-atual="inicio"] .tc-titulo, body.toque[data-cena-atual="inicio"] .tc-info,
  body.toque[data-cena-atual="inicio"] .tc-resgate { font-size: 11px; line-height: 1.2; }
  body.toque[data-cena-atual="inicio"] .tc-nome { font-size: 13px; line-height: 1.2; }

  /* ---------- seleção (fase, personagem, poder): título e Voltar na 1ª linha, cards no meio, dica embaixo ---------- */
  body.toque .tela-selecao {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto;
    align-content: safe center; column-gap: 12px; row-gap: 6px;
  }
  body.toque .tela-selecao > .titulo-tela { grid-column: 1; grid-row: 1; align-self: center; text-align: left; }
  body.toque .tela-selecao > .botoes, body.toque .tela-selecao > .botao { grid-column: 2; grid-row: 1; align-self: center; flex-wrap: nowrap; }
  body.toque .tela-selecao > .cards { grid-column: 1 / -1; grid-row: 2; gap: 8px; }
  body.toque .tela-selecao > .dica, body.toque .tela-selecao > .selecao-detalhe { grid-column: 1 / -1; grid-row: 3; text-align: center; }
  body.toque .tela-selecao .botao { font-size: 15px; padding: 0.3em 0.8em; }
  /* personagem: 2x2 cards deitados (retrato à esquerda; ofensivos e defensivos lado a lado) */
  body.toque #cards-personagem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  body.toque #cards-personagem .card-personagem {
    max-width: none; flex-direction: row; align-items: center; gap: 8px; padding: 5px 8px;
    box-shadow: 0 4px 0 var(--roxo-escuro);
  }
  body.toque #cards-personagem .card-personagem:focus { transform: translateY(-2px); box-shadow: 0 6px 0 var(--laranja-escuro); }
  body.toque #cards-personagem .personagem-moldura { height: min(25vh, 104px); flex: none; }
  body.toque #cards-personagem .personagem-texto { flex: 1; min-width: 0; gap: 2px; }
  body.toque #cards-personagem .card-nome { font-size: 18px; text-align: left; }
  body.toque #cards-personagem .personagem-titulo { display: none; }
  body.toque #cards-personagem .personagem-status { flex-direction: row; gap: 10px; margin: 0; }
  body.toque #cards-personagem .personagem-status > * { flex: 1; min-width: 0; }
  body.toque #cards-personagem .status-titulo { font-size: 12px; margin: 0; }
  body.toque #cards-personagem .status-lista { gap: 0; }
  body.toque #cards-personagem .status-item { font-size: 11px; line-height: 1.15; gap: 4px; grid-template-columns: 1.2em auto 1fr; }
  body.toque #cards-personagem .status-valor { min-width: 2.6em; }
  body.toque .selecao-detalhe { font-size: 12px; min-height: 2.6em; max-width: none; }
  /* poder: 3 cards baixinhos */
  body.toque #cards-poder .card-poder { width: min(260px, 31vw); gap: 4px; padding: 8px 8px 6px; box-shadow: 0 4px 0 var(--roxo-escuro); }
  body.toque #cards-poder .card-poder:focus { transform: translateY(-2px); box-shadow: 0 6px 0 var(--laranja-escuro); }
  body.toque .card-icone { width: 40px; height: 40px; }
  body.toque .card-nome { font-size: 17px; }
  body.toque .card-elemento { font-size: 12px; }
  body.toque .card-desc { font-size: 12px; min-height: 0; }
  body.toque .card-status { font-size: 12px; }
  body.toque .card-golpes { font-size: 11px; }
  /* fase: cards menores */
  body.toque .card-fase { padding: 8px 10px; gap: 4px; }
  body.toque .card-fase .card-nome { font-size: 20px; }
  body.toque .card-fase .card-desc { font-size: 12px; }
  body.toque .card-fase-checkpoint { font-size: 12px; }

  /* ---------- level up e troca de fase: cartas mais baixas ---------- */
  body.toque .tela-levelup { gap: 6px; padding-left: 64px; padding-right: 64px; }   /* a pausa do HUD fica livre à direita */
  body.toque .cartas { gap: 10px; flex-wrap: nowrap; }
  body.toque .carta { gap: 3px; padding: 8px 8px 6px; box-shadow: 0 4px 0 var(--roxo-escuro); }
  body.toque .carta:focus { transform: translateY(-3px); box-shadow: 0 7px 0 var(--laranja-escuro); }
  body.toque #levelup-cartas .carta { width: min(250px, 31vw); }
  /* v0.9.4 (pedido 47): as 3 cartas passam do recuo de 64 px (a carta 3 vai até 807 px em 844) e o botão de pausa do HUD
     (canto de cima à direita) ficava por cima do rostinho da carta 3. Com a tela de nível aberta, a pausa desce pro canto
     de BAIXO à direita, que fica livre (embaixo da carta 3 e à direita do Rerrolar, do Passo a Vez e da dica); fecha a
     tela, ela volta pro lugar. Estreitar as cartas não serve: elas crescem pra baixo e a tela passa a rolar em 740x360 e
     667x375 (a v0.9.3 garante que não rola). Mesmo jeito do contador de moedas, que sobe pro topo (v0.9.1). */
  body.toque:has(#tela-levelup:not([hidden])) #hud .hud-pausa { top: auto; bottom: 8px; }
  body.toque .carta-icone { width: 40px; height: 40px; }
  body.toque .carta-rosto { width: 36px; height: 36px; }
  body.toque .carta-num { font-size: 15px; }
  body.toque .carta-nome { font-size: 16px; }
  body.toque .carta-tag { font-size: 12px; }
  body.toque .carta-texto { font-size: 12px; min-height: 0; }
  body.toque .carta-levar { width: min(190px, 22vw); }   /* 22vw: 4 por linha também em 740 px (com 23 caíam 3) */
  /* v0.9.1: com a tela de nível aberta, a carta 3 cobria o contador de moedas do HUD (o Rerrolar pago usa ele). Ele sobe
     pra faixa livre do topo, à esquerda do nível e dos abates, e fica acima do escurecido da tela, como a pausa (z 3; a
     Pausa aberta, z 4, continua por cima). Fecha a tela, ele volta pro lado da pausa. No PC nada muda. */
  body.toque:has(#tela-levelup:not([hidden])) #hud .hud-moedas { top: 4px; height: 36px; z-index: 3; }
  body.toque .transicao-viagem .frase { font-size: 16px; }
  /* troca de fase (até 8 cartas): título, frase e "Levar essa!" sempre à vista; só as cartas rolam (revisão: antes a
     tela inteira rolava e o "Levar essa!" ficava escondido embaixo) */
  body.toque .transicao-passo[data-passo="cartas"] { max-height: 100%; min-height: 0; width: 100%; gap: 5px; }
  body.toque .transicao-passo[data-passo="cartas"] .transicao-cartas {
    flex: 0 1 auto; min-height: 0; width: 100%; overflow-y: auto; gap: 10px; padding: 4px 4px 8px;
  }
  body.toque .tela-transicao .titulo-tela { font-size: 20px; }
  body.toque .transicao-passo[data-passo="cartas"] .frase { font-size: 13px; margin: 0; }

  /* ---------- baú ---------- */
  body.toque .caixa-bau { gap: 6px; padding: 10px 24px; }
  body.toque .bau-imagem { width: 64px; height: 64px; background-size: 128px 64px; background-position: -64px 0; }
  body.toque .bau-item { font-size: 16px; }

  /* ---------- pausa: menu | cartas; a lista e a ficha rolam por dentro ---------- */
  body.toque .caixa-pausa { gap: 16px; max-height: 100%; }
  body.toque .pausa-menu { gap: 8px; }
  body.toque .pausa-menu .botoes-coluna { gap: 8px; }
  /* v1.0.0 (lote L14): o teto descontava só o padding da tela (16 px), não a borda (8 px) e o padding (2 x 3.4vh) da
     caixa da Pausa: em 844x390 a coluna passava 34 px da caixa e a ficha da carta saía 9 px pelo pé da tela */
  body.toque .pausa-cartas { width: min(52vw, 520px); max-height: calc(100vh - 24px - 6.8vh); max-height: calc(100dvh - 24px - 6.8vh); gap: 5px; }
  body.toque .pausa-subtitulo { font-size: 14px; margin: 0; }
  body.toque .pausa-build { flex: 0 1 auto; min-height: 46px; overflow-y: auto; gap: 4px 6px; }
  body.toque .pausa-carta { font-size: 14px; }
  body.toque .pausa-detalhe { flex: 1 1 auto; min-height: 84px; font-size: 13px; padding: 6px 10px; }
  body.toque .pausa-msg { font-size: 13px; margin: 0; min-height: 0; }

  /* ---------- fim de jogo: resumo e moedas lado a lado, botões embaixo ---------- */
  body.toque .caixa-fim { gap: 6px; padding: 8px 16px; max-width: 100%; }
  body.toque .fim-corpo { flex-wrap: nowrap; gap: 14px; align-items: stretch; }
  body.toque .resumo { grid-template-columns: repeat(3, minmax(90px, 1fr)); gap: 4px 10px; margin: 0; }
  /* v1.0.0 (INT-05 no celular): aqui a grade tem 3 colunas; o poder inicial ocupa 2 (ao lado do Nível), não a linha inteira */
  body.toque .resumo div:has(> [data-campo="poder"]) { grid-column: span 2; }
  body.toque .resumo dt { font-size: 11px; }
  body.toque .resumo dd { font-size: 16px; }
  body.toque .fim-moedas { min-width: 0; width: min(320px, 40vw); padding: 6px 10px; font-size: 13px; }
  body.toque .fim-moedas-titulo { font-size: 15px; margin: 0 0 2px; }
  body.toque .fim-moedas .dica { font-size: 12px; }
  body.toque .fim-recorde { font-size: 13px; margin: 0; }
  /* v0.9.4 (pedido 47): no celular o balão (top 4px) ficava por cima do título da troca de fase e da Vitória (740x360)
     por alguns segundos. Agora essas 2 telas guardam uma faixa de 40 px no topo só pro balão, e o balão cabe nela: 1 linha
     larga (94vw), letra 12 px e sem o rabinho (que apontava pro título). A faixa fica sempre (com ou sem fala): assim
     nada pula quando o balão entra ou sai. Na troca de fase quem cede a altura é a lista das cartas, que já rola. */
  body.toque .fala-balao { top: 4px; font-size: 12px; line-height: 1.2; max-width: 94vw; padding: 0.3em 0.7em; }
  body.toque .fala-balao::after { display: none; }
  body.toque .tela-transicao { padding-top: 40px; }
  /* no fim, 38 + 6 embaixo: a caixa da Vitória (316 px em 740x360) cabe sem rolar; o balão vai até 36 com a sombra */
  body.toque section[data-cena="fim"] { padding-top: 38px; padding-bottom: 6px; }

  /* ---------- nome no recorde (fliperama) ---------- */
  body.toque .painel-nome { gap: 6px; padding: 10px 18px; max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); overflow-y: auto; }
  body.toque .painel-nome-titulo { font-size: 18px; }
  body.toque .painel-nome-posicao, body.toque .painel-nome-dica, body.toque .painel-nome-aviso { font-size: 13px; margin: 0; }
  body.toque .nome-roda { padding: 0.5em 0 0.4em; }
  body.toque .nome-casas { font-size: 30px; }

  /* ---------- recordes e conquistas: abas e Voltar na 1ª linha; embaixo, o painel ocupa o resto (a grade rola) ---------- */
  body.toque .caixa-recordes {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
    align-items: center; column-gap: 10px; row-gap: 6px; width: 100%; height: calc(100vh - 16px); height: calc(100dvh - 16px); overflow: hidden;
  }
  body.toque .caixa-recordes > .abas-recordes { grid-row: 1; grid-column: 1; justify-self: start; }
  body.toque .caixa-recordes > .botoes { grid-row: 1; grid-column: 2; flex-wrap: nowrap; }
  body.toque .caixa-recordes > .rec-aba-painel {
    grid-row: 2; grid-column: 1 / -1; align-self: stretch; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
  }
  body.toque .caixa-recordes .botao { font-size: 15px; padding: 0.3em 0.9em; }
  body.toque .aba-painel.cq-aba-raiz { max-height: none; overflow: hidden; }
  body.toque .cq-aba { flex: 1 1 auto; min-height: 0; }
  body.toque .cq-grade { flex: 1 1 auto; min-height: 60px; max-height: none; }
  body.toque .tabela-recordes { font-size: 13px; }
  body.toque .tabela-recordes th, body.toque .tabela-recordes td { padding: 0.2em 0.5em; }
  body.toque .abas-recordes { gap: 8px; }
  body.toque .rec-aba { font-size: 15px; }
  body.toque .aba-painel.cq-aba-raiz { width: 100%; padding: 4px 6px; }
  body.toque .cq-aba { gap: 5px; }
  body.toque .cq-titulo { font-size: 17px; }
  body.toque .cq-resumo, body.toque .cq-nenhuma { font-size: 13px; }
  body.toque .cq-filtros { gap: 6px; }
  body.toque .botao.cq-filtro { font-size: 14px; padding: 0.2em 0.7em; }
  body.toque .cq-card { font-size: 13px; }

  /* ---------- configurações ---------- */
  body.toque .caixa-config { min-width: min(760px, 96vw); gap: 2px; padding: 6px 14px; }
  body.toque .caixa-config .titulo-tela { font-size: 20px; }
  body.toque .config-linha { font-size: 15px; gap: 10px; }
  body.toque .opcao { font-size: 14px; padding: 0.25em 0.8em; }
  body.toque .config-dica { font-size: 11px; max-width: none; }
  body.toque .config-botoes .botao { font-size: 15px; }

  /* ---------- saiba mais (história, controles, créditos) ---------- */
  body.toque .caixa-saiba { width: 100%; }
  body.toque .aba { font-size: 15px; padding: 0.25em 0.9em; }
  body.toque .aba-painel { max-height: calc(100vh - 172px); max-height: calc(100dvh - 172px); font-size: 14px; padding: 6px 10px; }
  body.toque .caixa-saiba { gap: 6px; }
  body.toque .caixa-saiba .titulo-tela { font-size: 20px; }

  /* ---------- árvore: topo e rodapé fixos; só os ramos rolam; a ficha (com o Comprar) sempre à vista ---------- */
  body.toque .caixa-arvore { width: 100%; height: calc(100vh - 16px); height: calc(100dvh - 16px); max-height: none; overflow: hidden; gap: 5px; padding: 6px 10px; }
  body.toque .arvore-topo { flex-wrap: nowrap; gap: 10px; }
  body.toque .arvore-topo .titulo-tela { font-size: 18px; flex: none; }
  body.toque .arvore-meio { flex-direction: row; justify-content: flex-start; flex: none; }   /* v1.0.0: não encolhe abaixo das abas */
  body.toque .arvore-abas { gap: 5px; flex-wrap: nowrap; }
  body.toque .arvore-aba { font-size: 13px; padding: 0.15em 0.5em; }
  body.toque .arvore-subtitulo { display: none; }
  /* v1.0.0 (auditoria de gráficos, celular): os contadores é que cedem e quebram a linha do "Próximo ponto"; antes a
     aba da Borzilda ficava por cima do começo dessa linha (PT e ES em 844x390) */
  body.toque .arvore-contadores { font-size: 12px; flex: 1 1 auto; min-width: 0; text-align: right; }
  body.toque .arvore-ramos { flex: 1 1 auto; min-height: 0; overflow-y: auto; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.toque .arvore-ramo { padding: 4px 5px; }
  body.toque .arvore-ramo-nome { font-size: 15px; margin: 0; }
  body.toque .arvore-tier { gap: 3px; padding: 3px 0; }
  body.toque .arvore-tier-rotulo { width: 2.4em; font-size: 11px; }
  body.toque .arvore-tier-req { font-size: 11px; }
  body.toque .arvore-nos { gap: 3px; }
  body.toque .arvore-no { width: 44px; height: 44px; border-width: 2px; }
  body.toque .arvore-no-nivel { font-size: 12px; }
  body.toque .arvore-detalhe { flex-direction: row; align-items: center; flex: none; min-height: 0; gap: 10px; padding: 4px 8px; }
  body.toque .arvore-detalhe-nome { font-size: 15px; }
  body.toque .arvore-detalhe-desc, body.toque .arvore-detalhe-custo, body.toque .arvore-detalhe-msg { font-size: 12px; line-height: 1.25; }
  body.toque .arvore-comprar, body.toque .arvore-pimenta { font-size: 15px; padding: 0.3em 0.9em; }
  body.toque .arvore-rodape { flex: none; flex-wrap: nowrap; }
  body.toque .arvore-rodape .botao { font-size: 15px; padding: 0.25em 0.9em; }
  body.toque .arvore-progresso { font-size: 13px; }
}
/* celular deitado estreito (740 px ou menos): a árvore vai pra 2 ramos por linha; título da seleção cabe em 1 linha */
@media (max-height: 540px) and (max-width: 800px) {
  body.toque .tela-selecao > .titulo-tela { font-size: 18px; }
  body.toque .arvore-ramos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}