/* ══════════════════════════════════════════════════════════════
   GRAF · Escenario

   Hoja propia y cargada después de kachai.css: el mapa pasó de ser un adorno
   de la página a ser la página, y sus reglas ya no caben mezcladas con las
   del panel. Aquí sólo vive el escenario —las tres capas, el encabezado y los
   rótulos—; todo lo que se mueve está en los cuatro archivos de graf*.js.
   ══════════════════════════════════════════════════════════════ */

/* El alto se reparte con flex en lugar de restarle al viewport un número
   escrito a mano: la cabecera crece al envolverse en móvil, y un
   `calc(100dvh - 62px)` dejaba el grafo cortado justo ahí. */
.graf-body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background: #01040c;
  color: var(--ink);
}

.graf-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  height: auto;
  overflow: hidden;
  /* El resplandor del centro se pinta también en CSS, debajo de todo: da
     color al escenario incluso el primer fotograma, antes de que el canvas
     haya dibujado nada. */
  background:
    radial-gradient(120% 90% at 50% 46%, rgba(30, 91, 214, .16) 0%, rgba(2, 7, 19, 0) 62%),
    radial-gradient(90% 70% at 82% 78%, rgba(200, 16, 46, .10) 0%, rgba(2, 7, 19, 0) 60%),
    #01040c;
}

/* ── Las tres capas ─────────────────────────────────────────── */
.graf-fondo,
.graf-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;  /* la interacción vive en .graf-nodos */
  outline: none;
}
.graf-fondo { z-index: 0; }
.graf-canvas { z-index: 1; }
.graf-nodos { z-index: 3; }

/* ── Cabecera ───────────────────────────────────────────────── */
.graf-header {
  position: relative;
  z-index: 30;
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(107, 163, 245, .12);
  background: rgba(2, 7, 19, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* El isotipo real de la marca, no una «G» en una caja: es la misma silueta
   que el chat y los módulos, usada como máscara para que el degradado de
   marca la pinte. */
.graf-logo__mark {
  width: 30px;
  height: auto;
  aspect-ratio: 3 / 2;
  border: 0;
  border-radius: 0;
  background: var(--grad);
  box-shadow: none;
  -webkit-mask: url('/assets/img/kachai-mark-reference-transparent.png') center / contain no-repeat;
  mask: url('/assets/img/kachai-mark-reference-transparent.png') center / contain no-repeat;
}
.graf-logo__text { color: rgba(244, 247, 255, .92); }

.graf-privado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid rgba(62, 230, 160, .28);
  border-radius: 999px;
  background: rgba(62, 230, 160, .06);
  color: #3EE6A0;
  font-family: var(--font-mono);
  font-size: 11px;
}
.graf-privado .ms { font-size: 14px; }

/* ── Título ─────────────────────────────────────────────────── */
.graf-titulo {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  pointer-events: none;
}
.graf-titulo__marca {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .42em;
  text-indent: .42em;
  /* No se hereda --grad: su tramo #0033A0 es casi invisible sobre la noche.
     Aquí el degradado va de azul claro a rojo claro, que sí se leen. */
  background: linear-gradient(100deg, #6BA3FF 0%, #DBE8F8 46%, #E8657A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.graf-titulo__marca em { font-style: normal; }
.graf-titulo__texto {
  margin: 0 0 7px;
  font-family: var(--font-sans);
  font-size: clamp(24px, 4.4vw, 40px);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 30px rgba(2, 7, 19, .9);
}
.graf-titulo__pista {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: rgba(157, 193, 245, .58);
}

/* ── Pie ────────────────────────────────────────────────────── */
.graf-pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 0 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  color: rgba(157, 193, 245, .42);
  text-align: center;
  pointer-events: none;
}
.graf-pie__punto {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: #3EE6A0;
  box-shadow: 0 0 8px rgba(62, 230, 160, .8);
  animation: graf-respira 2.4s ease-in-out infinite;
}
@keyframes graf-respira {
  0%, 100% { opacity: 1; }
  50%      { opacity: .28; }
}

/* ── Enlaces de las herramientas ────────────────────────────
   Invisibles a propósito: el nodo ya está pintado en el canvas y el enlace
   sólo aporta el área pulsable, el foco de teclado y el texto que lee un
   lector de pantalla. */
.graf-nodo {
  border-radius: 18px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
}
.graf-nodo:focus-visible {
  outline: 2px solid var(--cl-azul-brillante, #6BA3FF);
  outline-offset: 6px;
  border-radius: 18px;
}

/* ── Responsivo ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .graf-privado { display: none; }
  .graf-titulo { top: 18px; }
}
@media (max-width: 560px) {
  .graf-header__inner { padding: 9px 13px; gap: 10px; }
  .graf-back span:not(.ms) { display: none; }
  .graf-back { padding: 7px 10px; }
  .graf-titulo__texto { font-size: 21px; }
  .graf-titulo__pista { font-size: 10.5px; }
  .graf-pie { font-size: 9.5px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .graf-pie__punto { animation: none; }
}