/* v83 mobile / tablet QA layer — safe global constraints + page fixes */
html,body{max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img,video,canvas,svg{max-width:100%}
button,a,input,select,textarea{touch-action:manipulation}
button,input,select,textarea{max-width:100%}

/* Never let fixed utility controls create horizontal overflow */
.mb-whatsapp-floater,.media-audio-toggle,.theme-toggle,.brand-floater,.mb-brand-floater{
  max-width:calc(100vw - 20px)!important
}

/* ZUVX prototype: fixed transformed phone stack was forcing the grid wider than viewport */
body[data-zuvx-page="prototype"] .wrap{max-width:calc(100% - 24px)!important}
body[data-zuvx-page="prototype"] .hero,
body[data-zuvx-page="prototype"] .hero>*,
body[data-zuvx-page="prototype"] .hero-copy,
body[data-zuvx-page="prototype"] .phone-stage{min-width:0!important;max-width:100%!important}
body[data-zuvx-page="prototype"] .hero-copy{width:100%!important}
body[data-zuvx-page="prototype"] .hero-micro{flex-wrap:wrap!important}
body[data-zuvx-page="prototype"] .phone-stage{contain:layout paint!important}

/* Character pages and lightboxes */
body[data-zuvx-page] .modal,
body[data-zuvx-page] .lightbox,
body[data-zuvx-page] .age-gate{max-width:100vw!important}
body[data-zuvx-page] .modal-card,
body[data-zuvx-page] .lightbox-inner,
body[data-zuvx-page] .age-card{max-width:calc(100vw - 24px)!important}

/* MAI top bar: on phones the action group used to extend ~50px past the viewport */
body:has(#tabs) .shell{max-width:100vw!important;overflow-x:clip!important}
body:has(#tabs) .top{min-width:0!important}
body:has(#tabs) .top-actions{min-width:0!important;max-width:100%!important}
body:has(#tabs) .tabs{max-width:calc(100vw - 24px)!important}

/* E-ticket tiny 4px mobile overflow */
.ticket-page,.ticket{max-width:100%!important}

@media(max-width:760px){
  body{min-width:0!important}
  p,h1,h2,h3,h4,h5,h6{overflow-wrap:anywhere}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  iframe{max-width:100%!important}
  .wrap,.container,.shell-wide{max-width:100%!important}

  /* Main site top navigation remains usable instead of wrapping into a second row */
  .top-center-nav{
    max-width:calc(100vw - 16px)!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .top-center-nav::-webkit-scrollbar{display:none}
  .top-center-nav a{flex:0 0 auto!important}

  /* Builds: one clear project per row on phones */
  .builds-launcher{width:calc(100% - 24px)!important;margin:78px auto 24px!important;height:auto!important;overflow:visible!important}
  .launcher-grid{grid-template-columns:1fr!important;grid-template-rows:none!important;gap:14px!important;height:auto!important}
  .launcher-card{width:100%!important;height:auto!important;aspect-ratio:16/9!important;min-height:0!important}
  .launcher-bar{padding:13px 14px!important;gap:10px!important}
  .launcher-title{font-size:1rem!important}
  .launcher-action{font-size:.66rem!important;letter-spacing:.08em!important}
  .ukd-logo-launcher{width:26%!important}
  .ukd-mascot-launcher{width:24%!important}

  /* Ventures */
  .venture-wrap{width:calc(100% - 24px)!important;margin-top:82px!important}
  .venture-grid{grid-template-columns:1fr!important}
  .venture-card img{aspect-ratio:16/9!important}
  .venture-copy{padding:18px!important}
  .venture-actions{gap:8px!important}
  .venture-actions a{min-height:42px!important}

  /* Shared floating tools: preserve tap room and avoid overlapping content */
  .brand-floater,.mb-brand-floater{
    top:8px!important;right:8px!important;left:auto!important;bottom:auto!important;
    transform:none!important
  }
  .brand-floater img,.mb-brand-floater img{width:62px!important;height:auto!important}
  .mb-whatsapp-floater{right:10px!important;bottom:10px!important}
  .media-audio-toggle{left:10px!important;bottom:64px!important}

  /* ZUVX prototype */
  body[data-zuvx-page="prototype"] .hero{width:100%!important;grid-template-columns:minmax(0,1fr)!important}
  body[data-zuvx-page="prototype"] .hero-copy{padding-inline:0!important}
  body[data-zuvx-page="prototype"] .hero-actions{width:100%!important}
  body[data-zuvx-page="prototype"] .hero-actions .btn{flex:1 1 150px!important}
  body[data-zuvx-page="prototype"] .hero-micro{gap:10px 14px!important;font-size:9px!important}
  body[data-zuvx-page="prototype"] .phone-stage{width:100%!important;overflow:hidden!important}

  /* Meera/Vikram/Latha navs and galleries */
  body[data-zuvx-page="meera"] .topbar,
  body[data-zuvx-page="meera-adult"] .adult-top{max-width:100vw!important;padding-inline:12px!important}
  body[data-zuvx-page="meera"] .topbar nav{max-width:52vw!important;overflow-x:auto!important;white-space:nowrap!important}
  body[data-zuvx-page="vikram"] .container,
  body[data-zuvx-page="latha"] .shell-wide{width:calc(100% - 24px)!important}
  body[data-zuvx-page="vikram"] .gallery-grid,
  body[data-zuvx-page="vikram"] .story-grid,
  body[data-zuvx-page="latha"] .gallery-grid{grid-template-columns:1fr!important}

  /* MAI */
  body:has(#tabs) .shell{padding:10px!important}
  body:has(#tabs) .top{
    position:static!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:9px!important;
    padding:8px 0!important;
  }
  body:has(#tabs) .brand{min-width:0!important;flex:1 1 210px!important}
  body:has(#tabs) .brand-title{font-size:13px!important}
  body:has(#tabs) .brand-sub{font-size:9px!important}
  body:has(#tabs) .top-actions{
    width:100%!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain!important;
    padding:2px 0 5px!important;
    scrollbar-width:none!important;
  }
  body:has(#tabs) .top-actions::-webkit-scrollbar{display:none}
  body:has(#tabs) .top-actions>*{flex:0 0 auto!important}
  body:has(#tabs) .tabs{
    width:100%!important;
    margin-inline:auto!important;
    overflow-x:auto!important;
    justify-content:flex-start!important;
  }

  /* Partner portal / ticketing dashboard safety */
  .content,.main,.stage,.content-card,.card,.panel{min-width:0!important}
  .form-grid{grid-template-columns:1fr!important}
}

@media(max-width:420px){
  .launcher-card{border-radius:20px!important}
  .launcher-bar{align-items:center!important;flex-direction:row!important}
  .launcher-title{max-width:68%!important}
  .venture-copy h2{font-size:1.5rem!important}
  body[data-zuvx-page="prototype"] .phone{width:132px!important}
  body[data-zuvx-page="prototype"] .p1{transform:translate(-135px,44px) rotate(-8deg)!important}
  body[data-zuvx-page="prototype"] .p2{transform:translate(-48px,-4px) rotate(-2deg)!important;width:142px!important}
  body[data-zuvx-page="prototype"] .p3{transform:translate(48px,3px) rotate(2deg)!important;width:142px!important}
  body[data-zuvx-page="prototype"] .p4{transform:translate(135px,48px) rotate(8deg)!important}
}