/* ============================================================
   Eximir Cosmic — Red Neuronal 3D · hoja de estilos
   Dirección: espacio profundo, técnico, Space Grotesk + Mono
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
:root {
  --bg: #05070d;
  --bg1: #0a0f1c;
  --ink: #e8eaf0;
  --ink-soft: #9aa3b2;
  --muted: #5a6478;
  --panel: #0d1017;
  --panel-border: rgba(232,234,240,0.1);
  --accent: #8fb0e0;
}
/* Mismo mesh profundo que el launcher (el canvas 3D es transparente: alpha true) */
html, body { width: 100%; height: 100%; overflow: hidden; touch-action: pan-x pan-y; font-family: 'Space Grotesk', sans-serif;
  background:
    radial-gradient(52% 44% at 18% 10%, rgba(74,157,255,.13) 0%, transparent 70%),
    radial-gradient(46% 40% at 85% 16%, rgba(139,108,255,.11) 0%, transparent 70%),
    radial-gradient(50% 46% at 78% 88%, rgba(24,201,154,.08) 0%, transparent 70%),
    radial-gradient(44% 40% at 12% 86%, rgba(255,92,157,.06) 0%, transparent 70%),
    radial-gradient(120% 100% at 50% 0%, var(--bg1) 0%, var(--bg) 68%);
}
/* Estrellas con deriva lenta detrás de la escena */
body::before {
  content: ""; position: fixed; left: 6%; top: 8%; width: 2px; height: 2px;
  border-radius: 50%; background: transparent; z-index: 0; pointer-events: none;
  will-change: transform;
  box-shadow: 11vw 7vh 0 #9fb4d8, 26vw 16vh 0 #7f92b8, 45vw 5vh 0 #9fb4d8, 61vw 12vh 0 #7f92b8,
    82vw 9vh 0 #9fb4d8, 7vw 36vh 0 #7f92b8, 21vw 54vh 0 #9fb4d8, 38vw 68vh 0 #7f92b8,
    57vw 42vh 0 #9fb4d8, 73vw 60vh 0 #7f92b8, 89vw 34vh 0 #9fb4d8, 14vw 80vh 0 #7f92b8,
    46vw 84vh 0 #9fb4d8, 68vw 76vh 0 #7f92b8, 86vw 86vh 0 #9fb4d8, 33vw 28vh 0 #7f92b8;
  animation: bgTwinkle 6s ease-in-out infinite, bgStarDrift 130s linear infinite alternate;
}
@keyframes bgTwinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.55; } }
@keyframes bgStarDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-60px,-50px,0); } }
/* touch-action:none — sin esto el navegador consume el gesto táctil y los
   Pointer Events de rotación/pinch nunca llegan */
#scene-wrap { position: absolute; inset: 0; cursor: grab; touch-action: none; }
#scene-wrap.dragging { cursor: grabbing; }
canvas { display: block; }

#hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 34px; pointer-events: none; z-index: 5;
}
#brand { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; text-align: center; text-shadow: 0 0 20px rgba(143,176,224,0.4); }
#brand .rn { color: var(--ink); }
#brand .ex { color: var(--muted); font-weight: 300; }
#chat-link, .hud-link {
  pointer-events: auto; font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  color: var(--ink-soft); border: 1px solid var(--panel-border); background: rgba(13,16,23,0.6);
  backdrop-filter: blur(10px);
  padding: 8px 12px; border-radius: 2px; transition: color 0.2s ease, border-color 0.2s ease;
}
#chat-link:hover, .hud-link:hover { color: var(--ink); border-color: rgba(232,234,240,0.35); }

#labels { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.node-label {
  position: absolute; transform: translate(-50%, 0);
  text-align: center; pointer-events: auto; cursor: pointer;
  width: 130px;
}
.node-label .title {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  display: inline-block;
  text-shadow: 0 0 12px rgba(143,176,224,0.45), 0 1px 6px rgba(0,0,0,0.85);
}
.node-label .desc {
  margin-top: 3px; font-family: 'Space Grotesk', sans-serif; font-size: 10px; color: #c7cdd8;
  line-height: 1.3;
  text-shadow: 0 1px 8px rgba(0,0,0,0.85), 0 0 16px rgba(0,0,0,0.6);
}

#empty-state {
  position: absolute; top: 16%; left: 50%; transform: translate(-50%, 0);
  text-align: center; pointer-events: none; z-index: 3;
}
#empty-state h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 400; font-size: 22px; color: #9aa3b2; text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 0 24px rgba(143,176,224,0.25); }
#empty-state p { margin-top: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; color: #6a7488; text-shadow: 0 2px 10px rgba(0,0,0,0.9); }

/* Tarjeta de detalle: flotante, inferior centrada, estilo hairline del resto del sitio */
#detail {
  position: absolute; left: 50%; bottom: 30px; width: min(520px, 92vw);
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: rgba(13,16,23,0.85); border: 1px solid var(--panel-border);
  backdrop-filter: blur(18px);
  padding: 22px 24px 20px; z-index: 20;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.2,.8,.2,1);
}
#detail.open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#detail .tag-pill { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 10px; border: 1px solid rgba(232,234,240,0.2); border-radius: 2px; margin-bottom: 14px; }
#detail h2.node-title { font-family: 'Space Grotesk', sans-serif; font-weight: 500; color: var(--ink); font-size: 19px; line-height: 1.35; margin-bottom: 10px; }
#detail p.content { font-family: 'Space Grotesk', sans-serif; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
#detail .keywords { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
#detail .keywords span { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--ink-soft); background: rgba(232,234,240,0.06); border: 1px solid rgba(232,234,240,0.08); padding: 4px 9px; border-radius: 2px; }
#detail .close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: var(--muted); cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; transition: color 0.2s ease; }
#detail .close:hover { color: var(--ink); }
#detail .meta { margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--muted); line-height: 1.6; }

#node-count {
  position: absolute; bottom: 26px; left: 34px;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase; z-index: 5; pointer-events: none;
}