/* Legibilidade premium da Árvore: mapa inteiro + significados grandes no painel. */
.scene-tree .tree-node .tree-meaning {
  display: none;
}

.scene-tree .tree-node .tree-name {
  font-size: 34px;
  font-weight: 760;
  letter-spacing: .01em;
}

.scene-tree .tree-node .tree-hebrew {
  font-size: 42px;
  font-weight: 650;
}

.scene-tree .tree-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1.3vh, 22px);
  padding: clamp(26px, 3vw, 56px);
}

.scene-tree .tree-panel h1,
.scene-tree .tree-panel p {
  margin: 0;
}

.tree-focus-list {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.tree-focus-list.is-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tree-focus-item {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  grid-template-areas:
    "name hebrew"
    "meaning meaning";
  align-items: center;
  gap: 2px 14px;
  min-height: 92px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 45%),
    rgba(250, 243, 222, .055);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}

.tree-focus-name {
  grid-area: name;
  color: var(--ivory);
  font-family: var(--display);
  font-size: clamp(24px, 1.8vw, 34px);
  font-weight: 700;
  line-height: 1;
}

.tree-focus-hebrew {
  grid-area: hebrew;
  color: var(--gold);
  font-family: var(--hebrew);
  font-size: clamp(32px, 2.3vw, 44px);
  font-weight: 650;
  line-height: 1;
}

.tree-focus-meaning {
  grid-area: meaning;
  color: #dce9e8;
  font-size: clamp(21px, 1.45vw, 28px);
  font-weight: 580;
  line-height: 1.15;
}

.tree-focus-list.is-grid .tree-focus-item {
  min-height: 82px;
  padding: 11px 14px;
}

.tree-focus-list.is-grid .tree-focus-name {
  font-size: clamp(21px, 1.4vw, 28px);
}

.tree-focus-list.is-grid .tree-focus-hebrew {
  font-size: clamp(29px, 1.8vw, 36px);
}

.tree-focus-list.is-grid .tree-focus-meaning {
  font-size: clamp(19px, 1.16vw, 23px);
}

@media (max-width: 1100px), (max-height: 720px) {
  .scene-tree .tree-panel > p {
    font-size: 20px;
  }

  .tree-focus-item {
    min-height: 72px;
    padding: 9px 13px;
  }

  .tree-focus-list {
    gap: 8px;
  }
}