/* ---------- Hub de Tecnologias — árvore por nível ----------
   Layout inspirado na tela "Tecnologias" do próprio jogo: uma linha por
   nível, tecnologias comuns rolando na horizontal à esquerda e as antigas
   numa coluna fixa à direita. Reskinado pra paleta do site (azul p/ comum,
   roxo/--accent já usado no resto do codex.css p/ antiga) em vez do azul
   do jogo. Container padrão (.container, igual aos outros hubs) --
   só a árvore em si é que rola horizontalmente por dentro, não a página. */

/* Legenda comum/antiga */
.tech-hub-legend{
  display:flex;
  justify-content:center;
  gap: 1.5rem;
  margin-top: .9rem;
  font-size:.8rem;
  color: var(--text-dim);
}
.tech-hub-legend span{ display:inline-flex; align-items:center; gap:.4rem; }
.tech-hub-legend .swatch{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.tech-hub-legend .swatch.is-comum{ background: rgba(74,179,240,.35); border:1px solid #4ab3f0; }
.tech-hub-legend .swatch.is-antiga{ background: var(--accent-soft); border:1px solid var(--accent); }

/* ---------- Árvore ---------- */
.tech-tree{
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius: 14px;
  padding: .5rem clamp(.5rem, 2vw, 1.5rem);
  overflow:hidden;
}

.tech-tree-row{
  display:grid;
  grid-template-columns: 56px minmax(0, 1fr) 150px;
  align-items:stretch;
  min-height: 160px;
  border-bottom: 1px solid var(--hairline);
}
.tech-tree-row:last-child{ border-bottom:none; }
.tech-tree-row.is-filtered{ display:none; }

/* Nó do nível + linha vertical conectando os níveis */
.tech-tree-level{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tech-tree-level::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:50%;
  width:2px;
  background: var(--hairline);
  transform: translateX(-50%);
  z-index:0;
}
.tech-tree-row:first-child .tech-tree-level::before{ top:50%; }
.tech-tree-row:last-child .tech-tree-level::before{ bottom:50%; }
.tech-tree-level-num{
  position:relative;
  z-index:1;
  width:38px; height:38px;
  border-radius:50%;
  background: var(--panel-2);
  border:2px solid var(--accent-line);
  color: var(--text-bright);
  font-family: var(--font-display);
  font-weight:700;
  font-size:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Tira horizontal das tecnologias comuns */
.tech-tree-comuns{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem .3rem;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-line) transparent;
}
.tech-tree-comuns::-webkit-scrollbar{ height:6px; }
.tech-tree-comuns::-webkit-scrollbar-track{ background:transparent; }
.tech-tree-comuns::-webkit-scrollbar-thumb{ background: var(--accent-line); border-radius:4px; }
.tech-tree-comuns:empty::after{
  content:"—";
  color: var(--text-dim);
  font-size:.8rem;
  padding-left:.5rem;
}

/* Coluna fixa das tecnologias antigas (não participa do scroll das comuns) */
.tech-tree-antigas{
  display:flex;
  align-items:center;
  justify-content:center;
  border-left: 1px solid var(--hairline);
  background: linear-gradient(90deg, transparent, var(--accent-soft) 45%);
}

/* ---------- Card de tecnologia (só ícone + nome) ----------
   Tamanho FIXO (largura e altura), igual pra todo card -- calculado pro
   pior caso real dos nomes (o mais longo tem 51 caracteres, ex.: "Kit de
   bandeiras da Associação de Proteção aos Pals"), pra nunca truncar: nome
   sempre quebra linha e aparece por completo, mesmo que sobre espaço em
   branco nos cards com nome curto (mesma lógica do .pal-card em
   pals-list.css, só que ali o grid já garante altura uniforme por linha;
   aqui cada nível é um flex isolado, então a altura precisa ser fixa). */
.tech-node{
  flex: 0 0 auto;
  width: 100px;
  height: 148px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  padding:.55rem .4rem .5rem;
  border-radius:10px;
  border:1px solid transparent;
  text-align:center;
  text-decoration:none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  cursor:pointer;
}
.tech-node.is-filtered{ display:none; }
.tech-node-icon{
  width:44px; height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background: var(--panel-2);
  flex-shrink:0;
}
.tech-node-icon img{ width:100%; height:100%; object-fit:contain; }
.tech-node-name{
  font-size:.72rem;
  line-height:1.25;
  color: var(--text);
}

.tech-node--comum{
  background: rgba(74,179,240,.08);
  border-color: rgba(74,179,240,.22);
}
.tech-node--comum:hover{
  background: rgba(74,179,240,.16);
  border-color: #4ab3f0;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(74,179,240,.18);
}
.tech-node--comum:hover .tech-node-name{ color: var(--text-bright); }

.tech-node--antiga{
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.tech-node--antiga:hover{
  background: rgba(157,124,240,.28);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(157,124,240,.28);
}
.tech-node--antiga:hover .tech-node-name{ color: var(--text-bright); }

@media (max-width: 900px){
  .tech-tree-row{ grid-template-columns: 44px minmax(0,1fr) 110px; min-height: 180px; }
  .tech-tree-level-num{ width:32px; height:32px; font-size:.85rem; }
  .tech-node{ width:84px; height:168px; }
  .tech-node-icon{ width:38px; height:38px; }
  .tech-node-name{ font-size:.68rem; }
}

/* ---------- Tooltip rica (hover) ---------- */
.tech-tooltip{
  position:fixed;
  z-index: 1080;
  width: 300px;
  max-width: calc(100vw - 24px);
  background: linear-gradient(155deg, var(--panel) 0%, #0d1019 100%);
  border:1px solid var(--accent-line);
  border-radius:12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  padding: 0;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  overflow:hidden;
}
.tech-tooltip.is-visible{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}
.tech-tooltip-head{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.85rem .9rem;
  border-bottom:1px solid var(--hairline);
}
.tech-tooltip-head img{
  width:36px; height:36px;
  object-fit:contain;
  border-radius:50%;
  background: var(--panel-2);
  flex-shrink:0;
}
.tech-tooltip-name{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  color: var(--text-bright);
  line-height:1.2;
}
.tech-tooltip-type{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
}
.tech-tooltip-type.is-comum{ color:#4ab3f0; }
.tech-tooltip-type.is-antiga{ color: var(--accent); }

.tech-tooltip-stats{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .6rem;
  padding:.7rem .9rem;
  border-bottom:1px solid var(--hairline);
}
.tech-tooltip-stat{
  font-family: var(--font-mono);
  font-size:.72rem;
  color: var(--text-dim);
}
.tech-tooltip-stat b{ color: var(--text-bright); font-weight:600; }

.tech-tooltip-desc{
  padding:.7rem .9rem;
  font-size:.78rem;
  color: var(--text);
  line-height:1.4;
  border-bottom:1px solid var(--hairline);
}

.tech-tooltip-unlocks{ padding:.6rem .9rem .8rem; }
.tech-tooltip-unlocks-title{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--text-dim);
  margin-bottom:.4rem;
}
.tech-tooltip-unlock-row{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.3rem 0;
  font-size:.78rem;
  color: var(--text);
}
.tech-tooltip-unlock-row img{
  width:22px; height:22px;
  object-fit:contain;
  border-radius:50%;
  background: var(--panel-2);
  flex-shrink:0;
}
.tech-tooltip-unlock-more{
  font-size:.72rem;
  color: var(--text-dim);
  padding-top:.2rem;
}