/* 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 */

/* Egizia typography and artwork. */
.eg-rules{--eg-ink:#302b24;--eg-gold:#a77825;--eg-line:#dfd2b5;--eg-paper:#fffdf6;max-width:1120px;margin:0 auto;padding:clamp(14px,3vw,40px);font:16px/1.65 system-ui,sans-serif;color:var(--eg-ink);background:var(--eg-paper);overflow-wrap:anywhere;box-sizing:border-box}
.eg-rules *{box-sizing:border-box}
.eg-rules h1{font:700 clamp(25px,4vw,44px)/1.15 Georgia,serif;margin:12px 0;text-align:left;color:inherit}
.rules .eg-rules{padding:14px;font-size:15px}
.eg-rules :is(p,li,ul,ol){line-height:1.65}
.eg-rules h2{font:700 clamp(22px,3vw,30px)/1.3 Georgia,serif;border-top:2px solid var(--eg-line);padding-top:24px;margin:42px 0 18px;color:#29545a;scroll-margin-top:16px}
.eg-rules h3{font-size:20px;color:#6e5127;margin:28px 0 12px}
.eg-rules h4{font-size:16px;margin:18px 0 10px}
.eg-rules p,.eg-rules ul,.eg-rules ol{margin:12px 0 18px}
.eg-rules li{margin:8px 0}
.eg-rules ul,.eg-rules ol{padding-left:24px}
.eg-rules a{color:#226978;text-decoration-thickness:1px;text-underline-offset:3px}
.eg-rules a[href]:focus-visible{outline:3px solid #d1a44c;outline-offset:3px}
.eg-rules img{max-width:100%;height:auto;vertical-align:middle;border-radius:4px}
.eg-rules fieldset{border:1px solid var(--eg-line);background:#f6f0df;border-radius:10px;padding:16px 20px;margin:20px 0;min-width:0}
.eg-rules legend{font-weight:700;color:#6a522a;padding:0 8px;width:auto;float:none}
.eg-rules fieldset a{display:inline-block;margin:3px 5px 3px 0;padding:3px 0}
.eg-rules table{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;margin:20px 0;border:1px solid var(--eg-line);border-radius:8px;overflow:hidden;font-size:15px}
.eg-rules td,.eg-rules th{padding:12px;vertical-align:top;border-bottom:1px solid var(--eg-line);border-right:1px solid var(--eg-line);word-break:normal;overflow-wrap:anywhere}
.eg-rules tr:first-child{background:#eee5cf;font-weight:600}
.eg-rules tr:nth-child(even){background:#faf6ea}
.eg-rules td:last-child,.eg-rules th:last-child{border-right:0}
.eg-rules tr:last-child>td{border-bottom:0}
.eg-rules table p{margin:4px 0 10px}
.eg-rules table img{max-height:260px;object-fit:contain}
@media (max-width: 600px) {
    .eg-rules { font-size: 15px; line-height: 1.55; padding: 12px; }
}
/* A narrow in-game panel is responsive independently of the browser viewport. */
.eg-rules{container-type:inline-size}
@container (max-width: 540px) {
    .eg-rules table, .eg-rules tbody, .eg-rules tr { display: block; width: 100%; }
    .eg-rules td, .eg-rules th { display: block; width: 100%; border-right: 0; padding: 10px; }
    .eg-rules tr { border-bottom: 2px solid var(--eg-line); }
}
.eg-rules nav.content { padding: 12px; background: #f6f0df; border: 1px solid var(--eg-line); }
.eg-rules nav ul { margin: 0; padding: 0; }
.eg-rules .eg-rule-reference { margin: 18px 0; border: 1px solid var(--eg-line); border-radius: 6px; }
.eg-rules .eg-rule-row { padding: 12px; border-bottom: 1px solid var(--eg-line); }
.eg-rules .eg-rule-row:last-child { border-bottom: 0; }
.eg-rules .eg-rule-row .column { min-width: 0; }
.eg-rules .eg-rule-row img { max-height: 230px; object-fit: contain; }
.eg-rules .sidebarOnly { display: none; }
#panelRules .eg-rules { padding: 10px; font-size: 14px; }
#panelRules .noSidebar, #panelRules .example { display: none; }
#panelRules .sidebarOnly { display: block; }
#panelRules .eg-rules h1 { font-size: 25px; }
#panelRules .eg-rules h2 { font-size: 21px; margin-top: 24px; padding-top: 14px; }
#panelRules .eg-rules h3 { font-size: 18px; }
#panelRules .eg-rules .eg-rule-row { padding: 8px; }
#panelRules .eg-sphinx-reference ul { list-style: none; margin: 0; padding: 0; }
#panelRules .eg-sphinx-reference li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 6px 0;
    border-bottom: 1px solid var(--eg-line);
    line-height: 1.4;
}
#panelRules .eg-sphinx-reference li:last-child { border-bottom: 0; }
#panelRules .eg-sphinx-reference img { width: 44px; height: auto; flex: none; }

.eg-rules .deviation { background: #f6edcc; border-left: 4px solid #a77825; padding: 10px 14px; }