/* ============================================================
   MYTHÉO — Kailash · écran LIENS / panthéon (graphe open-world).
   Style porté du CODE RD (screens/liens.css), renommé .kailash-liens-*.
   Grand canevas pannable + zoom ; médaillons reliés par des liens
   pointillés dorés (data w.links). Clic → fiche. Couleurs = tokens.
   ============================================================ */

/* Vars locales (jetons du cadre) héritées par tous les nœuds. */
.kailash-liens { --lo: var(--or, #e7c56e); --lo2: var(--or-clair, #f6e4a9); --ldim: var(--texte-doux, #c9bda0); }

/* Le body du cadre (catégorie `field`) devient la surface pan/zoom. */
.kailash-liens .kailash-screen-body {
  overflow: hidden; touch-action: none;
  font-family: var(--corps, "Spectral", Georgia, serif);
  color: var(--texte, #f3ead4);
}

/* fond nocturne dans le slot bg du cadre (les étoiles = slot stars partagé) */
.kailash-liens .kailash-screen-bg {
  background: radial-gradient(120% 80% at 50% 30%, rgba(var(--lueur,231,197,110), .10), #120d07 55%, #0a0704 100%);
}
.kailash-liens-viewport { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.kailash-liens-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.kailash-liens-links { position: absolute; left: 0; top: 0; }

/* médaillon-nœud (bouton) — entrée échelonnée via kailash-fade-in partagé.
   Le disque = brique PARTAGÉE .kailash-medallion ; on ne pose que sa taille
   (--k-med, piloté par --s côté JS) et l'état current/far (fog BFS). */
.kailash-liens-node {
  position: absolute; transform: translate(-50%, -50%); z-index: 3; text-align: center; cursor: pointer;
  background: none; border: none; padding: 0; font: inherit; -webkit-tap-highlight-color: transparent;
  animation: kailash-fade-in .5s ease both; animation-delay: var(--d, 0s);
}
/* taille via --k-med (piloté par --s) ; scopé sous html[data-template] pour
   égaler/battre la spécificité de la base --k-med:64px (cf. --sm/--lg). */
html[data-template="kailash"] .kailash-liens-node .disc { --k-med: var(--s, 90px); margin: 0 auto; }
.kailash-liens-node .nm {
  margin-top: 9px; font-family: var(--disp, "Zilla Slab", Georgia, serif); font-weight: 700; font-size: 16px; letter-spacing: .02em;
  color: #efe4c6; text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
.kailash-liens-node .nm .e {
  display: block; font-weight: 400; font-style: italic; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--lo); opacity: .82; margin-top: 2px;
}
.kailash-liens-node:hover .disc { transform: scale(1.06); }

/* nœud courant (le plus connecté) : surbrillance + halo pulsé */
.kailash-liens-node.current .disc {
  box-shadow: 0 0 0 2.5px var(--lo2), 0 0 46px rgba(var(--lueur,231,197,110), .65), 0 8px 20px rgba(0,0,0,.55);
}
.kailash-liens-node.current .disc::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 2px solid rgba(var(--lueur,231,197,110), .5); animation: kailash-liens-halo 2.6s ease-out infinite;
}
@keyframes kailash-liens-halo { 0% { transform: scale(.86); opacity: .75; } 100% { transform: scale(1.26); opacity: 0; } }

/* brouillard : nœuds éloignés estompés */
.kailash-liens-node.far .disc { filter: grayscale(.6) brightness(.62) blur(.4px); box-shadow: 0 0 0 2px rgba(234,220,190,.28), 0 6px 18px rgba(0,0,0,.5); }
.kailash-liens-node.far .nm { color: var(--ldim); }
.kailash-liens-node.far .nm .e { opacity: .5; }

/* chrome fixe (par-dessus le canevas) — le titre vit désormais dans le slot
   .kailash-screen-title du cadre (h1 44px), plus de -top bespoke. */
/* Scrim PLEINE LARGEUR derrière le titre : les nœuds pannent dessous, mais la
   bande du haut (labels d'ères qui bordent) reste atténuée → titre lisible. */
.kailash-liens .kailash-screen-title::before {
  content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none;
  /* Ancré au HAUT DE LA FENÊTRE : le titre est décalé de --kailash-chrome-top,
     on remonte donc d'autant pour que le dégradé parte du sommet (et couvre le chrome). */
  top: calc(-1 * var(--kailash-chrome-top)); height: calc(var(--kailash-chrome-top) + 148px);
  background: linear-gradient(180deg, rgba(6,8,13,.92), rgba(6,8,13,.55) 55%, rgba(6,8,13,0));
}
.kailash-liens-vig { position: absolute; inset: 0; z-index: 10; pointer-events: none; box-shadow: inset 0 0 120px 40px rgba(10,7,4,.7); }
.kailash-liens-hint {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; text-align: center;
  padding: 12px 12px calc(env(safe-area-inset-bottom) + 12px); font-style: italic; font-weight: 500; font-size: 13px;
  color: var(--ldim); text-shadow: 0 1px 4px #000; background: linear-gradient(transparent, rgba(10,7,4,.7)); pointer-events: none;
}
.kailash-liens-hint svg { width: 15px; height: 15px; vertical-align: -3px; color: var(--lo); margin-right: 4px; }
.kailash-liens-zoom {
  position: absolute; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 88px); z-index: 22;
  display: flex; flex-direction: column; border-radius: 11px; overflow: hidden; border: 1px solid rgba(216,178,90,.5);
}
.kailash-liens-zoom button {
  width: 40px; height: 40px; background: rgba(20,16,10,.82); color: #f0e0b2; border: none; font-size: 21px; cursor: pointer;
  font-family: var(--disp, "Zilla Slab", Georgia, serif);
}
.kailash-liens-zoom button + button { border-top: 1px solid rgba(216,178,90,.35); }