// Floating relief overlays appended to (extracted from Sidebar.js in H4):
// #hud-crosshair โ center-screen aiming reticle
// #relief-coords โ Z/X/Y coordinate readout pinned under the crosshair
// #relief-hud โ bottom-right tooltip with chunk/dim/value + export button
//
// These are driven from main.js (the render loop fills them via getElementById and
// wires #relief-hud-export). This builder only creates and appends the DOM.
/**
* Create and append the crosshair, coordinate readout, and relief HUD to .
* @returns {void}
*/
export function buildReliefHUD() {
// Crosshair rendering
const crosshair = document.createElement('div');
crosshair.id = 'hud-crosshair';
crosshair.innerHTML = '';
document.body.appendChild(crosshair);
// Lectura de coordenadas Z/X/Y pegada a la mira (visible solo en modo Relieve al apuntar)
const reliefCoords = document.createElement('div');
reliefCoords.id = 'relief-coords';
reliefCoords.style.cssText = `
position: fixed;
top: calc(50% - 54px);
left: 50%;
transform: translateX(-50%);
display: none;
gap: 10px;
padding: 4px 10px;
background: oklch(from var(--color-neutral-950) l c h / 0.55);
border: 1px solid var(--color-brand-border);
border-radius: var(--radius-sm, 4px);
font-family: var(--font-mono);
font-size: var(--font-size-small);
font-weight: 700;
white-space: nowrap;
z-index: 1600;
pointer-events: none;
backdrop-filter: blur(2px);
`;
reliefCoords.innerHTML = `
Z --
X --
Y --
`;
document.body.appendChild(reliefCoords);
// Relief HUD Tooltip Overlay (Appended to body, hidden by default)
const reliefHUD = document.createElement('div');
reliefHUD.id = 'relief-hud';
reliefHUD.className = 'app-panel';
reliefHUD.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
width: 320px;
padding: var(--spacing-md);
display: none;
flex-direction: column;
gap: var(--spacing-xs);
z-index: 1500;
pointer-events: none;
font-family: var(--font-sans);
transition: opacity var(--motion-fast) var(--motion-easing-standard);
border: 1px solid var(--color-brand-border);
`;
reliefHUD.innerHTML = `
๐๏ธ SEMANTIC RELIEF
๐ PINNED
FRAGMENT (Z): --
DIMENSION (X): --
ACTIVATION (Y): 0.00
Hover over a point to inspect its text fragment...
Click: pin/unpin ยท Key 'B': save bookmark ยท ESC: release cursor
`;
document.body.appendChild(reliefHUD);
// Floating PointerLock guideline banner
const pointerlockGuideline = document.createElement('div');
pointerlockGuideline.id = 'pointerlock-guideline';
pointerlockGuideline.style.cssText = `
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
display: none;
padding: var(--spacing-sm) var(--spacing-md);
background: oklch(from var(--color-neutral-950) l c h / 0.75);
border: 1px solid var(--color-brand-border);
border-radius: var(--radius-md, 6px);
font-family: var(--font-sans);
font-size: var(--font-size-small);
color: var(--color-neutral-50);
z-index: 2000;
pointer-events: none;
backdrop-filter: blur(4px);
text-align: center;
transition: opacity var(--motion-fast) var(--motion-easing-standard);
`;
pointerlockGuideline.innerText = "Camera Control Active. Press ESC to release cursor and interact with sidebar controls.";
document.body.appendChild(pointerlockGuideline);
}