/* No empty scrollbar gutter: a fitting plaque has identical outer insets.
   Keep the existing header origins and the chapter reader's balanced layout. */
body #menu.menu[data-mode=levels] #levelSelect,
body #menu.menu[data-mode=settings] #settingsForm,
body #menu.menu[data-mode=about] :is(#creditsPane,#storyPane){
 padding:2px calc(2px + var(--scroll-overlay-gap,0px)) 8px 2px;
 scrollbar-gutter:auto;direction:ltr;
}
body[dir=rtl] #menu.menu[data-mode=levels] #levelSelect> *{direction:rtl}
#loreReader #loreScroll{padding-right:calc(6px + var(--scroll-overlay-gap,0px))}
#languagePicker .language-options,#ratingGuide .rating-sheet{scrollbar-gutter:auto}

/* Fade the content, never the rail. The opaque right-hand mask layer covers
   the complete native scrollbar and its gap, including arrows and track.
   Overlay scrollbars get a small content gap only while scrolling is needed. */
.scroll-fade-viewport{
 --scroll-rail-width:0px;
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--scroll-fade-top),#000 calc(100% - var(--scroll-fade-bottom)),transparent),linear-gradient(#000,#000);
 mask-image:linear-gradient(to bottom,transparent,#000 var(--scroll-fade-top),#000 calc(100% - var(--scroll-fade-bottom)),transparent),linear-gradient(#000,#000);
 -webkit-mask-size:calc(100% - var(--scroll-rail-width)) 100%,var(--scroll-rail-width) 100%;
 mask-size:calc(100% - var(--scroll-rail-width)) 100%,var(--scroll-rail-width) 100%;
 -webkit-mask-position:left top,right top;mask-position:left top,right top;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}