/* One brand position for the loading screen and the revealed menu. */
body #menu.menu[data-mode][data-mode=title]{--title-top:clamp(52px,18dvh,176px)}
@media(max-width:549px) and (max-height:639px){
 body #menu.menu[data-mode][data-mode=title]{--title-top:clamp(40px,11dvh,70px)}
}
@media(min-width:550px) and (max-height:519px){
 body #menu.menu[data-mode][data-mode=title]{--title-top:clamp(16px,6dvh,28px)}
}
/* Hidden legacy statistics must never create a third caption grid row. */
body #menu.menu[data-mode=levels] #chapterCard #chapterStats{display:none!important}
body #menu.menu[data-mode=levels] #chapterCard{aspect-ratio:auto}
/* The scroll boundary dissolves; the heading, tabs and Back stay opaque. */
body #menu.menu[data-mode=levels] #levelSelect{
 --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);
}
/* Content determines the card height; only overflowing prose scrolls. */
body #menu.menu[data-mode=about] #menuPanel{grid-template-rows:auto minmax(0,1fr) auto;align-content:start}
body #menu.menu[data-mode=about] #aboutGame{display:flex;flex-direction:column;justify-content:flex-start;align-self:start;height:auto;min-height:0;max-height:100%;overflow:hidden}
body #menu.menu[data-mode=about] #creditsPane,
body #menu.menu[data-mode=about] #storyPane{flex:0 1 auto;height:auto;max-height:100%;min-height:0}
body #menu.menu[data-mode=about] #creditsPane .credits-intro{font-size:25px;line-height:1.35;font-weight:500;text-align:center;color:#e7d0a0}
body #menu.menu[data-mode=about] #creditsPane .about-credits :is(dt,dd){width:100%;text-align:center}
body #menu.menu[data-mode=about] #creditsPane .credits-signature{border:0;margin:0;padding:4px 0 0;justify-content:center;flex-wrap:wrap;gap:8px 24px}
body #menu.menu[data-mode=about] #creditsPane .credits-signature a{font-size:14px}
@media(max-width:599px){
 body #menu.menu[data-mode=about] #creditsPane .credits-intro{font-size:24px}
}
/* Read shares the title row, so translation and wrapping cannot overlap it. */
body #menu.menu[data-mode=levels] .chapter-copy,
body[dir=rtl] #menu.menu[data-mode=levels] .chapter-copy{grid-template-columns:minmax(0,1fr) minmax(72px,max-content);column-gap:18px}
body #menu.menu[data-mode=levels] #chapterRead,
body[dir=rtl] #menu.menu[data-mode=levels] #chapterRead{position:relative;inset:auto;grid-column:2;grid-row:2;align-self:center;justify-self:end;max-width:180px;min-width:72px;margin:0;transform:none;white-space:normal;text-wrap:balance}
body #menu.menu[data-mode=levels] #chapterReadLabel{min-width:0;overflow-wrap:break-word}
body #menu.menu[data-mode=levels] #chapterRead>span:last-child{flex:none}
/* Author plaques use the same enamel, double border and rivets as level cards. */
body #menu.menu[data-mode=about] #creditsPane .about-credits>div{position:relative;border:1px solid #9aa68b88;border-radius:3px 14px 3px 14px;background:radial-gradient(ellipse at 12% 0,#55736940,transparent 65%),linear-gradient(150deg,#23424aee,#102a32f5);box-shadow:inset 0 0 0 4px #091e27,inset 0 0 0 5px #9aa58630,0 6px 16px #010b102b;text-shadow:0 2px 1px #05151db3;padding-inline:24px}
body #menu.menu[data-mode=about] #creditsPane .about-credits>div::before,
body #menu.menu[data-mode=about] #creditsPane .about-credits>div::after{content:"";position:absolute;top:11px;right:12px;width:4px;height:4px;border:1px solid #c5b17d88;border-radius:50%;background:#152e34;box-shadow:0 1px 0 #0008;pointer-events:none}
body #menu.menu[data-mode=about] #creditsPane .about-credits>div::after{top:auto;bottom:12px;right:auto;left:12px}
@media(max-width:599px){
 body #menu.menu[data-mode=levels] .chapter-copy,body[dir=rtl] #menu.menu[data-mode=levels] .chapter-copy{column-gap:10px}
 body #menu.menu[data-mode=levels] #chapterRead{max-width:96px;padding-inline:9px;gap:5px;font-size:14px}
 body #menu.menu[data-mode=about] #creditsPane .about-credits>div{border-radius:3px 11px 3px 11px}
}