/* Brood Front: the Command Tree and the first split (T819, T928). The tree is a canvas graph
   inside a stage that fills the screen (T890); the shell never scrolls. */
#tree.screen, #split.screen, #class.screen {
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
  text-align: left;
  padding-top: 8px;
}
.tr-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; flex: 0 0 auto; min-width: 0; }
.tr-title { margin: 0; font-size: 1.1rem; color: #e6dcff; white-space: nowrap; letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.tr-cur { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 10px; font-weight: 700; font-size: 0.9rem; min-width: 0; }
.tr-credits { color: #ffd36b; }
.tr-later { font-size: 0.82rem; color: #a89ad0; flex: 0 0 auto; }
.tr-later[hidden] { display: none; }
/* T945: bevelled buttons like the menus (T944) */
.tr-buy, .tr-back {
  min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid #fff0c0; border-radius: 12px;
  font: inherit; font-weight: 700; color: #14121f; background: linear-gradient(180deg, #ffe49a 0%, #ffd36e 50%, #e4a93c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(120, 70, 0, 0.35), 0 3px 0 #7a5410, 0 5px 12px rgba(255, 211, 110, 0.2);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out;
}
.tr-buy:active:not(:disabled), .tr-back:active { transform: translateY(3px); box-shadow: inset 0 2px 4px rgba(90, 50, 0, 0.5), 0 0 0 #7a5410; }
.tr-buy:focus-visible, .tr-back:focus-visible, .tr-chip:focus-visible, .tr-zbtn:focus-visible, .sp-card:focus-visible { outline: 2px solid #3ec6c1; outline-offset: 2px; }
.tr-buy { flex: 0 0 auto; min-width: 84px; }
.tr-buy:disabled { opacity: 0.4; box-shadow: none; }
.tr-back {
  flex: 0 0 auto; color: #f0eaff; border-color: #5b49a0; background: linear-gradient(180deg, #4d3a9a 0%, #3b2a78 55%, #2e2062 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 3px 0 #170f3a, 0 5px 10px rgba(0, 0, 0, 0.35);
}
.tr-back:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45), 0 0 0 #170f3a; }
.sp-cards { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1fr; gap: 8px; align-content: start; }
.sp-cards[hidden], .sp-confirm[hidden] { display: none; }
.sp-card {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  min-height: 64px; padding: 10px 14px; border: 1px solid var(--acc, rgba(62, 198, 193, 0.55)); border-radius: 12px;
  font: inherit; color: #e6dcff;
  background: radial-gradient(120% 140% at 0% 0%, var(--halo, rgba(62, 198, 193, 0.22)), rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, rgba(40, 32, 76, 0.82), rgba(16, 12, 34, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 0 10px var(--halo, rgba(62, 198, 193, 0.18)), 0 4px 10px rgba(0, 0, 0, 0.35);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.sp-card:active { filter: brightness(1.15); }
.sp-name { font-weight: 700; font-size: 1.1rem; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.sp-pitch { font-size: 0.85rem; color: #c9b8f0; }
.sp-confirm { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.sp-cname { font-size: 1.6rem; font-weight: 700; color: #e6dcff; }
.sp-cpitch { color: #c9b8f0; }
.sp-final { color: #ffb48a; font-weight: 700; }
.sp-btns { display: flex; gap: 10px; }
.sp-btns > button { flex: 1 1 0; }
/* Second class choice (T825) */
.sp-unit { font-size: 0.85rem; color: #7be0b0; }
#class .sp-card { min-height: 56px; padding: 8px 14px; }
/* Icons on nodes and class choices (T851): the canvas never takes the tap. */
.bf-icon { flex: 0 0 auto; pointer-events: none; display: block; }
.tr-buy.has-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sp-card.has-icon { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.sp-card.has-icon > .bf-icon { grid-row: 1 / span 2; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.sp-unit > .bf-icon { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.sp-card.has-icon > .sp-name, .sp-card.has-icon > .sp-pitch { grid-column: 2; }
.sp-unit.has-icon { display: inline-flex; align-items: center; gap: 8px; }
#class .sp-card .sp-unit.has-icon { grid-column: 1 / -1; }

/* The Command Tree (T928). The canvas paints; the transparent buttons over each disc are the
   hit areas (never under 44 px); the stage takes every touch so a drag pans. */
#tree.screen { gap: 6px; }
.tr-bar { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; min-width: 0; }
.tr-chips {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tr-chips::-webkit-scrollbar { display: none; }
.tr-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--chip, #7a4fd0); border-radius: 22px; font: inherit; font-size: 0.85rem; font-weight: 700;
  color: #e6dcff; white-space: nowrap;
  background: linear-gradient(180deg, rgba(40, 32, 76, 0.9), rgba(16, 12, 34, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 0 8px rgba(62, 198, 193, 0.14);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.tr-chip[aria-pressed="true"] { background: linear-gradient(180deg, color-mix(in srgb, var(--chip, #7a4fd0) 70%, #ffffff), var(--chip, #7a4fd0)); color: #14102a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.3), 0 0 10px var(--chip, #7a4fd0); }
.tr-chip-n {
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 0.78rem; color: #14102a; background: #ffd36b;
}
.tr-stage {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 12px;
  border: 1px solid rgba(62, 198, 193, 0.4); background: #100c24;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55), 0 0 10px rgba(62, 198, 193, 0.14);
  touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none;
}
.tr-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.tr-nodes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tr-node {
  position: absolute; left: 0; top: 0; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.tr-node:focus-visible { outline: 2px solid #ffd36b; outline-offset: -2px; }
.tr-lbl {
  position: absolute; left: 0; top: 0; text-align: center; pointer-events: none; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.15; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.6);
}
.tr-zbtn {
  flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 1px solid #5b49a0; border-radius: 12px;
  font: inherit; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #f0eaff; background: linear-gradient(180deg, #4d3a9a 0%, #3b2a78 55%, #2e2062 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 2px 0 #170f3a;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.tr-card {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; display: flex; flex-direction: column; gap: 4px;
  max-height: calc(100% - 16px); overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 12px; border: 1px solid #7a4fd0; border-radius: 12px; background: linear-gradient(180deg, rgba(40, 32, 76, 0.97), rgba(16, 12, 34, 0.98));
  cursor: default; text-align: left;
}
.tr-card[hidden] { display: none; }
.tr-chead { display: flex; align-items: center; gap: 10px; }
.tr-cicon { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55)); }
.tr-ctitle { min-width: 0; flex: 1 1 auto; }
.tr-cname { font-weight: 700; font-size: 1.05rem; color: #e6dcff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.tr-csub { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 0.78rem; font-weight: 700; }
.tr-crank { color: #c9b8f0; }
.tr-cpips { display: flex; gap: 3px; }
.tr-cpips i { flex: 1 1 0; max-width: 28px; height: 6px; border-radius: 3px; background: rgba(150, 138, 196, 0.34); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.4); }
.tr-cpips i.on { box-shadow: 0 0 6px currentColor, inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.tr-cdesc { font-size: 0.85rem; color: #e6dcff; }
.tr-cgrant { font-size: 0.82rem; color: #7be0b0; font-weight: 700; }
.tr-cost { font-size: 0.82rem; color: #ffd36b; font-weight: 700; }
.tr-cost:empty, .tr-why:empty { display: none; }
.tr-level { font-size: 0.8rem; color: #c9b8f0; }
.tr-why { font-size: 0.8rem; color: #ffb48a; font-weight: 700; }
.tr-reqs { display: flex; flex-wrap: wrap; gap: 4px; }
.tr-req { padding: 2px 8px; border-radius: 10px; font-size: 0.76rem; color: #ffb48a; background: rgba(255, 180, 138, 0.12); }
.tr-req.met { color: #7be0b0; background: rgba(123, 224, 176, 0.12); }
.tr-equip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tr-equip[hidden] { display: none; }
.tr-equip-l { flex: 1 0 100%; font-size: 0.78rem; color: #c9b8f0; }
.tr-pick {
  min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid #5b49a0; border-radius: 10px; font: inherit;
  font-weight: 700; color: #e6dcff; background: linear-gradient(180deg, #4d3a9a 0%, #3b2a78 55%, #2e2062 100%); touch-action: manipulation;
}
.tr-pick[aria-pressed="true"] { background: #7a4fd0; }
.tr-cbtns { display: flex; gap: 10px; margin-top: 2px; }
.tr-cbtns > button { flex: 1 1 0; }
/* The briefing's Upgrades badge: the ranks buyable now (hidden at zero). */
.fl-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: 6px;
  padding: 0 6px; border-radius: 11px; font-size: 0.78rem; font-weight: 700; color: #14102a; background: #ffd36b;
}
.fl-badge[hidden] { display: none; }