@font-face {
    font-family: "Chess Joker Metropolis";
    src: url("/game-plugins/chessjoker/1.0.4/fonts/Metropolis-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Chess Joker Metropolis";
    src: url("/game-plugins/chessjoker/1.0.4/fonts/Metropolis-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* Scope above the shared rulesbase.css styles. */
#rules.chess-joker-rules {
    --cj-plum: #292127;
    --cj-paper: #f8f4e9;
    --cj-gold: #eabf26;
    --cj-muted: #655e58;
    background: var(--cj-paper);
    color: #302a2c;
    font: 16px/1.65 "Chess Joker Metropolis", Arial, sans-serif;
    margin: 0 auto;
    max-width: 1060px;
    text-shadow: none;
}
#rules.chess-joker-rules *, #rules.chess-joker-rules *::before { box-sizing: border-box; }
#rules.chess-joker-rules p { line-height: 1.65; margin: 0 0 1em; }
#rules.chess-joker-rules a { color: #793b51; text-underline-offset: 3px; }
#rules.chess-joker-rules a:hover { color: #a14b65; }
#rules.chess-joker-rules a:focus-visible { outline: 3px solid #b68315; outline-offset: 4px; }
#rules.chess-joker-rules img { display: block; height: auto; max-width: 100%; }

.cj-cover {
    background: #fff;
    padding: 0;
}
#rules .cj-cover > img { margin: 0 auto; max-width: 680px; width: 100%; }

.cj-contents { border-bottom: 1px solid #d9cebb; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 22px 40px; }
#rules .cj-contents a { color: #594350; font-size: 13px; }

#rules .chapter.cj-page { background: transparent; border: 0; clear: both; margin: 0; padding: 36px 40px 0; scroll-margin-top: 20px; }
#rules .chapter.cj-page > .title {
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--cj-gold);
    color: var(--cj-plum);
    display: block;
    font: 29px/1.25 Georgia, "Times New Roman", serif;
    margin: 0 auto 22px;
    max-width: 780px;
    padding: 0 0 12px;
    text-align: left;
    text-shadow: none;
}
#rules .chapter.cj-page > .title a { color: inherit; text-decoration: none; }
#rules .cj-page-body {
    background: transparent;
    border: 0;
    float: none;
    margin: 0 auto;
    max-width: 780px;
    padding: 0 0 12px;
    width: auto;
}

#rules.chess-joker-rules h2 { color: var(--cj-plum); font: 23px/1.3 Georgia, serif; margin: 28px 0 12px; }
#rules.chess-joker-rules h2:first-child { margin-top: 0; }
#rules.chess-joker-rules ol { line-height: 1.65; margin: 0 0 20px; padding-left: 24px; }
#rules.chess-joker-rules li { margin-bottom: 12px; }
#rules .cj-editor-note { border-left: 2px solid #cbbda8; color: var(--cj-muted); font-size: 13px; padding-left: 14px; }

.cj-facts { border-bottom: 1px solid #d9cebb; display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 22px; padding-bottom: 18px; }
.cj-facts span { color: var(--cj-muted); font-size: 13px; }
.cj-facts strong { color: var(--cj-plum); font-size: 18px; }
.cj-card-ribbon { display: flex; justify-content: center; margin: 26px auto; max-width: 460px; }
#rules .cj-card-ribbon img { border-radius: 4px; margin: 0 -10px; transform: rotate(-6deg); width: 34%; }
#rules .cj-card-ribbon img:nth-child(2) { transform: translateY(-8px); z-index: 1; }
#rules .cj-card-ribbon img:nth-child(3) { transform: rotate(6deg); }
.cj-piece-list { display: grid; gap: 18px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0; }
.cj-piece-list > div { align-items: center; border-top: 1px solid #d9cebb; display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
#rules .cj-piece-list img { width: 208px; }
#rules .cj-piece-list p { font-size: 14px; margin: 0; }
.cj-turn-steps li::marker { color: #793b51; font-weight: 700; }

.cj-card-anatomy { align-items: center; display: grid; gap: 30px; grid-template-columns: minmax(0, 340px) 1fr; margin: 24px 0; }
.cj-card-anatomy figure, .cj-definition-feature figure { margin: 0; }
#rules .cj-card-anatomy img, #rules .cj-definition-feature img, #rules .cj-examples img { border-radius: 5px; width: 100%; }
#rules figcaption { color: var(--cj-muted); font-size: 12px; margin-top: 8px; text-align: center; }
#rules .cj-card-anatomy ol { font-size: 14px; margin: 0; }
.cj-play-area { align-items: center; border: 1px solid #d9cebb; display: grid; gap: 18px; grid-template-columns: 1fr 1.8fr 1fr; margin: 20px auto; max-width: 600px; padding: 24px; text-align: center; }
.cj-play-area strong { color: var(--cj-muted); display: block; font-size: 12px; margin-top: 8px; }
#rules .cj-area-card img { margin: auto; width: 110px; }
.cj-area-board { grid-column: 2; grid-row: 1 / span 2; }
.cj-setup-board { aspect-ratio: 1; background: url("/game-plugins/chessjoker/1.0.4/images/board.webp") center / 100% 100%; display: grid; grid-template: repeat(8, 1fr) / repeat(8, 1fr); }
#rules .cj-setup-board img { align-self: center; width: 100%; }
#rules .cj-area-board img { width: 100%; }
.cj-area-deck span, .cj-area-score span { background: var(--cj-plum); color: #f2ce55; display: block; font-size: 13px; margin: auto; max-width: 100px; padding: 20px 8px; }
#rules .cj-area-pieces img { margin: auto; width: 50px; }
.cj-definition-feature { align-items: center; border-top: 1px solid #d9cebb; display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) 240px; margin: 28px 0; padding-top: 24px; }
.cj-definition-feature-reverse { grid-template-columns: 240px minmax(0, 1fr); }
#rules .cj-definition-feature p { font-size: 15px; }
.cj-glossary { display: grid; gap: 0 26px; grid-template-columns: 170px minmax(0, 1fr); margin: 32px 0 0; }
#rules .cj-glossary dt, #rules .cj-glossary dd { border-top: 1px solid #d9cebb; font-size: 14px; line-height: 1.6; margin: 0; padding: 13px 0; }
.cj-glossary dt { color: #613749; font-weight: 700; }
.cj-examples { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0; }
.cj-examples article { border-top: 2px solid var(--cj-gold); padding-top: 20px; }
#rules .cj-pdf-figure { margin: 20px auto; }
#rules .cj-pdf-figure img { border-radius: 0; margin: 0 auto; width: 100%; }
#rules .cj-definition-feature .cj-pdf-figure img + img { margin-top: 16px; }
#rules .cj-pdf-figure a { display: block; }
#rules .cj-welcome-figure { max-width: 330px; }
#rules .cj-setup-figure { max-width: 620px; }
#rules .cj-example-board { max-width: 260px; }
#rules .cj-examples .cj-example-board img { max-width: none; }
#rules .cj-scoring-figure { max-width: 650px; }
#rules .cj-examples img { margin: 0 auto 22px; max-width: 230px; }
#rules .cj-examples p { font-size: 14px; }
.cj-score-strip { display: flex; justify-content: center; margin: 30px auto; max-width: 440px; padding: 12px; }
#rules .cj-score-strip img { border-radius: 4px; margin: 0 -20px; transform: rotate(-4deg); width: 32%; }
.cj-sun { color: #a47716; }
#rules .cj-rulebook-link { display: inline-block; font-size: 14px; margin: 8px 0 20px; }
#rules .cj-credits p { font-size: 14px; margin-bottom: 6px; }
#rules .cj-credits strong { color: #613749; font-size: 11px; letter-spacing: .04em; }
#rules .cj-book { padding-bottom: 32px; }

@media (max-width: 700px) {
    #rules.chess-joker-rules { font-size: 15px; }
    #rules .chapter.cj-page { padding: 28px 24px 0; }
    #rules .chapter.cj-page > .title { font-size: 25px; }
    .cj-piece-list, .cj-examples, .cj-card-anatomy, .cj-definition-feature, .cj-definition-feature-reverse { grid-template-columns: 1fr; }
    #rules .cj-card-anatomy figure { max-width: 340px; }
    #rules .cj-definition-feature figure { max-width: 260px; }
    .cj-definition-feature-reverse figure { order: 2; }
    .cj-glossary { gap: 0 16px; grid-template-columns: 115px minmax(0, 1fr); }
    .cj-play-area { gap: 10px; padding: 12px; }
    #rules .cj-play-area strong { font-size: 10px; }
}
#panelRules .cj-cover, #sidebarPanel .cj-cover { display: none; }

/* Like the other FW2 games, adapt to the rules panel independently of viewport width. */
:is(#panelRules, #sidebarPanel) #rules.chess-joker-rules { font-size: 14px; min-width: 0; }
:is(#panelRules, #sidebarPanel) #rules p { line-height: 1.55; }
:is(#panelRules, #sidebarPanel) #rules .chapter { padding: 24px 16px 0; }
:is(#panelRules, #sidebarPanel) #rules .chapter > .title { font-size: 23px; margin-bottom: 16px; padding-bottom: 8px; }
:is(#panelRules, #sidebarPanel) #rules h2 { font-size: 20px; margin: 20px 0 10px; }
:is(#panelRules, #sidebarPanel) #rules h2:first-child { margin-top: 0; }
:is(#panelRules, #sidebarPanel) .cj-contents { gap: 8px 16px; padding: 16px; }
:is(#panelRules, #sidebarPanel) .cj-piece-list,
:is(#panelRules, #sidebarPanel) .cj-examples,
:is(#panelRules, #sidebarPanel) .cj-card-anatomy,
:is(#panelRules, #sidebarPanel) .cj-definition-feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 20px 0;
}
:is(#panelRules, #sidebarPanel) .cj-piece-list > *,
:is(#panelRules, #sidebarPanel) .cj-examples > *,
:is(#panelRules, #sidebarPanel) .cj-card-anatomy > *,
:is(#panelRules, #sidebarPanel) .cj-definition-feature > * { min-width: 0; }
:is(#panelRules, #sidebarPanel) .cj-definition-feature { padding-top: 16px; }
:is(#panelRules, #sidebarPanel) .cj-definition-feature figure { order: 2; }
:is(#panelRules, #sidebarPanel) #rules .cj-pdf-figure {
    float: none;
    width: 100%;
    max-width: 260px;
    margin: 12px auto 20px;
}
:is(#panelRules, #sidebarPanel) #rules .cj-definition-feature figure { max-width: 240px; margin: 0 auto; }
:is(#panelRules, #sidebarPanel) #rules .cj-card-anatomy figure { max-width: 300px; margin: 0 auto; }
:is(#panelRules, #sidebarPanel) #rules .cj-setup-figure,
:is(#panelRules, #sidebarPanel) #rules .cj-scoring-figure { max-width: 100%; }
:is(#panelRules, #sidebarPanel) #rules .cj-examples > article > img { max-width: 220px; }
:is(#panelRules, #sidebarPanel) #rules .cj-examples p,
:is(#panelRules, #sidebarPanel) #rules .cj-definition-feature p { font-size: 14px; }
:is(#panelRules, #sidebarPanel) .cj-glossary { display: block; margin-top: 24px; }
:is(#panelRules, #sidebarPanel) #rules .cj-glossary dt { padding: 12px 0 4px; }
:is(#panelRules, #sidebarPanel) #rules .cj-glossary dd { border: 0; padding: 0 0 12px; }