/*
 * Final scroll-resilience layer.
 * Keep this stylesheet last so legacy component overflow rules cannot trap
 * wheel, trackpad, keyboard, or touch scrolling.
 */
html,body{min-height:100%;overflow-x:clip}
body{overflow-y:auto;overscroll-behavior-y:auto}
.main,.content,.page{min-width:0}
.content,.page{overflow:visible}

/* One continuous desktop sidebar is easier to understand than two sibling scrollers. */
@media(min-width:901px){
  .side{
    display:flex!important;
    flex-direction:column!important;
    height:100dvh!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    scrollbar-gutter:stable;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar-brand,.side .nav,.sidefoot{flex:0 0 auto!important}
  .side .nav{
    min-height:max-content!important;
    overflow:visible!important;
    padding-bottom:12px!important;
  }
  .sidefoot{
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
  }
}

/* Nested lists may scroll, but movement continues on the page at either edge. */
.profile-sprite-picker,.party-drawer,.achievement-tabs,
.player-search-results,.feedback-feed,.admin-table-wrap{
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:touch;
}
.profile-sprite-picker{
  max-height:min(54dvh,520px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scroll-padding-block:8px;
  touch-action:pan-y pinch-zoom;
}

/* Every overlay keeps its final action reachable on short screens. */
.modal,.sprite-info-overlay,.recovery-email-verification,
.invite-sent-shell,.party-drawer-shell{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;
}
.dialog,.sprite-info-dialog,.recovery-email-verification-card,
.invite-sent-dialog{
  max-height:calc(100dvh - 32px)!important;
  overflow-x:hidden;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y pinch-zoom;
}
.party-drawer{
  max-height:100dvh;
  touch-action:pan-y pinch-zoom;
}

/* Make scroll affordances visible without overpowering each theme. */
.side,.profile-sprite-picker,.party-drawer,.dialog,.sprite-info-dialog,
.recovery-email-verification-card,.invite-sent-dialog{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--st-text,var(--ct-text)) 52%,transparent)
    color-mix(in srgb,var(--st-surface-2,var(--ct-surface)) 86%,transparent);
}
.side::-webkit-scrollbar,.profile-sprite-picker::-webkit-scrollbar,
.party-drawer::-webkit-scrollbar,.dialog::-webkit-scrollbar,
.sprite-info-dialog::-webkit-scrollbar{width:10px;height:10px}
.side::-webkit-scrollbar-thumb,.profile-sprite-picker::-webkit-scrollbar-thumb,
.party-drawer::-webkit-scrollbar-thumb,.dialog::-webkit-scrollbar-thumb,
.sprite-info-dialog::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:999px;
  background:color-mix(in srgb,var(--st-text,var(--ct-text)) 52%,transparent);
  background-clip:padding-box;
}

@media(max-width:900px){
  .mobile{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:auto!important;
    touch-action:pan-x pinch-zoom;
    -webkit-overflow-scrolling:touch;
  }
  .profile-sprite-picker{max-height:min(48dvh,430px)!important}
  .modal,.sprite-info-overlay,.recovery-email-verification,.invite-sent-shell{
    padding-bottom:max(12px,env(safe-area-inset-bottom));
  }
}