/* HUD Jarvis : il encadre le sujet et se lit d'un coup d'œil.

   Tout est décoratif au sens accessible du terme — l'information existe déjà
   dans la console, ce HUD la met en scène. D'où `aria-hidden` sur le bloc et
   aucune interaction : il ne capte jamais le pointeur. */

.bb-hud {
  position: absolute;
  inset: -6% -14%;
  pointer-events: none;
  font-family: var(--ds-font-mono, ui-monospace, "SFMono-Regular", monospace);
  color: var(--bb-cyan, #64e6f5);
  z-index: 4;
}

/* --- équerres qui suivent le sujet -------------------------------------- */
.bb-hud__coin {
  position: absolute;
  width: 34px; height: 34px;
  border: 1px solid rgba(100, 230, 245, .38);
  opacity: 0;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .75, .2, 1);
}
.bb-hud__coin--hg { top: 0; left: 0; border-right: 0; border-bottom: 0; transform: translate(8px, 8px); }
.bb-hud__coin--hd { top: 0; right: 0; border-left: 0; border-bottom: 0; transform: translate(-8px, 8px); }
.bb-hud__coin--bg { bottom: 0; left: 0; border-right: 0; border-top: 0; transform: translate(8px, -8px); }
.bb-hud__coin--bd { bottom: 0; right: 0; border-left: 0; border-top: 0; transform: translate(-8px, -8px); }
.bb-hud[data-etape] .bb-hud__coin { opacity: 1; transform: none; }

/* --- balayage : une passe lente, verticale, très basse opacité ---------- */
.bb-hud__balayage {
  position: absolute; left: 6%; right: 6%; height: 22%;
  background: linear-gradient(to bottom,
              transparent, rgba(100, 230, 245, .10), transparent);
  border-top: 1px solid rgba(100, 230, 245, .22);
  opacity: 0;
}
.bb-hud[data-etape="1"] .bb-hud__balayage,
.bb-hud[data-etape="2"] .bb-hud__balayage {
  opacity: 1;
  animation: bb-hud-balayage 5.2s cubic-bezier(.4, 0, .3, 1) infinite;
}

/* --- réticule : il apparaît quand les emplacements se posent ------------ */
.bb-hud__reticule {
  position: absolute; left: 50%; top: 30%;
  width: 96px; height: 96px;
  margin: -48px 0 0 -48px;
  border: 1px solid rgba(100, 230, 245, .3);
  border-radius: 50%;
  opacity: 0; transform: scale(.86);
  transition: opacity .42s ease, transform .42s cubic-bezier(.2, .75, .2, 1);
}
.bb-hud__reticule::before,
.bb-hud__reticule::after {
  content: ""; position: absolute; background: rgba(100, 230, 245, .35);
}
.bb-hud__reticule::before { left: 50%; top: -10px; bottom: -10px; width: 1px; }
.bb-hud__reticule::after { top: 50%; left: -10px; right: -10px; height: 1px; }
.bb-hud[data-etape="3"] .bb-hud__reticule,
.bb-hud[data-etape="4"] .bb-hud__reticule { opacity: 1; transform: none; }

/* --- télémétrie : quatre lignes, à gauche du sujet ---------------------- */
.bb-hud__telemetrie {
  position: absolute; left: 0; top: 26%;
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 9px;
  font-size: 9px; letter-spacing: .16em;
}
.bb-hud__telemetrie li {
  display: grid; gap: 1px;
  padding-left: 10px;
  border-left: 1px solid rgba(100, 230, 245, .28);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .75, .2, 1);
}
.bb-hud[data-etape] .bb-hud__telemetrie li { opacity: 1; transform: none; }
.bb-hud[data-etape] .bb-hud__telemetrie li:nth-child(2) { transition-delay: 60ms; }
.bb-hud[data-etape] .bb-hud__telemetrie li:nth-child(3) { transition-delay: 120ms; }
.bb-hud[data-etape] .bb-hud__telemetrie li:nth-child(4) { transition-delay: 180ms; }
.bb-hud__telemetrie b { color: rgba(138, 161, 175, .8); font-weight: 500; }
.bb-hud__telemetrie span { color: #e7f2f7; font-size: 11px; letter-spacing: .06em; }
/* L'inventaire n'a de sens qu'une fois la cible posée. */
.bb-hud__telemetrie li:nth-child(4) { opacity: 0 !important; }
.bb-hud[data-etape="3"] .bb-hud__telemetrie li:nth-child(4),
.bb-hud[data-etape="4"] .bb-hud__telemetrie li:nth-child(4) { opacity: 1 !important; }

/* --- socle : l'état du système, sous les pieds -------------------------- */
.bb-hud__socle {
  position: absolute; left: 50%; bottom: 2%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px;
  border: 1px solid rgba(100, 230, 245, .24);
  border-radius: 999px;
  background: rgba(3, 14, 24, .62);
  font-size: 9px; letter-spacing: .18em;
}
.bb-hud__socle i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bb-cyan, #64e6f5);
  box-shadow: 0 0 8px var(--bb-cyan, #64e6f5);
  animation: bb-hud-pouls 2.4s ease-in-out infinite;
}
.bb-hud__socle em { font-style: normal; color: #8aa1af; }
/* Board ready : volt, parce que c'est un changement d'état, pas un décor. */
.bb-hud[data-etape="4"] .bb-hud__socle { border-color: rgba(215, 255, 62, .5); }
.bb-hud[data-etape="4"] .bb-hud__socle i { background: #d7ff3e; box-shadow: 0 0 8px #d7ff3e; }
.bb-hud[data-etape="4"] .bb-hud__socle em { color: #d7ff3e; }

@keyframes bb-hud-balayage { 0% { top: -22% } 100% { top: 100% } }
@keyframes bb-hud-pouls { 0%, 100% { opacity: 1 } 50% { opacity: .32 } }

/* Écrans étroits : la télémétrie latérale n'a plus la place, le socle reste. */
@media (max-width: 900px) {
  .bb-hud { inset: -4% -6%; }
  .bb-hud__telemetrie { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-hud__balayage { animation: none; opacity: .35; }
  .bb-hud__socle i { animation: none; }
  .bb-hud__coin, .bb-hud__reticule, .bb-hud__telemetrie li { transition: opacity .01ms; }
}