/* Universo das Descobertas — mesma família visual do resto do jogo (canvas,
   Drawer, Álbum): fundo profundo com campo de estrelas discreto, atmosferas
   de cor por região em vez de faixas técnicas/tracejadas. */
.arvore-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1.4px 1.4px at 10% 15%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.2px 1.2px at 32% 60%, rgba(255,255,255,0.28), transparent),
    radial-gradient(1.6px 1.6px at 58% 22%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.2px 1.2px at 78% 70%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1.4px 1.4px at 90% 35%, rgba(255,255,255,0.3), transparent),
    var(--cor-fundo);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

/* ---- cabeçalho: painel flutuante arredondado — um observatório pousado
   sobre o universo (nunca mais uma faixa full-width grudada na borda). O
   palco (.arvore-palco, abaixo) já tem o próprio fundo cósmico atenuado; o
   respiro ao redor deste cartão deixa esse universo aparecer por trás. ---- */
.arvore-cabecalho {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 10px 0;
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid rgba(150, 175, 255, 0.24);
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--era-elementos) 20%, transparent),
    color-mix(in srgb, var(--era-natureza) 17%, transparent) 22%,
    color-mix(in srgb, var(--era-vida) 15%, transparent) 42%,
    color-mix(in srgb, var(--era-tecnologia) 15%, transparent) 62%,
    color-mix(in srgb, var(--era-cultura) 17%, transparent) 82%,
    color-mix(in srgb, var(--era-ficcao) 20%, transparent)
  ), color-mix(in srgb, var(--cor-drawer) 66%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 1px 0 rgba(150, 175, 255, 0.12) inset,
    0 0 0 1px rgba(150, 175, 255, 0.08),
    0 14px 30px -16px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}
.arvore-cabecalho-estrelas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1.4px 1.4px at 8% 25%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.2px 1.2px at 22% 65%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.6px 1.6px at 46% 18%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.2px 1.2px at 64% 60%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.4px 1.4px at 82% 22%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.2px 1.2px at 94% 55%, rgba(255,255,255,0.35), transparent);
}
.arvore-cabecalho-topo {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.arvore-cabecalho-logo {
  height: 26px;
  width: auto;
  flex-shrink: 0;
  margin-top: 1px;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
}
.arvore-cabecalho-titulo { min-width: 0; flex: 1; }
.arvore-titulo {
  margin: 0;
  font-size: 17.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  background: linear-gradient(90deg, #bfe0ff 0%, #8ef0a8 22%, #ffb389 42%, #9ff2ff 62%, #ffdd8a 82%, #ffb3d9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}
.arvore-subtitulo { position: relative; margin: 2px 0 0; font-size: 12px; opacity: 0.85; line-height: 1.3; }
.arvore-fechar {
  position: relative;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, 0.1), transparent 70%),
    rgba(10, 14, 26, 0.5);
  color: var(--cor-texto);
  font-size: 12.5px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.arvore-fechar:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.6);
}

.arvore-ferramentas {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.arvore-busca-caixa {
  flex: 1 1 140px;
  min-width: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cor-orbe-ia) 25%, rgba(150, 175, 255, 0.22));
  background: rgba(6, 12, 28, 0.5);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.arvore-busca-icone { font-size: 13px; opacity: 0.8; flex-shrink: 0; }
.arvore-busca {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--cor-texto);
  font-size: 13px;
}
.arvore-busca:focus { outline: none; }
.arvore-busca-caixa:focus-within {
  border-color: var(--cor-orbe-ia);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--cor-orbe-ia) 45%, transparent);
}
.arvore-ver-tudo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--era-cultura) 45%, var(--cor-peca-borda));
  background:
    radial-gradient(120% 140% at 20% 0%, color-mix(in srgb, var(--era-cultura) 22%, transparent), transparent 70%),
    var(--cor-peca);
  color: var(--cor-texto);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow 140ms ease, transform 140ms ease;
}
.arvore-ver-tudo:hover, .arvore-ver-tudo:focus-visible {
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--era-cultura) 50%, transparent);
  outline: none;
}
.arvore-ver-tudo-icone { font-size: 13px; }
.arvore-atalhos-scroll {
  flex: 1 1 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.arvore-atalhos-scroll::-webkit-scrollbar { display: none; }
.arvore-atalhos { display: flex; gap: 7px; width: max-content; padding: 1px; }
.arvore-atalho {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--cor-atalho, var(--cor-borda)) 55%, transparent);
  background: color-mix(in srgb, var(--cor-atalho, transparent) 16%, rgba(10, 14, 26, 0.5));
  color: var(--cor-texto);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.arvore-atalho:hover, .arvore-atalho:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--cor-atalho, var(--cor-borda)) 55%, transparent);
  outline: none;
}
.arvore-atalho[data-era="elementos"] { --cor-atalho: var(--era-elementos); }
.arvore-atalho[data-era="natureza"] { --cor-atalho: var(--era-natureza); }
.arvore-atalho[data-era="vida"] { --cor-atalho: var(--era-vida); }
.arvore-atalho[data-era="tecnologia"] { --cor-atalho: var(--era-tecnologia); }
.arvore-atalho[data-era="cultura"] { --cor-atalho: var(--era-cultura); }
.arvore-atalho[data-era="ficcao"] { --cor-atalho: var(--era-ficcao); }
.arvore-atalho[data-era="ia"] { --cor-atalho: var(--cor-orbe-ia); color: var(--cor-orbe-ia); }

/* ---- palco: câmera (pan/zoom via transform em .arvore-mundo) ---- */
.arvore-palco {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--cor-canvas); /* base sólida antes da imagem decodificar */
  touch-action: none;
  cursor: grab;
}
/* mesma variante "cósmico atenuado" do Canvas principal (ver .canvas::before
   em styles/canvas.css): escurecida, dessaturada, véu azul-marinho por
   cima — a Árvore acontece dentro do mesmo universo, não numa tela azul
   antiga. Pseudo-elemento só decorativo: nunca fica na frente dos nós reais
   (pintado antes deles na ordem do documento). */
.arvore-palco::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 13, 26, 0.4), rgba(6, 9, 20, 0.62)),
    var(--url-fundo-cosmico) center / cover no-repeat;
  filter: saturate(0.5) brightness(0.4) contrast(0.94);
  pointer-events: none;
}
.arvore-mundo { position: absolute; inset: 0; transform-origin: 0 0; }

/* regiões concêntricas: atmosfera por gradiente, nunca um círculo com
   contorno rígido — a mais externa é pintada primeiro (embaixo), a mais
   interna por último (em cima), criando os "cinturões" por sobreposição */
.arvore-regioes { position: absolute; top: 0; left: 0; pointer-events: none; }
.arvore-regiao {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
}
.arvore-regiao[data-era="elementos"] {
  background: radial-gradient(circle, color-mix(in srgb, var(--era-elementos) 30%, transparent) 0%, color-mix(in srgb, var(--era-elementos) 14%, transparent) 55%, transparent 100%);
}
.arvore-regiao[data-era="natureza"] {
  background: radial-gradient(circle, color-mix(in srgb, var(--era-natureza) 26%, transparent) 0%, color-mix(in srgb, var(--era-natureza) 10%, transparent) 60%, transparent 100%);
}
.arvore-regiao[data-era="vida"] {
  background: radial-gradient(circle, color-mix(in srgb, var(--era-vida) 24%, transparent) 0%, color-mix(in srgb, var(--era-vida) 9%, transparent) 60%, transparent 100%);
}
.arvore-regiao[data-era="tecnologia"] {
  background: radial-gradient(circle, color-mix(in srgb, var(--era-tecnologia) 24%, transparent) 0%, color-mix(in srgb, var(--era-tecnologia) 9%, transparent) 60%, transparent 100%);
}
.arvore-regiao[data-era="cultura"] {
  background: radial-gradient(circle, color-mix(in srgb, var(--era-cultura) 22%, transparent) 0%, color-mix(in srgb, var(--era-cultura) 8%, transparent) 60%, transparent 100%);
}
.arvore-regiao[data-era="ficcao"] {
  background: radial-gradient(circle, color-mix(in srgb, var(--era-ficcao) 24%, transparent) 0%, color-mix(in srgb, var(--era-ficcao) 9%, transparent) 60%, transparent 100%);
}
.arvore-regiao[data-era="ia"] {
  background: radial-gradient(circle, color-mix(in srgb, var(--cor-orbe-ia) 26%, transparent) 0%, color-mix(in srgb, var(--cor-orbe-ia) 10%, transparent) 60%, transparent 100%);
}

.arvore-arestas {
  position: absolute;
  top: 0;
  left: 0;
  width: 6500px;
  height: 6500px;
  overflow: visible;
  pointer-events: none;
}
/* nenhuma conexão aparece por padrão — só quando o pai ou o filho dela vira
   o foco (ver realcar() em arvore.js). Pai e filho se diferenciam por mais
   que a cor: traço contínuo x tracejado, e a seta sempre aponta o sentido
   real da combinação (pai → foco, foco → filho). */
.arvore-aresta { stroke-width: 2; opacity: 0; display: none; }
.arvore-aresta.ativa { display: inline; opacity: 0.95; }
.arvore-aresta.aresta-pai {
  stroke: var(--arvore-cor-pai, #ffd25c);
  stroke-dasharray: 5 4;
  marker-end: url(#arvore-seta-pai);
}
.arvore-aresta.aresta-filho {
  stroke: var(--arvore-cor-filho, #4ad0e6);
  stroke-dasharray: none;
  marker-end: url(#arvore-seta-filho);
}
.arvore-seta-pai-forma { fill: var(--arvore-cor-pai, #ffd25c); }
.arvore-seta-filho-forma { fill: var(--arvore-cor-filho, #4ad0e6); }
.arvore-nos { position: absolute; inset: 0; }

/* nó virou wrapper: a .orbe-arvore carrega cor de era, seleção e estado de segurar */
.arvore-no {
  position: absolute;
  width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--cor-texto);
  font: inherit;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.arvore-no-icone { font-size: 18px; line-height: 1; }
img.arvore-no-icone { width: 20px; height: 20px; }
.arvore-no-nome {
  font-size: 10.5px;
  text-align: center;
  word-break: break-word;
  transition: opacity 150ms ease;
}
/* zoom bem distante: nomes escondem visualmente (o rótulo acessível do
   botão continua disponível pra leitor de tela, independente do zoom) */
.arvore-overlay.arvore-zoom-longe .arvore-no-nome { opacity: 0; }

/* discreta por padrão no panorama — prioridade visual fica nas conexões e
   no item selecionado, não em todos os nós ao mesmo tempo */
.orbe-arvore {
  --orbe-tam: 40px;
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--cor-orbe) 45%, transparent),
    0 0 5px 0.5px color-mix(in srgb, var(--cor-orbe) 16%, transparent),
    inset 0 0 6px rgba(0, 0, 0, 0.35);
  transition: box-shadow 120ms ease, transform 120ms ease;
}
/* lendários e "além do mapa" ganham um pouco mais de presença no panorama */
.arvore-no-grande .orbe-arvore { --orbe-tam: 50px; }
.orbe-arvore[data-fonte="ia"]::after {
  content: "★";
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 9px;
  color: var(--era-cultura);
}

/* sem foco: item não-relacionado fica secundário, mas continua parte do
   universo visível — nunca "morto" (opacidade moderada, sem dessaturar) */
.arvore-no.esmaecido { opacity: 0.5; }
/* nó selecionado: o único grande protagonista */
.arvore-no.destaque .orbe-arvore {
  --orbe-tam: 58px;
  box-shadow:
    0 0 0 2px var(--cor-texto),
    0 0 16px 4px color-mix(in srgb, var(--cor-orbe) 60%, transparent),
    inset 0 0 6px rgba(0, 0, 0, 0.35);
}
.arvore-no.destaque .arvore-no-nome { opacity: 1; font-weight: 700; }
/* origem (pai) e derivação (filho) do foco — mesmas cores das arestas, pra
   reforçar a relação também no nó */
.arvore-no.pai .orbe-arvore {
  box-shadow:
    0 0 0 2px var(--arvore-cor-pai, #ffd25c),
    0 0 10px 2px color-mix(in srgb, var(--arvore-cor-pai, #ffd25c) 45%, transparent),
    inset 0 0 6px rgba(0, 0, 0, 0.35);
}
.arvore-no.filho .orbe-arvore {
  box-shadow:
    0 0 0 2px var(--arvore-cor-filho, #4ad0e6),
    0 0 10px 2px color-mix(in srgb, var(--arvore-cor-filho, #4ad0e6) 45%, transparent),
    inset 0 0 6px rgba(0, 0, 0, 0.35);
}
.arvore-no.pai .arvore-no-nome, .arvore-no.filho .arvore-no-nome { opacity: 1; }
.arvore-no.segurando .orbe-arvore {
  transform: scale(1.15);
  box-shadow:
    0 0 0 2px var(--era-cultura),
    0 0 16px 4px color-mix(in srgb, var(--era-cultura) 55%, transparent),
    inset 0 0 6px rgba(0, 0, 0, 0.35);
}

/* ---- rodapé cósmico: mesma identidade do cabeçalho (gradiente das eras +
   estrelas), com a bandeja da descoberta por dentro — não é um segundo
   painel novo, é o mesmo componente com mais acabamento lúdico ---- */
.arvore-bandeja {
  position: relative;
  border-top: 2px solid transparent;
  border-image: linear-gradient(
    90deg,
    var(--era-elementos), var(--era-natureza), var(--era-vida),
    var(--era-tecnologia), var(--era-cultura), var(--era-ficcao)
  ) 1;
  background:
    radial-gradient(1.2px 1.2px at 6% 20%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.1px 1.1px at 18% 70%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.3px 1.3px at 90% 30%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.1px 1.1px at 96% 75%, rgba(255,255,255,0.3), transparent),
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--cor-orbe-ia) 8%, transparent), transparent 60%),
    var(--cor-drawer);
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  max-height: 34vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.arvore-bandeja-estrelas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1.3px 1.3px at 14% 30%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.1px 1.1px at 40% 70%, rgba(255,255,255,0.28), transparent),
    radial-gradient(1.4px 1.4px at 70% 25%, rgba(255,255,255,0.35), transparent);
}
.arvore-bandeja-mascote {
  position: absolute;
  right: 10px;
  bottom: 6px;
  height: 40px;
  width: auto;
  opacity: 0.9;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.4));
}
/* a bandeja aberta com um item focado tem prioridade — o mascote não disputa
   atenção com o conteúdo da descoberta */
.arvore-bandeja:has(.arvore-bandeja-conteudo:not([hidden])) .arvore-bandeja-mascote {
  display: none;
}
.arvore-bandeja-dica {
  position: relative;
  margin: 0;
  padding-right: 52px;
  font-size: 13px;
  opacity: 0.9;
  min-height: 1.4em;
}
.arvore-bandeja-item { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.orbe-arvore-mini { --orbe-tam: 44px; flex-shrink: 0; }
.arvore-bandeja-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arvore-bandeja-nome { font-size: 14.5px; }
.arvore-bandeja-raridade {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.arvore-bandeja-raridade[data-raridade="raro"] { color: #4ad0e6; }
.arvore-bandeja-raridade[data-raridade="epico"] { color: #b06bff; }
.arvore-bandeja-raridade[data-raridade="lendario"] { color: #ffc94a; }
.arvore-bandeja-secao { margin-top: 8px; }
.arvore-bandeja-secao h4 { margin: 0 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; }
.arvore-bandeja-vazio { margin: 0; font-size: 12.5px; opacity: 0.75; font-style: italic; }
.arvore-bandeja-mini-orbes {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.arvore-mini-orbe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  width: 60px;
  background: none;
  border: 0;
  padding: 2px;
  color: var(--cor-texto);
  font: inherit;
  cursor: pointer;
}
.arvore-mini-orbe .orbe-arvore-mini { --orbe-tam: 38px; }
.arvore-mini-orbe-nome { font-size: 10px; text-align: center; word-break: break-word; }
.arvore-mini-orbe:hover .orbe-arvore-mini, .arvore-mini-orbe:focus-visible .orbe-arvore-mini {
  box-shadow:
    0 0 0 2px var(--cor-texto),
    0 0 8px 2px color-mix(in srgb, var(--cor-orbe) 50%, transparent),
    inset 0 0 6px rgba(0, 0, 0, 0.35);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .arvore-no, .orbe-arvore, .arvore-no-nome, .arvore-mundo { transition: none !important; }
}

/* ---- desktop: bandeja vira painel flutuante compacto, universo continua visível ---- */
@media (min-width: 900px) {
  .arvore-bandeja {
    position: absolute;
    left: 16px;
    bottom: 16px;
    width: min(360px, calc(100% - 32px));
    max-height: 40vh;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--cor-orbe-ia) 35%, var(--cor-borda));
    border-image: none;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  }
  .arvore-palco { position: relative; }
}

@media (max-width: 640px) {
  .arvore-subtitulo { display: none; }
  .arvore-cabecalho-logo { display: none; }
  .arvore-ver-tudo-texto { display: none; }
  .arvore-ver-tudo { padding: 8px 10px; }
  .arvore-bandeja-mascote { height: 32px; }
}

/* celular em paisagem: viewport baixa, cabeçalho e rodapé não podem dominar a tela */
@media (max-height: 420px) {
  .arvore-cabecalho { padding: 6px 10px; gap: 5px; }
  .arvore-subtitulo { display: none; }
  .arvore-cabecalho-logo { display: none; }
  .arvore-busca-caixa { padding: 0 8px; }
  .arvore-busca { padding: 6px 0; font-size: 12px; }
  .arvore-ver-tudo { padding: 6px 8px; font-size: 11.5px; }
  .arvore-atalho { width: 28px; height: 28px; font-size: 13px; }
  .arvore-bandeja { max-height: 26vh; padding: 6px 10px; }
  .arvore-bandeja-mascote { height: 26px; bottom: 4px; right: 8px; }
  .arvore-bandeja-dica { padding-right: 40px; font-size: 12px; }
}