/* Settings use the same leading title alignment as the level list. */
body #menu.menu[data-mode=settings] #menuChapter{justify-content:flex-start;text-align:start}

/* Reading tabs share the chapter's unframed outer rail and inner enamel sheet. */
body #menu.menu[data-mode=about] :is(#creditsPane,#storyPane){
 width:100%;padding:2px 6px 8px;border:0;border-radius:0;background:none;box-shadow:none;
 overflow:auto;scrollbar-gutter:stable both-edges;direction:ltr;
}
body #menu.menu[data-mode=about] :is(#creditsSheet,#storySheet),#loreReader #loreSheet{
 display:block;min-width:0;overflow:hidden;direction:ltr;
 border:1px solid #b9b28ac7;border-radius:3px 16px 3px 16px;
 background:radial-gradient(ellipse at 12% 0,#55736940,transparent 65%),linear-gradient(150deg,#23424a,#102a32);
 box-shadow:inset 0 0 0 4px #091e27,inset 0 0 0 5px #9aa58644,0 24px 90px #0009;
}
body[dir=rtl] #menu.menu[data-mode=about] :is(#creditsSheet,#storySheet),#loreReader[dir=rtl] #loreSheet{direction:rtl}
body #menu.menu[data-mode=about] #creditsSheet{padding:26px 30px}
body #menu.menu[data-mode=about] #storySheet{padding:0}
@media(max-width:599px){body #menu.menu[data-mode=about] #creditsSheet{padding:22px 20px}}

/* Only the cut edge fades. At the beginning/end its corresponding fade is zero;
   content that fits has no fading at all. Navigation stays outside this region. */
:is(#settingsForm,#creditsPane,#storyPane,#loreScroll){
 --scroll-fade-top:0px;--scroll-fade-bottom:0px;scroll-padding-block:28px;
 -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);
}