/* Shared parchment guide; only the panel scrolls, so tabs never jump. */
#rules[open]{display:flex;flex-direction:column;width:calc(100% - 24px);max-width:580px;height:min(760px,calc(100svh - 24px));max-height:calc(100svh - 24px);overflow:hidden;padding:24px}
#rules .rules-heading{flex:none;padding-bottom:17px}#rules .rules-heading h2{font-size:26px}
.baron-guide{display:flex;flex-direction:column;min-height:0;flex:1;text-align:left;color:#36533f;font-family:var(--ui,Arial,sans-serif)}
.baron-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;flex:none;margin:16px 0;padding:5px;border:1px solid #b6be99;border-radius:12px;background:#d8dec180}
.baron-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 5px;border:1px solid transparent;border-radius:8px;background:transparent;color:#647451;font:700 13px var(--ui,Arial,sans-serif);cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.baron-tabs button[aria-selected=true]{background:#f8f1da;color:#304d39;border-color:#b5ae7d;box-shadow:0 2px 5px #53644316}.baron-tabs button:hover{background:#f1ebd2}.baron-tabs svg{width:19px;height:19px;flex:none}.baron-guide :focus-visible{outline:2px solid #72824d;outline-offset:2px}
.baron-panels{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a8b18c transparent;padding:2px 6px 6px 1px;flex:1}
.baron-panels>[hidden]{display:none!important}.baron-panels>section:not([hidden]){animation:baron-page-in .2s ease-out}
.baron-guide h3,#rules .baron-guide h3{font-size:16px;line-height:1.3;margin:0 0 6px;font-weight:700;color:#304d39}.baron-guide p,#rules .baron-guide p{font-size:14px;line-height:1.6;margin:0;color:#52654a}
.baron-steps{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:20px}.baron-steps li{display:flex;align-items:flex-start;gap:12px}.baron-number{flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid #aeb78c;border-radius:8px;background:#dce2c680;color:#788759;font-size:12px;font-weight:700}
.baron-controls,.baron-callout{background:#dce1c480;border:1px solid #b8c199;border-radius:11px;padding:15px;margin:16px 0}.baron-controls p+p{margin-top:12px!important}.baron-controls kbd{font:700 12px var(--ui,Arial,sans-serif);display:inline-block;padding:3px 6px;margin:3px 0;border:1px solid #abb58f;border-bottom-width:2px;border-radius:4px;background:#f7f1da;color:#476044}.baron-guide .baron-note,#rules .baron-guide .baron-note{font-size:12px;color:#72805e;margin:14px 0 4px;line-height:1.55}
.baron-picture{display:block;width:100%;height:auto;max-height:130px;margin-bottom:18px}.baron-guide .baron-section-title{margin:0 0 18px}.baron-callout{display:flex;gap:12px}.baron-callout>svg{width:26px;height:26px;flex:none;color:#8e8050}.baron-guide .baron-intro{margin:0 0 18px}
.baron-sites{display:grid;gap:10px}.baron-sites article{display:flex;align-items:center;gap:14px;padding:13px;border:1px solid #bdc5a2;border-radius:10px;background:#f6f0db66}.baron-site-picture{width:62px;height:64px;border-radius:9px;display:grid;place-items:center;flex:none;background:linear-gradient(#dfe6c8,#cbd7b1);color:#6b7f55;border-bottom:3px solid #a5b789}.baron-site-picture svg{width:43px;height:43px;stroke-width:2.2}.baron-sites small{display:block;font-size:11px;font-weight:400;color:#81906c;margin-top:3px}.baron-sites p{font-size:13px!important}
.guide-overlay .dialog{display:flex;flex-direction:column;width:min(580px,100%);height:min(800px,calc(100svh - 32px));overflow:hidden;text-align:left}.guide-overlay .dialog-crest{display:none}.guide-overlay .dialog h1{font-size:25px;margin:0 0 4px}.guide-overlay #dialog-content{display:flex;flex:1;min-height:0;flex-direction:column}.guide-overlay #resume{flex:none;margin-top:12px}.guide-overlay .dialog>.eyebrow{margin:0 0 6px}
@keyframes baron-page-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:420px){#rules[open]{padding:18px 14px}#rules .rules-heading h2{font-size:23px}.baron-tabs{gap:2px;padding:3px}.baron-tabs button{font-size:12px;gap:5px;padding:10px 3px}.baron-tabs svg{width:17px;height:17px}.baron-guide p,#rules .baron-guide p{font-size:13px}.baron-guide h3,#rules .baron-guide h3{font-size:15px}.baron-sites article{padding:10px;gap:10px}.baron-site-picture{width:48px;height:56px}.baron-site-picture svg{width:35px;height:35px}}
@media(prefers-reduced-motion:reduce){.baron-panels>section:not([hidden]){animation:none}.baron-tabs button{transition:none}}

.guide-overlay #install,.guide-overlay #install-note{display:none}
.guide-overlay{display:flex;align-items:center;justify-content:center}.guide-overlay .dialog{height:100%;max-height:800px}

/* Grow with the content; scroll only beyond the available screen height. */
#rules[open],.guide-overlay .dialog{height:fit-content;max-height:calc(100svh - 32px)}
.baron-guide,.guide-overlay #dialog-content{flex:0 1 auto}
.baron-panels{flex:0 1 auto;overflow-x:hidden;overflow-y:auto;--fog-top:0px;--fog-bottom:0px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--fog-top),#000 calc(100% - var(--fog-bottom)),transparent);mask-image:linear-gradient(to bottom,transparent,#000 var(--fog-top),#000 calc(100% - var(--fog-bottom)),transparent)}
.baron-panels.fog-above{--fog-top:24px}.baron-panels.fog-below{--fog-bottom:36px}
@media(min-width:681px){#rules[open],.guide-overlay .dialog{width:calc(100% - 48px);max-width:680px;max-height:calc(100svh - 48px)}}

/* In-game help is bounded by the map, which is shorter than the viewport. */
.guide-overlay .dialog{max-height:100%;min-height:0}
@media(max-height:600px){.guide-overlay .dialog{padding:14px 16px}.guide-overlay .dialog h1{font-size:21px}.guide-overlay .baron-tabs{margin:8px 0}.guide-overlay .baron-tabs button{padding:8px 4px}.guide-overlay #resume{margin-top:8px;padding:9px 12px}}

.baron-rule-icon{width:38px;height:40px;flex:none;display:grid;place-items:center;border:1px solid #aeb78c;border-bottom:3px solid #a5b789;border-radius:10px;background:#dce2c6;color:#637548}.baron-rule-icon svg{width:24px;height:24px}.baron-steps{gap:17px}.baron-controls p+p{margin-top:8px!important}
/* Compact, aligned help heading and a single icon scale throughout the guide. */
#rules[open]{padding:14px 16px 16px;border-radius:16px}
#rules .rules-heading{min-height:48px;gap:10px;padding:0 50px 12px 0;align-items:center}
#rules .rules-heading>img{width:34px;height:34px;flex:0 0 34px}
#rules .rules-heading>div{min-width:0}
#rules .rules-heading h2{font-size:clamp(20px,5.5vw,24px);line-height:1.2;margin:0}
#rules .close{top:14px;right:14px;width:38px;height:38px;display:grid;place-items:center;padding:0;font-size:25px;line-height:1}
#rules .baron-tabs,.guide-overlay .baron-tabs{margin:12px 0 16px;padding:4px;gap:4px}
.baron-tabs button{min-height:42px;padding:8px 5px;font-size:13px;line-height:1;gap:7px}
.baron-tabs svg{width:20px;height:20px;display:block}
.baron-sites{gap:10px}
.baron-sites article{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding:12px;align-items:center}
.baron-site-picture{width:48px;height:48px;border:0;border-radius:10px;background:#dbe3c4;color:#697c50;box-shadow:inset 0 -2px #b1bf93}
.baron-site-picture svg{width:32px;height:32px;display:block;stroke:none}
.baron-sites article>div:last-child,.baron-steps li>div{min-width:0}
.baron-sites h3,#rules .baron-sites h3{margin:0 0 5px;line-height:1.3}
.baron-sites small{margin-top:3px;line-height:1.3;font-size:12px}
.baron-sites p{line-height:1.45!important}
.baron-rule-icon{width:36px;height:36px;border:0;border-radius:9px;box-shadow:inset 0 -2px #b1bf93}
.baron-rule-icon svg{display:block;width:23px;height:23px}
.baron-steps li{gap:12px}
.baron-guide .baron-intro{margin:0 0 14px;line-height:1.5}
.baron-callout{align-items:flex-start;padding:12px;gap:12px}
.guide-overlay .dialog>.eyebrow{display:none}
.guide-overlay .dialog{padding:16px}
.guide-overlay .dialog h1{display:flex;align-items:center;gap:10px;font-size:24px;line-height:1.2;margin:0;padding-bottom:12px;border-bottom:1px solid #8d9e6c55}
.guide-overlay .dialog h1:before{content:'';display:block;width:34px;height:34px;flex:0 0 34px;background:url('icons/guide-quill.svg?v=0.8.102') center/contain no-repeat}
@media(max-width:360px){#rules[open]{padding:12px}.baron-tabs button{font-size:12px;gap:5px}.baron-sites article{gap:10px;padding:10px}.guide-overlay .dialog h1{font-size:21px}}
#rules .baron-guide .baron-intro{margin:0 0 14px}

/* Explicit intrinsic sizing also prevents Firefox modal inset stretching. */
#rules[open]{position:fixed;inset:0;margin:auto;min-height:0;height:fit-content}
.baron-panels>section>:last-child{margin-bottom:0}
/* Keep all three help tabs readable inside narrow game dialogs. */
@media(max-width:420px){.baron-guide .baron-tabs button{flex-direction:column;gap:5px;padding:8px 2px;min-width:0;font-size:12px;line-height:1.15}.baron-guide .baron-tabs svg{width:18px;height:18px}}

.baron-controls .rest-guide-icon{display:inline-block;vertical-align:middle;margin:0 4px 0 2px}