/* add all special styles used for displaying the rules */
/* .rules: used for all elements loading rules (rules at main site, rules ingame, popup with rules extract
   #rules: div with complete rules used at main site
   #rulesPage: ingame rules page display
   #panelRules: ingame rules sidepanel display
   #popup.rules: popup with rules extract only */


/* add special fonts if wanted */

/* add styles for headers h1-h5 if needed*/

/* cover picture only in main rules */
#rules .cover {    width: 60%;    margin-left: 20%;}
#panelRules .cover {    display: none;}

.rules .content ul {list-style-type: none;}

/* flex style for responsive display */
.rules .flex { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5em; }
@media (max-width: 768px) {
    .rules .flex.mobile { flex-direction: column; /* columns below each other */  }
}
#panelRules .flex.mobile { flex-direction: column; }
.rules .flex .column {    flex: 1; }
.rules .flex .column.wide {    flex: 2; }


/* example variable flex structure putting flexboxes half their wide on wide screen full rules
.rules  .flex.appendix .flexbox { flex: 2 2 23%;  padding:0.5em; padding-right: 1em;}
.rules  .flex.appendix .flexbox img { height:5em; float: left; margin-right: 1em; }
@media (max-width: 1024px) {
    .rules .flex.appendix .flexbox { flex: 2 2 48%; }
}
#panelRules .flex.appendix .flexbox { flex: 2 2 48%; }
*/


/* Examples */
.rules .example { font-style: italic; } /* put your example style here */
#panelRules .example { display: none; } /* examples should not be shown in sidebar */

/* Oregon: parchment colors and original serif typography. */
.oregon-rules {
    --or-ink: #352d21;
    --or-paper: #faf5e8;
    box-sizing: border-box;
    color: var(--or-ink);
    background: var(--or-paper);
    max-width: 75ch;
    margin: auto;
    padding: clamp(12px, 3vw, 32px);
    font: 1rem/1.6 Georgia, serif;
    overflow-wrap: anywhere;
}
.oregon-rules * { box-sizing: border-box; }
.oregon-rules header { border-bottom: 3px solid #906b38; text-align: center; padding: 1rem; background: #eee0c1; }
.oregon-rules h1 { font-size: clamp(2rem, 7vw, 3.5rem); margin: .2em; }
.oregon-rules h2 { font-size: 1.45rem; border-bottom: 1px solid #bba77f; margin: 1.6em 0 .6em; scroll-margin-top: 1rem; }
.oregon-rules h3 { font-size: 1.18rem; color: #725025; }
.oregon-rules h4 { font-size: 1rem; font-weight: bold; margin-top: 1em; }
.oregon-rules nav a { color: #60451e; }
.oregon-rules ul, .oregon-rules ol { padding-left: 1.4em; }
.oregon-rules li { margin: .4em 0; }
.oregon-rules img { max-width: 100%; height: auto; }
.oregon-rules .sidebarOnly { display: none; }
#panelRules .oregon-rules .noSidebar { display: none; }
#panelRules .oregon-rules .sidebarOnly { display: block; }
#panelRules .oregon-rules { padding: 12px; font-size: .9rem; }