/* Scoped for standalone rules, rules tab and copied sidepanel content. */
.ysRules { container-type:inline-size; max-width:1100px; margin:0 auto; padding:clamp(12px,3%,32px); color:#3b342a; font:1rem/1.65 system-ui,sans-serif; overflow-wrap:anywhere; }
.ysRules .ysRuleHero { padding:clamp(18px,5%,40px); border-radius:14px; background:linear-gradient(125deg,#4d634d,#253d3a); color:#fff8e8; }
.ysRules .ysRuleHero>span { color:#e3c483; letter-spacing:.22em; font-size:.8em; font-weight:750; }
.ysRules h1 { font:700 clamp(1.8rem,5cqi,3rem)/1.15 Georgia,serif; color:inherit; margin:.35em 0; }
.ysRules h2 { font:700 1.5rem/1.25 Georgia,serif; color:#675027; margin:0 0 .7em; border-bottom:1px solid #e1d3b9; padding-bottom:.4em; }
.ysRules h3 { font-size:1rem; line-height:1.3; margin:0 0 .4em; color:#365248; }
.ysRules p { margin:.5em 0 .9em; }
.ysRules nav { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 24px; }
.ysRules nav a { display:inline-flex; align-items:center; min-height:38px; padding:6px 12px; background:#f3ead9; color:#5c4824; border-radius:20px; text-decoration:none; font-size:.85em; }
.ysRules nav a:hover,.ysRules nav a:focus-visible { background:#e4d3b2; outline:2px solid #7d6947; }
.ysRules section { margin:0 0 30px; scroll-margin-top:16px; }
.ysRules figure { margin:18px auto; max-width:760px; }
.ysRules img { display:block; width:100%; max-width:100%; height:auto; border-radius:8px; }
.ysRules .ysRuleGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:12px; }
.ysRules .ysRuleGrid article { padding:16px; border:1px solid #e0d5c2; border-radius:10px; background:#fcf8ef; }
.ysRules .ysRuleFormula { padding:16px; border-left:4px solid #a07c36; background:#f6ecda; font-weight:750; }
.ysRules .ysRuleCost { font-size:.85em; color:#826934; font-weight:700; }
.ysRules .ysRuleCards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:12px; }
.ysRules .ysRuleCards article { display:flex; align-items:flex-start; gap:12px; padding:12px; border:1px solid #e0d5c2; border-radius:10px; }
.ysRules .ysRuleCards img { width:65px; flex:none; border-radius:4px; }
.ysRules .ysRuleCards p { font-size:.9em; margin:0; }
.ysRules footer { border-top:2px solid #cdb990; padding-top:18px; font-size:.85em; }
.ysRules footer a { color:#345d65; text-decoration:underline; }
@container (max-width:450px) { .ysRules .ysRuleHero { padding:18px; } .ysRules .ysRuleGrid,.ysRules .ysRuleCards { grid-template-columns:1fr; } }

.ysRules .ysRuleColumns { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:24px; align-items:start; }
.ysRules .ysRuleExamples { padding:16px; background:#f2f1e3; border:1px solid #d6d8bf; border-radius:10px; font-size:.9em; }
.ysRules .ysRuleExamples figure { margin:0 0 12px; }
.ysRules .ysRuleExamples .ysRuleText { margin-bottom:20px; }
.ysRules .ysRuleText h3 { margin:1.2em 0 .6em; font:700 1.15rem/1.3 Georgia,serif; }
.ysRules .ysRuleText h3:first-child { margin-top:0; }
.ysRules .ysRulePair { display:flex; justify-content:center; gap:14px; margin:20px 0; }
.ysRules .ysRulePair img { width:75px; }
.ysRules .ysRuleCards article { background:#fcf8ef; }
.ysRules .ysRuleCards p { margin-bottom:.7em; }
.ysRules .ysRuleGrid article { min-width:0; }
@container (max-width:650px) { .ysRules .ysRuleColumns { grid-template-columns:1fr; gap:16px; } }