/* Directeur — vision de Raspoutine (js/pages/director-rasputin.js) : le mur du bunker de Raspoutine.
   Métal sombre, joints de panneaux, poutre en treillis, ampoules ambrées ; les noms en russe, dans un
   caractère de bureau comme sur le mur du jeu ; un afficheur rouge à matrice de points.
   Tout est rangé sous .dir.is-rasputin : sans la classe, le Directeur reste tel quel. */

.dir {
  --rasp-amber: #ffb24d; --rasp-amber-hi: #ffe7bd; --rasp-label: #f3e7d1; --rasp-red: #ff5a32;
  --rasp-font: Arial, 'Segoe UI', 'Helvetica Neue', sans-serif; --rasp-mono: Consolas, 'Lucida Console', 'Courier New', monospace;
}
.rasp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rasp-layer, .lamps, .node-ru, .tip-ru, .dir-ru { display: none; }

/* ---------- Le bouton, sur la ligne des filtres ---------- */
.dir-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.dir-mode {
  display: inline-flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 14px 0 11px; cursor: pointer;
  background: rgba(3, 5, 11, .5); border: 1px solid rgba(255, 178, 77, .45);
  font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #f1c88a;
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.dir-mode-lamps { display: inline-flex; gap: 3px; }
.dir-mode-lamps i { width: 6px; height: 6px; border-radius: 50%; background: #4a3420; box-shadow: inset 0 0 0 1px rgba(255, 200, 140, .18); transition: background .25s, box-shadow .25s; }
.dir-mode:hover, .dir-mode:focus-visible { color: #fff; border-color: var(--rasp-amber); }
.dir-mode:hover .dir-mode-lamps i:nth-child(1), .dir-mode[aria-pressed="true"] .dir-mode-lamps i {
  background: radial-gradient(circle at 40% 35%, #fff6dc, #ffb24d 70%); box-shadow: 0 0 6px rgba(255, 178, 77, .9);
}
.dir-mode[aria-pressed="true"] { background: rgba(255, 178, 77, .14); border-color: var(--rasp-amber); color: var(--rasp-amber-hi); box-shadow: 0 0 18px -4px rgba(255, 160, 60, .55); }

/* ---------- Le mur ---------- */
.dir.is-rasputin { background: #0a0806; }
.dir.is-rasputin .dir-space {
  background:
    radial-gradient(ellipse 30% 58% at 0% 50%, rgba(255, 166, 66, .3), rgba(255, 136, 48, .08) 52%, transparent 76%),
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(82, 58, 30, .32), transparent 74%),
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 3px), rgba(0, 0, 0, .55) calc(12.5% - 3px) calc(12.5% - 1px), rgba(255, 214, 160, .05) calc(12.5% - 1px) 12.5%),
    repeating-linear-gradient(180deg, transparent 0 calc(33.3% - 2px), rgba(0, 0, 0, .4) calc(33.3% - 2px) 33.3%),
    linear-gradient(180deg, #14100b, #0b0907 55%, #070605);
}
/* les ampoules éteintes du mur, par grappes */
.dir.is-rasputin .dir-space::before {
  opacity: 1; animation: none;
  background-image: radial-gradient(circle, rgba(150, 110, 62, .26) 0 2.2px, rgba(255, 222, 170, .05) 2.6px, transparent 3.2px);
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(ellipse 10% 15% at 84% 30%, #000 35%, transparent 72%), radial-gradient(ellipse 8% 13% at 91% 66%, #000 35%, transparent 72%),
    radial-gradient(ellipse 11% 9% at 64% 90%, #000 35%, transparent 72%), radial-gradient(ellipse 7% 11% at 33% 16%, #000 35%, transparent 72%),
    radial-gradient(ellipse 9% 10% at 47% 74%, #000 30%, transparent 70%);
  mask-image: radial-gradient(ellipse 10% 15% at 84% 30%, #000 35%, transparent 72%), radial-gradient(ellipse 8% 13% at 91% 66%, #000 35%, transparent 72%),
    radial-gradient(ellipse 11% 9% at 64% 90%, #000 35%, transparent 72%), radial-gradient(ellipse 7% 11% at 33% 16%, #000 35%, transparent 72%),
    radial-gradient(ellipse 9% 10% at 47% 74%, #000 30%, transparent 70%);
}
/* la poutre en treillis, les lignes de balayage et le vignettage */
.dir.is-rasputin .dir-space::after {
  opacity: 1; animation: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36'%3E%3Cg fill='none' stroke='%23826038' stroke-opacity='.6'%3E%3Cpath d='M0 3H120M0 33H120' stroke-width='2.4'/%3E%3Cpath d='M0 3L60 33L120 3M0 33L60 3L120 33' stroke-width='1.2'/%3E%3Cpath d='M0 3V33M60 3V33' stroke-width='1.8'/%3E%3C/g%3E%3C/svg%3E") 0 60px / 120px 36px repeat-x,
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(0, 0, 0, .6) 100%);
}

/* ---------- Titre, filtres ---------- */
.dir.is-rasputin .dir-head .kicker { color: var(--rasp-amber); }
.dir.is-rasputin .dir-head h1 { color: var(--rasp-amber-hi); text-shadow: 0 0 18px rgba(255, 170, 70, .45); }
/* la ligne en russe se range à droite du titre : la tête garde sa hauteur et ne touche pas la carte */
.dir.is-rasputin .dir-head h1 { display: inline-block; }
.dir.is-rasputin .dir-ru {
  display: inline-block; margin: 0 0 0 18px; white-space: nowrap;
  font-family: var(--rasp-font); font-size: .9rem; letter-spacing: .02em; color: #e9c48c;
}
.dir.is-rasputin .dir-chrono, .dir.is-rasputin .dir-head .kicker { display: flex; width: max-content; }
.dir.is-rasputin .dir-chrono { color: #f1c88a; border-color: rgba(255, 178, 77, .45); }
.dir.is-rasputin .dir-filter { background: rgba(20, 13, 6, .6); border-color: rgba(255, 178, 77, .3); color: #d2b48a; }
.dir.is-rasputin .dir-filter:hover { color: #fff; border-color: var(--rasp-amber); }
.dir.is-rasputin .dir-filter[aria-pressed="true"] { background: var(--rasp-amber); border-color: var(--rasp-amber); color: #1c1106; }

/* ---------- Calque : Soleil, ceinture, repères, afficheur ---------- */
.dir.is-rasputin .rasp-layer { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rasp-layer text { font-family: var(--rasp-font); font-size: 15px; fill: var(--rasp-label); }
.rasp-layer .rasp-caption { font-family: var(--rasp-mono); font-size: 12px; letter-spacing: 3px; fill: #ff8a66; }

/* les ampoules (calque et disques des nœuds) */
.rasp-layer .on, .lamps .on { fill: url(#rasp-lamp); }
.rasp-layer .dim, .lamps .dim { fill: url(#rasp-lamp); opacity: .42; }
.rasp-layer .off, .lamps .off { fill: #2c2117; stroke: rgba(255, 214, 160, .07); stroke-width: .6; }
.rasp-layer .rasp-readout .on { fill: url(#rasp-red); }
.rasp-layer .rasp-readout .off { fill: #2e100a; stroke: rgba(255, 120, 90, .1); }
.flk { animation: rasp-flicker 9s steps(1, end) infinite; }
@keyframes rasp-flicker { 0%, 91%, 100% { opacity: 1; } 92% { opacity: .2; } 93% { opacity: .85; } 95% { opacity: .1; } 96% { opacity: 1; } }

/* ---------- Orbites et traits ---------- */
.dir.is-rasputin .orbits circle { stroke: rgba(255, 190, 110, .08); }
.dir.is-rasputin .orbits line { stroke: rgba(255, 186, 100, .45); }
.dir.is-rasputin .orbits text { font-family: var(--rasp-font); font-size: 15px; font-weight: 400; letter-spacing: .4px; text-transform: none; fill: rgba(243, 231, 209, .62); }

/* ---------- Nœuds ---------- */
.dir.is-rasputin .map .node .node-disc { overflow: visible; border: 0; outline: 0; background: none; box-shadow: none; filter: none; }
.dir.is-rasputin .map .node .node-disc::before, .dir.is-rasputin .map .node .node-disc::after { content: none; }
.dir.is-rasputin .map .node .node-disc img { display: none; }
.dir.is-rasputin .lamps { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 .3cqw rgba(255, 168, 66, .8)); transition: filter .3s; }
.dir.is-rasputin .map .node:hover .node-disc, .dir.is-rasputin .map .node:focus-visible .node-disc { box-shadow: none; transform: scale(1.12); }
.dir.is-rasputin .map .node:hover .lamps, .dir.is-rasputin .map .node:focus-visible .lamps { filter: brightness(1.22) drop-shadow(0 0 .65cqw rgba(255, 196, 110, .95)); }
.dir.is-rasputin .map .node.vaulted:not(.featured) .lamps { filter: drop-shadow(0 0 .2cqw rgba(255, 150, 60, .45)); }
.dir.is-rasputin .map .node.blackhole .lamps { filter: drop-shadow(0 0 .35cqw rgba(255, 168, 66, .85)) drop-shadow(0 0 1.6cqw rgba(255, 140, 50, .35)); }

/* pôles d'activités : l'emblème, tramé en ampoules */
.dir.is-rasputin .map .node.hub .node-disc { filter: drop-shadow(0 0 .35cqw rgba(255, 168, 66, .75)); }
.dir.is-rasputin .map .node.hub .node-disc img {
  display: block; filter: brightness(0) invert(1) sepia(1) saturate(4.5) hue-rotate(-12deg) brightness(1.12);
  -webkit-mask-image: radial-gradient(circle, #000 0 1.9px, transparent 2.3px); -webkit-mask-size: 5px 5px;
  mask-image: radial-gradient(circle, #000 0 1.9px, transparent 2.3px); mask-size: 5px 5px;
}
.dir.is-rasputin .map .node.hub:hover .node-disc, .dir.is-rasputin .map .node.hub:focus-visible .node-disc { filter: brightness(1.25) drop-shadow(0 0 .6cqw rgba(255, 196, 110, .95)); }

/* zone de plusieurs astres : un contour d'ampoules */
.dir.is-rasputin .map .node.zone {
  border: .3cqw dotted rgba(255, 176, 84, .72); box-shadow: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 150, 60, .07), transparent 70%);
}
.dir.is-rasputin .map .node.zone:hover, .dir.is-rasputin .map .node.zone:focus-visible { border-color: var(--rasp-amber-hi); background: radial-gradient(ellipse at 50% 50%, rgba(255, 150, 60, .14), transparent 72%); box-shadow: 0 0 3cqw -1cqw rgba(255, 150, 60, .35); }

/* noms en russe */
.dir.is-rasputin .map .node .node-label { display: none; }
.dir.is-rasputin .node-ru {
  display: block; width: max-content; max-width: 13cqw; text-align: center;
  font-family: var(--rasp-font); font-size: clamp(.62rem, .95cqw, .88rem); font-weight: 400; line-height: 1.2; color: var(--rasp-label);
  text-shadow: 0 0 6px rgba(255, 170, 80, .3), 0 1px 3px #000; transition: color .3s;
}
.dir.is-rasputin .node-ru small { display: block; margin-top: .15cqw; font-size: .84em; color: #d8b37c; }
.dir.is-rasputin .node:hover .node-ru, .dir.is-rasputin .node:focus-visible .node-ru { color: #fff; }
.dir.is-rasputin .node.vaulted:not(.featured) .node-ru { color: #b9a685; }
.dir.is-rasputin .node.hub .node-ru { color: #ffd59a; }
.dir.is-rasputin .node.blackhole .node-ru { margin-top: .9cqw; }
.dir.is-rasputin .node.zone .node-ru { position: absolute; left: calc(var(--lx) * 1%); top: 50%; transform: translate(-50%, -50%); max-width: 22cqw; font-size: clamp(.68rem, 1.15cqw, 1.05rem); }

/* ---------- Infobulle : un terminal ambré ---------- */
.dir.is-rasputin .dir-tip { background: rgba(14, 10, 6, .97); border-color: rgba(255, 176, 84, .5); box-shadow: 0 24px 60px -18px #000, 0 0 36px -12px rgba(255, 150, 50, .45); }
.dir.is-rasputin .dir-tip .tip-head, .dir.is-rasputin .dir-tip.is-vaulted .tip-head, .dir.is-rasputin .dir-tip.is-hub .tip-head {
  background: linear-gradient(90deg, #4c2d0d, #22150a); border-bottom: 1px solid rgba(255, 176, 84, .3);
}
.dir.is-rasputin .dir-tip .tip-kicker { font-family: var(--rasp-mono); letter-spacing: .12em; color: #eab06a; }
.dir.is-rasputin .dir-tip h2 { color: var(--rasp-amber-hi); text-shadow: 0 0 12px rgba(255, 170, 70, .45); }
.dir.is-rasputin .tip-ru { display: block; margin: 3px 0 0; font-family: var(--rasp-font); font-size: .84rem; color: #ffcf8a; }
.dir.is-rasputin .tip-ru:empty { display: none; }
.dir.is-rasputin .dir-tip .desc { color: #e2d4bd; }
.dir.is-rasputin .dir-tip .fact { border-color: rgba(255, 176, 84, .35); color: #f0d8b2; }
.dir.is-rasputin .dir-tip .fact.on { border-color: rgba(255, 200, 110, .6); color: #ffd48e; }
.dir.is-rasputin .dir-tip .fact.off { border-color: rgba(255, 110, 80, .45); color: #ff9c80; }

/* ---------- Allumage : du Soleil vers le nuage d'Oort, avec un balayage ---------- */
.dir.rasp-boot .lamps, .dir.rasp-boot .node.hub .node-disc img, .dir.rasp-boot .node-ru, .dir.rasp-boot .rasp-layer > g {
  animation: rasp-on .8s steps(1, end) var(--boot, 0ms) both;
}
.dir.rasp-boot .orbits { animation: rasp-on .8s steps(1, end) 200ms both; }
.dir.rasp-boot .map::after {
  content: ''; position: absolute; top: -2%; bottom: -2%; left: 0; width: 2px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 214, 150, .95) 20%, rgba(255, 214, 150, .95) 80%, transparent);
  box-shadow: 0 0 16px 5px rgba(255, 160, 60, .4); animation: rasp-sweep 1.5s linear .12s both;   /* au rythme de l'allumage : 120 ms + 13 ms par % de largeur */
}
@keyframes rasp-on { 0% { opacity: 0; } 25% { opacity: .9; } 35% { opacity: .1; } 50% { opacity: 1; } 65% { opacity: .55; } 80%, 100% { opacity: 1; } }
@keyframes rasp-sweep { from { left: 0; opacity: 1; } 90% { opacity: 1; } to { left: 100%; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .flk, .dir.rasp-boot .lamps, .dir.rasp-boot .node-ru, .dir.rasp-boot .rasp-layer > g, .dir.rasp-boot .orbits { animation: none; }
  .dir.rasp-boot .map::after { content: none; }
}

/* ---------- Petits écrans : la liste, en ampoules ---------- */
@media (max-width: 820px) {
  .dir.is-rasputin .rasp-layer { display: none; }
  .dir.is-rasputin .dir-head h1 { display: block; }
  .dir.is-rasputin .dir-ru { display: block; margin: -2px 0 12px; white-space: normal; }
  .dir.is-rasputin .map .node { background: rgba(24, 16, 8, .78); border-color: rgba(255, 176, 84, .22); }
  .dir.is-rasputin .map .node.zone { border: 1px dotted rgba(255, 176, 84, .6); }
  .dir.is-rasputin .node-ru, .dir.is-rasputin .node.zone .node-ru { position: static; transform: none; max-width: none; text-align: left; font-size: .82rem; }
  .dir.is-rasputin .map .node.zone .node-disc { display: none; }
  .dir.is-rasputin .map .node.hub .node-disc img {
    -webkit-mask-image: radial-gradient(circle, #000 0 1.2px, transparent 1.5px); -webkit-mask-size: 3.4px 3.4px;
    mask-image: radial-gradient(circle, #000 0 1.2px, transparent 1.5px); mask-size: 3.4px 3.4px;
  }
}