/* Scoped rules styling: container width also responds inside a wide-window sidepanel. */
.entropy-rules {
    container-type: inline-size;
    box-sizing: border-box;
    max-width: 920px;
    margin: 0 auto;
    padding: 16px;
    color: #24282c;
    background: #f3f4f3;
    font: 16px/1.5 system-ui, sans-serif;
    text-align: left;
    overflow-wrap: break-word;
}
.entropy-rules *, .entropy-rules *::before, .entropy-rules *::after { box-sizing: border-box; }
.entropy-rules .gameTitle { font: 700 2.3em/1.1 Impact, 'Arial Narrow', sans-serif; text-transform: uppercase; color: #152a35; margin: 0 0 .65em; }
.entropy-rules h2 {
    margin: 1.6em 0 .8em;
    padding: .55em 1em;
    border: 2px solid #b4d4df;
    border-radius: 8px;
    background: #101c23;
    color: #fff;
    font: 400 1.5em/1.2 Impact, 'Arial Narrow', sans-serif;
    text-align: center;
    text-transform: uppercase;
    scroll-margin-top: 12px;
}
.entropy-rules h3 { margin: 1.4em 0 .6em; color: #666b6d; font: 400 1.25em/1.25 Impact, 'Arial Narrow', sans-serif; text-transform: uppercase; scroll-margin-top: 12px; }
.entropy-rules p { margin: .65em 0; line-height: 1.5; }
.entropy-rules figure { margin: .9em auto; text-align: center; max-width: 100%; }
.entropy-rules img.entropy-figure { display: block; width: auto; max-width: 100%; height: auto; max-height: none; margin: auto; }
.entropy-rules figure > img.entropy-figure { max-width: min(100%, 560px); }
.entropy-rules figure > img.entropy-setup { max-width: min(100%, 760px); }
.entropy-rules img.entropy-symbol { display: inline-block; max-width: none; vertical-align: -.2em; object-fit: contain; }
.entropy-rules figcaption { margin-top: .4em; font-size: .9em; line-height: 1.35; }
.entropy-rules .entropy-example, .entropy-rules .entropy-note, .entropy-rules .entropy-important { margin: 1em 0; padding: 12px; border: 1px solid #fff; border-radius: 8px; box-shadow: 0 1px 4px #0002; }
.entropy-rules .entropy-example { background: #c7e3ef; }
.entropy-rules .entropy-note { background: #e6d83a; }
.entropy-rules .entropy-important { background: #d9796e; }
.entropy-rules .entropy-example > :first-child, .entropy-rules .entropy-note > :first-child, .entropy-rules .entropy-important > :first-child { margin-top: 0; }
.entropy-rules .entropy-example > :last-child, .entropy-rules .entropy-note > :last-child, .entropy-rules .entropy-important > :last-child { margin-bottom: 0; }
.entropy-rules .entropy-turn { font-weight: 700; text-align: center; }
.entropy-rules .entropy-components, .entropy-rules .entropy-reference-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: 16px; margin: 1em 0; }
.entropy-rules .entropy-components { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.entropy-rules .entropy-components figure { margin: 0; width: 100%; }
.entropy-rules .entropy-components img { width: auto; max-width: 100%; height: 105px; object-fit: contain; }
.entropy-rules .entropy-reference, .entropy-rules .entropy-condition { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.entropy-rules .entropy-reference { padding: 10px 0; border-bottom: 1px solid #c3c7c8; }
.entropy-rules .entropy-reference > img { flex: 0 0 auto; width: 78px; height: auto; }
.entropy-rules .entropy-reference > p, .entropy-rules .entropy-condition > div { flex: 1; min-width: 0; margin: 0; }
.entropy-rules .entropy-condition > img { flex: 0 0 auto; width: 45px; height: auto; }
.entropy-rules .entropy-condition { margin: 1em 0; }
.entropy-rules .entropy-glossary > img { width: 58px; }
.entropy-rules .entropy-objective { min-width: 0; padding: 10px; background: #e4e7e7; border-radius: 6px; }
.entropy-rules .entropy-objective figure { margin: .5em 0; }
.entropy-rules .entropy-objective figure img { max-height: 120px; width: auto; }
.entropy-rules .entropy-page-anchor { display: block; scroll-margin-top: 12px; }
@container (max-width: 400px) {
    .entropy-rules .entropy-components { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; }
    .entropy-rules .entropy-components img { height: 85px; }
    .entropy-rules .entropy-reference-grid { grid-template-columns: minmax(0, 1fr); }
}
.entropy-rules .entropy-toc { margin: 1em 0 1.6em; padding: 0 16px 16px; border: 1px solid #b4d4df; border-radius: 8px; background: #e4e7e7; }
.entropy-rules .entropy-toc h2 { margin: 0 -16px 1em; }
.entropy-rules .entropy-toc-sections { columns: 2 250px; column-gap: 32px; margin: 0; padding-left: 1.4em; }
.entropy-rules .entropy-toc-sections > li { break-inside: avoid; margin: 0 0 .65em; }
.entropy-rules .entropy-toc-sections > li > a { font-weight: 700; }
.entropy-rules .entropy-toc ul ul { margin: .25em 0 0; padding-left: 1.2em; }
.entropy-rules .entropy-toc a { color: #152a35; text-decoration: underline; text-underline-offset: .15em; }
.entropy-rules .entropy-toc a:hover { text-decoration-thickness: 2px; }
.entropy-rules .entropy-toc a:focus-visible { outline: 2px solid #152a35; outline-offset: 3px; border-radius: 2px; }