/* Scena networking BigBO: sezione scroll, hotspot e pannelli comunità. */
/* Hero compatto SOLO su questa pagina: il default condiviso (spaces.css) è
   170svh e lasciava una lunga corsa vuota tra il titolo e i blocchi di testo
   successivi. */
.bigbo-page .space-hero {
  min-height: 92svh;
}
/* Lockup ufficiale in HTML: resta percepibile anche senza WebGL e per gli
   screen reader (la targa 3D nella scena non basta da sola). */
.bigbo-page .bigbo-lockup {
  display: block;
  width: 180px;
  height: auto;
  margin-top: 34px;
}
/* Blocchi di testo ravvicinati SOLO su questa pagina: i default condivisi
   (spaces.css) danno 92svh a ogni voce del ledger e 360svh alla sezione —
   il primo blocco arrivava un'intera viewport dopo il titolo. */
.bigbo-page .diagnostic {
  min-height: 0;
  padding-top: 10svh;
  padding-bottom: 12svh;
}
.bigbo-page .diagnostic-ledger article {
  min-height: 42svh;
}
.bigbo-page .external-gate {
  min-height: 96svh;
}
/* La sezione occupa 620svh SOLO quando la scena WebGL è viva: senza WebGL (o se
   il modulo non si carica) resterebbero 6 viewport vuote da scrollare. */
.bigbo-network {
  position: relative;
  min-height: 0;
  pointer-events: none;
}
html.webgl-ready .bigbo-network {
  min-height: 620svh;
}
html:not(.webgl-ready) .bigbo-hotspot,
html:not(.webgl-ready) .bigbo-panel {
  display: none;
}

.bigbo-hotspot {
  position: fixed;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(114, 219, 230, 0.25);
  background: rgba(7, 23, 26, 0.18);
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s, border-color 0.3s ease;
  z-index: 24;
}
.bigbo-network.is-live .bigbo-hotspot {
  opacity: 1;
  visibility: visible;
}
/* Gruppo fuori scena (centro proiettato ben oltre il frustum): l'hotspot non
   resta agganciato al bordo — sarebbe cliccabile senza puntare a nulla e, con
   due gruppi lontani, impilato sullo stesso angolo. La regola deve battere
   quella di .is-live, quindi ha una classe in più. */
.bigbo-network.is-live .bigbo-hotspot.is-offscreen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.bigbo-hotspot:hover,
.bigbo-hotspot:focus-visible {
  border-color: rgba(114, 219, 230, 0.7);
}
.bigbo-hotspot:focus-visible {
  outline: 2px solid #72dbe6;
  outline-offset: 3px;
}

.bigbo-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: min(300px, 78vw);
  background: rgba(7, 23, 26, 0.86);
  border: 1px solid rgba(114, 219, 230, 0.16);
  border-left: 3px solid var(--panel-accent, #72dbe6);
  border-radius: 10px;
  padding: 18px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
  pointer-events: none;
  z-index: 30;
}
.bigbo-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.bigbo-panel h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: #f5f7f2;
}
.bigbo-panel p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #c9d4d6;
}
.bigbo-panel[data-group="cyan"] { --panel-accent: #1faed6; }
.bigbo-panel[data-group="lime"] { --panel-accent: #c3d300; }
.bigbo-panel[data-group="coral"] { --panel-accent: #ff6b5e; }
.bigbo-panel[data-group="steel"] { --panel-accent: #5a8fc0; }

@media (max-width: 640px) {
  .bigbo-panel { width: min(280px, 84vw); }
}
@media (prefers-reduced-motion: reduce) {
  .bigbo-hotspot,
  .bigbo-panel { transition: none; }
}