/* Build maker: laid out like the in-game Deus window (three trees per class, abilities over talents). */
.bm-bar { position: sticky; top: 57px; z-index: 20; display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; background: #171a27f5; border: 1px solid #f0c26440; border-radius: 4px; padding: 12px 18px; margin-bottom: 18px; backdrop-filter: blur(6px); }
.bm-level { display: flex; flex-direction: column; min-width: 220px; flex: 1; }
.bm-level label { margin: 0; font-weight: 400; color: var(--mist); font-size: .9rem; }
.bm-level output { font: 400 1.5rem var(--display); color: #fff; margin-left: .3em; }
.bm-level input { accent-color: var(--lamp); width: 100%; }
.bm-points { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; }
.bm-points span { grid-column: 1 / -1; color: var(--mist); font-size: .88rem; }
.bm-points b { font: 400 1.7rem var(--display); }
.bm-points small { color: var(--mist); }
.bm-points .ae { color: #4fd0ff; } .bm-points .te { color: #c78bff; }
.bm-points b.over { color: var(--blood); }
.bm-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.bm-actions select { width: auto; padding: .35em .5em; font-size: .95rem; }
#classes button .spent { color: var(--lamp); font-size: .82em; margin-left: .35em; }
.bm-trees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tree { background: #14161f; border: 1px solid #4a4433; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.tree-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(#3a3122, #231d14); border-bottom: 1px solid #5d5238; }
.tree-head h3 { margin: 0; font-size: 1.15rem; color: #ffd100; }
.tree-head span { margin-left: auto; color: var(--mist); font-size: .88rem; }
.abilities { max-height: 330px; overflow-y: auto; padding: 6px; display: grid; gap: 3px; scrollbar-width: thin; scrollbar-color: #5d5238 transparent; }
.ab { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 4px 8px 4px 4px; border-radius: 3px; background: #ffffff07; border: 1px solid transparent; cursor: pointer; text-align: left; color: var(--fog); font: inherit; width: 100%; }
.ab:hover { border-color: #6b6347; }
.ab .ic { width: 34px; height: 34px; }
.ab .nm { line-height: 1.15; }
.ab small { display: block; color: var(--mist); font-size: .8rem; }
.ab .cost { color: #4fd0ff; font-size: .9rem; white-space: nowrap; }
.ab.on { background: #f0c26422; border-color: var(--lamp-deep); }
.ab.on .nm { color: #ffd100; }
.ab.locked { opacity: .45; }
.ab.locked .ic { filter: grayscale(1); }
.ab.bad { border-color: var(--blood); background: #d0624a1f; opacity: 1; }
.grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 50px; gap: 4px 0; padding: 12px 10px 14px; background: #1b1712 center / cover no-repeat; border-top: 1px solid #5d5238; flex: 1; }
.grid::before { content: ""; position: absolute; inset: 0; background: #0b090699; }
.tal { position: relative; justify-self: center; width: 42px; height: 42px; border-radius: 5px; background: #000 center / cover; border: 0; padding: 0; cursor: pointer; box-shadow: 0 0 0 1px #000, 0 0 0 2px #6d6d6d; filter: grayscale(1) brightness(.75); }
.tal:hover { box-shadow: 0 0 0 1px #000, 0 0 0 2px #fff; }
.tal.has { filter: none; box-shadow: 0 0 0 1px #000, 0 0 0 2px #40c040; }
.tal.max { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ffd100; }
.tal.locked { opacity: .5; }
.tal.bad { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--blood); filter: none; opacity: 1; }
.tal i { position: absolute; right: -7px; bottom: -6px; font: 500 11.5px var(--body); background: #000; color: #40c040; padding: 0 4px; border-radius: 3px; border: 1px solid #333; pointer-events: none; }
.tal.max i { color: #ffd100; }
.tal:not(.has) i { color: #8a8a8a; }
.tal.apc::after { content: ""; position: absolute; left: -5px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: #4fd0ff; box-shadow: 0 0 0 1px #000; }
.bm-racials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rac h3 { font-size: 1.05rem; color: var(--lamp); }
.rac .ab { grid-template-columns: 30px 1fr; }
.rac .ab .ic { width: 30px; height: 30px; }
.bm-summary { margin-top: 36px; }
.sum-tree { display: grid; grid-template-columns: 220px 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid #ffffff12; align-items: start; }
.sum-tree h4 { margin: 0; font: 500 1rem var(--body); display: flex; gap: 8px; align-items: center; }
.sum-tree .muted { font-size: .88rem; }
@media (max-width: 900px) {
  .bm-trees, .bm-racials { grid-template-columns: 1fr; }
  .bm-bar { position: static; }
  .sum-tree { grid-template-columns: 1fr; }
}