/* Match Levels' content origin. A second, left scrollbar reserve had shifted
   Settings and the reading-tab plaques away from their unchanged headings. */
body #menu.menu[data-mode=settings] #settingsForm,
body #menu.menu[data-mode=about] :is(#creditsPane,#storyPane){
 padding:2px 5px 8px 2px;scrollbar-gutter:stable;
}

/* Apply the fade to a parent layer: a mask on the scrolling element itself
   can leave native scrollbar arrows/track/thumb unmasked in the browser. */
.scroll-fade-viewport{
 display:flex;flex-direction:column;min-width:0;min-height:0;width:100%;overflow:hidden;
 --scroll-fade-top:0px;--scroll-fade-bottom:0px;
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--scroll-fade-top),#000 calc(100% - var(--scroll-fade-bottom)),transparent);
 mask-image:linear-gradient(to bottom,transparent,#000 var(--scroll-fade-top),#000 calc(100% - var(--scroll-fade-bottom)),transparent);
}
.scroll-fade-viewport:has(>[hidden]){display:none!important}
body #menu.menu #levelViewport,body #menu.menu #settingsViewport{grid-row:2}
body #menu.menu[data-mode=levels] #levelViewport> #levelSelect,
body #menu.menu[data-mode=settings] #settingsViewport> #settingsForm{flex:1 1 auto}
body #menu.menu[data-mode=about] :is(#creditsViewport,#storyViewport),#loreReader #loreViewport{flex:0 1 auto;max-height:100%}
body #menu.menu[data-mode=won] #levelViewport{display:contents}
body #menu.menu[data-mode=levels] #levelSelect,
body #menu.menu[data-mode=settings] #settingsForm,
body #menu.menu[data-mode=about] :is(#creditsPane,#storyPane),#loreReader #loreScroll{
 -webkit-mask-image:none;mask-image:none;
}