/* Shared enamel frame: fixed navigation, generous cards, continuous reading. */
body #menu.menu[data-mode][data-mode=title] #menuButtons>[data-action=about],
body #menu.menu[data-mode][data-mode=title] #menuButtons>[data-action=about]:hover{border:0;background:transparent;box-shadow:none}
body #menu.menu[data-mode][data-mode=title] #menuButtons>[data-action=about]::before,
body #menu.menu[data-mode][data-mode=title] #menuButtons>[data-action=about]::after{content:none}
body #menu.menu:is([data-mode=levels],[data-mode=settings],[data-mode=about]){padding:max(22px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
body #menu.menu:is([data-mode=levels],[data-mode=settings],[data-mode=about]) #menuPanel{height:min(860px,100%);gap:16px;grid-template-rows:auto minmax(0,1fr) auto}
body #menu.menu:is([data-mode=settings],[data-mode=about]) #menuPanel{width:min(880px,100%)}
body #menu.menu:is([data-mode=settings],[data-mode=about]) #menuChapter{display:flex;align-items:center;justify-content:flex-start;min-height:48px;padding:0;margin:0;border:0;font:400 32px/1.25 Oswald,Arial,sans-serif;letter-spacing:.015em}
body #menu.menu:is([data-mode=levels],[data-mode=settings],[data-mode=about]) #menuButtons{grid-row:3;display:flex;justify-content:center;align-items:center;gap:10px}
body #menu.menu:is([data-mode=levels],[data-mode=settings],[data-mode=about]) #menuButtons>button[data-action=back],.reading-card footer button{
 min-width:150px;min-height:48px;width:auto;max-width:100%;margin:0;padding:11px 30px;border:1px solid #a6ad8b99;border-radius:3px 12px 3px 12px;background:linear-gradient(145deg,#2b4650,#142f38);box-shadow:inset 0 0 0 3px #0b252d,inset 0 0 0 4px #a4a78633;color:#e7d8ae;font:500 18px/1.25 Oswald,Arial,sans-serif;letter-spacing:.035em;text-transform:uppercase;cursor:pointer}
body #menu.menu:is([data-mode=levels],[data-mode=settings],[data-mode=about]) #menuButtons>button[data-action=back]:hover,.reading-card footer button:hover{background:linear-gradient(145deg,#3c5754,#213d44);border-color:#dfc58f;color:#ffedbf}
/* The whole content area can scroll; the title, chapter switches and Back stay. */
body #menu.menu[data-mode=levels] #levelSelect{display:flex;flex-direction:column;overflow:auto;min-height:0;gap:20px;padding:2px 5px 8px 2px;scrollbar-gutter:stable}
body #menu.menu[data-mode=levels] #chapterSelect{display:block;flex:none;height:auto;min-height:0;margin:0}
body #menu.menu[data-mode=levels] #chapterCard{height:260px;min-height:0;overflow:hidden}
body #menu.menu[data-mode=levels] #chapterArtwork{object-fit:cover;object-position:50% 58%;width:100%;height:100%;filter:none}
body #menu.menu[data-mode=levels] .chapter-visual picture{display:block;width:100%;height:100%}
body #menu.menu[data-mode=levels] .chapter-copy,
body[dir=rtl] #menu.menu[data-mode=levels] .chapter-copy{inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:26px 44px;align-content:end;align-items:start;gap:9px;height:100%;padding:16px 24px;background:linear-gradient(0deg,#071d27ed, #071d27a3 20%,#071d273d 38%,transparent 62%)}
body #menu.menu[data-mode=levels] #chapterState{grid-row:1;grid-column:1;margin:0;height:26px;font-size:20px;line-height:26px}
body #menu.menu[data-mode=levels] #chapterTitle{grid-row:2;grid-column:1;height:44px;margin:0;font-size:32px;line-height:1.2;align-self:start}
body #menu.menu[data-mode=levels] #chapterRead{inset:12px 12px auto auto;width:auto;height:auto;min-height:44px;padding:8px 13px;font-size:15px;gap:8px}
body #menu.menu[data-mode=levels] #chapterReadLabel{display:inline}
body[dir=rtl] #menu.menu[data-mode=levels] #chapterRead{right:auto;left:12px}
body #menu.menu[data-mode=levels] #chapterProgress{display:grid;position:static;max-width:none;width:100%;margin:14px 0 0}
body #menu.menu[data-mode=levels] #chapterProgress[hidden]{display:none!important}
body #menu.menu[data-mode=levels] #levelGrid{display:grid;flex:none;min-height:0;grid-template-columns:repeat(var(--level-columns),minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(144px,auto);gap:13px}
body #menu.menu[data-mode=levels] .level-card{min-height:144px}
body #menu.menu[data-mode=levels] .level-tile{min-height:144px;height:100%;padding:34px 16px 48px}
body #menu.menu[data-mode=levels] #chapterFuture{flex:none;display:flex;min-height:240px;align-items:center;justify-content:center;gap:18px;margin-top:12px;padding:28px;text-align:center}
body #menu.menu[data-mode=levels] #futureTitle{margin-top:12px}
/* Settings begin just below the same heading used by Levels. */
body #menu.menu[data-mode=settings] #settingsForm{align-content:start;overflow:auto;min-height:0;padding:2px 5px 8px 2px;scrollbar-gutter:stable;gap:12px}
body #menu.menu[data-mode=settings] .language-preference{margin-top:0}
/* Credits and Story are tabs in one frame, with no extra navigation screen. */
body #menu.menu[data-mode=about] #chapter{display:none}
body #menu.menu[data-mode=about] #aboutTabs{display:flex;align-items:center;gap:26px;border:0;padding:0;margin:0;min-height:48px;width:100%}
body #menu.menu[data-mode=about] #aboutTabs button{font:400 32px/1.25 Oswald,Arial,sans-serif;letter-spacing:.015em;min-height:48px;padding:0;border:0;background:none;box-shadow:none;color:#8fa599;white-space:normal;text-align:start}
body #menu.menu[data-mode=about] #aboutTabs button[aria-selected=true]{color:#eddfbe;background:none;border:0;box-shadow:none}
body #menu.menu[data-mode=about] #aboutTabs button:hover{color:#ffe2a7;background:none}
body #menu.menu[data-mode=about] #aboutGame{grid-row:2;display:block;min-height:0;height:100%;margin:0;gap:0}
body #menu.menu[data-mode=about] #creditsPane,
body #menu.menu[data-mode=about] #storyPane{display:block;height:100%;min-height:0;overflow:auto;scrollbar-gutter:stable;padding:26px 30px;border:1px solid #9aa68b88;border-radius:3px 14px 3px 14px;background:radial-gradient(ellipse at 12% 0,#55736932,transparent 65%),linear-gradient(150deg,#23424af7,#102a32fc);box-shadow:inset 0 0 0 4px #091e27,inset 0 0 0 5px #9aa58630,0 6px 16px #010b102b;overscroll-behavior:contain}
body #menu.menu[data-mode=about] #creditsPane::before,body #menu.menu[data-mode=about] #creditsPane::after{content:none}
body #menu.menu[data-mode=about] #creditsPane .credits-intro{max-width:640px;margin:0 auto 24px;font-size:19px;line-height:1.5}
body #menu.menu[data-mode=about] #creditsPane .about-credits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0}
body #menu.menu[data-mode=about] #creditsPane .about-credits>div{min-height:106px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:16px 20px;gap:8px}
body #menu.menu[data-mode=about] #creditsPane .about-credits dt{font-size:14px;line-height:1.4}
body #menu.menu[data-mode=about] #creditsPane .about-credits dd{font-size:25px;line-height:1.25;text-align:start}
body #menu.menu[data-mode=about] #creditsPane .credits-thanks-card{margin:26px auto 22px;max-width:640px}
body #menu.menu[data-mode=about] #creditsPane .credits-signature{margin-top:0}
body #menu.menu[data-mode=about] #storyPane{padding:30px 36px}
.reading-prose{font:400 20px/1.6 Oswald,Arial,sans-serif;letter-spacing:.005em;color:#dfdbc5;text-align:start;text-transform:none;overflow-wrap:break-word}
.reading-prose p,body #menu.menu[data-mode=about] #storyPage p{font:inherit;letter-spacing:inherit;color:inherit;margin:0 0 1em;text-transform:none}
.reading-prose p:last-child,body #menu.menu[data-mode=about] #storyPage p:last-child{margin-bottom:0}
/* Chapter text is a true modal above the menu, with one continuous scroll. */
.reading-overlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:#020e14c9;backdrop-filter:blur(5px);overscroll-behavior:contain}
.reading-card{display:flex;flex-direction:column;gap:22px;min-width:0;min-height:0;width:min(760px,100%);height:auto;max-height:calc(100dvh - 40px);padding:26px 30px;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}
.reading-heading{min-width:0;flex:none}
.reading-heading p{font:400 17px/1.3 Oswald,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#cfb786;margin:0 0 8px}
.reading-heading h2{font:500 32px/1.2 Oswald,Arial,sans-serif;letter-spacing:.01em;text-transform:uppercase;color:#f0dfb5;margin:0}
#loreReader #lorePage{display:block;flex:0 1 auto;min-height:0;height:auto;overflow:auto;scrollbar-gutter:stable;padding:0 12px 0 0;overscroll-behavior:contain}
.reading-card footer{display:flex;flex:none;justify-content:center}
.reading-card button:focus-visible{outline:2px solid #edcf93;outline-offset:4px}
/* A quiet brass scrollbar, visible whenever the content needs one. */
:is(#levelSelect,#settingsForm,#creditsPane,#storyPane,#lorePage,#languageOptions){scrollbar-width:thin;scrollbar-color:#aa9a6c #0b232b;overscroll-behavior:contain;touch-action:pan-y}
:is(#levelSelect,#settingsForm,#creditsPane,#storyPane,#lorePage,#languageOptions)::-webkit-scrollbar{width:7px;height:7px}
:is(#levelSelect,#settingsForm,#creditsPane,#storyPane,#lorePage,#languageOptions)::-webkit-scrollbar-track{background:#0b232b;border-radius:6px}
:is(#levelSelect,#settingsForm,#creditsPane,#storyPane,#lorePage,#languageOptions)::-webkit-scrollbar-thumb{background:#aa9a6c;border:2px solid #0b232b;border-radius:6px}
#languagePicker .language-sheet{max-height:calc(100dvh - 40px);min-height:0;display:flex;flex-direction:column}
#languagePicker .language-heading{flex:none;border:0;padding-bottom:0}
#languagePicker .language-options{min-height:0;overflow:auto;padding:3px;grid-auto-rows:minmax(48px,auto);scrollbar-gutter:stable}
#languagePicker .language-option{font-size:18px;line-height:1.3;min-height:48px}
html:is(:lang(ar),:lang(hi),:lang(ja),:lang(ko),:lang(zh)) :is(.reading-prose,.reading-heading h2,.reading-heading p,.reading-card footer button),
html:is(:lang(ar),:lang(hi),:lang(ja),:lang(ko),:lang(zh)) body #menu.menu:is([data-mode=settings],[data-mode=about]) :is(#menuChapter,#aboutTabs button){font-family:Arial,sans-serif;letter-spacing:0}
html:is(:lang(hi),:lang(ko)) .reading-prose{line-height:1.8}
@media(max-width:599px){
 body #menu.menu:is([data-mode=levels],[data-mode=settings],[data-mode=about]){padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
 body #menu.menu:is([data-mode=levels],[data-mode=settings],[data-mode=about]) #menuPanel{gap:12px}
 body #menu.menu:is([data-mode=settings],[data-mode=about]) #menuChapter,body #menu.menu[data-mode=about] #aboutTabs button{font-size:29px}
 body #menu.menu[data-mode=about] #aboutTabs{gap:22px}
 body #menu.menu[data-mode=levels] #chapterCard{height:220px}
 body #menu.menu[data-mode=levels] #chapterArtwork{object-position:50% 50%}
 body #menu.menu[data-mode=levels] .chapter-copy,body[dir=rtl] #menu.menu[data-mode=levels] .chapter-copy{grid-template-rows:24px 54px;gap:7px;padding:10px 16px;background:linear-gradient(0deg,#071d27ef,#071d2790 26%,transparent 61%)}
 body #menu.menu[data-mode=levels] #chapterState{font-size:18px;line-height:24px;height:24px}
 body #menu.menu[data-mode=levels] #chapterTitle{font-size:26px;line-height:1.05;height:54px}
 body #menu.menu[data-mode=levels] #levelGrid{grid-auto-rows:minmax(100px,auto);gap:11px}
 body #menu.menu[data-mode=levels] .level-card,body #menu.menu[data-mode=levels] .level-tile{min-height:100px}
 body #menu.menu[data-mode=levels][data-level-layout=stack] .level-tile{padding:14px 16px 37px 52px;align-items:flex-start}
 body #menu.menu[data-mode=levels][data-level-layout=stack] .level-rating{bottom:10px;left:52px;height:24px}
 body #menu.menu[data-mode=levels] #chapterFuture{min-height:250px;padding:25px 18px;gap:18px}
 body #menu.menu[data-mode=about] #creditsPane,body #menu.menu[data-mode=about] #storyPane{padding:22px 20px}
 body #menu.menu[data-mode=about] #creditsPane .credits-intro{font-size:18px;line-height:1.5;margin-bottom:20px}
 body #menu.menu[data-mode=about] #creditsPane .about-credits{grid-template-columns:minmax(0,1fr);gap:10px}
 body #menu.menu[data-mode=about] #creditsPane .about-credits>div{min-height:84px;padding:13px 16px;gap:5px}
 body #menu.menu[data-mode=about] #creditsPane .about-credits dd{font-size:24px}
 .reading-prose{font-size:19px;line-height:1.6}
 .reading-overlay{padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
 .reading-card{padding:22px 20px;gap:18px;max-height:calc(100dvh - 28px)}
 .reading-heading h2{font-size:27px}
 #languagePicker .language-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #languagePicker .language-option{font-size:18px;min-height:48px;padding:10px 8px}
}
@media(min-width:550px) and (max-height:519px){
 body #menu.menu:is([data-mode=levels],[data-mode=settings],[data-mode=about]){padding-block:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-bottom))}
 body #menu.menu:is([data-mode=levels],[data-mode=settings],[data-mode=about]) #menuPanel{gap:8px}
 body #menu.menu:is([data-mode=settings],[data-mode=about]) #menuChapter,body #menu.menu[data-mode=about] #aboutTabs button{font-size:25px;min-height:44px}
 body #menu.menu[data-mode=about] #aboutTabs{min-height:44px;gap:25px}
 body #menu.menu[data-mode=levels] #chapterCard{height:188px}
 body #menu.menu[data-mode=levels] #chapterArtwork{object-position:50% 45%}
 body #menu.menu[data-mode=levels] #chapterFuture{display:flex;min-height:240px;text-align:center}
 body #menu.menu[data-mode=about] #creditsPane .about-credits{grid-template-columns:repeat(2,minmax(0,1fr))}
 .reading-overlay{padding:12px 24px}
 .reading-card{max-height:calc(100dvh - 24px);padding:18px 24px;gap:12px}
 .reading-heading p{font-size:15px;margin-bottom:3px}.reading-heading h2{font-size:25px}
 .reading-prose{font-size:18px;line-height:1.5}
}
@media(max-width:380px){body #menu.menu[data-mode=about] #aboutTabs{gap:18px}body #menu.menu[data-mode=about] #aboutTabs button{font-size:23px}}
@media(max-width:340px){body #menu.menu[data-mode=about] #aboutTabs button{font-size:22px}}