/* A complete production card, using the game's ink, aged brass and signwork. */
body #menu.menu[data-mode=about] #menuPanel{width:min(780px,100%);height:min(860px,100%);gap:14px;grid-template-rows:minmax(0,1fr) auto}
body #menu.menu[data-mode=about] #menuChapter{display:none}
body #menu.menu[data-mode=about] #aboutGame{gap:12px;grid-row:1}
body #menu.menu[data-mode=about] #menuButtons{grid-row:2}
body #menu.menu[data-mode=about] #creditsPane{position:relative;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:24px 28px;border:1px solid #a8a17a66;border-radius:3px 14px 3px 14px;background:radial-gradient(ellipse at 50% 0,#52625322,transparent 70%),linear-gradient(155deg,#22393df7,#10262dfc);box-shadow:inset 0 0 0 5px #0b20277a,inset 0 0 0 6px #a79b6720,0 14px 40px #0003;overflow:hidden}
body #menu.menu[data-mode=about] #creditsPane::before,
body #menu.menu[data-mode=about] #creditsPane::after{content:"";position:absolute;width:22px;height:22px;pointer-events:none;border-color:#b9a57888;border-style:solid}
body #menu.menu[data-mode=about] #creditsPane::before{top:11px;left:11px;border-width:1px 0 0 1px}
body #menu.menu[data-mode=about] #creditsPane::after{bottom:11px;right:11px;border-width:0 1px 1px 0}
body #menu.menu[data-mode=about] #creditsPane .credits-intro{margin:0 auto;max-width:570px;font:400 19px/1.5 Oswald,Arial,sans-serif;text-align:center;color:#c8ceba;text-wrap:balance}
body #menu.menu[data-mode=about] .about-credits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;counter-reset:credits;flex:none}
body #menu.menu[data-mode=about] .about-credits>div{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0;min-height:100px;padding:18px 20px;border:1px solid #a29c7060;border-radius:2px 9px 2px 9px;background:linear-gradient(145deg,#30474990,#1a323977);box-shadow:inset 0 0 0 3px #0b22264d}
body #menu.menu[data-mode=about] .about-credits dt{font:400 14px/1.35 Oswald,Arial,sans-serif;color:#afbeac;letter-spacing:.035em;margin:0;text-wrap:balance}
body #menu.menu[data-mode=about] .about-credits dd{font:500 25px/1.2 Oswald,Arial,sans-serif;color:#e7d0a0;margin:0;letter-spacing:.01em;text-wrap:balance}
body #menu.menu[data-mode=about] .credits-thanks-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 10px;text-align:center}
body #menu.menu[data-mode=about] #creditsPane .credits-thanks-card h3{font:500 19px/1.3 Oswald,Arial,sans-serif;letter-spacing:.05em;color:#d7bd88;margin:0;text-transform:uppercase}
body #menu.menu[data-mode=about] #creditsPane .credits-thanks{font:400 18px/1.5 Oswald,Arial,sans-serif;text-align:center;color:#c5ceba;max-width:540px;margin:0;text-wrap:balance}
body #menu.menu[data-mode=about] #creditsPane .credits-outro{font:500 22px/1.35 Oswald,Arial,sans-serif;text-align:center;color:#e0c795;margin:2px 0 0}
body #menu.menu[data-mode=about] .credits-signature{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:14px;border-top:1px solid #a9a17b30;flex:none}
body #menu.menu[data-mode=about] .credits-signature a{color:#a7b5a6;font:400 13px/1.5 Oswald,Arial,sans-serif;text-decoration:none;letter-spacing:.06em}
body #menu.menu[data-mode=about] .credits-signature a:hover{color:#e5ce9d}
body #menu.menu[data-mode=about] .credits-signature a:focus-visible{outline:2px solid #e2c58b;outline-offset:5px}
body #menu.menu[data-mode=about] #menuButtons{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}
body #menu.menu[data-mode=about] #menuButtons>[data-action=back]{grid-column:1;grid-row:1;font-size:17px}
body #menu.menu[data-mode=about] #menuButtons>:is([data-action=previousPage],[data-action=nextPage]){grid-column:2;grid-row:1;justify-self:end;min-height:46px;height:auto;width:auto;max-width:100%;padding:10px 14px;font:500 16px/1.3 Oswald,Arial,sans-serif;color:#e5ce9d;border-color:#a9986a80;border-radius:3px 9px 3px 9px;text-wrap:balance}
body #menu.menu[data-mode=about] #menuButtons>.lore-position{grid-column:3;grid-row:1;width:45px;font-size:14px}
body #menu.menu[data-mode=about] #menuButtons[data-credits-single=true]{grid-template-columns:1fr}
body #menu.menu[data-mode=about] #menuButtons[data-credits-single=true]>[data-action=back]{justify-self:center}
html:is(:lang(ar),:lang(hi),:lang(ja),:lang(ko),:lang(zh)) body #menu.menu[data-mode=about] #creditsPane :is(p,dt,dd,h3){font-family:Arial,sans-serif;letter-spacing:0}
@media(max-width:599px){
 body #menu.menu[data-mode=about] #menuPanel{gap:10px}
 body #menu.menu[data-mode=about] #creditsPane{padding:20px;gap:16px}
 body #menu.menu[data-mode=about] #creditsPane .credits-intro{font-size:17px;line-height:1.45}
 body #menu.menu[data-mode=about] .about-credits{grid-template-columns:minmax(0,1fr);gap:8px}
 body #menu.menu[data-mode=about] .about-credits>div{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:12px;min-height:58px;padding:9px 12px}
 body #menu.menu[data-mode=about] .about-credits dt{font-size:13px;line-height:1.35;text-wrap:pretty}
 body #menu.menu[data-mode=about] .about-credits dd{font-size:22px;line-height:1.25;text-align:end}
 body #menu.menu[data-mode=about] #creditsPane .credits-thanks{font-size:17px;line-height:1.45}
 body #menu.menu[data-mode=about] #creditsPane .credits-outro{font-size:20px}
 body #menu.menu[data-mode=about] .credits-thanks-card{padding:0;gap:8px}
 body #menu.menu[data-mode=about] .credits-signature{padding-top:10px}
}
@media(max-width:599px) and (max-height:699px){
 body #menu.menu[data-mode=about] #creditsPane{padding:17px 15px;gap:12px}
 body #menu.menu[data-mode=about] #creditsPane .credits-intro{font-size:16px;line-height:1.4}
 body #menu.menu[data-mode=about] .about-credits{gap:7px}
 body #menu.menu[data-mode=about] .about-credits>div{min-height:54px;padding:6px 10px;gap:10px}
 body #menu.menu[data-mode=about] .about-credits dd{font-size:20px}
 body #menu.menu[data-mode=about] #menuButtons>:is([data-action=previousPage],[data-action=nextPage]){font-size:14px;padding-inline:10px}
}
@media(min-width:550px) and (max-height:519px){
 body #menu.menu[data-mode=about] #menuPanel{width:min(940px,100%);gap:8px}
 body #menu.menu[data-mode=about] #aboutGame{grid-template-columns:95px minmax(0,1fr);gap:10px}
 body #menu.menu[data-mode=about] #aboutTabs button{font-size:15px;min-height:44px;padding-inline:8px}
 body #menu.menu[data-mode=about] #creditsPane{padding:10px 16px;gap:10px;justify-content:center}
 body #menu.menu[data-mode=about] #creditsPane .credits-intro{font-size:15px;line-height:1.3}
 body #menu.menu[data-mode=about] #creditsPane .about-credits{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 body #menu.menu[data-mode=about] .about-credits>div{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:4px;padding:6px 10px}
 body #menu.menu[data-mode=about] .about-credits dt{font-size:12px;line-height:1.2;text-wrap:balance}
 body #menu.menu[data-mode=about] .about-credits dd{font-size:20px;line-height:1.2;text-align:start}
 body #menu.menu[data-mode=about] #creditsPane .credits-thanks{font-size:16px;line-height:1.4}
 body #menu.menu[data-mode=about] .credits-thanks-card{gap:6px;padding:0}
 body #menu.menu[data-mode=about] #creditsPane .credits-outro{font-size:19px}
 body #menu.menu[data-mode=about] .credits-signature{padding-top:8px}
}