/* v0.5.0: Árvore de Melhorias, moedas no HUD e o bloco "Moedas da partida" do fim (docs/v050/ARVORE.md §7).
   Arquivo próprio (carrega depois do estilo.css): não mexe no estilo das outras telas. Fonte mínima de 16 px. */

/* ---------- HUD: contador de moedas embaixo dos abates (à esquerda do botão de pausa, na mesma altura) ---------- */
.hud-moedas {
  position: absolute; right: calc(1.2vw + clamp(36px, 4.6vh, 54px) + 0.8vw); top: clamp(62px, 8.6vh, 100px);
  height: clamp(36px, 4.6vh, 54px);
  display: flex; align-items: center; gap: 0.35em;
  font-size: clamp(16px, 2.4vh, 28px); font-weight: 700; color: #ffd36b; text-shadow: 2px 2px 0 #0d0a10;
}
.hud-moedas .hud-icone { color: #ffd36b; }

/* ---------- fim da partida ---------- */
.fim-corpo { display: flex; gap: 3vw; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.fim-moedas {
  min-width: min(440px, 80vw); padding: 1.2vh 1.4vw; background: rgba(13, 10, 16, 0.55); border: 3px solid #e8a72c;
  font-size: clamp(16px, 2vh, 22px);
}
.fim-moedas.dev { border-color: #6ab86a; }
.fim-moedas-titulo { display: flex; align-items: center; gap: 0.4em; margin: 0 0 0.4em; font-size: clamp(18px, 2.5vh, 28px); color: #ffd36b; }
.fim-moedas-titulo .botao-icone { color: #ffd36b; }
.fim-moedas-lista { list-style: none; margin: 0; padding: 0; }
.fim-moedas-linha { display: flex; align-items: center; gap: 0.45em; line-height: 1.35; }
.fim-moedas-icone { width: 1em; height: 1em; flex: none; color: #ffd36b; }
.fim-moedas-icone svg { width: 100%; height: 100%; display: block; }
.fim-moedas-nome { flex: 1; color: var(--quimono); }
.fim-moedas-valor { min-width: 3.5em; text-align: right; color: #ffffff; font-weight: 700; }
.fim-moedas-menos .fim-moedas-valor { color: #ff9a8a; }   /* v0.9.1: Rerrolar pago com as moedas da partida */
.fim-moedas-total {
  display: flex; justify-content: space-between; margin: 0.35em 0 0; padding-top: 0.3em; border-top: 2px solid #5c4a70;
  font-size: 1.15em; font-weight: 700; color: #ffd36b;
}
.fim-moedas-carteira { margin: 0.2em 0 0; color: #ffffff; text-align: right; }
.fim-moedas .dica { margin-top: 0.4em; font-size: clamp(16px, 1.9vh, 20px); max-width: 26em; }

/* ---------- seleção de personagem: botão "Árvore de {nome}" ---------- */
.botao-arvore-selecao { display: flex; align-items: center; gap: 0.5em; }

/* ---------- tela da árvore ---------- */
.caixa-arvore { width: min(1240px, 96vw); max-height: 96vh; gap: 1.1vh; padding: 1.8vh 1.6vw; overflow-y: auto; }
.arvore-topo { display: flex; align-items: center; justify-content: space-between; gap: 1.2vw; width: 100%; flex-wrap: wrap; }
.arvore-topo .titulo-tela { font-size: clamp(24px, 4.2vh, 48px); }
.arvore-abas { display: flex; gap: 0.6vw; flex-wrap: wrap; justify-content: center; }
.arvore-aba { display: flex; align-items: center; gap: 0.4em; font-size: clamp(16px, 2.2vh, 26px); padding: 0.2em 0.7em; }
/* v1.0.0 (auditoria P-07/INT-11): o ícone da aba é o rostinho 80x80 (rosto-<id>.png), reduzido suave; antes era o
   retrato de corpo inteiro (535 px) encolhido ~16x com pixelated: busto serrilhado e sem rosto */
.arvore-aba-retrato { width: 1.6em; height: 1.6em; flex: none; image-rendering: auto; }
.arvore-contadores { display: flex; flex-direction: column; align-items: flex-end; font-size: clamp(16px, 2vh, 22px); color: var(--quimono); }
.arvore-moedas { display: flex; align-items: center; gap: 0.35em; color: #ffd36b; font-weight: 700; font-size: 1.15em; }
.arvore-moedas .botao-icone { color: #ffd36b; }
.arvore-meio { display: flex; flex-direction: column; align-items: center; gap: 0.4vh; flex: 1; min-width: 0; }
/* v1.0.0 (auditoria INT-02/ARV-ABAS-720): no PC as abas ganham uma linha só delas, embaixo do título e dos contadores.
   Antes ficavam espremidas entre os dois e quebravam (3+1 no ES em 720p/768p; uma coluna em 1080p, que fazia a caixa
   rolar). No celular (body.toque, css/toque.css) o topo continua numa linha só. */
body:not(.toque) .arvore-meio { order: 3; flex: 1 1 100%; }
.arvore-subtitulo { margin: 0; font-size: 16px; color: var(--quimono); opacity: 0.85; text-align: center; }

.arvore-ramos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2vw; width: 100%; }
.arvore-ramo { background: rgba(13, 10, 16, 0.45); border: 3px solid #5c4a70; padding: 0.8vh 0.8vw; }
.arvore-ramo-nome {
  display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 0.4vh;
  font-size: clamp(18px, 2.6vh, 30px); color: var(--laranja);
}
.arvore-ramo-pt { font-size: 0.7em; color: var(--quimono); opacity: 0.85; }
.arvore-tier { display: flex; align-items: center; gap: 0.4vw; padding: 0.5vh 0; border-top: 2px dashed #3e3150; }
.arvore-tier:first-of-type { border-top: 0; }
.arvore-tier-rotulo { width: 3.4em; flex: none; font-size: 16px; color: var(--quimono); opacity: 0.85; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em; }
.arvore-tier.fechado .arvore-tier-rotulo { color: #9c90a8; }
.arvore-tier-req { font-size: 16px; }
.arvore-cadeado { width: 1em; height: 1em; display: inline-block; }
.arvore-cadeado svg { width: 100%; height: 100%; display: block; }
.arvore-nos { display: flex; flex-wrap: wrap; gap: 0.4vw; }

.arvore-no {
  position: relative; width: clamp(46px, 7vh, 72px); height: clamp(46px, 7vh, 72px); padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--fonte); color: #ffffff; cursor: pointer;
  background: var(--escuro); border: 3px solid #ffffff; border-radius: 0;
}
.arvore-no-icone { width: 55%; height: 55%; }
.arvore-no-icone svg { width: 100%; height: 100%; display: block; }
.arvore-no-nivel { font-size: 16px; line-height: 1; font-weight: 700; }
.arvore-no.caro { border-color: #b9aec4; color: #d8cfe0; }
.arvore-no.maximo { border-color: #e8a72c; color: #ffd36b; background: #3a2a14; }
.arvore-no.tem:not(.maximo) { background: #2f2340; }
.arvore-no.gratis { border-style: dashed; }
.arvore-no.fechado { border-color: #5c4a70; color: #6f6380; background: #16101b; }
.arvore-no-cadeado { position: absolute; right: 2px; top: 2px; width: 34%; height: 34%; color: #b9aec4; }
.arvore-no-cadeado svg { width: 100%; height: 100%; display: block; }
.arvore-no:focus { outline: none; box-shadow: 0 0 0 4px var(--laranja); transform: translateY(-2px); }
.arvore-no.piscou { animation: arvore-piscou 0.45s steps(3); }
@keyframes arvore-piscou { 0% { background: #ffffff; color: var(--escuro); } 100% { background: inherit; } }

/* v1.0.0 (auditoria INT-02): detalhe e rodapé com flex: none, pra não encolherem abaixo do texto quando a caixa aperta
   (o min-height de 6.5em deixava o detalhe ficar menor que o conteúdo: nome e custo em cima das bordas) */
.arvore-detalhe {
  display: flex; align-items: center; gap: 1.4vw; width: 100%; min-height: 6.5em; flex: none;
  padding: 0.8vh 1vw; background: rgba(13, 10, 16, 0.55); border: 3px solid var(--roxo);
}
.arvore-detalhe-texto { flex: 1; }
.arvore-detalhe p { margin: 0.15em 0; }
.arvore-detalhe-nome { display: flex; align-items: center; gap: 0.4em; font-size: clamp(18px, 2.6vh, 30px); font-weight: 700; color: var(--laranja); }
.arvore-detalhe-icone { width: 1.1em; height: 1.1em; flex: none; color: #ffffff; }
.arvore-detalhe-icone svg { width: 100%; height: 100%; display: block; }
.arvore-detalhe-nivel { font-size: 0.75em; color: var(--quimono); font-weight: 400; }
.arvore-detalhe-desc { font-size: clamp(16px, 2vh, 22px); line-height: 1.3; }
.arvore-detalhe-custo { font-size: clamp(16px, 2vh, 22px); color: #ffe7b8; }
.arvore-detalhe-custo.sem { color: #ff9c8a; }
.arvore-detalhe-msg { font-size: clamp(16px, 2vh, 22px); color: #b8ffb8; }
.arvore-detalhe-botoes { display: flex; gap: 0.8vw; flex: none; }
.arvore-comprar, .arvore-pimenta { font-size: clamp(18px, 2.6vh, 30px); padding: 0.4em 1.1em; }

.arvore-rodape { display: flex; align-items: center; justify-content: space-between; gap: 1.2vw; width: 100%; flex: none; }
.arvore-rodape .botao { font-size: clamp(18px, 2.5vh, 28px); padding: 0.35em 1.1em; }
.arvore-progresso { font-size: clamp(16px, 2.2vh, 26px); color: #ffd36b; font-weight: 700; text-align: center; }
.caixa-arvore > .dica { font-size: clamp(16px, 1.9vh, 20px); }

/* recordes: % da árvore naquela partida */
.marca-arvore { margin-left: 0.4em; font-size: 0.75em; color: #ffd36b; opacity: 0.9; }

/* tela estreita: os ramos empilham (com rolagem) */
@media (max-width: 900px) {
  .arvore-ramos { grid-template-columns: 1fr; }
  .arvore-detalhe { flex-direction: column; align-items: stretch; }
  .arvore-rodape { flex-wrap: wrap; justify-content: center; }
}