/* Mobile Visuals Universal Fix V10
   Keeps WebGL/canvas/SVG visualizations measurable and visible on phones.
   Adds a lightweight interactive fallback only when a project has no usable hero visual. */
html, body, #root { max-width: 100%; }

@media (max-width: 1023.98px) {
  html, body { overflow-x: clip !important; }
  #root, #root main, #root section { min-width: 0; }
  #root :is(.grid, .flex) > * { min-width: 0; }
  #root :is(p, li, td, th, code, pre, span, strong, small) { overflow-wrap: anywhere; }

  #root .mv10-force-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    content-visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  #root .mv10-stage,
  #root .mv10-fallback {
    --mv10-green: #39ff14;
    --mv10-pink: #ff0a8a;
    --mv10-cyan: #20d9ff;
    display: block !important;
    position: relative !important;
    isolation: isolate;
    width: min(calc(100% - 1rem), 40rem) !important;
    max-width: calc(100vw - 1rem) !important;
    height: clamp(18rem, 84vw, 29rem) !important;
    min-height: 18rem !important;
    margin: 1.4rem auto 2.25rem !important;
    overflow: hidden !important;
    border: 3px solid #111 !important;
    border-radius: 3px 25px 3px 19px !important;
    background:
      radial-gradient(circle at 50% 48%, rgba(32,217,255,.10), transparent 42%),
      linear-gradient(180deg, #09090c 0%, #050506 100%) !important;
    box-shadow: 7px 7px 0 var(--mv10-pink), -3px -3px 0 var(--mv10-green) !important;
    grid-column: 1 / -1 !important;
    align-self: stretch !important;
  }

  #root .mv10-stage > :first-child,
  #root .mv10-stage .mv10-visual-host,
  #root .mv10-fallback .mv10-visual-host {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }

  #root .mv10-stage canvas,
  #root .mv10-fallback canvas,
  #root canvas.mv10-responsive-visual {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    touch-action: pan-y pinch-zoom !important;
  }

  #root svg.mv10-responsive-visual {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 15rem !important;
    max-height: 28rem !important;
    overflow: visible !important;
  }

  #root .mv10-visual-label {
    position: absolute;
    z-index: 8;
    top: .7rem;
    left: .7rem;
    max-width: calc(100% - 1.4rem);
    padding: .38rem .58rem;
    color: #050506;
    background: var(--mv10-green);
    border: 2px solid #111;
    box-shadow: 3px 3px 0 var(--mv10-pink);
    font: 900 .62rem/1.2 "JetBrains Mono", "Cascadia Code", monospace;
    letter-spacing: .075em;
    text-transform: uppercase;
    white-space: normal;
    pointer-events: none;
  }

  #root .mv10-visual-caption {
    position: absolute;
    z-index: 8;
    left: .8rem;
    right: .8rem;
    bottom: .7rem;
    display: flex;
    justify-content: space-between;
    gap: .65rem;
    color: #e7e7ec;
    font: 700 .62rem/1.25 "JetBrains Mono", "Cascadia Code", monospace;
    letter-spacing: .04em;
    pointer-events: none;
  }
  #root .mv10-visual-caption span:last-child { color: var(--mv10-cyan); text-align: right; }
}

@media (max-width: 430px) {
  #root .mv10-stage,
  #root .mv10-fallback {
    width: calc(100% - .65rem) !important;
    max-width: calc(100vw - .65rem) !important;
    height: clamp(17.5rem, 92vw, 23rem) !important;
    min-height: 17.5rem !important;
    margin-left: .15rem !important;
    margin-right: .5rem !important;
    box-shadow: 5px 5px 0 #ff0a8a, -2px -2px 0 #39ff14 !important;
  }
}

@media (min-width: 1024px) {
  #root .mv10-fallback { display: none !important; }
}

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