@font-face {
    font-family: Edosz;
    src: url("../fonts/edosz.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: TojoCaptioner;
    src: url("../fonts/TheTojoCaptioner-Regular.ttf") format("truetype");
    font-display: swap;
}

/* Match the profile pages: plain dark panels, restrained borders, compact text. */
:root {
    color-scheme: dark;
    --background: #0b0b0b;
    --panel: #141414;
    --text: #ededed;
    --muted: #a0a0a0;
    --line: #242424;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); font: 20px/1.45 TojoCaptioner, sans-serif; }
p, h1, h2 { margin: 0; }
.credits { width: min(1100px, calc(100% - 48px)); margin: 0 auto; padding: 32px 0 24px; }
.credits-header { text-align: center; margin-bottom: 24px; }
.project-name { color: var(--muted); font-size: 16px; text-transform: uppercase; }
h1 { margin: 10px 0 12px; font: normal clamp(42px, 5vw, 68px)/1.1 Edosz, sans-serif; text-transform: uppercase; }
.introduction { max-width: 720px; margin: 0 auto; color: #ccc; font-size: 20px; }
.lead-credit, .credit-section { padding: 20px 24px; background: var(--panel); border: 2px solid var(--line); }
.lead-credit { margin-bottom: 18px; }
h2 { font: normal 24px/1.3 TojoCaptioner, sans-serif; text-transform: uppercase; }
.creator-name { margin: 8px 0 4px; font-size: 28px; overflow-wrap: anywhere; }
.creator-detail { color: var(--muted); font-size: 18px; }
.credit-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.credit-section { min-width: 0; }
.credit-section > .section-label { padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid #333; }
.credit-list, .thanks-list { list-style: none; margin: 0; padding: 0; }
.credit-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.credit-row:last-child { border-bottom: 0; padding-bottom: 0; }
.credit-role { color: #bbb; font-size: 18px; }
.credit-name { font-size: 22px; }
.credit-note { grid-column: 2; color: var(--muted); font-size: 16px; }
.thanks-intro { margin-top: 12px; color: var(--muted); font-size: 18px; }
.thanks-list { margin: 8px 0 12px; }
.thanks-list li { padding: 3px 0; font-size: 22px; overflow-wrap: anywhere; }
.closing-line { color: #ccc; font-size: 18px; }
.credits-footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid #333; text-align: center; color: var(--muted); font-size: 15px; }
.footer-title { margin-bottom: 6px; color: #ddd; font-size: 20px; }
.credits-footer > p { max-width: 880px; margin-inline: auto; }
.footer-note { margin-top: 6px; }
@media (max-width: 760px) {
    .credits { width: calc(100% - 32px); padding-top: 24px; }
    .credit-columns { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .lead-credit, .credit-section { padding: 16px 18px; }
    .credits-header { margin-bottom: 18px; }
    .introduction { font-size: 18px; }
    h2 { font-size: 22px; }
    .credit-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
    .credit-note { grid-column: 1; }
}

.footer{
    margin-top:26px;
    font-family:"TojoCaptioner",sans-serif;
    color:#777;
    font-size:16px;
    line-height:1.6;
}
@media(max-width:900px){
    h1{
        font-size:42px;
    }
    .warning{
        font-size:18px;
        padding:24px;
    }
    .proceed{
        width:100%;
        font-size:26px;
    }
}
.credits-navigation { display: flex; justify-content: center; margin-top: 16px; }
.credits-back { display: inline-block; padding: 10px 28px; border: 2px solid #333; background: #181818; color: #fff; font: normal 20px/1.3 TojoCaptioner, sans-serif; text-decoration: none; text-transform: uppercase; }
.credits-back:hover, .credits-back:focus-visible { background: #353535; border-color: #888; }
.credits-footer .credits-navigation { margin: 0 0 16px; }

.inline-emote { display: inline-block; height: 1em; width: auto; max-width: none; vertical-align: -0.15em; }

.credits a:not(.credits-back), .credits a:not(.credits-back):visited { color: inherit; text-decoration-color: #888; text-underline-offset: 0.15em; }
.credits a:not(.credits-back):hover { color: #ccc; text-decoration-color: #ccc; }
.credits a:not(.credits-back):focus-visible { outline: 2px solid #888; outline-offset: 3px; }

.credits-sections { display: grid; gap: 18px; }
.credits-paragraph { margin-top: 12px; color: #bbb; font-size: 18px; }
.credits-footer > p + p { margin-top: 10px; }
@media (max-width: 760px) { .credits-sections { gap: 14px; } }

.credit-row > a { font-size: 22px; }