/* Directeur : carte du système solaire, nœuds de destination et infobulle
   (voir js/pages/director.js). */

.dir {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; background: #03050b;
}
.dir-space { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 60% at -6% 50%, rgba(255, 214, 150, .34), rgba(255, 170, 90, .1) 45%, transparent 75%),
    radial-gradient(ellipse 60% 55% at 78% 22%, rgba(74, 96, 190, .2), transparent 70%),
    radial-gradient(ellipse 50% 45% at 60% 90%, rgba(120, 70, 170, .16), transparent 70%),
    #03050b;
}
.dir-space::before, .dir-space::after { content: ''; position: absolute; inset: 0; }
.dir-space::before {
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 31% 72%, #dfe8ff, transparent 60%),
    radial-gradient(1.4px 1.4px at 47% 33%, #fff, transparent 60%), radial-gradient(1px 1px at 66% 12%, #ffeede, transparent 60%),
    radial-gradient(1px 1px at 83% 58%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 92% 28%, #d9f3ff, transparent 60%),
    radial-gradient(1px 1px at 24% 46%, #fff, transparent 60%), radial-gradient(1px 1px at 72% 84%, #fff, transparent 60%),
    radial-gradient(1px 1px at 55% 62%, #e9dcff, transparent 60%), radial-gradient(1px 1px at 6% 86%, #fff, transparent 60%);
  background-size: 620px 420px; opacity: .75;
}
.dir-space::after {
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, .7), transparent 60%), radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1px 1px at 85% 15%, rgba(255, 255, 255, .6), transparent 60%), radial-gradient(1px 1px at 40% 88%, rgba(255, 255, 255, .5), transparent 60%);
  background-size: 260px 240px; opacity: .5; animation: dir-twinkle 6s ease-in-out infinite alternate;
}
@keyframes dir-twinkle { to { opacity: .2; } }

/* ---------- Titre et filtres ---------- */
.dir-head { position: absolute; z-index: 3; top: 92px; left: var(--gutter); }
.dir-head h1 { margin: 6px 0 8px; font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--pearl); }
.dir-chrono { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding-bottom: 2px; border-bottom: 1px solid rgba(241, 219, 164, .45); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); transition: color .25s, border-color .25s; }
.dir-chrono span { transition: transform .3s var(--ease); }
.dir-chrono:hover, .dir-chrono:focus-visible { color: #fff; border-color: #fff; }
.dir-chrono:hover span, .dir-chrono:focus-visible span { transform: translateX(4px); }
.dir-filters { display: flex; gap: 6px; }
.dir-filter {
  min-height: 34px; padding: 0 13px; cursor: pointer; background: rgba(3, 5, 11, .5); border: 1px solid var(--line-strong);
  font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  transition: background .25s, color .25s, border-color .25s;
}
.dir-filter:hover { color: #fff; border-color: #fff; }
.dir-filter[aria-pressed="true"] { background: var(--pearl); border-color: var(--pearl); color: var(--night); }

/* ---------- Carte ---------- */
.map-wrap { position: relative; flex: 1; display: grid; place-items: center; padding: 84px var(--gutter) 26px; }
.map {
  position: relative; container-type: inline-size;
  width: min(100%, calc((100vh - 118px) * 16 / 9)); width: min(100%, calc((100svh - 118px) * 16 / 9));
  min-width: min(100%, 760px); aspect-ratio: 16 / 9;
}
.orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.orbits circle { fill: none; stroke: rgba(225, 232, 255, .11); stroke-width: 1; vector-effect: non-scaling-stroke; }
.orbits line { stroke: rgba(225, 232, 255, .5); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.orbits text { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 2.6px; fill: rgba(225, 232, 255, .36); text-transform: uppercase; }

/* ---------- Nœuds ---------- */
.node {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .7cqw;
  width: 0; transform: translate(0, -2.9cqw); color: var(--ink); text-decoration: none;
  transition: opacity .4s ease;
}
.node-disc {
  position: relative; flex: 0 0 auto; width: 5.4cqw; min-width: 40px; aspect-ratio: 1; overflow: hidden; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  background: radial-gradient(circle at 35% 30%, #3a4a7c, #101830 70%);
  box-shadow: 0 0 0 .35cqw rgba(255, 255, 255, .05), 0 0 2.4cqw rgba(120, 170, 255, .22);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s, filter .3s;
}
.node-disc img { width: 100%; height: 100%; object-fit: cover; }
.node-disc::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset -.7cqw -.9cqw 1.6cqw rgba(3, 5, 11, .7), inset .3cqw .3cqw .8cqw rgba(255, 255, 255, .18); }
.node-label {
  width: max-content; max-width: 12.5cqw; text-align: center; line-height: 1.25;
  font-size: clamp(.5rem, .8cqw, .74rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 8px #000, 0 0 2px #000; transition: color .3s;
}
.node:hover, .node:focus-visible { z-index: 2; }
.node:hover .node-disc, .node:focus-visible .node-disc {
  transform: scale(1.14); border-color: #fff;
  box-shadow: 0 0 0 .5cqw rgba(255, 255, 255, .16), 0 0 3.2cqw rgba(255, 255, 255, .4);
}
.node:focus-visible { outline: none; }
.node:hover .node-label, .node:focus-visible .node-label { color: #fff; }

/* destination retirée du jeu */
.node.vaulted .node-disc { border-style: dashed; border-color: rgba(255, 255, 255, .4); filter: grayscale(.9) brightness(.85); box-shadow: none; }
.node.vaulted .node-label { color: #98a1bd; }
.node.vaulted:hover .node-disc, .node.vaulted:focus-visible .node-disc { filter: grayscale(.15) brightness(1); }

/* pôle d'activités : l'emblème du jeu, sans cadre */
.node.hub .node-disc { width: 4.8cqw; min-width: 36px; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
.node.hub .node-disc img { object-fit: contain; filter: drop-shadow(0 0 .7cqw rgba(241, 219, 164, .5)); transition: filter .3s; }
.node.hub .node-disc::after { content: none; }
.node.hub:hover .node-disc, .node.hub:focus-visible .node-disc { transform: scale(1.14); box-shadow: none; }
.node.hub:hover .node-disc img, .node.hub:focus-visible .node-disc img { filter: drop-shadow(0 0 1cqw rgba(255, 240, 200, .95)); }
.node.hub .node-label { color: var(--gold-hi); }

/* précision sous le nom */
.node-tag { display: block; margin-top: .25cqw; font-family: var(--font-lore); font-size: 1.25em; font-style: italic; font-weight: 500; letter-spacing: .02em; text-transform: none; color: #cbbcf2; }

/* monde du trône : un anneau pointillé autour du disque */
.node.throne .node-disc { outline: 1px dashed rgba(203, 188, 242, .85); outline-offset: .45cqw; }

/* trou noir : pas d'illustration ; un disque sombre, un anneau fin et une couronne de lumière pâle,
   comme le nœud « Éternité » du Directeur du jeu */
.node.blackhole .node-disc {
  overflow: visible; border: 0;
  background: none;
  box-shadow: 0 0 2.2cqw .5cqw rgba(132, 140, 255, .42), 0 0 5cqw 1.4cqw rgba(110, 96, 220, .22);
}
/* la couronne : des rayons fins qui tournent lentement derrière le disque */
.node.blackhole .node-disc::before {
  content: ''; position: absolute; inset: -62%; border-radius: 50%; pointer-events: none;
  background:
    repeating-conic-gradient(from 0deg, rgba(196, 204, 255, .34) 0deg 1.2deg, transparent 1.2deg 7deg, rgba(160, 150, 255, .2) 7deg 8deg, transparent 8deg 17deg),
    radial-gradient(circle, rgba(170, 176, 255, .5) 0 46%, rgba(120, 110, 230, .16) 62%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle, #000 44%, rgba(0, 0, 0, .55) 56%, transparent 72%);
  mask-image: radial-gradient(circle, #000 44%, rgba(0, 0, 0, .55) 56%, transparent 72%);
  animation: bh-turn 90s linear infinite;
}
/* l'anneau : un trait clair, un peu à l'écart du disque */
.node.blackhole .node-disc::after {
  inset: 0; border-radius: 50%; background: radial-gradient(circle, #05060f 0 62%, #10122a 100%);
  outline: 1px solid rgba(226, 230, 255, .9); outline-offset: .32cqw;
  box-shadow: 0 0 .9cqw .25cqw rgba(190, 196, 255, .55);
  animation: bh-pulse 5s ease-in-out infinite;
}
.node.blackhole .node-disc { isolation: isolate; }
.node.blackhole .node-label { margin-top: .9cqw; letter-spacing: .34em; color: #dfe3ff; }
.node.blackhole:hover .node-disc, .node.blackhole:focus-visible .node-disc {
  box-shadow: 0 0 .6cqw .15cqw #fff, 0 0 2.8cqw .8cqw rgba(160, 166, 255, .7), 0 0 6cqw 2cqw rgba(120, 104, 240, .35);
}
@keyframes bh-turn { to { transform: rotate(360deg); } }
@keyframes bh-pulse { 50% { outline-color: rgba(226, 230, 255, .45); box-shadow: 0 0 1.3cqw .4cqw rgba(190, 196, 255, .75); } }
@media (prefers-reduced-motion: reduce) { .node.blackhole .node-disc::before, .node.blackhole .node-disc::after { animation: none; } }

/* astre sans page à lui (renvoie vers la zone qui y mène) */
.node.planet .node-disc { border-color: rgba(255, 190, 140, .75); box-shadow: 0 0 2cqw rgba(255, 140, 80, .25); }

/* zone réunissant plusieurs astres : une bulle derrière leurs nœuds */
.node.zone {
  z-index: 0; width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); transform: none; display: block;
  border: 1px dashed rgba(255, 170, 110, .6); border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 120, 60, .13), rgba(255, 150, 80, .05) 60%, rgba(255, 120, 60, .11));
  box-shadow: inset 0 0 4cqw rgba(255, 120, 60, .1);
  transition: opacity .4s ease, background .3s, border-color .3s, box-shadow .3s;
}
.node.zone .node-disc { display: none; }
.node.zone .node-label { position: absolute; left: calc(var(--lx) * 1%); top: 50%; transform: translate(-50%, -50%); max-width: 22cqw; font-size: clamp(.56rem, 1cqw, .92rem); letter-spacing: .2em; color: #ffd9bd; }
.node.zone .node-tag { color: #f0b48e; }
.node.zone.featured { border-color: rgba(241, 219, 164, .7); box-shadow: inset 0 0 3cqw rgba(255, 120, 60, .12), 0 0 0 .2cqw rgba(241, 219, 164, .12), 0 0 2.2cqw rgba(241, 219, 164, .25); }
.node.zone:hover, .node.zone:focus-visible { z-index: 0; border-color: #ffc59c; background: linear-gradient(90deg, rgba(255, 120, 60, .24), rgba(255, 150, 80, .12) 60%, rgba(255, 120, 60, .2)); box-shadow: inset 0 0 4cqw rgba(255, 120, 60, .2), 0 0 3cqw rgba(255, 120, 60, .22); }

/* destination disposant d'une page sur mesure */
.node.featured .node-disc { border-color: var(--gold-hi); box-shadow: 0 0 0 .35cqw rgba(241, 219, 164, .16), 0 0 2.8cqw rgba(241, 219, 164, .45); }

/* une destination retirée du jeu mais dotée d'une page sur mesure garde son halo : le filtre gris l'éteindrait */
.node.vaulted.featured .node-disc { border-style: solid; filter: none; }
.map.filter-active .node.vaulted, .map.filter-vaulted .node:not(.vaulted) { opacity: .14; pointer-events: none; }

/* ---------- Infobulle ---------- */
.dir-tip {
  position: absolute; z-index: 6; width: 340px; max-width: calc(100% - 16px); pointer-events: none;
  background: rgba(8, 12, 24, .96); border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px -18px #000;
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease;
}
.dir-tip.show { opacity: 1; transform: none; }
.dir-tip .tip-head { padding: 10px 14px 11px; background: linear-gradient(90deg, #3d4f86, #26335c); }
.dir-tip.is-vaulted .tip-head { background: linear-gradient(90deg, #4a4f5e, #2c303b); }
.dir-tip.is-hub .tip-head { background: linear-gradient(90deg, #a8891d, #6b5a1c); }
.dir-tip .tip-kicker { margin: 0; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.dir-tip h2 { margin: 2px 0 0; font-size: 1.2rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; color: #fff; }
.dir-tip .tip-body { padding: 12px 14px 14px; }
.dir-tip .desc { margin: 0 0 10px; font-size: .86rem; line-height: 1.5; color: #cdd3e6; }
.dir-tip .desc:empty { display: none; }
.dir-tip .facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

/* ---------- Adaptatif : la carte devient une liste ---------- */
@media (max-width: 820px) {
  .dir-head { position: static; padding: 84px var(--gutter) 0; }
  .map-wrap { display: block; padding-top: 18px; }
  .map { width: 100%; min-width: 0; aspect-ratio: auto; container-type: normal; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .orbits, .dir-tip { display: none; }
  .node { position: static; width: auto; transform: none; flex-direction: row; gap: 12px; padding: 10px; background: rgba(8, 12, 24, .7); border: 1px solid var(--line); }
  .node-disc, .node.hub .node-disc { width: 44px; min-width: 44px; }
  .node.hub .node-disc { width: 34px; min-width: 34px; margin: 5px; }
  .node-label, .node.hub .node-label, .node.zone .node-label { position: static; transform: none; margin: 0; width: auto; max-width: none; font-size: .68rem; letter-spacing: .08em; text-align: left; }
  .node.zone { display: flex; width: auto; height: auto; border-radius: 0; box-shadow: none; }
  .node.zone .node-disc { display: block; }
  .node.planet { display: none; }
  .node.throne .node-disc { outline-offset: 2px; }
}
@media (max-width: 420px) {
  .map { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Plan du site (pied de page) : chaque page en lien simple, lisible sans JavaScript ---------- */
.dir-plan { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px 36px; width: min(1100px, 100%); margin: 10px 0 6px; text-align: left; }
.dir-about { grid-column: 1 / -1; max-width: 760px; margin: 0 auto 4px; font-size: .86rem; line-height: 1.65; text-align: center; color: var(--muted); }
.dir-plan-title { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); }
.dir-plan ul { margin: 0; padding: 0; list-style: none; }
.dir-plan-group:first-of-type ul { columns: 3 180px; column-gap: 24px; }
.dir-plan li { break-inside: avoid; padding: 3px 0; }
.dir-plan a { font-size: .8rem; color: var(--faint); transition: color .25s; }
.dir-plan a:hover, .dir-plan a:focus-visible { color: #fff; }
@media (max-width: 820px) {
  .dir-plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dir-plan-group:first-of-type { grid-column: 1 / -1; }
  .dir-plan-group:first-of-type ul { columns: 2; }
}