/* Spell-path layout: fixed parent/child geometry inside Last Keep's iron-and-gold UI.
   Compact icon nodes lead; the selected spell's full explanation lives alongside.
   Narrow screens scroll the same map instead of breaking dependency relationships. */
#draftOptions, #skillTreeGrid, #availableSpellGrid {
  display: block;
  min-width: 0;
  container-type: inline-size;
}
#draftOptions::before, #draftOptions::after { content: none; }
.spell-path-workspace {
  --tree-line: #596675;
  --tree-gold: #f2cd6c;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 276px;
  align-items: start;
  gap: 24px;
  color: #f7efda;
  text-align: left;
  font-family: "Barlow", "Segoe UI", sans-serif;
}
.spell-map-column { min-width: 0; }
.spell-map-legend { display: flex; flex-wrap: wrap; gap: 20px; padding: 0 8px 12px; color: #c8d2da; font-size: .75rem; }
.spell-map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.spell-map-legend i { width: 9px; height: 9px; border: 1px solid #738394; border-radius: 2px; }
.spell-map-legend .ready { border-color: #f2cd6c; }
.spell-map-legend .learned { background: #f2cd6c; border-color: #f2cd6c; }
.spell-map-legend .locked { background: #344353; }
.spell-tree-viewport {
  width: 100%;
  max-height: min(60vh, 620px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #7a683e #0d1724;
  scrollbar-width: thin;
  border: 1px solid #3d4b5d;
  border-radius: 12px;
  background: #0d1724;
}
.spell-tree-viewport:focus-visible { outline: 3px solid #ffe69a; outline-offset: 3px; }
.spell-tree-board { position: relative; isolation: isolate; min-width: 608px; width: 100%; }
.spell-branches { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.spell-branch { fill: none; stroke: var(--tree-line); stroke-width: 2; stroke-linejoin: round; }
.spell-branch.locked { stroke-dasharray: 5 5; }
.spell-branch.learned, .spell-branch.ready { stroke: #c8a85c; }
.spell-branch.highlighted { stroke: #f8dda1; stroke-width: 2.5; }
.spell-branch .branch-arrow { stroke-dasharray: none; }
.branch-node {
  position: absolute;
  top: var(--node-top);
  left: calc(var(--node-column) * 25% + 12px);
  width: calc(25% - 24px);
  min-height: 160px;
  margin: 0;
  padding: 0 5px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  color: #f7efda;
  background: #0d1724;
  border: 0;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
}
.branch-node::before, .branch-node::after { content: none; }
.branch-node:focus-visible { outline: 3px solid #ffe69a; outline-offset: 3px; }
.branch-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  margin-bottom: 4px;
  padding: 4px;
  color: var(--ward);
  background: #152639;
  border: 2px solid #74818d;
  border-radius: 10px;
  transition: border-color .16s, background-color .16s;
}
.branch-icon > :is(.spell-art,.command-art,.gear-art) { width: 100%; height: 100%; border-radius: 5px; }
.branch-node.available .branch-icon { border-color: #b99448; }
.branch-node.learned .branch-icon { border-color: var(--ward); background: #233b50; }
.branch-node.evolved .branch-icon { border-color: #f2cd6c; }
.branch-node.selected .branch-icon, .branch-node:hover .branch-icon { border-color: #ffe69a; background: #30465a; outline: 1px solid #b99448; outline-offset: 3px; }
.branch-node.locked .branch-icon > :first-child { filter: grayscale(.85) brightness(.7); }
.branch-rank {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 24px;
  padding: 1px 5px;
  color: #fff0c3;
  background: #26364a;
  border: 1px solid #82909b;
  border-radius: 4px;
  font: 800 .72rem/1.2 "Barlow Condensed", sans-serif;
  font-variant-numeric: tabular-nums;
}
.branch-node.learned .branch-rank { color: #221c11; background: #f2cd6c; border-color: #f2cd6c; }
.branch-node > strong { max-width: 100%; color: #f7efda; font: 800 1rem/1.05 "Barlow Condensed", sans-serif; text-transform: uppercase; overflow-wrap: anywhere; }
.branch-node > small { color: #bac7d0; font-size: .65rem; line-height: 1.25; }
.branch-status { color: #eed493; font: 700 .71rem/1.15 "Barlow", sans-serif; }
.branch-node.locked .branch-status { color: #bcc8d4; }
.spell-map-hint { margin: 10px 3px 16px; color: #bcc8d4; font: 500 .75rem/1.4 "Barlow", sans-serif; }
.tree-weapon-choice {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px; text-align: left; color: #f7efda;
  border: 1px solid #5e6b78; border-radius: 8px; background: #17273a; cursor: pointer;
}
.tree-weapon-choice.selected, .tree-weapon-choice:hover { border-color: #f2cd6c; }
.tree-weapon-choice:focus-visible, .tree-followups button:focus-visible { outline: 3px solid #ffe69a; outline-offset: 3px; }
.tree-weapon-icon { display: block; width: 42px; height: 42px; flex: none; }
.tree-weapon-choice strong { display: block; font: 800 1rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.tree-weapon-choice small { display: block; margin-top: 4px; color: #bfccd6; font-size: .72rem; }
.tree-weapon-choice > b { margin-left: auto; color: #f2cd6c; font-size: .75rem; }
.spell-tree-detail {
  position: sticky; top: 0;
  max-height: min(74vh, 790px); overflow: auto;
  padding: 16px;
  color: #f7efda;
  background: #19293b;
  border: 1px solid #647180;
  border-radius: 12px;
}
.tree-detail-hero { display: flex; gap: 12px; align-items: center; }
.tree-detail-icon { display: block; width: 60px; height: 60px; padding: 3px; flex: none; border: 1px solid var(--ward); border-radius: 8px; background: #0d1724; }
.tree-detail-hero > span:last-child { min-width: 0; }
.tree-detail-hero small { color: #bcc8d4; font-size: .7rem; }
.tree-detail-hero h3 { margin: 3px 0; color: #fff0c3; font: 800 1.4rem/1.05 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.tree-detail-hero p { margin: 6px 0 0; color: #efda9e; font-size: .75rem; }
.tree-detail-description { margin: 18px 0; color: #d1dbe1; font: 500 .85rem/1.5 "Barlow", sans-serif; }
.spell-tree-detail h4 { margin: 20px 0 8px; color: #f7efda; font: 800 .8rem "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.tree-requirements { font-size: .76rem; line-height: 1.5; }
.tree-requirements > span { display: block; margin-top: 5px; }
.tree-requirements .met { color: #c2d9c4; }
.tree-requirements .unmet { color: #f0b196; }
.tree-evolution { padding-bottom: 14px; border-bottom: 1px solid #45596b; }
.tree-evolution > strong { color: #efda9e; font: 800 1.1rem "Barlow Condensed", sans-serif; }
.tree-evolution p, .tree-next-rank p { margin: 6px 0 0; color: #c5d1db; font-size: .78rem; line-height: 1.45; }
.tree-followups button { display: flex; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 8px 0; color: #f3dfaa; background: none; border: 0; border-bottom: 1px solid #40566b; text-align: left; font: 600 .8rem "Barlow", sans-serif; cursor: pointer; }
.tree-followups button span { white-space: nowrap; color: #becbd5; font-size: .7rem; }
.tree-spend-point { display: block; width: 100%; min-height: 56px; height: auto; margin-top: 22px; padding: 12px; color: #231f17; background: #f2cd6c; border: 1px solid #ffe69a; border-radius: 6px; text-align: center; font: 800 1rem/1.2 "Barlow Condensed", sans-serif; cursor: pointer; }
.tree-spend-point:hover:not(:disabled) { background: #ffe69a; }
.tree-spend-point:focus-visible { outline: 3px solid #ffe69a; outline-offset: 3px; }
.tree-spend-point small { display: block; margin-top: 5px; font: 600 .7rem "Barlow", sans-serif; text-transform: none; }
.tree-spend-point:disabled { opacity: 1; color: #d0d9e0; background: #344658; cursor: not-allowed; }
.tree-readonly-note { margin: 20px 0 0; color: #c1ced7; font-size: .75rem; line-height: 1.4; }
.tree-interactions { padding-bottom: 14px; border-bottom: 1px solid #45596b; }
.tree-interactions summary { min-height: 44px; align-content: center; color: #efda9e; font: 800 .8rem "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.tree-interactions summary:hover { color: #ffe69a; }
.tree-interactions summary:focus-visible { outline: 2px solid #ffe69a; outline-offset: 3px; border-radius: 2px; }
.tree-interactions p { margin: 6px 0 8px; color: #e3dcc8; font-size: .8rem; line-height: 1.5; }
.tree-interactions small { display: block; color: #c5d1db; font-size: .72rem; line-height: 1.45; }
@container (max-width: 970px) {
  .spell-path-workspace { grid-template-columns: minmax(0, 1fr) 248px; gap: 16px; }
}
@container (max-width: 690px) {
  .spell-path-workspace { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .spell-tree-viewport { max-height: 52vh; }
  .spell-tree-detail { position: static; max-height: none; }
  .tree-weapon-choice > b { display: none; }
}
@media (prefers-reduced-motion: reduce) { .branch-icon { transition: none; } }