/* STS v5.6.378 - real mobile layout repair
   Goal: make every STS page usable on phones without sideways clipping,
   broken scroll, or desktop-only two-column layouts. Loaded last. */

@media (max-width: 900px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    height:auto!important;
    min-height:100%!important;
    touch-action:pan-y!important;
    -webkit-text-size-adjust:100%!important;
  }

  *,*::before,*::after{box-sizing:border-box!important;max-width:100vw;}

  img,video,canvas,iframe{max-width:100%!important;}

  body.streamx-v5.twitch-v53{
    padding:0!important;
    margin:0!important;
    background:#05070b!important;
  }

  main,.page,.v5-page,.container,.content,.wrap,
  .sts319-page,.sts-page,.sts-shell,.sts-channel-shell,
  .sts-discovery-page,.sts-social-page,.sts-live-page,.sts-creators-page,.sts-categories-page{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    overflow:visible!important;
  }

  /* Header becomes phone friendly instead of forcing desktop width. */
  .tw-topbar.sts-glass-nav,
  .tw-topbar.sts-glass-nav.sts-mockup-header,
  header.tw-topbar{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
    width:100%!important;
    max-width:100%!important;
    min-height:auto!important;
    height:auto!important;
    padding:8px 10px!important;
    gap:8px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    overflow:hidden!important;
  }

  .sts-mock-left{
    min-width:0!important;
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    overflow:hidden!important;
  }

  .sts-mock-brand{display:flex!important;align-items:center!important;min-width:0!important;max-width:58vw!important;overflow:hidden!important;}
  .sts-mock-brand img{
    width:auto!important;
    max-width:58vw!important;
    height:42px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }

  .sts-mock-nav{
    grid-column:1 / -1!important;
    order:3!important;
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    gap:18px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    padding:8px 2px 2px!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  .sts-mock-nav::-webkit-scrollbar{display:none!important;}
  .sts-mock-nav a,.sts-mock-more-btn{
    flex:0 0 auto!important;
    font-size:12px!important;
    letter-spacing:.08em!important;
  }

  .sts-mock-search,.tw-search,.sts-nav-search{
    display:none!important;
  }

  .sts-mock-actions,.sts-user-actions,.tw-actions{
    justify-self:end!important;
    min-width:0!important;
    gap:7px!important;
  }
  .tw-btn,.watch-action-btn,.sts319-panel-head a,.sts319-title a{
    min-height:36px!important;
    border-radius:12px!important;
    padding:9px 12px!important;
    font-size:12px!important;
  }

  .sts-account-menu-button{
    max-width:54px!important;
    width:54px!important;
    height:44px!important;
    padding:4px!important;
    overflow:hidden!important;
  }
  .sts-account-name,.sts-account-caret{display:none!important;}
  .sts-account-avatar,.sts-account-avatar img{width:36px!important;height:36px!important;min-width:36px!important;}
  .sts-account-dropdown,.sts-live-bell-dropdown{
    position:fixed!important;
    right:10px!important;
    left:10px!important;
    top:86px!important;
    width:auto!important;
    max-width:none!important;
    max-height:70vh!important;
    overflow:auto!important;
  }

  .sts-live-bell{width:44px!important;height:44px!important;min-width:44px!important;}

  /* Crypto ticker stays in its lane. */
  .crypto-ticker,.sts-market-ticker,[class*="ticker"]{
    max-width:100vw!important;
    overflow:hidden!important;
  }

  /* Home: one usable phone column. */
  html body.streamx-v5.twitch-v53 main.page.v5-page>.sts319-page,
  html body.streamx-v5.twitch-v53 .sts319-page{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:10px 10px 78px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  .sts319-sidebar{
    width:100%!important;
    max-width:100%!important;
    position:static!important;
    order:2!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    height:auto!important;
    overflow:visible!important;
  }
  .sts319-main{order:1!important;width:100%!important;max-width:100%!important;display:flex!important;flex-direction:column!important;gap:12px!important;}
  .sts319-panel,.sts319-section,.sts319-hero,.sts319-stream-card,.sts319-featured,.sts319-about,
  .sts319-cat-card,.sts319-friend,.sts319-side-user{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .sts319-hero{
    min-height:360px!important;
    height:auto!important;
    padding:16px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    background-size:cover!important;
    background-position:center!important;
    overflow:hidden!important;
  }
  .sts319-hero-copy{position:relative!important;inset:auto!important;width:100%!important;text-align:left!important;transform:none!important;}
  .sts319-hero-copy h1{font-size:clamp(32px,12vw,54px)!important;line-height:.9!important;word-break:normal!important;}
  .sts319-hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%!important;}
  .sts319-hero-actions a{width:100%!important;min-width:0!important;}
  .sts319-float-card{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;transform:none!important;width:100%!important;margin-top:12px!important;}

  .sts319-live-row,
  html body.streamx-v5.twitch-v53 .sts319-live-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
  }
  .sts319-stream-card{min-height:auto!important;}
  .sts319-thumb{height:190px!important;min-height:190px!important;background-size:cover!important;background-position:center!important;}
  .sts319-feature-grid,.sts319-lower-grid,.sts319-category-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  /* Watch/channel pages: stream first, chat/support underneath, no side clipping. */
  .watch-shell,.v53-watch,.v586-watch-match,.sts-real-watch-layout,
  .watch-layout,.sts-watch-layout{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:10px!important;
    margin:0!important;
    overflow:visible!important;
  }
  .watch-main,.v53-watch-main,.sts-watch-main,.player-column,.watch-player-column{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
  }
  .v53-player,.watch-player,.player-wrap,.sts-player-wrap,.v586-player,.slothstream-player-wrap,
  .sts-channel-player-hero,.sts-channel-offline-hero{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:220px!important;
    max-height:none!important;
    aspect-ratio:16/9!important;
    overflow:hidden!important;
    border-radius:16px!important;
  }
  .v53-player video,.watch-player video,.player-wrap video,.sts-player-wrap video,
  .v53-player img,.watch-player img,.player-wrap img,.sts-player-wrap img,
  .sts-channel-player-hero img,.sts-channel-offline-hero img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }

  .watch-info,.v53-stream-info,.v586-channel-info-row,.sts-channel-info-row{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:12px!important;
    padding:12px!important;
    margin:0!important;
  }
  .sts-channel-left{width:100%!important;display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important;}
  .sts-channel-avatar{width:58px!important;height:58px!important;min-width:58px!important;overflow:hidden!important;}
  .sts-channel-avatar img{width:100%!important;height:100%!important;object-fit:cover!important;}
  .sts-channel-title-block{min-width:0!important;max-width:calc(100vw - 100px)!important;}
  .sts-channel-title-block h1{font-size:28px!important;line-height:1!important;white-space:normal!important;overflow-wrap:anywhere!important;}
  .sts-profile-watch-actions,.sts-channel-actions,.watch-actions,.v586-channel-actions{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    justify-content:flex-start!important;
  }
  .sts-profile-watch-actions a,.sts-profile-watch-actions button,
  .sts-channel-actions a,.sts-channel-actions button,.watch-actions a,.watch-actions button{
    flex:1 1 calc(50% - 8px)!important;
    text-align:center!important;
    justify-content:center!important;
    min-width:0!important;
  }
  .sts-channel-tabs,.v586-channel-tabs{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    overflow-x:auto!important;
    gap:18px!important;
    padding:12px 10px!important;
    white-space:nowrap!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .watch-chat,.chat-column,.sts-chat-panel,.sts-watch-chat,.v53-chat,
  .chat-shell,.stream-chat-card{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:min(72vh,620px)!important;
    max-height:620px!important;
    margin:0!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }

  /* Co-stream: phone stacks, desktop keeps grid. */
  .slothstream-grid,.sts-costream-grid,.costream-grid{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:none!important;
    gap:10px!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .slothstream-tile,.sts-costream-tile,.costream-tile{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:210px!important;
    aspect-ratio:16/9!important;
  }

  /* Profile pages. */
  .sts-channel-shell,.sts-channel-home,.profile-page,.profile-shell{
    padding:10px!important;
    margin:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  .sts-channel-offline-hero{
    min-height:220px!important;
    padding:18px!important;
    background-size:cover!important;
    background-position:center!important;
  }
  .sts-channel-offline-hero h1{font-size:clamp(34px,11vw,52px)!important;line-height:.95!important;overflow-wrap:anywhere!important;}
  .sts-goal-grid,.sts-channel-about,.sts-channel-stats,.profile-grid,.profile-content-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:100%!important;
  }

  /* Discovery/social/admin/card grids. */
  .sts-discovery-hero,.sts-page-hero,.page-hero,.hero,
  .sts-social-hero,.sts-live-hero,.sts-creators-hero,.sts-categories-hero{
    width:100%!important;
    max-width:100%!important;
    min-height:220px!important;
    padding:20px!important;
    margin:10px 0!important;
    overflow:hidden!important;
  }
  .sts-discovery-hero h1,.sts-page-hero h1,.page-hero h1,.hero h1,
  .sts-social-hero h1,.sts-live-hero h1,.sts-creators-hero h1,.sts-categories-hero h1{
    font-size:clamp(38px,13vw,64px)!important;
    line-height:.9!important;
    overflow-wrap:anywhere!important;
  }
  .live-grid,.creator-grid,.category-grid,.clips-grid,.cards-grid,.sts-grid,
  .sts-live-grid,.sts-creators-grid,.sts-categories-grid,.sts-social-layout,
  .sts-social-grid,.dashboard-grid,.settings-grid,.form-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:100%!important;
    gap:12px!important;
  }
  .card,.stream-card,.creator-card,.category-card,.clip-card,.sts-card,
  .live-card,.dashboard-card,.settings-card,.panel{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* Forms/buttons must not create sideways overflow. */
  input,textarea,select,button{
    max-width:100%!important;
  }
  form{max-width:100%!important;}

  /* Footer centered and stacked. */
  footer,.sts-footer,.site-footer{
    width:100%!important;
    max-width:100%!important;
    margin:20px 0 0!important;
    padding:22px 12px!important;
    text-align:center!important;
  }
  footer nav,.sts-footer nav,.site-footer nav,
  footer .footer-links,.sts-footer .footer-links{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    gap:10px 16px!important;
  }
}

@media (max-width: 520px){
  .sts-mock-brand img{height:36px!important;max-width:62vw!important;}
  .sts319-hero{min-height:320px!important;padding:14px!important;}
  .sts319-thumb{height:170px!important;min-height:170px!important;}
  .v53-player,.watch-player,.player-wrap,.sts-player-wrap,.v586-player,.slothstream-player-wrap,
  .sts-channel-player-hero,.sts-channel-offline-hero{min-height:190px!important;border-radius:14px!important;}
  .watch-chat,.chat-column,.sts-chat-panel,.sts-watch-chat,.v53-chat,.chat-shell,.stream-chat-card{height:68vh!important;}
  .sts-profile-watch-actions a,.sts-profile-watch-actions button,
  .sts-channel-actions a,.sts-channel-actions button,.watch-actions a,.watch-actions button{
    flex-basis:100%!important;
  }
  .sts-channel-title-block h1{font-size:24px!important;}
  .sts-channel-avatar{width:52px!important;height:52px!important;min-width:52px!important;}
}

/* Landscape phones/tablets can use two columns for co-stream if room exists. */
@media (max-width:900px) and (orientation:landscape){
  .slothstream-grid,.sts-costream-grid,.costream-grid{grid-template-columns:1fr 1fr!important;}
  .slothstream-tile,.sts-costream-tile,.costream-tile{min-height:180px!important;}
}

/* =========================================================
   STS v5.6.379 - MOBILE TOUCH SCROLL UNLOCK
   Fixes phones not being able to drag/scroll the site.
   Loaded after the older mobile app CSS and overrides the
   100dvh/fixed/overflow:hidden rules that trapped the page.
   ========================================================= */
@media (max-width: 900px){
  html,
  body,
  body.streamx-v5,
  body.streamx-v5.twitch-v53,
  body.sts-mobile-watch-app,
  body:has(.v53-watch){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    position:relative!important;
    touch-action:auto!important;
    overscroll-behavior-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.sts-mobile-watch-app,
  body:has(.v53-watch){
    padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))!important;
  }

  body:has(.v53-watch) main,
  body:has(.v53-watch) .main,
  body:has(.v53-watch) .site-main,
  body:has(.v53-watch) .page,
  body:has(.v53-watch) .container,
  body:has(.v53-watch) .app-shell,
  body:has(.v53-watch) .kick-shell,
  body.sts-mobile-watch-app main,
  body.sts-mobile-watch-app .main,
  body.sts-mobile-watch-app .site-main,
  body.sts-mobile-watch-app .page,
  body.sts-mobile-watch-app .container,
  body.sts-mobile-watch-app .app-shell,
  body.sts-mobile-watch-app .kick-shell{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    margin:0!important;
  }

  body:has(.v53-watch) .v53-watch,
  body:has(.v53-watch) .v586-watch-match,
  body.sts-mobile-watch-app .v53-watch,
  body.sts-mobile-watch-app .v586-watch-match{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:10px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    overflow:visible!important;
    border:0!important;
  }

  body:has(.v53-watch) .v53-watch-main,
  body.sts-mobile-watch-app .v53-watch-main,
  body:has(.v53-watch) .v586-watch-main,
  body.sts-mobile-watch-app .v586-watch-main{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
  }

  body:has(.v53-watch) .v53-player,
  body.sts-mobile-watch-app .v53-player,
  body:has(.v53-watch) .watch-player,
  body.sts-mobile-watch-app .watch-player,
  body:has(.v53-watch) .v586-player,
  body.sts-mobile-watch-app .v586-player{
    position:relative!important;
    flex:none!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:190px!important;
    aspect-ratio:16/9!important;
    max-height:none!important;
    margin:0!important;
    overflow:hidden!important;
    border-radius:16px!important;
  }

  body:has(.v53-watch) .v53-stream-info,
  body.sts-mobile-watch-app .v53-stream-info,
  body:has(.v53-watch) .v586-channel-info-row,
  body.sts-mobile-watch-app .v586-channel-info-row,
  body:has(.v53-watch) .watch-info,
  body.sts-mobile-watch-app .watch-info{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    overflow:visible!important;
    border-radius:16px!important;
  }

  body:has(.v53-watch) .v53-chat,
  body.sts-mobile-watch-app .v53-chat,
  body:has(.v53-watch) .watch-chat,
  body.sts-mobile-watch-app .watch-chat,
  body:has(.v53-watch) .chat-column,
  body.sts-mobile-watch-app .chat-column,
  body:has(.v53-watch) .sts-chat-panel,
  body.sts-mobile-watch-app .sts-chat-panel{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:min(72vh,620px)!important;
    min-height:420px!important;
    max-height:620px!important;
    overflow:hidden!important;
    margin:0!important;
    border-radius:16px!important;
  }

  .sts-mobile-watch-tabs{
    position:sticky!important;
    bottom:0!important;
    z-index:50000!important;
  }
}


/* =========================================================
   STS v5.6.380 - mobile swipe + landscape watch repair
   General safety net loaded from header for all pages.
   ========================================================= */
@media (hover:none) and (pointer:coarse), (max-width:920px){
  html, body{
    overflow-y:auto!important;
    overflow-x:auto!important;
    touch-action:pan-x pan-y pinch-zoom!important;
    -webkit-overflow-scrolling:touch!important;
    height:auto!important;
    max-height:none!important;
  }
  .tw-topbar,.sts-mockup-header,.sts-glass-nav{
    max-width:100vw!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  main,.site-main,.page,.container,.app-shell,.kick-shell{
    max-width:100%!important;
    overflow:visible!important;
  }
}