/* Reproducible Notebook Lab — Mobile 3D Sphere Visibility Fix V9
   The original React component used `hidden lg:block`, so WebGL mounted in a
   zero-sized element on phones. This override makes the visual stage measurable
   before Three.js initializes and keeps it fully inside the mobile viewport. */

@media (max-width: 1023.98px) {
  #root .grid.lg\:grid-cols-2 > .hidden.lg\:block,
  #root .mobile-sphere-stage {
    display: block !important;
    width: min(100%, 34rem) !important;
    max-width: 100% !important;
    height: clamp(19rem, 84vw, 27rem) !important;
    min-height: 19rem !important;
    margin: 1.5rem auto 2.25rem !important;
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    border: 3px solid #111 !important;
    border-radius: 2px 24px 2px 18px !important;
    background:
      radial-gradient(circle at 50% 48%, rgba(38, 230, 255, .08), transparent 42%),
      linear-gradient(180deg, #08080b 0%, #050506 100%) !important;
    box-shadow: 7px 7px 0 #ff0a8a, -3px -3px 0 #39ff14 !important;
    transform: none !important;
  }

  #root .grid.lg\:grid-cols-2 > .hidden.lg\:block::before,
  #root .mobile-sphere-stage::before {
    content: "INTERACTIVE 3D STACK MAP";
    position: absolute;
    z-index: 3;
    top: .7rem;
    left: .7rem;
    max-width: calc(100% - 1.4rem);
    padding: .35rem .55rem;
    color: #050506;
    background: #39ff14;
    border: 2px solid #111;
    box-shadow: 3px 3px 0 #ff0a8a;
    font: 900 .62rem/1.15 "JetBrains Mono", "Cascadia Code", monospace;
    letter-spacing: .08em;
    white-space: normal;
    pointer-events: none;
  }

  #root .grid.lg\:grid-cols-2 > .hidden.lg\:block > div,
  #root .mobile-sphere-stage > div,
  #root .mobile-sphere-canvas-wrap {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }

  #root .grid.lg\:grid-cols-2 > .hidden.lg\:block canvas,
  #root .mobile-sphere-stage canvas,
  #root canvas.mobile-wireframe-fallback {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    touch-action: pan-y !important;
  }
}

@media (max-width: 420px) {
  #root .grid.lg\:grid-cols-2 > .hidden.lg\:block,
  #root .mobile-sphere-stage {
    width: calc(100% - 5px) !important;
    height: clamp(18rem, 92vw, 23rem) !important;
    min-height: 18rem !important;
    margin-right: 5px !important;
    box-shadow: 5px 5px 0 #ff0a8a, -2px -2px 0 #39ff14 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #root .mobile-sphere-stage canvas {
    scroll-behavior: auto;
  }
}