.drakoRules { container-type:inline-size; box-sizing:border-box; max-width:1100px; margin:auto; padding:clamp(10px,2.5vw,28px); color:#302b22; background:#faf7ee; font:1rem/1.6 system-ui,sans-serif; overflow-wrap:anywhere; }
.drakoRules *, .drakoRules *::before, .drakoRules *::after { box-sizing:border-box; }
.drakoRules h1,.drakoRules h2,.drakoRules h3 { color:#453321; font-family:Georgia,serif; line-height:1.25; margin:1.3em 0 .6em; }
.drakoRules h1 { font-size:clamp(1.5rem,4cqi,2.15rem); border-bottom:2px solid #ba9560; padding-bottom:.3em; }
.drakoRules h2 { font-size:1.45rem; } .drakoRules h3 { font-size:1.18rem; }
.drakoRules img { max-width:100%; height:auto; object-fit:contain; }
.drakoRules .cover { text-align:center; } .drakoRules .cover img { max-height:180px; }
.drakoRules .deviation { padding:1em 1.25em; border-left:4px solid #986e36; background:#eae1ca; border-radius:0 8px 8px 0; }
.drakoRules .chapter { display:flow-root; }
.drakoRules .setup { float:left; width:48%; margin:0 1.25em .75em 0; }
.drakoRules .flexgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
.drakoRules .flexbox { display:grid; grid-template-columns:52px minmax(0,1fr); gap:6px 12px; border:1px solid #ded1b4; border-radius:10px; padding:14px; background:#f0eadb; min-width:0; }
.drakoRules .fleximage { grid-row:1/3; align-self:start; }
.drakoRules .flextext.header { font-weight:700; }
.drakoRules .flexbox.column { display:flex; flex-direction:column; }
.drakoRules .flexbox.column img { align-self:center; max-height:260px; }
.drakoRules .variant { padding:12px 18px; background:#ede8dc; border-radius:8px; }
@container (max-width:650px) { .drakoRules .flexgrid { grid-template-columns:minmax(0,1fr); } .drakoRules .setup { float:none; width:100%; margin:0; } }
#panelRules .drakoRules { padding:12px; font-size:.95rem; }
#panelRules .drakoRules .flexgrid { grid-template-columns:minmax(0,1fr); }
#panelRules .drakoRules .setup { float:none; width:100%; margin:0; }