/* ============================================================
   StreamSphere V11 · Mobile Stability Layer
   Loaded last. This layer prioritizes predictable iOS/PWA layout,
   reliable menus and stable rendering over desktop-only effects.
   ============================================================ */

:root{
  --ss-mobile-nav-top:calc(env(safe-area-inset-top) + 80px);
  --ss-mobile-edge:10px;
  --ss-mobile-z-backdrop:1490;
  --ss-mobile-z-topbar:1500;
  --ss-mobile-z-menu:1510;
}

html,body{max-width:100%;}
body{overflow-x:clip;}
img,video,canvas,iframe,svg{max-width:100%;}

/* Shared dynamically-created menu controls. */
.ss-mobile-menu-toggle,
.ss-mobile-menu-backdrop,
.ss-viewer-menu-backdrop{display:none;}

@media(max-width:1120px){
  html{scroll-padding-top:88px;}
  body.home-design{background-attachment:scroll!important;}

  /* All primary topbars must sit above drawers/backdrops on mobile. */
  body.home-design :is(
    .gateway-top,.main-topbar,.topbar,.viewer-topbar,.streamer-topbar,
    .mod-topbar,.pulse-topbar,.network-topbar,.news-wire-topbar
  ){
    z-index:var(--ss-mobile-z-topbar)!important;
    isolation:isolate;
  }

  .ss-mobile-menu-toggle{
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
    display:grid;
    place-content:center;
    gap:4px;
    padding:0;
    border:1px solid rgba(255,255,255,.14);
    border-radius:13px;
    color:#fff;
    background:rgba(255,255,255,.055);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter:blur(18px) saturate(150%);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    touch-action:manipulation;
  }
  .ss-mobile-menu-toggle span{
    width:18px;
    height:1.5px;
    display:block;
    border-radius:999px;
    background:currentColor;
    transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .22s ease;
  }
  body.ss-mobile-menu-open .ss-mobile-menu-toggle span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  body.ss-mobile-menu-open .ss-mobile-menu-toggle span:nth-child(2){opacity:0}
  body.ss-mobile-menu-open .ss-mobile-menu-toggle span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

  .ss-mobile-menu-backdrop,
  .ss-viewer-menu-backdrop{
    position:fixed;
    z-index:var(--ss-mobile-z-backdrop);
    inset:0;
    display:block;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    border:0;
    background:rgba(2,4,10,.50);
    backdrop-filter:blur(8px) saturate(115%);
    -webkit-backdrop-filter:blur(8px) saturate(115%);
    transition:opacity .28s ease,visibility .28s ease;
  }
  body.ss-mobile-menu-open .ss-mobile-menu-backdrop,
  body.ss-viewer-menu-open .ss-viewer-menu-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  /* Hub legacy backdrop gets the same reliable stacking level. */
  .mobile-nav-backdrop{
    z-index:var(--ss-mobile-z-backdrop)!important;
  }

  /*
    One drawer recipe for Hub + Gateway + Mod Desk + Pulse + Networks.
    This deliberately overrides Liquid OS's standalone display:none rule.
  */
  [data-ss-mobile-nav="true"]{
    position:fixed!important;
    z-index:var(--ss-mobile-z-menu)!important;
    top:var(--ss-mobile-nav-top)!important;
    right:var(--ss-mobile-edge)!important;
    left:var(--ss-mobile-edge)!important;
    width:auto!important;
    height:auto!important;
    max-width:none!important;
    max-height:calc(var(--ss-vvh,100dvh) - env(safe-area-inset-top) - 98px - env(safe-area-inset-bottom))!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    gap:7px!important;
    padding:10px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:22px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 38%,transparent),
      rgba(9,12,22,.88)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 30px 90px rgba(0,0,0,.52)!important;
    backdrop-filter:blur(30px) saturate(165%)!important;
    -webkit-backdrop-filter:blur(30px) saturate(165%)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,-10px,0) scale(.985)!important;
    transform-origin:top center!important;
    transition:opacity .30s cubic-bezier(.2,.8,.2,1),transform .34s cubic-bezier(.2,.8,.2,1),visibility .30s ease!important;
  }

  body.ss-mobile-menu-open [data-ss-mobile-nav="true"],
  body.mobile-nav-open #siteNav[data-ss-mobile-nav="true"]{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }

  [data-ss-mobile-nav="true"] > :is(a,button){
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    height:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:10px 14px!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:14px!important;
    color:#e8edf6!important;
    background:rgba(255,255,255,.035)!important;
    text-align:left!important;
    font-size:13px!important;
    white-space:normal!important;
    transform:none!important;
  }
  [data-ss-mobile-nav="true"] > :is(a,button).active,
  [data-ss-mobile-nav="true"] > :is(a,button).is-active{
    border-color:rgba(103,221,239,.18)!important;
    background:linear-gradient(135deg,rgba(132,92,235,.16),rgba(74,211,230,.08))!important;
  }

  /* The moving desktop lens is great in a horizontal bar, not inside a phone drawer. */
  [data-ss-mobile-nav="true"] > .liquid-nav-lens{display:none!important;}

  /* Creator Hub's existing menu button remains functional in standalone mode. */
  .main-topbar .mobile-nav-toggle{display:grid!important;z-index:2;}
  html.liquid-standalone body.mobile-nav-open #siteNav[data-ss-mobile-nav="true"]{display:grid!important;}

  /* Viewer owns a separate generated mobile menu. Give it a guaranteed top layer. */
  .viewer-mobile-nav{display:grid!important;place-items:center;z-index:2;}
  .viewer-mobile-menu{
    z-index:var(--ss-mobile-z-menu)!important;
    top:var(--ss-mobile-nav-top)!important;
    right:var(--ss-mobile-edge)!important;
    bottom:auto!important;
    left:var(--ss-mobile-edge)!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(var(--ss-vvh,100dvh) - env(safe-area-inset-top) - 98px - env(safe-area-inset-bottom))!important;
    margin:0!important;
    overflow-y:auto!important;
    transform:none!important;
    border-radius:22px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 38%,transparent),
      rgba(9,12,22,.90)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 30px 90px rgba(0,0,0,.52)!important;
    backdrop-filter:blur(30px) saturate(165%)!important;
    -webkit-backdrop-filter:blur(30px) saturate(165%)!important;
  }
  .viewer-mobile-menu button{min-height:50px!important;font-size:13px!important;}

  /* Keep controls from silently pushing the header wider than the viewport. */
  :is(.topbar-actions,.viewer-top-actions,.mod-top-actions,.pulse-actions,.network-actions,.gateway-top-actions){
    min-width:0!important;
  }
  :is(.main-topbar,.viewer-topbar,.mod-topbar,.pulse-topbar,.network-topbar,.gateway-top) > *{
    min-width:0;
  }

  body.ss-mobile-menu-open,
  body.mobile-nav-open,
  body.ss-viewer-menu-open{overflow:hidden!important;}
}

@media(max-width:650px){
  [data-ss-mobile-nav="true"]{grid-template-columns:1fr!important;}
  :root{--ss-mobile-edge:8px;--ss-mobile-nav-top:calc(env(safe-area-inset-top) + 74px);}

  /* Give compact headers a predictable amount of room. */
  body.home-design :is(.main-topbar,.viewer-topbar,.mod-topbar,.pulse-topbar,.network-topbar,.gateway-top){
    width:calc(100% - 12px)!important;
    min-height:58px!important;
    padding:6px 7px!important;
    gap:6px!important;
  }
  .viewer-mobile-menu{grid-template-columns:1fr!important;}
}

/* ============================================================
   iOS/Safari rendering stability
   ============================================================ */
@media(max-width:900px){
  html{scroll-behavior:auto!important;}

  /* Safari can glitch when content-visibility, containment, backdrop blur and
     dynamic DOM updates all meet. Mobile favors correctness over paint skipping. */
  body.home-design :is(
    main > .section.block,.render-on-demand,.news-wire-post,.collab-game-card,.collab-post,
    .room-card,.giveaway-card,.sponsor-ticket-item,.ambassador-mini-card,.stream-card,
    .mod-panel,.network-card,.viewer-panel,.pulse-panel,.streamer-section,
    .streamer-giveaway-card,.creator-update-card,.ambassador-link-card,
    .admin-ticket-item,.roster-item,.admin-account-item,.news-admin-item
  ){
    content-visibility:visible!important;
    contain:none!important;
    contain-intrinsic-size:none!important;
  }

  /* Never make phone content depend on IntersectionObserver to become visible. */
  .liquid-reveal,
  .liquid-reveal.liquid-reveal-visible{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    transition:none!important;
    transition-delay:0ms!important;
  }

  /* Nested 40-50px backdrop filters are a common iOS compositor failure point. */
  html.liquid-os body.home-design:not(.afterdark-mode):not(.halo-mode):not(.crash-mode):not(.spyro-mode):not(.sly-mode):not(.star-citizen-mode):not(.dbd-mode) :is(
    .glass,.viewer-panel,.rework-tool-card,.rework-viewer-community-card,.pulse-panel,.network-card,
    .news-card,.form-card,.owner-build-card,.owner-control-card,.owner-hq-panel
  ){
    backdrop-filter:blur(20px) saturate(150%)!important;
    -webkit-backdrop-filter:blur(20px) saturate(150%)!important;
  }

  html.liquid-standalone .liquid-ambient-scene{
    inset:-16vmax!important;
    contain:layout paint!important;
    transform:none!important;
  }
  html.liquid-standalone .liquid-ambient-prism,
  html.liquid-standalone .liquid-ambient-ribbon{display:none!important;}

  /* Responsive media should never establish its own accidental page width. */
  :is(.featured-live-media,.watch-grid,.viewer-clip-frame,.mod-stream-frame,.owner-live-frame){min-width:0!important;}
  iframe{width:100%;}


  /* Public giveaway and narrow utility pages should never inherit desktop sizing. */
  #giveawayPublic{
    width:100%!important;
    max-width:620px!important;
    padding:22px!important;
    border-radius:24px!important;
  }
  #giveawayPublic h1{font-size:clamp(32px,10vw,44px)!important;overflow-wrap:anywhere;}

  /* Common grids are allowed to shrink instead of forcing horizontal page scroll. */
  :is(.admin-shell,.dashboard,.streamer-page-shell,.viewer-shell,.pulse-shell,.network-shell,.mod-shell){
    min-width:0!important;
    max-width:100%!important;
  }

  /* Loaders stay in normal document flow instead of briefly covering content. */
  .streamer-loading,.news-wire-loading,.network-loading,.pulse-empty{
    max-width:100%!important;
  }
}

/* Installed app: menu/drawers respect both the notch and bottom dock. */
@media(max-width:900px){
  html.liquid-standalone body.home-design{
    min-height:100svh!important;
    min-height:100dvh!important;
  }
  html.liquid-standalone [data-ss-mobile-nav="true"],
  html.liquid-standalone .viewer-mobile-menu{
    max-height:calc(var(--ss-vvh,100dvh) - env(safe-area-inset-top) - 112px - env(safe-area-inset-bottom))!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .ss-mobile-menu-toggle span,
  [data-ss-mobile-nav="true"],
  .ss-mobile-menu-backdrop,
  .ss-viewer-menu-backdrop{transition:none!important;}
}