[html]<div id="ls-container" style="all: initial; display: block; width: 100%; height: 800px; background: #050101; border: 1px solid #c5a059; position: relative; overflow: hidden; color: #f3f4f6; font-family: 'Inter', sans-serif; box-sizing: border-box;">
<style>
#ls-container * { box-sizing: border-box; }
#ls-container .cinzel { font-family: 'Cinzel', serif; }
#ls-container .tree-wrapper { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: grab; }
#ls-container .tree-content { padding: 1000px; display: flex; flex-direction: column; align-items: center; }
#ls-container .node-group { display: flex; flex-direction: column; align-items: center; position: relative; }
#ls-container .node-card { background: #000; border: 1px solid #8c6d2d; padding: 5px; width: 140px; cursor: pointer; transition: 0.3s; position: relative; z-index: 10; margin: 0 20px; }
#ls-container .node-card:hover { border-color: #c5a059; transform: scale(1.05); }
#ls-container .node-card.active { border-color: #fff; transform: scale(1.1); box-shadow: 0 0 30px rgba(197, 160, 89, 0.4); }
#ls-container .badge { background: #000; border: 1px solid #8c6d2d; padding: 3px 8px; font-size: 8px; color: #c5a059; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; display: inline-block; font-weight: bold; }
#ls-container .img-box { width: 100%; aspect-ratio: 1; overflow: hidden; background: #111; }
#ls-container .img-box img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: 0.4s; pointer-events: none; }
#ls-container .node-card:hover img, #ls-container .node-card.active img { filter: grayscale(0); }
#ls-container .name { font-family: 'Cinzel', serif; font-size: 10px; text-align: center; padding-top: 5px; color: #c5a059; }
#ls-container .children-container { display: flex; justify-content: center; position: relative; padding-top: 40px; }
#ls-container .connector-v { width: 1px; height: 40px; background: #8c6d2d; }
#ls-container .connector-h { position: absolute; top: 0; height: 1px; background: #8c6d2d; }
#ls-container .dossier { position: absolute; right: 0; top: 0; bottom: 0; width: 320px; background: rgba(5,5,5,0.98); border-left: 1px solid #c5a059; transform: translateX(100%); transition: 0.5s; z-index: 100; padding: 25px; backdrop-filter: blur(10px); color: #fff; }
#ls-container .dossier.open { transform: translateX(0); }
#ls-container .ctrl-box { position: absolute; bottom: 20px; left: 20px; z-index: 50; }
#ls-container .ctrl { width: 40px; height: 40px; background: #000; border: 1px solid #8c6d2d; color: #c5a059; cursor: pointer; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-family: inherit; }
#ls-container .ctrl:hover { background: #c5a059; color: #000; }
#ls-container .header { position: absolute; top: 20px; left: 20px; z-index: 10; pointer-events: none; }
</style>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
<div class="header">
<h1 class="cinzel" style="font-size: 24px; color: #c5a059; margin: 0; letter-spacing: 4px;">LANCE SQUAD</h1>
<p style="font-size: 8px; color: #8c6d2d; letter-spacing: 3px; margin: 5px 0 0 0;">TACTICAL HIERARCHY</p>
</div>
<div class="ctrl-box">
<button class="ctrl" id="ls-z-in">+</button>
<button class="ctrl" id="ls-z-out">-</button>
<button class="ctrl" id="ls-z-rst" style="font-size: 8px;">RST</button>
</div>
<div class="tree-wrapper" id="ls-viewport">
<div class="tree-content" id="ls-canvas"></div>
</div>
<div class="dossier" id="ls-dossier">
<button id="ls-close" style="float:right; background:none; border:none; color:#c5a059; font-size:24px; cursor:pointer;">✕</button>
<h2 class="cinzel" style="color:#c5a059; font-size:16px; border-bottom:1px solid #333; padding-bottom:10px; margin-top:0;">DOSSIER</h2>
<div id="ls-d-content"></div>
</div>
<div style="position: absolute; inset: 0; box-shadow: inset 0 0 100px #000; pointer-events: none; z-index: 5;"></div>
<script>
(function(){
const data = {id:'1',name:'GAUTIER PAYTON',title:'THE LORD',img:'https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=400&h=400&auto=format&fit=crop',bio:'High Commander of the Southern Front.',children:[{id:'2',name:'DAMARIS PAYTON',title:'THE BANNERET',img:'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=400&h=400&auto=format&fit=crop',bio:'Vanguard lead.',children:[{id:'3',name:'VAWRON PAYTON',title:'SQUIRE',img:'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400&h=400&auto=format&fit=crop',bio:'Heavy cavalry apprentice.'},{id:'4',name:'THEO GREY',title:'SQUIRE',img:'https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&w=400&h=400&auto=format&fit=crop',bio:'Reconnaissance specialist.'}]},{id:'5',name:'SARKOSIS GROTTE',title:'COUSTILLIER',img:'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=400&h=400&auto=format&fit=crop',bio:'Technical heartbeat of the squad.',children:[{id:'6',name:'JON SNOW',title:'KNIGHT-CADET',img:'https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=400&h=400&auto=format&fit=crop',bio:'Marksman.'},{id:'7',name:'ROB STARK',title:'KNIGHT-CADET',img:'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=400&h=400&auto=format&fit=crop',bio:'Medic.'},{id:'8',name:'VELIZAR PAYTON',title:'KNIGHT-CADET',img:'https://images.unsplash.com/photo-1552058544-f2b08422138a?q=80&w=400&h=400&auto=format&fit=crop',bio:'Lance prodigy.'}]},{id:'9',name:'ELARA VANCE',title:'VIVISECTOR',img:'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&h=400&auto=format&fit=crop',bio:'Tactical coordinator.',children:[{id:'10',name:'MIRA FOREST',title:'SCOUT',img:'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400&h=400&auto=format&fit=crop',bio:'Stealth operative.'}]}]};
let zoom = 0.65, pos = {x:0, y:0}, isDown = false, startPos = {x:0, y:0};
const canvas = document.getElementById('ls-canvas'), viewport = document.getElementById('ls-viewport'), dossier = document.getElementById('ls-dossier'), dContent = document.getElementById('ls-d-content');
function build(m){
const group = document.createElement('div'); group.className = 'node-group';
const card = document.createElement('div'); card.className = 'node-card';
card.innerHTML = `<div class="badge" style="display:block;text-align:center">${m.title}</div><div class="img-box"><img src="${m.img}"></div><div class="name">${m.name}</div>`;
card.onclick = (e) => { e.stopPropagation(); document.querySelectorAll('.node-card').forEach(c=>c.classList.remove('active')); card.classList.add('active'); showDossier(m); };
group.appendChild(card);
if(m.children && m.children.length > 0){
const vLine = document.createElement('div'); vLine.className = 'connector-v'; group.appendChild(vLine);
const ctn = document.createElement('div'); ctn.className = 'children-container';
const hLine = document.createElement('div'); hLine.className = 'connector-h';
hLine.style.width = `calc(100% - ${140 + 40}px)`; ctn.appendChild(hLine);
m.children.forEach(c => ctn.appendChild(build(c)));
group.appendChild(ctn);
} return group;
}
function showDossier(m){
dContent.innerHTML = `<div style="text-align:center;margin:20px 0"><div style="width:120px;height:120px;margin:0 auto 15px;border:1px solid #c5a059;padding:3px"><img src="${m.img}" style="width:100%;height:100%;object-fit:cover"></div><h3 class="cinzel" style="font-size:18px;margin:0">${m.name}</h3><p style="color:#8c6d2d;font-size:10px;font-weight:bold">${m.title}</p></div><div style="background:rgba(197,160,89,0.05);border-left:2px solid #c5a059;padding:10px;font-size:12px;color:#ccc;line-height:1.5">${m.bio}</div>`;
dossier.classList.add('open');
}
function update(){ canvas.style.transform = `translate(${pos.x}px, ${pos.y}px) scale(${zoom})`; }
viewport.onmousedown = (e) => { if(e.target.closest('.ctrl-box') || e.target.closest('.dossier')) return; isDown = true; viewport.style.cursor = 'grabbing'; startPos = {x: e.clientX - pos.x, y: e.clientY - pos.y}; };
window.onmousemove = (e) => { if(!isDown) return; pos = {x: e.clientX - startPos.x, y: e.clientY - startPos.y}; update(); };
window.onmouseup = () => { isDown = false; viewport.style.cursor = 'grab'; };
document.getElementById('ls-z-in').onclick = () => { zoom += 0.1; update(); };
document.getElementById('ls-z-out').onclick = () => { zoom -= 0.1; update(); };
document.getElementById('ls-z-rst').onclick = () => { zoom = 0.65; pos = {x:0, y:0}; update(); };
document.getElementById('ls-close').onclick = () => dossier.classList.remove('open');
canvas.appendChild(build(data)); update();
})();
</script>
</div>[/html]