/* Страницы правил на сайте (/pravila/…): те же цвета, что у игры и у страниц документов */
:root {
  --bg: #120d09;
  --card: #1d1510;
  --line: #3a2b1f;
  --text: #f4ead6;
  --soft: #e6d9c2;
  --muted: #a8977e;
  --gold: #e3b866;
  --head: #ffe2a0;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 system-ui, -apple-system, Roboto, sans-serif; }
a { color: var(--gold); }

.bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: rgba(18, 13, 9, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--gold); font: 700 18px Georgia, serif; text-decoration: none; }
.brand i { position: relative; width: 26px; height: 26px; }
.brand i::before, .brand i::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; }
.brand i::before { left: 0; top: 0; background: #2a1d14; border: 2px solid var(--gold); }
.brand i::after { right: 0; bottom: 0; background: #f2e2c0; border: 2px solid #b98c4a; }
.btn { display: inline-block; padding: 9px 18px; border-radius: 999px; background: linear-gradient(#f0c879, #d49c45); color: #2a1a0c;
  font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 10px rgba(227, 184, 102, .25); }
.btn.big { padding: 13px 26px; font-size: 18px; }

main { max-width: 780px; margin: 0 auto; padding: 18px 16px 48px; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
h1 { font: 30px/1.25 Georgia, serif; color: var(--head); margin: 0 0 12px; }
h2 { font: 23px/1.3 Georgia, serif; color: var(--head); margin: 36px 0 10px; scroll-margin-top: 70px; }
h3 { font-size: 18px; color: var(--gold); margin: 22px 0 8px; }
p, li { color: var(--soft); margin: 0 0 10px; }
ul, ol { padding-left: 22px; margin: 0 0 12px; }
b, strong { color: var(--text); }
.lead { font-size: 19px; color: var(--text); }

.toc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin: 18px 0; }
.toc b { display: block; font-size: 14px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.toc ol { margin: 0; }
.toc li { margin: 2px 0; }

.note { background: rgba(227, 184, 102, .09); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 14px 0; }
.note p:last-child { margin: 0; }

/* Диаграммы рисует doska.js из data-атрибутов; подпись — обычный текст, её видит и поиск */
.dg { margin: 18px auto; max-width: 360px; }
.dg.wide { max-width: 420px; }
.dg svg { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.dg figcaption { font-size: 15px; color: var(--muted); text-align: center; margin-top: 8px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pair .dg { margin: 12px 0; }
@media (max-width: 560px) { .pair { grid-template-columns: 1fr; } }

.tbl { width: 100%; overflow-x: auto; margin: 14px 0; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--soft); }
th { color: var(--head); font-weight: 600; }
tbody th { color: var(--gold); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
@media (max-width: 680px) { .cards { grid-template-columns: 1fr; } }
.card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-decoration: none; }
.card:hover { border-color: var(--gold); }
.card .dg { margin: 0 0 10px; }
.card b { display: block; font: 19px Georgia, serif; color: var(--head); margin-bottom: 4px; }
.card span { color: var(--soft); font-size: 15px; }

.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 8px 0; }
.faq summary { cursor: pointer; color: var(--text); font-weight: 600; }
.faq details p { margin: 8px 0 2px; }

.cta { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 16px; margin: 36px 0 20px; }
.cta h2 { margin-top: 0; }
.cta p { margin-bottom: 16px; }
.more { color: var(--muted); }

footer { border-top: 1px solid var(--line); padding: 16px; text-align: center; font-size: 14px; color: var(--muted); }
footer a { color: var(--muted); margin: 0 6px; }