/* Upgrade tree (Tab): a canvas at the screen's resolution (pixel-art icons, thin lines) */

/* upgrade tree (Tab): pixel-art canvas */
.tree {
  position: fixed;
  inset: 0;
  z-index: 4;
}

.tree[hidden] {
  display: none;
}

.tree-canvas {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.tree-header {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #e8dcff;
  font: 12px/1.3 monospace;
  text-align: center;
  pointer-events: none;
  text-shadow: 2px 2px 0 #0d0818;
}

.tree-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #ffd65c;
}

.tree-points {
  font-size: 15px;
  font-weight: 700;
  color: #ffd65c;
}

.tree-hint {
  color: #9a8cc0;
}

.tree-tip {
  position: fixed;
  max-width: 260px;
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  background: #140c22;
  border: 2px solid #6a52a8;
  box-shadow: 4px 4px 0 #05030a;
  color: #e8dcff;
  font: 12px/1.4 monospace;
  pointer-events: none;
}

.tree-tip[hidden] {
  display: none;
}

.tree-tip-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.tree-tip-cost {
  color: #ffd65c;
}

.tree-tip-status {
  color: #9a8cc0;
}

.tree-tip-status.is-available {
  color: #ffd65c;
}

.tree-tip-status.is-soon {
  color: #b9a6e0;
  font-style: italic;
}

.tree-tip-status.is-owned {
  color: #78ff8c;
}

.tree-open .points {
  visibility: hidden;
}