/* Cipher — 3D subnet galaxy overlay (v6).
 * Mobile: the panel itself is deliberately left collapsed (1px). Giving the
 * PANEL height woke the legacy 2D galaxy renderer, which hangs the main thread
 * at phone widths — that was the real cause of the mobile freeze, not WebGL.
 * The 3D canvas therefore sets its OWN height instead of inheriting one.
 */

#galaxy3d-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  touch-action: none;
  cursor: grab;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255,176,32,0.055), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 50%, rgba(20,40,64,0.35), transparent 75%);
}

body.g3d-on #galaxy3d-canvas{ display: block; }
body.g3d-on #galaxy-canvas{ display: none; }

@media (min-width: 900px){
  body[data-view="galaxy"] #galaxy-panel{
    display: flex;
    min-height: 92vh;
  }
}

@media (max-width: 899px){
  /* the legacy 2D canvas is force-hidden on phones (see galaxy3d-v15.js), so the
     panel can safely own real height again */
  body[data-view="galaxy"] #galaxy-panel{
    display: flex;
    min-height: calc(100vh - 150px);
    min-height: 92svh;
  }
  body.g3d-on #galaxy3d-canvas{ inset: 0; height: 100%; }
  #galaxy-hdr{ top: 10px; left: 12px; gap: 4px 10px; max-width: calc(100% - 24px); }
  #galaxy-hdr .galaxy-title{ font-size: 20px; }
  #galaxy-meta{ font-size: 15px; }
  #galaxy-hdr .galaxy-legend{ font-size: 14px; }
  #galaxy-hint{ font-size: 14px; right: 10px; bottom: 8px; }
}

#galaxy-panel .g3d-msg{
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  z-index: 7;
  color: #b9c6d6;
  background: rgba(10,16,24,0.86);
  border: 1px solid rgba(120,145,175,0.28);
  border-radius: 8px;
  padding: 8px 14px;
  font: 600 12px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  pointer-events: none;
}

body.g3d-on #galaxy-hint{ color: rgba(190,206,224,0.75); }