/* «Тридесятое царство» — единая тема kravchenko.life. Заменяет theme-redbook.css: подключается ПОСЛЕДНИМ в <head>.
   Основа — та же разметка всех страниц, что расписана в «Алой книге»: каждый цвет книги переведён на токен царства,
   сверху — формы системы (скругления, кнопки-таблетки, хребты, звёзды, маршруты).
   Темы: «Полночь» — по умолчанию; «Рассвет» — <html data-realm="dawn"> (переключатель ставит realm-theme.js или сам сайт).
   Печать — белый лист, как раньше. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@500;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Marck+Script&family=Monomakh&family=Ruslan+Display&display=swap");

:root {
  --rl-ground:#120f2a; --rl-surface:#1c1842; --rl-raised:#28215a; --rl-raised-hover:#332a6e;
  --rl-ink:#f7f0e4; --rl-muted:#c4b9dd; --rl-gold:#efc66d; --rl-gilt:#e0b158;
  --rl-fire:#c42b45; --rl-fire-deep:#8e1730; --rl-on-fire:#fff6ea; --rl-rose:#f49ac0; --rl-teal:#4cc3b3;
  --rl-line:rgba(239,198,109,.28); --rl-line-strong:rgba(239,198,109,.55); --rl-glow:rgba(224,177,88,.32);
  --rl-warn-bg:rgba(224,177,88,.12); --rl-ok-bg:rgba(76,195,179,.14); --rl-bad-bg:rgba(196,43,69,.18);
  --rl-surface-rgb:40,33,90; --rl-raised-rgb:50,42,105; --rl-gold-rgb:239,198,109; --rl-fire-rgb:196,43,69; --rl-shadow-rgb:4,2,20;
  --rl-sky-star:rgba(247,240,228,.55);
  --rl-shadow-moon:0 0 0 1px rgba(239,198,109,.16),0 18px 44px -10px rgba(4,2,20,.7);
  --rl-shadow-glow:0 0 0 1px rgba(239,198,109,.45),0 0 30px rgba(224,177,88,.32);
  --rl-r-thread:4px; --rl-r-card:16px; --rl-r-arch:120px; --rl-r-pill:999px;
  --f-whisper:"Marck Script","EB Garamond",cursive;
}
html[data-realm="dawn"] {
  --rl-ground:#fbf6ee; --rl-surface:#fffdf8; --rl-raised:#f2e9de; --rl-raised-hover:#eadcc9;
  --rl-ink:#231a3e; --rl-muted:#5b4d78; --rl-gold:#86590b; --rl-gilt:#d9a94b;
  --rl-fire:#a3192c; --rl-fire-deep:#7a0f1f; --rl-on-fire:#fff6ea; --rl-rose:#ad2c64; --rl-teal:#17665f;
  --rl-line:rgba(134,89,11,.30); --rl-line-strong:rgba(134,89,11,.55); --rl-glow:rgba(217,169,75,.30);
  --rl-warn-bg:rgba(217,169,75,.16); --rl-ok-bg:rgba(23,102,95,.10); --rl-bad-bg:rgba(163,25,44,.10);
  --rl-surface-rgb:255,253,248; --rl-raised-rgb:242,233,222; --rl-gold-rgb:134,89,11; --rl-fire-rgb:163,25,44; --rl-shadow-rgb:35,26,62;
  --rl-sky-star:rgba(134,89,11,.18);
  --rl-shadow-moon:0 0 0 1px rgba(134,89,11,.10),0 14px 34px -12px rgba(35,26,62,.22);
  --rl-shadow-glow:0 0 0 1px rgba(134,89,11,.35),0 0 26px rgba(217,169,75,.35);
}
/* ниже — «Алая книга», перекрашенная в токены царства */
/* «Алая книга Западных пределов» — тема kravchenko.life, выбор Димы 23.09.2026 из looks.html (вариант 1):
   «1 Алая книга, переводи весь сайт, да мне нравится».
   Сайт как рукопись в красном переплёте: пергамент, чёрные чернила, красные рубрики, буквицы на золоте,
   руническая кайма, дырочки переплёта у листа героя. Шрифты — Google Fonts с кириллицей:
   Monomakh — заголовки, Ruslan Display — буквицы, Cormorant Unicase — рубрики и подписи, EB Garamond — текст.
   ⛔ Cinzel не использовать: в нём нет кириллицы.

   Файл подключается ПОСЛЕДНИМ в <head>: переопределяет переменные страниц и те места, где цвет задан жёстко.
   Текстуры — SVG-шум в data:URI (CSP разрешает img-src data:), орнамент — свой SVG. Печать — белый лист.
   Прежняя тёмная тема — theme-typo.css (в репозитории, не подключена). */

:root {
  --bg: var(--rl-ground);
  --paper: var(--rl-surface);
  --paper2: var(--rl-raised);
  --card: var(--rl-surface);
  --ink: var(--rl-ink);
  --muted: var(--rl-muted);
  --line: var(--rl-line);
  --line2: var(--rl-line-strong);
  --accent: var(--rl-gold);
  --accent-l: var(--rl-gold);
  --accent2: var(--rl-gold);
  --gold: var(--rl-gold);          /* «золото» для ТЕКСТА: тёмная охра, 5,5:1 на листе */
  --gilt: var(--rl-gilt);          /* золото для заливок и орнамента */
  --green: var(--rl-teal);
  --ok: var(--rl-teal);
  --pin: var(--rl-gold);
  --hair: var(--rl-line);
  --mute: var(--rl-muted);
  --tint: var(--rl-raised);
  --tip: var(--rl-warn-bg);
  --code: var(--rl-raised);
  --swap: rgba(var(--rl-surface-rgb), .94);
  --btn: var(--rl-raised);
  --btn-hover: var(--rl-raised-hover);
  --f-title: Monomakh, "EB Garamond", Georgia, serif;
  --f-text: "EB Garamond", Georgia, serif;
  --f-mono: "EB Garamond", Georgia, serif;
  --f-label: "Cormorant Unicase", "EB Garamond", Georgia, serif;
  --f-cap: "Ruslan Display", Monomakh, Georgia, serif;
  --r: 2px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .08 0 0 0 .6 -.2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E");
  --blotch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='b' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .27 0 0 0 0 .08 1.3 0 0 0 -.6'/%3E%3C/filter%3E%3Crect width='800' height='800' filter='url(%23b)'/%3E%3C/svg%3E");
  --runes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='26'%3E%3Cg fill='none' stroke='%238f2415' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 1.5H132M0 24.5H132' stroke-width='1'/%3E%3Cpath d='M6 5V21M6 5L11 10'/%3E%3Cpath d='M18 5V21M18 11L23 6'/%3E%3Cpath d='M30 5V21M25 10L35 16'/%3E%3Cpath d='M42 5V21M42 5L47 10L42 15'/%3E%3Cpath d='M51 5L57 21M57 5L51 21'/%3E%3Cpath d='M66 5V21M66 13L71 8M66 13L71 18'/%3E%3Cpath d='M77 5V21M82 5V21M77 5L82 11'/%3E%3Cpath d='M90 5V21M85 13H95'/%3E%3Cpath d='M99 5L105 11L99 17L105 21'/%3E%3Cpath d='M114 5V21M114 16L119 21'/%3E%3C/g%3E%3Ccircle cx='126' cy='13' r='1.8' fill='%238f2415'/%3E%3C/svg%3E");
  --diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 9'%3E%3Cpath d='M0 4.5H9M17 4.5H26' stroke='%238f2415'/%3E%3Cpath d='M13 .5L17 4.5L13 8.5L9 4.5Z' fill='%238f2415'/%3E%3C/svg%3E");
  --corners: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cg transform=''%3E%3Cpath d='M6 6C38 6 58 16 62 42' fill='none' stroke='%238f2415' stroke-width='1.8'/%3E%3Cpath d='M6 6C6 38 16 58 42 62' fill='none' stroke='%238f2415' stroke-width='1.8'/%3E%3Cpath d='M62 42c1 9-9 13-13 7c-3-5 3-9 6-5' fill='none' stroke='%238f2415' stroke-width='1.5'/%3E%3Cpath d='M42 62c9 1 13-9 7-13c-5-3-9 3-5 6' fill='none' stroke='%238f2415' stroke-width='1.5'/%3E%3Cpath d='M26 9c4-7 12-7 14-3c-5 4-10 5-14 3z' fill='%233c5a2e'/%3E%3Cpath d='M9 26c-7 4-7 12-3 14c4-5 5-10 3-14z' fill='%233c5a2e'/%3E%3Cpath d='M48 22c6-2 10 2 9 6c-5 0-8-2-9-6z' fill='%238f2415'/%3E%3Cpath d='M22 48c-2 6 2 10 6 9c0-5-2-8-6-9z' fill='%238f2415'/%3E%3Ccircle cx='6' cy='6' r='5' fill='%23d9a94b' stroke='%238f2415' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='30' r='3' fill='%23d9a94b'/%3E%3C/g%3E%3C/svg%3E") left top no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cg transform='translate(70 0) scale(-1 1)'%3E%3Cpath d='M6 6C38 6 58 16 62 42' fill='none' stroke='%238f2415' stroke-width='1.8'/%3E%3Cpath d='M6 6C6 38 16 58 42 62' fill='none' stroke='%238f2415' stroke-width='1.8'/%3E%3Cpath d='M62 42c1 9-9 13-13 7c-3-5 3-9 6-5' fill='none' stroke='%238f2415' stroke-width='1.5'/%3E%3Cpath d='M42 62c9 1 13-9 7-13c-5-3-9 3-5 6' fill='none' stroke='%238f2415' stroke-width='1.5'/%3E%3Cpath d='M26 9c4-7 12-7 14-3c-5 4-10 5-14 3z' fill='%233c5a2e'/%3E%3Cpath d='M9 26c-7 4-7 12-3 14c4-5 5-10 3-14z' fill='%233c5a2e'/%3E%3Cpath d='M48 22c6-2 10 2 9 6c-5 0-8-2-9-6z' fill='%238f2415'/%3E%3Cpath d='M22 48c-2 6 2 10 6 9c0-5-2-8-6-9z' fill='%238f2415'/%3E%3Ccircle cx='6' cy='6' r='5' fill='%23d9a94b' stroke='%238f2415' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='30' r='3' fill='%23d9a94b'/%3E%3C/g%3E%3C/svg%3E") right top no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cg transform='translate(0 70) scale(1 -1)'%3E%3Cpath d='M6 6C38 6 58 16 62 42' fill='none' stroke='%238f2415' stroke-width='1.8'/%3E%3Cpath d='M6 6C6 38 16 58 42 62' fill='none' stroke='%238f2415' stroke-width='1.8'/%3E%3Cpath d='M62 42c1 9-9 13-13 7c-3-5 3-9 6-5' fill='none' stroke='%238f2415' stroke-width='1.5'/%3E%3Cpath d='M42 62c9 1 13-9 7-13c-5-3-9 3-5 6' fill='none' stroke='%238f2415' stroke-width='1.5'/%3E%3Cpath d='M26 9c4-7 12-7 14-3c-5 4-10 5-14 3z' fill='%233c5a2e'/%3E%3Cpath d='M9 26c-7 4-7 12-3 14c4-5 5-10 3-14z' fill='%233c5a2e'/%3E%3Cpath d='M48 22c6-2 10 2 9 6c-5 0-8-2-9-6z' fill='%238f2415'/%3E%3Cpath d='M22 48c-2 6 2 10 6 9c0-5-2-8-6-9z' fill='%238f2415'/%3E%3Ccircle cx='6' cy='6' r='5' fill='%23d9a94b' stroke='%238f2415' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='30' r='3' fill='%23d9a94b'/%3E%3C/g%3E%3C/svg%3E") left bottom no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cg transform='translate(70 70) scale(-1 -1)'%3E%3Cpath d='M6 6C38 6 58 16 62 42' fill='none' stroke='%238f2415' stroke-width='1.8'/%3E%3Cpath d='M6 6C6 38 16 58 42 62' fill='none' stroke='%238f2415' stroke-width='1.8'/%3E%3Cpath d='M62 42c1 9-9 13-13 7c-3-5 3-9 6-5' fill='none' stroke='%238f2415' stroke-width='1.5'/%3E%3Cpath d='M42 62c9 1 13-9 7-13c-5-3-9 3-5 6' fill='none' stroke='%238f2415' stroke-width='1.5'/%3E%3Cpath d='M26 9c4-7 12-7 14-3c-5 4-10 5-14 3z' fill='%233c5a2e'/%3E%3Cpath d='M9 26c-7 4-7 12-3 14c4-5 5-10 3-14z' fill='%233c5a2e'/%3E%3Cpath d='M48 22c6-2 10 2 9 6c-5 0-8-2-9-6z' fill='%238f2415'/%3E%3Cpath d='M22 48c-2 6 2 10 6 9c0-5-2-8-6-9z' fill='%238f2415'/%3E%3Ccircle cx='6' cy='6' r='5' fill='%23d9a94b' stroke='%238f2415' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='30' r='3' fill='%23d9a94b'/%3E%3C/g%3E%3C/svg%3E") right bottom no-repeat;
  color-scheme: dark;
}

/* ── лист и чернила ──────────────────────────────────────────────────────────── */
/* фон — на body: так он «протекает» на весь холст; html не короче экрана, иначе виньетка повторяется полосой */
html { background: none; min-height: 100%; }
body {
  background-color: var(--rl-ground) !important;
  background-image: radial-gradient(ellipse at 50% 30%, transparent 55%, rgba(var(--rl-shadow-rgb), 0.33) 100%), var(--blotch), var(--grain) !important;
  background-repeat: no-repeat, repeat, repeat !important;
  background-size: 100% 100%, auto, auto !important;
  background-attachment: scroll !important;
  color: var(--ink);
  font-family: var(--f-text);
  font-size: clamp(17px, 16px + .25vw, 19px);
  line-height: 1.6;
}
::selection { background: rgba(var(--rl-gold-rgb), .22); color: var(--rl-ink); }

h1, h2, h3, h4, h5, .name, .pagetitle {
  font-family: var(--f-title);
  font-weight: 400;
  letter-spacing: .01em;
}

a { color: var(--accent); text-decoration-color: rgba(var(--rl-gold-rgb), .45); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--rl-gold); outline-offset: 2px; }

/* ── шапка страницы: рамка с угловым орнаментом, буквицы, руническая кайма ─────── */
header {
  position: relative;
  background: transparent !important;
  color: var(--ink);
  border: 0 !important;
  box-shadow: none !important;
  padding: 22px 16px 0 !important;
  text-align: center;
}
header .in {
  position: relative;
  display: flow-root;
  margin: 12px auto 0;
  padding: 30px 60px 26px;
  border: 1px solid var(--rl-gold);
  outline: 3px double var(--rl-gold);
  outline-offset: 5px;
  background: var(--corners);
  background-size: 64px, 64px, 64px, 64px;
  text-align: center;
}
:where(header) .in { max-width: 1180px; }   /* страницы задают свою ширину; это — запасная */
header::after {
  content: "";
  display: block;
  height: 26px;
  margin: 26px -16px 0;
  background: var(--runes) center / 132px 26px repeat-x;
  opacity: .9;
}
header h1, header .h1 {
  margin: 0;
  font-family: var(--f-title) !important;
  font-weight: 400 !important;
  font-size: clamp(34px, 3vw + 18px, 58px) !important;
  line-height: 1.05;
  color: var(--rl-ink) !important;
  text-shadow: none !important;
}
header h1::first-letter { font-family: var(--f-cap); color: var(--rl-gold); font-size: 1.15em; }
header p, header .sub, header small {
  color: var(--rl-ink) !important;
  font-family: var(--f-text);
  font-size: clamp(17px, .5vw + 14px, 20px) !important;
  line-height: 1.55;
}
header .in > p {
  max-width: 62ch;
  margin: 16px auto 0 !important;
  text-align: left;
}
header .in > p:first-of-type::first-letter {
  float: left;
  font-family: var(--f-cap);
  font-size: 3.3em;
  line-height: .9;
  color: var(--rl-gold);
  margin: .06em .14em 0 0;
  padding: .12em .14em .02em;
  border: 2px solid var(--rl-gold);
  background: linear-gradient(135deg, var(--rl-gilt), var(--rl-gilt) 60%, var(--rl-gilt));
  box-shadow: inset 0 0 0 3px var(--rl-surface);
}
header a { color: var(--rl-gold) !important; }
@media (max-width: 560px) {
  header { padding: 14px 12px 0 !important; }
  header .in { padding: 26px 18px 22px; background-size: 40px, 40px, 40px, 40px; }
  header::after { margin: 20px -12px 0; }
  header .in > p:first-of-type::first-letter { font-size: 2.9em; }
}

/* ── листы рукописи: панели и крупные блоки ─────────────────────────────────── */
.panel, details.sec, main > section, .sh-empty {
  position: relative;
  background-color: var(--rl-surface) !important;
  background-image: linear-gradient(180deg, rgba(var(--rl-surface-rgb), .55), rgba(var(--rl-surface-rgb), 0) 40%), var(--grain) !important;
  border: 1px solid var(--rl-line) !important;
  border-radius: 2px !important;
  box-shadow: 0 1px 1px rgba(var(--rl-shadow-rgb), 0.22), 0 14px 30px -12px rgba(var(--rl-shadow-rgb), 0.52) !important;
  color: var(--ink);
  isolation: auto !important;
}
.panel::before { display: none !important; }
.panel::after, details.sec::after, main > section::after {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  z-index: 0 !important;
  border: 1px solid rgba(var(--rl-gold-rgb), .35) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  pointer-events: none !important;
}
.panel > *, details.sec > *, main > section > * { position: relative; z-index: 1; }
.panel { padding: 24px 26px !important; }
@media (max-width: 560px) { .panel { padding: 20px 16px !important; } }

/* заголовок листа — красная рубрика с буквицей */
.panel > h2, .panel > h3, main > section > h2, details.sec > summary h2, .panel h3 {
  font-family: var(--f-title);
  font-weight: 400 !important;
  color: var(--rl-ink) !important;
  font-size: clamp(22px, 1vw + 17px, 28px) !important;
  line-height: 1.15;
  border-bottom: 1px solid var(--rl-gold) !important;
  box-shadow: 0 3px 0 -2px var(--rl-gold);
  padding-bottom: 8px !important;
  margin: 0 0 14px !important;
}
.panel > h2::first-letter, .panel > h3::first-letter, main > section > h2::first-letter, details.sec > summary h2::first-letter { color: var(--rl-gold); }
details.sec > summary h2 { border: 0 !important; box-shadow: none; padding: 0 !important; margin: 0 !important; }

h3, h4 { color: var(--ink); }
.grid h3, .cls-bd h4, .race-bd h4, .region h4, .ch h4, .card h3, .gen h3, .role h3, .spot h3, .step h3 { font-family: var(--f-title); font-weight: 400; color: var(--rl-gold) !important; }

/* ── рубрики-подписи: Cormorant Unicase, красным, разрядкой ─────────────────── */
.ab-n, .kl-stack td[data-label]::before, main th, .legend, label.f, .tl .when, .kid, .bs-tag, .bs-view dt, .race-list-title,
.entry .meta, .kt-tag, .kt-ac, .kt-mark, .kt-now, .num, .prog {
  font-family: var(--f-label) !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
}

/* ── подписи и пояснения ────────────────────────────────────────────────────── */
.sub { font-family: var(--f-text); font-style: italic; font-size: 16px; color: var(--muted) !important; letter-spacing: 0; }
.muted, .note, .small, .n-pop-meta { font-family: var(--f-text); color: var(--muted) !important; letter-spacing: 0; font-style: normal; }
p.muted, p.note, p.small, div.note, .muted p { font-size: 16px; line-height: 1.55; max-width: 72ch; }
.hp { font-family: var(--f-text); font-size: 15.5px; color: var(--rl-teal) !important; letter-spacing: 0; }
.hp b { color: var(--rl-gold); font-family: var(--f-title); font-weight: 400; font-size: 1.35em; }
.hp .pin { color: var(--rl-gold) !important; border-bottom-color: var(--rl-gold) !important; }
figcaption { font-family: var(--f-label); font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--ink); }
#status, .status { font-style: italic; color: var(--muted) !important; }
code { background: var(--code) !important; color: var(--ink) !important; border-radius: 0; font-family: ui-monospace, Consolas, monospace; font-size: .85em; }

/* ── поля ────────────────────────────────────────────────────────────────────── */
select, input, textarea {
  background: var(--rl-raised) !important;
  border: 1px solid var(--rl-line-strong) !important;
  color: var(--rl-ink) !important;
  border-radius: 0 !important;
  font-family: var(--f-text);
  font-variant-numeric: lining-nums;
}
input::placeholder, textarea::placeholder { color: var(--rl-muted); opacity: 1; }
select:focus, input:focus, textarea:focus { border-color: var(--rl-gold) !important; outline: 2px solid rgba(var(--rl-gold-rgb), .35); outline-offset: 0; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--rl-gold); background: none !important; border: 0 !important; }
input[type="file"] { background: transparent !important; border: 0 !important; }
.controls label, label { color: var(--rl-muted); }

/* ── кнопки: главная — киноварь с золотой нитью; прочие — перо по листу ─────── */
button.primary, .primary, a.btn.primary {
  background: var(--rl-fire) !important;
  color: var(--rl-on-fire) !important;
  border: 1px solid var(--rl-fire-deep) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 2px var(--rl-gold), inset 0 0 0 3px var(--rl-gilt) !important;
  font-family: var(--f-label) !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-shadow: none !important;
}
button.primary:hover, .primary:hover { background: var(--rl-fire) !important; filter: none !important; }
button.primary:disabled { opacity: .5; }
.controls button.primary, #go { padding: 11px 26px !important; font-size: 17px !important; min-height: 46px; }

button.ghost, .ghost, .pbtn, button.pbtn, .bm, .btn:not(.primary), .login a, .toc a, nav.toc a, .tool {
  background: var(--rl-raised) !important;
  color: var(--rl-ink) !important;
  border: 1px solid var(--rl-line-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--f-text) !important;
  font-weight: 500;
  letter-spacing: 0 !important;
}
button.ghost:hover, .ghost:hover, .pbtn:hover, .bm:hover, .btn:not(.primary):hover, .login a:hover, .toc a:hover, nav.toc a:hover, .tool:hover {
  background: var(--rl-raised-hover) !important;
  border-color: var(--rl-gold) !important;
}
.pbtn { color: var(--rl-gold) !important; }
.bm { border-style: dashed !important; border-color: var(--rl-gold) !important; color: var(--rl-gold) !important; }
.tool b { font-family: var(--f-title); font-weight: 400; font-size: 1.15em; color: var(--rl-gold); }
.tool span { color: var(--muted) !important; }

/* ── карточка героя (главная, #card): дырочки переплёта, портрет в рамке ────── */
#card { padding-left: 50px !important; }
#card > .muted:only-child { margin: 0; }
#card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 18px; top: 30px; bottom: 30px; width: 6px;
  opacity: 1 !important; mix-blend-mode: normal !important; border-radius: 0 !important;
  background: radial-gradient(circle, var(--rl-muted) 1.6px, rgba(var(--rl-gold-rgb), .25) 2.4px, transparent 3px) 0 0 / 6px 46px repeat-y !important;
  pointer-events: none;
}
@media (max-width: 560px) { #card { padding-left: 30px !important; } #card::before { left: 10px; } }
.portrait img {
  mix-blend-mode: multiply;
  border: 1px solid var(--rl-line-strong) !important;
  padding: 6px;
  background: var(--rl-raised-hover);
  border-radius: 0 !important;
  box-shadow: 0 0 0 4px var(--rl-surface), 0 0 0 5px var(--rl-gold) !important;
}
.portrait img:hover { box-shadow: 0 0 0 4px var(--rl-surface), 0 0 0 5px var(--rl-gold), 0 14px 26px -10px rgba(var(--rl-shadow-rgb), 0.75) !important; }
.card-head { border-bottom: 1px solid var(--rl-gold) !important; box-shadow: 0 3px 0 -2px var(--rl-gold); }
.name { color: var(--rl-ink) !important; font-size: clamp(32px, 2vw + 22px, 46px) !important; line-height: 1.05; }
.name::first-letter { color: var(--rl-gold); }

.ab {
  position: relative;
  background: rgba(var(--rl-surface-rgb), .55) !important;
  border: 1px solid var(--rl-line-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ab::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(var(--rl-gold-rgb), .25); pointer-events: none; }
.ab-n { font-size: 13px !important; color: var(--rl-gold) !important; text-transform: none; }
.ab-v { font-family: var(--f-title) !important; font-weight: 400 !important; color: var(--rl-ink) !important; font-size: 30px !important; line-height: 1.1; }
.ab-m { color: var(--rl-teal) !important; }
.grid section {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--rl-line-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 4px 4px !important;
}
.grid h3 { font-size: 21px !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.grid section p, .race-bd p, .prose p, .cls-bd p { color: var(--rl-ink); }

/* ── карточки рас и классов, персонажей, инструментов ─────────────────────── */
.race-card, .cls-card, .ch, .card, .gen, .role, .spot, .step, .region, .n-pop-card, main .res {
  background: rgba(var(--rl-surface-rgb), .6) !important;
  border: 1px solid var(--rl-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ink);
}
.race-card:hover, .cls-card:hover, .ch:hover { border-color: var(--rl-gold) !important; box-shadow: 0 10px 22px -14px rgba(var(--rl-shadow-rgb), 0.68) !important; }
.race-im, .cls-im { border-bottom: 0 !important; padding: 8px 8px 0; }
.race-im img, .cls-im img { mix-blend-mode: multiply; border: 1px solid var(--rl-line-strong); }
.race-im .race-swap { right: 15px !important; bottom: 7px !important; background: var(--swap) !important; }
.race-bd h4, .cls-bd h4 { font-size: 23px !important; line-height: 1.1; }
.race-bd ul { color: var(--muted) !important; }
.cls-role { font-family: var(--f-label); font-weight: 700; font-style: normal !important; color: var(--rl-teal) !important; letter-spacing: .04em; }
.cls-facts { background: rgba(var(--rl-raised-rgb), .6) !important; border: 1px solid var(--rl-line) !important; border-radius: 0 !important; }
.cls-facts dt { color: var(--muted) !important; }
.cls-facts dd { color: var(--ink) !important; }
.cls-tip, .tip, .hint, .box, .hookbox {
  background: var(--rl-warn-bg) !important;
  border-left: 3px solid var(--rl-gilt) !important;
  color: var(--ink) !important;
}
.region.unknown { background: repeating-linear-gradient(135deg, rgba(var(--rl-surface-rgb), .6) 0 10px, rgba(var(--rl-raised-rgb), .7) 10px 20px) !important; }
.region .kind { color: var(--muted) !important; }
.ch .when { color: var(--muted) !important; }
.ch button, .ch a.btn, dialog button:not(.primary) {
  background: var(--rl-raised) !important;
  color: var(--rl-ink) !important;
  border: 1px solid var(--rl-line-strong) !important;
  border-radius: 0 !important;
  min-height: 40px;
}
.ch button:hover, dialog button:not(.primary):hover { background: var(--rl-raised-hover) !important; border-color: var(--rl-gold) !important; }
.ch .primary { background: var(--rl-fire) !important; color: var(--rl-on-fire) !important; }

details { border-color: var(--rl-line) !important; }
summary { font-family: var(--f-text); font-weight: 600; }
details.sec > summary::before { color: var(--rl-gold) !important; font-family: var(--f-title) !important; }
details.sec > summary .hint { background: none !important; border: 0 !important; color: var(--muted) !important; font-family: var(--f-text) !important; font-style: italic; }
details.sec .body { border-top: 1px solid var(--rl-line) !important; padding: 4px 22px 22px !important; }
details.sec > summary { padding: 10px 22px !important; min-height: 60px !important; }
@media (max-width: 560px) { details.sec .body { padding: 4px 16px 18px !important; } details.sec > summary { padding: 8px 16px !important; } }
p.hint { padding: 8px 12px; }
header .who { justify-content: center; margin-top: 10px; color: var(--muted) !important; font-style: italic; }

/* таблицы — как в книге: тонкие линейки, шапка рубрикой */
main table { font-variant-numeric: lining-nums; }
main th, main td { border-color: var(--rl-line) !important; }
main th { background: var(--rl-raised) !important; color: var(--rl-gold) !important; font-size: .82em; }
.kl-stack td[data-label]::before { color: var(--rl-gold) !important; }

/* страница-памятка (guide): роли за столом */
span.who { border: 1px solid var(--rl-line-strong) !important; color: var(--rl-ink) !important; font-family: var(--f-label) !important; font-weight: 700; }
span.who.m { border-color: var(--rl-gold) !important; color: var(--rl-gold) !important; }
span.who.p { border-color: var(--rl-teal) !important; color: var(--rl-teal) !important; }
span.who.t { border-color: var(--rl-gold) !important; color: var(--rl-gold) !important; }
.secret { color: var(--rl-gold) !important; }
.kid { border: 1px solid var(--rl-gold) !important; color: var(--rl-gold) !important; }
.xcard { background: var(--rl-raised) !important; border-color: var(--rl-ink) !important; font-family: var(--f-title); }

/* порядок ходов (tracker.js) — тёмный текст на золоте не читался бы, переводим на киноварь */
.kt-now { background: var(--rl-fire) !important; color: var(--rl-on-fire) !important; }
.kt .kt-box.s.on { color: var(--rl-on-fire) !important; }
.kt .kt-box.f.on { color: var(--rl-on-fire) !important; }
.kt button:hover { border-color: var(--rl-gold) !important; }
.kt-row { background: rgba(var(--rl-surface-rgb), .6) !important; }
.kt-row.kt-cur { background: var(--rl-warn-bg) !important; border-color: var(--rl-gilt) !important; }
.kt-round { font-family: var(--f-title) !important; color: var(--rl-gold) !important; }
.kt-hpn b, .kt .kt-init input, .kt-exh b { font-variant-numeric: lining-nums; }

/* ── модальные окна ─────────────────────────────────────────────────────────── */
dialog {
  background-color: var(--rl-surface) !important;
  background-image: var(--grain) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rl-gold) !important;
  outline: 3px double var(--rl-gold);
  outline-offset: -8px;
  border-radius: 2px !important;
  box-shadow: 0 24px 60px -20px rgba(var(--rl-shadow-rgb), 0.85) !important;
}
dialog#bsBox { outline: 0; }
dialog::backdrop { background: rgba(var(--rl-shadow-rgb), 0.83); }
dialog h3 { border: 0 !important; box-shadow: none; }
#bsBox .bs-foot { border-top: 1px solid var(--rl-line) !important; }
.bs-q.bs-secret, .bs-view .bs-secret-item { border: 1px dashed var(--rl-gold) !important; background: rgba(var(--rl-surface-rgb), .45); }
.bs-q .bs-num { color: var(--rl-gold) !important; font-family: var(--f-title) !important; }
.bs-tag { color: var(--rl-gold) !important; }
.bs-view dt { color: var(--rl-gold) !important; }

/* ── подвал: колофон под рунической каймой ──────────────────────────────────── */
footer {
  position: relative;
  background: transparent !important;
  color: var(--rl-muted) !important;
  border-top: 0 !important;
  font-family: var(--f-text) !important;
  font-style: normal;
}
footer::before {
  content: "";
  display: block;
  height: 26px;
  margin: 0 0 18px;
  background: var(--runes) center / 132px 26px repeat-x;
  opacity: .85;
}
footer a { color: var(--rl-gold) !important; }
footer a:hover { color: var(--rl-fire-deep) !important; }

/* ── лист персонажа на экране: белые листы A4 лежат на пергаменте ───────────── */
/* сами листы (.sh-page) тему не наследуют: печать остаётся прежней — белый лист, IBM Plex Sans */
.sh-page :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; }
.sh-page { box-shadow: 0 1px 1px rgba(var(--rl-shadow-rgb), 0.30), 0 16px 34px -12px rgba(var(--rl-shadow-rgb), 0.68) !important; }
.sh-bar h1 { font-size: clamp(26px, 1vw + 20px, 34px) !important; color: var(--rl-ink); }
.sh-bar h1::first-letter { font-family: var(--f-cap); color: var(--rl-gold); }
.sh-status { color: var(--muted) !important; font-style: italic; }
.sh-bar button:not(.primary) { background: var(--rl-raised) !important; border: 1px solid var(--rl-line-strong) !important; color: var(--rl-ink) !important; border-radius: 0 !important; }

/* ── мелочи отдельных страниц ───────────────────────────────────────────────── */
.map-wrap img { box-shadow: 0 0 0 6px var(--rl-surface), 0 0 0 7px var(--rl-gold), 0 10px 26px -8px rgba(var(--rl-shadow-rgb), 0.68) !important; border-color: var(--rl-line-strong) !important; }
.pin b { font-family: var(--f-label) !important; font-weight: 700 !important; color: var(--rl-ink) !important; background: rgba(var(--rl-surface-rgb), .92) !important; border-color: var(--rl-line) !important; }
.pin.unknown b { color: var(--rl-muted) !important; }
.gen .out small, .tl .d, .check .d, .eg { color: var(--muted) !important; }
.tl > li { border-left-color: var(--rl-line) !important; }
.tl > li::before { background: var(--rl-gilt) !important; box-shadow: 0 0 0 2px var(--rl-surface), 0 0 0 3px var(--rl-gold); }
.bar { background: var(--rl-raised) !important; border-color: var(--rl-line-strong) !important; }
.bar i { background: var(--rl-fire) !important; }
.verdict { font-family: var(--f-title); font-weight: 400 !important; font-size: 1.35rem !important; }
.entry { border-top-color: var(--rl-line) !important; }
.camps button.on { border-color: var(--rl-gold) !important; color: var(--rl-gold) !important; }
figure { background: rgba(var(--rl-surface-rgb), .6) !important; border: 1px solid var(--rl-line) !important; border-radius: 0 !important; padding: 6px 6px 0; }
figure img { mix-blend-mode: multiply; }
figure figcaption { color: var(--rl-ink) !important; }

/* 23.09 (Дима: «горизонтальный скролл неудобно!»). Таблица, которой тесно в своём блоке, не прокручивается,
   а раскладывается в строки-карточки: подпись колонки (data-label, ставит nav.js по шапке) + значение.
   Работает от ширины БЛОКА (container query), а не экрана — узкие карточки на ПК тоже. (Перенесено из theme-typo.css.) */
.tw, .kl-tw { overflow-x: visible !important; container-type: inline-size; }
table.kl-stack { min-width: 0 !important; }
td.n, th.n { white-space: normal !important; }
@container (max-width: 560px) {
  .kl-stack, .kl-stack tbody, .kl-stack tr, .kl-stack td { display: block; width: auto !important; }
  .kl-stack thead, .kl-stack tr.kl-head { display: none; }
  .kl-stack tr { border: 1px solid var(--rl-line); background: rgba(var(--rl-surface-rgb), .55); margin: 0 0 8px; padding: 4px 0; }
  .kl-stack td { border: 0 !important; padding: 3px 10px !important; }
  .kl-stack td[data-label]::before { content: attr(data-label) ": "; font-size: .85em; }
  .kl-stack td:first-child { font-weight: 600; }
  .kl-stack td:first-child::before { content: none; }
}

/* сенсорный экран: цели касания не меньше 44 px, чекбоксы 20 px (перенесено из theme-typo.css) */
@media (pointer: coarse) {
  .pbtn, button.pbtn, button.ghost, .race-links a, .cls-links a, .card .acts button, main button {
    min-height: 44px;
  }
  .race-links a, .cls-links a { display: inline-flex; align-items: center; padding: 0 6px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  input[type="range"] { min-height: 32px; }
}

/* меньше движения — по просьбе системы */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* печать — белый лист, чёрные чернила, без орнамента и теней */
@media print {
  html, body { background: #fff !important; background-image: none !important; color: #000 !important; }
  header::after, footer::before, #card::before { display: none !important; }
  header .in { border: 0 !important; outline: 0 !important; background: none !important; padding: 0 !important; }
  header .in > p:first-of-type::first-letter { float: none; font: inherit; color: inherit; border: 0; background: none; box-shadow: none; padding: 0; margin: 0; }
  .panel, details.sec, main > section, dialog, .race-card, .cls-card, .ch, .card, .gen, .role, .spot, .step, .region {
    background: #fff !important; background-image: none !important; box-shadow: none !important;
  }
  .panel::after, details.sec::after, main > section::after { display: none !important; }
  main th { background: #eee !important; color: #000 !important; }
  main th, main td { border-color: #999 !important; }
  main .muted, main .sub, main .note, main .small, header p, header h1, .name, .ab-v, .ab-n, main h2, main h3, main h4 { color: #000 !important; }
  header .in > p:first-of-type::first-letter, header h1::first-letter, .name::first-letter { color: inherit !important; }
}


/* ═════ формы «Тридесятого царства» ═════ */
:root {
  /* переменные страниц и «книги» — на шкалу царства (страницы читают их в своих <style>) */
  --bg:var(--rl-ground); --paper:var(--rl-surface); --paper2:var(--rl-surface); --card:var(--rl-surface);
  --ink:var(--rl-ink); --muted:var(--rl-muted); --mute:var(--rl-muted); --line:var(--rl-line); --line2:var(--rl-line-strong); --hair:var(--rl-line);
  --accent:var(--rl-gold); --accent-l:var(--rl-gold); --accent2:var(--rl-gold); --gold:var(--rl-gold); --gilt:var(--rl-gilt);
  --green:var(--rl-teal); --ok:var(--rl-teal); --pin:var(--rl-fire);
  --tint:var(--rl-raised); --tip:var(--rl-warn-bg); --code:var(--rl-raised); --swap:rgba(var(--rl-surface-rgb),.94);
  --btn:var(--rl-raised); --btn-hover:var(--rl-raised-hover); --r:var(--rl-r-thread);
  --grain:none; --blotch:none; --corners:none;
  --runes:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='24' viewBox='0 0 240 24'%3E%3Cg fill='%23e0b158'%3E%3Crect x='4' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='13' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='22' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='31' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='40' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='49' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='58' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='67' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='76' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='85' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='94' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='141' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='150' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='159' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='168' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='177' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='186' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='195' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='204' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='213' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='222' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Crect x='231' y='11.2' width='5' height='1.6' rx='.8'/%3E%3Cpath d='M120 1L122.6 9.4L131 12L122.6 14.6L120 23L117.4 14.6L109 12L117.4 9.4Z'/%3E%3C/g%3E%3Ccircle cx='120' cy='12' r='9.5' fill='none' stroke='%23e0b158'/%3E%3C/svg%3E");
  --diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e0b158' d='M12 0C12.9 7.6 16.4 11.1 24 12C16.4 12.9 12.9 16.4 12 24C11.1 16.4 7.6 12.9 0 12C7.6 11.1 11.1 7.6 12 0Z'/%3E%3C/svg%3E");
  --rl-ridge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath fill-rule='evenodd' d='M0 14L9 5L13 9L21 0L31 10L36 6L48 14Z M19.2 3.4L21 1.6L22.8 3.4L21 4.6Z'/%3E%3C/svg%3E");
  --rl-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.6 16.4 11.1 24 12C16.4 12.9 12.9 16.4 12 24C11.1 16.4 7.6 12.9 0 12C7.6 11.1 11.1 7.6 12 0Z'/%3E%3C/svg%3E");
  --rl-compass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='50' cy='50' r='36' stroke-width='2.4'/%3E%3Ccircle cx='50' cy='50' r='41' stroke-dasharray='2 4'/%3E%3C/g%3E%3Cpath d='M50 3L54 46L97 50L54 54L50 97L46 54L3 50L46 46Z'/%3E%3C/svg%3E");
  color-scheme:dark;
}
html[data-realm="dawn"] { color-scheme:light; }
::selection { background:rgba(var(--rl-gold-rgb),.3); color:var(--rl-ink); }

/* ── небо ── */
html { background:var(--rl-ground) !important; }
body {
  background-color:var(--rl-ground) !important;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, var(--rl-sky-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 9%, var(--rl-sky-star) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 88% 42%, var(--rl-sky-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 66%, var(--rl-sky-star) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 56% 84%, var(--rl-sky-star) 50%, transparent 51%),
    radial-gradient(ellipse 70% 40% at 50% -6%, rgba(var(--rl-gold-rgb),.10), transparent 70%) !important;
  background-size:420px 420px,520px 520px,610px 610px,470px 470px,560px 560px,100% 100% !important;
  background-repeat:repeat,repeat,repeat,repeat,repeat,no-repeat !important;
  background-attachment:scroll !important;
  color:var(--rl-ink) !important;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}
img, video, canvas, svg { max-width:100%; }
a { color:var(--rl-gold); text-decoration-color:rgba(var(--rl-gold-rgb),.45); }
:focus-visible { outline:2px solid var(--rl-gold) !important; outline-offset:3px; }

/* ── шапка страницы: заглавие царства над маршрутом ── */
header .in {
  border:1px solid var(--rl-line) !important; outline:0 !important;
  border-radius:var(--rl-r-card);
  background:rgba(var(--rl-surface-rgb),.55) !important;
  box-shadow:var(--rl-shadow-moon);
}
header .in::before { content:""; position:absolute; inset:7px; border:1px dashed var(--rl-line); border-radius:calc(var(--rl-r-card) - 6px); pointer-events:none; }
header h1, header .h1 { color:var(--rl-gold) !important; }
header h1::first-letter { color:var(--rl-gold); }
header p, header .sub, header small { color:var(--rl-ink) !important; }
header a { color:var(--rl-gold) !important; }
header::after, footer::before { background:var(--runes) center / 240px 24px no-repeat !important; height:24px; }
header .in > p:first-of-type::first-letter {
  color:var(--rl-gold); border:1.5px solid var(--rl-gilt); border-radius:50%;
  background:var(--rl-raised); box-shadow:0 0 0 3px var(--rl-surface),0 0 0 4px var(--rl-line-strong);
  padding:.14em .2em .04em; min-width:1.2em; text-align:center;
}


/* ── баннеры разделов в шапке: иллюстрации Adobe Stock, тонированные в Photoshop (data-page ставит realm-theme.js) ── */
html[data-page] header .in { --rl-veil-a:rgba(18,15,42,.42); --rl-veil-b:rgba(18,15,42,.84); }
html[data-realm="dawn"][data-page] header .in { --rl-veil-a:rgba(251,246,238,.72); --rl-veil-b:rgba(251,246,238,.90); }
html[data-page="gm"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/bashnya-mastera.jpg") 62% 30% / cover no-repeat !important; }
html[data-page="battle"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/boevaya-karta.jpg") 50% 62% / cover no-repeat !important; }
html[data-page="world"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/karta-carstva.jpg") 50% 50% / cover no-repeat !important; }
html[data-page="first-game"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/pervaya-igra.jpg") 50% 72% / cover no-repeat !important; }
html[data-page="workshop"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/masterskaya.jpg") 45% 78% / cover no-repeat !important; }
html[data-page="history"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/istoriya.jpg") 50% 55% / cover no-repeat !important; }
html[data-page="home"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/glavnaya.jpg") 50% 45% / cover no-repeat !important; }
html[data-page="glossary"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/glossariy.jpg") 50% 55% / cover no-repeat !important; }
html[data-page="articles"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/stati.jpg") 45% 68% / cover no-repeat !important; }
html[data-page="guide"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/kak-igrat.jpg") 40% 40% / cover no-repeat !important; }
html[data-page="portraits"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/portrety.jpg") 50% 40% / cover no-repeat !important; }
html[data-page="party"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/otryady.jpg") 50% 70% / cover no-repeat !important; }
html[data-page="journal"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/zhurnal.jpg") 50% 50% / cover no-repeat !important; }
html[data-page="my"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/moi-personazhi.jpg") 50% 55% / cover no-repeat !important; }
/* отдельные статьи (data-page="article-…"): по теме статьи — баннер родственного раздела, остальные — баннер «Статей» */
html[data-page^="article-"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/stati.jpg") 45% 68% / cover no-repeat !important; }
html[data-page="article-combat"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/boevaya-karta.jpg") 50% 62% / cover no-repeat !important; }
html[data-page="article-worlds"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/karta-carstva.jpg") 50% 50% / cover no-repeat !important; }
html[data-page="article-culture"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/istoriya.jpg") 50% 55% / cover no-repeat !important; }
html[data-page="article-first-adventure"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/pervaya-igra.jpg") 50% 72% / cover no-repeat !important; }
html[data-page="article-species-2024"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/portrety.jpg") 50% 40% / cover no-repeat !important; }
html[data-page="article-classes-2024"] header .in { background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/konstruktor.jpg") 50% 50% / cover no-repeat !important; }
/* источники статей: длинные адреса переносятся, а не растягивают страницу на телефоне */
.src, main li a[href^="http"], main p a[href^="http"] { overflow-wrap:anywhere; word-break:break-word; }
/* у комнат и листа персонажа нет <header> — баннером становится заголовок лобби и панель листа */
html[data-page="room"] #lobby > h1, html[data-page="sheet"] .sh-bar {
  --rl-veil-a:rgba(18,15,42,.30); --rl-veil-b:rgba(18,15,42,.86);
  position:relative; box-sizing:border-box;
  border:1px solid var(--rl-line) !important; border-radius:var(--rl-r-card) !important;
  box-shadow:var(--rl-shadow-moon) !important;
}
html[data-realm="dawn"][data-page="room"] #lobby > h1, html[data-realm="dawn"][data-page="sheet"] .sh-bar { --rl-veil-a:rgba(251,246,238,.62); --rl-veil-b:rgba(251,246,238,.92); }
html[data-page="room"] #lobby > h1::before, html[data-page="sheet"] .sh-bar::before {
  content:""; position:absolute; inset:7px; border:1px dashed var(--rl-line); border-radius:calc(var(--rl-r-card) - 6px); pointer-events:none;
}
html[data-page="room"] #lobby > h1 {
  margin:0 0 18px !important; padding:clamp(72px, 9vw, 120px) 24px 26px !important; text-align:center;
  color:var(--rl-gold) !important; text-shadow:0 2px 14px var(--rl-ground);
  background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/komnaty.jpg") 50% 78% / cover no-repeat !important;
}
html[data-page="sheet"] .sh-bar {
  padding:clamp(56px, 7vw, 92px) 24px 22px !important; margin-top:18px !important;
  width:min(210mm, calc(100% - 32px)); max-width:none !important; margin-left:auto !important; margin-right:auto !important;
  background:linear-gradient(180deg,var(--rl-veil-a),var(--rl-veil-b)), url("/img/realm/razdely/list-personazha.jpg") 62% 22% / cover no-repeat !important;
}
html[data-page="sheet"] .sh-bar > * { position:relative; }
html[data-page="sheet"] .sh-bar h1 { color:var(--rl-gold) !important; text-shadow:0 2px 14px var(--rl-ground); }
@media (max-width:600px) {
  html[data-page="sheet"] .sh-bar { padding:56px 16px 18px !important; }
  html[data-page="sheet"] .sh-bar h1 { flex:1 0 100%; margin:0 0 4px !important; }
  html[data-page="room"] #lobby > h1 { padding:64px 16px 20px !important; }
}
@media print { html[data-page="sheet"] .sh-bar { background:none !important; } }

/* ── игровой стол /room.html: шапка, инструменты, поле и вкладки. Свои цвета стола заданы прямо в room.html (коричневый и алый «Алой книги»),
      конвертер их не видит — перекрываем здесь. Разметку и room.js не меняем; холст карты рисует battle-gen.js своими цветами. ── */
html[data-page="room"] #top { background:var(--rl-surface) !important; border-bottom:1px solid var(--rl-line-strong) !important; color:var(--rl-ink) !important; box-shadow:0 8px 20px -14px rgba(4,2,20,.7); }
html[data-page="room"] #top .ttl { color:var(--rl-gold) !important; }
html[data-page="room"] #top .gmn { color:var(--rl-muted) !important; border-left-color:var(--rl-line) !important; }
html[data-page="room"] .avbar .av { background:var(--rl-raised) !important; color:var(--rl-ink) !important; border-color:var(--rl-line-strong) !important; }
html[data-page="room"] .avbar .av.gm { border-color:var(--rl-gilt) !important; box-shadow:0 0 0 2px rgba(var(--rl-gold-rgb),.25); }
html[data-page="room"] .avbar .av i { background:var(--rl-muted) !important; border-color:var(--rl-surface) !important; }
html[data-page="room"] .avbar .av.on i { background:var(--rl-teal) !important; }
html[data-page="room"] #tools { background:var(--rl-surface) !important; border-right:1px solid var(--rl-line-strong) !important; border-bottom-color:var(--rl-line-strong) !important; }
html[data-page="room"] #tools .tg { border-color:var(--rl-line) !important; }
html[data-page="room"] .rt, html[data-page="room"] .tb {
  background:var(--rl-raised) !important; color:var(--rl-ink) !important; border:1px solid var(--rl-line-strong) !important;
  border-radius:12px !important; box-shadow:none !important; font-family:var(--f-text) !important; letter-spacing:0 !important;
}
html[data-page="room"] .rt:hover, html[data-page="room"] .tb:hover { background:var(--rl-raised-hover) !important; border-color:var(--rl-gold) !important; box-shadow:var(--rl-shadow-glow) !important; }
html[data-page="room"] .rt.on { background:var(--rl-fire) !important; color:var(--rl-on-fire) !important; border-color:var(--rl-gilt) !important; box-shadow:0 0 0 2px var(--rl-surface),0 0 0 3px var(--rl-gilt) !important; }
html[data-page="room"] .rt .hk { color:var(--rl-muted) !important; }
html[data-page="room"] .rt.on .hk { color:var(--rl-on-fire) !important; }
html[data-page="room"] .rt[data-tip]:hover::after, html[data-page="room"] .rt[data-tip]:focus-visible::after {
  background:var(--rl-raised) !important; color:var(--rl-ink) !important; border:1px solid var(--rl-line-strong) !important; border-left:3px solid var(--rl-gold) !important;
  border-radius:10px !important; box-shadow:var(--rl-shadow-moon) !important;
}
/* одна жар-птица на экран: это «Бросить» игрока; «Пригласить» мастера — золотой контур */
html[data-page="room"] .tb.main, html[data-page="room"] #top button.main, html[data-page="room"] #invBtn {
  background:transparent !important; color:var(--rl-gold) !important; border:1px solid var(--rl-gold) !important; border-radius:var(--rl-r-pill) !important;
  box-shadow:none !important; padding-left:16px !important; padding-right:16px !important; font-family:var(--f-label) !important; font-weight:700 !important; letter-spacing:.08em !important;
}
html[data-page="room"] #rollForm button.main, html[data-page="room"] #side button.main {
  background:var(--rl-fire) !important; color:var(--rl-on-fire) !important; border:1px solid var(--rl-gilt) !important; border-radius:var(--rl-r-pill) !important;
  box-shadow:inset 0 -3px 0 var(--rl-fire-deep),0 0 0 2px var(--rl-surface),0 0 0 3px var(--rl-gilt) !important; font-family:var(--f-label) !important; font-weight:700 !important; letter-spacing:.08em !important;
}
html[data-page="room"] #side .dice button { border-radius:var(--rl-r-pill) !important; }
/* поле стола ночное в обеих темах: туман войны и виньетка рассчитаны на тёмный фон */
html[data-page="room"] #stageWrap { background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(239,198,109,.06),transparent 70%),#120f2a !important; }
html[data-page="room"] #status { background:rgba(var(--rl-surface-rgb),.92) !important; color:var(--rl-ink) !important; border:1px solid var(--rl-line-strong) !important; border-radius:var(--rl-r-pill) !important; padding:4px 14px !important; }
html[data-page="room"] #status.bad { color:var(--rl-rose) !important; border-color:var(--rl-fire) !important; }
html[data-page="room"] #zoom button { background:rgba(var(--rl-surface-rgb),.92) !important; color:var(--rl-ink) !important; border:1px solid var(--rl-line-strong) !important; border-radius:50% !important; box-shadow:var(--rl-shadow-moon) !important; }
html[data-page="room"] #zoom button:hover { border-color:var(--rl-gold) !important; box-shadow:var(--rl-shadow-glow) !important; }
html[data-page="room"] #toast { background:var(--rl-fire) !important; color:var(--rl-on-fire) !important; border:1px solid var(--rl-gilt) !important; border-radius:var(--rl-r-pill) !important; padding:6px 18px !important; }
html[data-page="room"] #sceneFx { background:#120f2a !important; }
html[data-page="room"] #sceneFx b { color:#efc66d !important; text-shadow:0 0 22px rgba(224,177,88,.45) !important; }
html[data-page="room"] #side { border-left:1px solid var(--rl-line-strong) !important; box-shadow:-10px 0 30px -18px rgba(4,2,20,.8); }
html[data-page="room"] #side .tabs { border-bottom:1px solid var(--rl-line-strong) !important; }
html[data-page="room"] #side .tabs button {
  background:none !important; border:0 !important; border-bottom:2px solid transparent !important; border-radius:0 !important; box-shadow:none !important;
  color:var(--rl-muted) !important; padding:4px 8px !important; font-family:var(--f-label) !important; font-weight:700 !important; font-size:13px !important; letter-spacing:.06em !important; min-height:44px;
}
html[data-page="room"] #side .tabs button:hover { color:var(--rl-ink) !important; }
html[data-page="room"] #side .tabs button.on { color:var(--rl-gold) !important; border-bottom-color:var(--rl-gold) !important; }
html[data-page="room"] #tokCard, html[data-page="room"] #sndPop, html[data-page="room"] #aoePop, html[data-page="room"] #recon, html[data-page="room"] dialog.kl-dlg {
  border:1px solid var(--rl-line-strong) !important; border-top:3px double var(--rl-gold) !important; border-radius:14px !important; box-shadow:var(--rl-shadow-moon) !important;
}
@media (max-width:860px) { /* тот же порог, что у телефонной раскладки стола в room.html */
  html[data-page="room"] #side { border-left:0 !important; border-top:1px solid var(--rl-line-strong) !important; box-shadow:0 -10px 28px -14px rgba(4,2,20,.8); }
  html[data-page="room"] #side .tabs { border-bottom:0 !important; border-top:1px solid var(--rl-line) !important; }
  html[data-page="room"] #side .tabs button { border-bottom:0 !important; border-top:2px solid transparent !important; }
  html[data-page="room"] #side .tabs button.on { border-top-color:var(--rl-gold) !important; }
}

/* «Боевая карта»: кнопка выхода из полноэкранного режима была алой «Алой книги» прямо в battle.html */
html[data-page="battle"] #bm-exit { background:var(--rl-fire) !important; color:var(--rl-on-fire) !important; border:1px solid var(--rl-gilt) !important; border-radius:var(--rl-r-pill) !important; }

/* ── листы карты: панели и разделы ── */
.panel, details.sec, main > section, .sh-empty {
  background-color:var(--rl-surface) !important; background-image:none !important;
  border:1px solid var(--rl-line) !important; border-radius:var(--rl-r-card) !important;
  box-shadow:var(--rl-shadow-moon) !important;
}
.panel { padding:24px 26px 40px !important; }
.panel::after, details.sec::after, main > section::after { border:1px dashed var(--rl-line) !important; border-radius:calc(var(--rl-r-card) - 6px) !important; }
.panel::before, main > section::before {
  content:"" !important; display:block !important; position:absolute !important; z-index:0 !important;
  top:auto !important; bottom:1px !important; height:16px !important; inset:auto 14px 1px 14px !important;
  background:var(--rl-line-strong) !important; opacity:1 !important; mix-blend-mode:normal !important; border-radius:0 !important;
  -webkit-mask:var(--rl-ridge) left bottom / 55px 16px repeat-x; mask:var(--rl-ridge) left bottom / 55px 16px repeat-x;
  pointer-events:none;
}
main > section { padding-bottom:36px !important; }
.panel > h2, .panel > h3, main > section > h2, details.sec > summary h2, .panel h3 {
  color:var(--rl-gold) !important; border-bottom:1px dashed var(--rl-line-strong) !important; box-shadow:none !important;
}
.panel > h2::first-letter, .panel > h3::first-letter, main > section > h2::first-letter, details.sec > summary h2::first-letter { color:inherit; }
.grid h3, .cls-bd h4, .race-bd h4, .region h4, .ch h4, .card h3, .gen h3, .role h3, .spot h3, .step h3 { color:var(--rl-gold) !important; }

/* ── поля ── */
select, input, textarea {
  background:var(--rl-raised) !important; border:1px solid var(--rl-line-strong) !important; color:var(--rl-ink) !important;
  border-radius:var(--rl-r-thread) !important; min-height:40px;
}
select option { background:var(--rl-surface); color:var(--rl-ink); }
input::placeholder, textarea::placeholder { color:var(--rl-muted); }
select:focus, input:focus, textarea:focus { border-color:var(--rl-gold) !important; outline:2px solid rgba(var(--rl-gold-rgb),.35); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color:var(--rl-gilt); min-height:0; }
.controls label, label { color:var(--rl-muted); }

/* ── кнопки: главная — жар-птица с золотым ободком; прочие — таблетки ── */
button.primary, .primary, a.btn.primary, .ch .primary {
  background:var(--rl-fire) !important; color:var(--rl-on-fire) !important;
  border:1px solid var(--rl-gilt) !important; border-radius:var(--rl-r-pill) !important;
  box-shadow:inset 0 -3px 0 var(--rl-fire-deep),0 0 0 3px var(--rl-ground),0 0 0 4px var(--rl-gilt) !important;
  font-family:var(--f-label) !important; font-weight:700 !important; letter-spacing:.1em !important;
  padding-left:22px; padding-right:22px; min-height:44px;
}
button.primary:hover, .primary:hover { background:var(--rl-fire) !important; box-shadow:inset 0 -3px 0 var(--rl-fire-deep),0 0 0 3px var(--rl-ground),0 0 0 4px var(--rl-gilt),var(--rl-shadow-glow) !important; }
button.ghost, .ghost, .pbtn, button.pbtn, .bm, .btn:not(.primary), .login a, .toc a, nav.toc a, .tool,
.ch button, .ch a.btn, dialog button:not(.primary), .sh-bar button:not(.primary) {
  background:var(--rl-raised) !important; color:var(--rl-ink) !important;
  border:1px solid var(--rl-line-strong) !important; border-radius:var(--rl-r-pill) !important;
  padding-left:16px; padding-right:16px;
}
.tool { border-radius:var(--rl-r-card) !important; padding:12px 16px; }
button.ghost:hover, .ghost:hover, .pbtn:hover, .bm:hover, .btn:not(.primary):hover, .login a:hover, .toc a:hover, nav.toc a:hover, .tool:hover,
.ch button:hover, dialog button:not(.primary):hover {
  background:var(--rl-raised-hover) !important; border-color:var(--rl-gold) !important; box-shadow:var(--rl-shadow-glow) !important;
}
.pbtn, .bm { color:var(--rl-gold) !important; }
.bm { border-style:dashed !important; }

/* ── карточка героя (#card) ── */
#card { padding-left:26px !important; }
#card::before { display:none !important; }
.portrait img, .race-im img, .cls-im img, figure img, .race-image-box img, .class-image-box img { mix-blend-mode:normal !important; }
.portrait img {
  border:0 !important; padding:0 !important; background:var(--rl-raised) !important;
  border-radius:var(--rl-r-arch) var(--rl-r-arch) var(--rl-r-thread) var(--rl-r-thread) !important;
  box-shadow:0 0 0 4px var(--rl-surface),0 0 0 5px var(--rl-gilt),var(--rl-shadow-moon) !important;
}
.portrait img:hover { box-shadow:0 0 0 4px var(--rl-surface),0 0 0 5px var(--rl-gilt),var(--rl-shadow-glow) !important; }
.card-head { border-bottom:1px dashed var(--rl-line-strong) !important; box-shadow:none !important; }
.name { color:var(--rl-gold) !important; }
.name::first-letter { color:inherit; }
.ab {
  background:var(--rl-raised) !important; border:1px solid var(--rl-line-strong) !important;
  border-radius:var(--rl-r-card) !important; overflow:hidden;
}
.ab::before {
  inset:auto !important; left:50% !important; top:50% !important; width:86px; height:86px; margin:-43px 0 0 -43px; border:0 !important;
  background:var(--rl-gilt); opacity:.12; -webkit-mask:var(--rl-compass) center/contain no-repeat; mask:var(--rl-compass) center/contain no-repeat;
}
.ab > * { position:relative; }
.ab-n { color:var(--rl-muted) !important; }
.ab-v { color:var(--rl-gold) !important; font-family:var(--f-label) !important; font-weight:700 !important; }
.ab-m { color:var(--rl-teal) !important; }
.grid section { border-top:1px dashed var(--rl-line-strong) !important; }
.grid section p, .race-bd p, .prose p, .cls-bd p { color:var(--rl-ink); }

/* ── карточки рас, классов, героев, инструментов ── */
.race-card, .cls-card, .ch, .card, .gen, .role, .spot, .step, .region, .n-pop-card, main .res {
  background:var(--rl-surface) !important; border:1px solid var(--rl-line) !important;
  border-radius:var(--rl-r-card) !important; box-shadow:var(--rl-shadow-moon) !important; overflow:hidden;
}
.race-card:hover, .cls-card:hover, .ch:hover { border-color:var(--rl-line-strong) !important; box-shadow:var(--rl-shadow-glow) !important; transform:translateY(-2px); }
.race-im, .cls-im { padding:10px 10px 0 !important; }
.race-im img, .cls-im img {
  border:0 !important; border-radius:var(--rl-r-arch) var(--rl-r-arch) var(--rl-r-thread) var(--rl-r-thread) !important;
  box-shadow:inset 0 0 0 1px var(--rl-line-strong);
}
.race-im .race-swap { right:18px !important; bottom:8px !important; border-radius:var(--rl-r-pill) !important; min-height:36px; }
.cls-role { color:var(--rl-teal) !important; }
.cls-facts { background:var(--rl-raised) !important; border:1px dashed var(--rl-line-strong) !important; border-radius:12px !important; }
.cls-tip, .tip, .hint, .box, .hookbox {
  background:var(--rl-raised) !important; border:0 !important; border-radius:12px !important;
  box-shadow:0 0 0 1px var(--rl-line) !important; color:var(--rl-ink) !important;
}
.region.unknown { background:repeating-linear-gradient(135deg, rgba(var(--rl-surface-rgb),.8) 0 10px, rgba(var(--rl-raised-rgb),.8) 10px 20px) !important; }

/* ── раскрывашки, таблицы, диалоги ── */
details { border-color:var(--rl-line) !important; }
details.sec > summary::before { color:var(--rl-gold) !important; }
main th { background:var(--rl-raised) !important; color:var(--rl-gold) !important; }
main th, main td { border-color:var(--rl-line) !important; }
dialog {
  background:var(--rl-surface) !important; color:var(--rl-ink) !important;
  border:1px solid var(--rl-line-strong) !important; outline:0 !important; border-radius:var(--rl-r-card) !important;
  box-shadow:var(--rl-shadow-moon) !important; max-width:min(92vw, 720px);
}
dialog::backdrop { background:rgba(var(--rl-shadow-rgb),.72); }
figure { background:var(--rl-surface) !important; border:1px solid var(--rl-line) !important; border-radius:var(--rl-r-card) !important; overflow:hidden; }
code { border-radius:var(--rl-r-thread); }
.kt-now { background:var(--rl-fire) !important; color:var(--rl-on-fire) !important; }
.bar i { background:var(--rl-gilt) !important; }
.tl > li::before { background:var(--rl-gilt) !important; box-shadow:0 0 0 2px var(--rl-surface),0 0 0 3px var(--rl-line-strong) !important; border-radius:50%; }
.map-wrap img { box-shadow:0 0 0 5px var(--rl-surface),0 0 0 6px var(--rl-gilt),var(--rl-shadow-moon) !important; border-radius:12px; }
.pin b { background:rgba(var(--rl-surface-rgb),.92) !important; color:var(--rl-ink) !important; border-color:var(--rl-line-strong) !important; border-radius:var(--rl-r-pill); }
span.who.m, .secret { color:var(--rl-rose) !important; border-color:var(--rl-rose) !important; }
span.who.p { color:var(--rl-teal) !important; border-color:var(--rl-teal) !important; }
.xcard { background:var(--rl-raised) !important; color:var(--rl-ink) !important; border-color:var(--rl-ink) !important; }
.sh-page { color:#111; } /* листы A4 печатаются белыми — остаются белыми и на экране */

/* ── подвал ── */
footer { color:var(--rl-muted) !important; }
footer a { color:var(--rl-gold) !important; }

/* ── верхнее меню из nav.js: ночная полоса со звездой у текущего раздела ── */
html body .kl-nav {
  background:rgba(var(--rl-surface-rgb),.92) !important; background-image:none !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rl-line) !important; box-shadow:0 10px 24px -16px rgba(var(--rl-shadow-rgb),.9) !important;
  color:var(--rl-ink) !important;
}
html[data-realm] body .kl-nav, html body .kl-nav { background-color:rgba(var(--rl-surface-rgb),.94) !important; }
html body .kl-nav a, html body .kl-nav button { color:var(--rl-ink) !important; font-family:var(--f-label) !important; font-weight:700 !important; letter-spacing:.05em !important; font-size:.9em; }
html body .kl-nav a:hover, html body .kl-nav button:hover { color:var(--rl-gold) !important; border-bottom-color:var(--rl-line-strong) !important; }
html body .kl-nav a.on, html body .kl-nav .kl-dd > button.on { color:var(--rl-gold) !important; border-bottom-color:var(--rl-gilt) !important; }
html body .kl-nav .kl-home { font-family:var(--f-title) !important; font-weight:400 !important; letter-spacing:.01em !important; color:var(--rl-gold) !important; font-size:1.25em; }
html body .kl-nav .kl-home::first-letter { color:inherit !important; }
html body .kl-nav .kl-menu {
  background:var(--rl-surface) !important; background-image:none !important;
  border:1px solid var(--rl-line-strong) !important; border-radius:14px !important; box-shadow:var(--rl-shadow-moon) !important; overflow:hidden;
}
html body .kl-nav .kl-menu a { font-family:var(--f-text) !important; font-weight:400 !important; letter-spacing:0 !important; font-size:1em; }
html body .kl-nav .kl-menu a:hover { background:var(--rl-raised) !important; color:var(--rl-gold) !important; }
html body .kl-nav .kl-menu a.on::before, html body .kl-drawer a.on::before { content:"✦" !important; color:var(--rl-gilt) !important; }
html body .kl-nav .kl-menu .kl-sub, html body .kl-drawer .kl-sub { color:var(--rl-muted) !important; }
html body .kl-nav .kl-menu hr { border-top-color:var(--rl-line) !important; }
html body .kl-nav .kl-dice, html body .kl-nav .kl-burger {
  background:var(--rl-raised) !important; border:1px solid var(--rl-line-strong) !important; border-radius:var(--rl-r-pill) !important; color:var(--rl-ink) !important;
}
html body .kl-nav .kl-realm {
  background:var(--rl-raised) !important; border:1px solid var(--rl-line-strong) !important; border-radius:var(--rl-r-pill) !important;
  color:var(--rl-gold) !important; min-height:2.4rem !important; min-width:2.75rem; justify-content:center; margin:0 0 0 .4rem !important; font-size:1.1em !important; letter-spacing:0 !important;
}
html body .kl-nav .kl-acc {
  background:var(--rl-fire) !important; color:var(--rl-on-fire) !important; border:1px solid var(--rl-gilt) !important;
  border-radius:var(--rl-r-pill) !important; box-shadow:inset 0 -2px 0 var(--rl-fire-deep) !important;
}
html body .kl-nav .kl-acc img { border-color:var(--rl-gilt) !important; }
html body .kl-drawer.open { background:var(--rl-surface) !important; background-image:none !important; }
html body .kl-drawer a { color:var(--rl-ink) !important; border-bottom-color:var(--rl-line) !important; }
html body .kl-drawer a.on { color:var(--rl-gold) !important; }

/* ── фильтры и вкладки страниц ── */
#filters button, .filters button, .tabs button, .camps button {
  border-radius:var(--rl-r-pill) !important; background:var(--rl-raised) !important; color:var(--rl-ink) !important;
  border:1px solid var(--rl-line-strong) !important; padding:6px 16px !important; min-height:40px;
}
#filters button.on, #filters button[aria-pressed="true"], .camps button.on { border-color:var(--rl-gilt) !important; color:var(--rl-gold) !important; box-shadow:0 0 0 1px var(--rl-gilt) inset !important; }

/* ── плашка cookie (стили вписаны в разметку — перекрываем) ── */
.kl-cookie { background:var(--rl-surface) !important; color:var(--rl-ink) !important; border:1px solid var(--rl-line-strong) !important;
  border-radius:14px !important; box-shadow:var(--rl-shadow-moon) !important; font-family:var(--f-text) !important; }
.kl-cookie a { color:var(--rl-gold) !important; }
.kl-cookie button { background:var(--rl-raised) !important; color:var(--rl-ink) !important; border:1px solid var(--rl-line-strong) !important;
  border-radius:var(--rl-r-pill) !important; min-height:40px; padding:0 16px !important; font-family:var(--f-label) !important; font-weight:700 !important; }

/* ── мобильная версия ── */
@media (max-width: 760px) {
  .panel { padding:20px 16px 36px !important; }
  header .in { padding:24px 18px 22px !important; }
  .panel, details.sec, main > section { border-radius:14px !important; }
  table { max-width:100%; }
  .controls { gap:10px !important; }
  .controls > *, .controls label { max-width:100%; }
  select { max-width:100% !important; }
  .portrait img { border-radius:90px 90px var(--rl-r-thread) var(--rl-r-thread) !important; }
}
@media (pointer: coarse) {
  button, .btn, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { min-height:44px; }
}

/* ── «Рассвет» поверх книги: тени мягче, небо — бумага карты ── */
html[data-realm="dawn"] body { background-image:radial-gradient(ellipse 70% 40% at 50% -6%, rgba(var(--rl-gold-rgb),.08), transparent 70%) !important; }


/* ── виджеты сайта (dice.js, builder-random.js, полосы конструктора): их стили вписаны в скрипты — перекрываем ── */
html body .kl-dice-panel, html body .kl-card, html body .kl-attr, html body .kl-rnd .kl-bar, html body .kl-save {
  background-color:var(--rl-surface) !important; background-image:none !important; color:var(--rl-ink) !important;
  border:1px solid var(--rl-line-strong) !important; outline:0 !important; border-radius:var(--rl-r-card) !important;
  box-shadow:var(--rl-shadow-moon) !important;
}
html body .kl-rnd, html body .kl-rnd .kl-bar label, html body .kl-who, html body .kl-save, html body .kl-save span { color:var(--rl-ink) !important; }
html body .kl-rnd .kl-bar label, html body .kl-dice-panel .kl-3d, html body .kl-dice-panel ol, html body .kl-dice-panel .det, html body .kl-dice-panel .kl-dhint, html body .kl-card .sub, html body .kl-card .muted { color:var(--rl-muted) !important; }
html body .kl-rnd .kl-bar .kl-t, html body .kl-dice-panel h2, html body .kl-card h4, html body .kl-card h3, html body .kl-attr h2, html body .kl-card .name { color:var(--rl-gold) !important; }
html body .kl-rnd .kl-bar .kl-t::first-letter, html body .kl-card .name::first-letter { color:inherit !important; }
html body .kl-dice-panel h2, html body .kl-attr h2, html body .kl-card .card-head { border-bottom:1px dashed var(--rl-line-strong) !important; box-shadow:none !important; }
html body .kl-src, html body .kl-src a { color:var(--rl-gold) !important; }
html body .kl-rnd button, html body .kl-fab, html body .kl-dice-panel form button.d, html body .kl-save button:not(.light):not(.secondary) {
  background:var(--rl-fire) !important; color:var(--rl-on-fire) !important; border:1px solid var(--rl-gilt) !important;
  border-radius:var(--rl-r-pill) !important; box-shadow:inset 0 -3px 0 var(--rl-fire-deep) !important;
}
html body .kl-fab { width:52px !important; height:52px !important; line-height:48px !important; box-shadow:inset 0 -3px 0 var(--rl-fire-deep),0 0 0 3px var(--rl-ground),0 0 0 4px var(--rl-gilt) !important; }
html body .kl-rnd button#klCard, html body .kl-card .kl-x, html body .kl-dice-panel button.d, html body .kl-save button.light, html body .kl-save button.secondary {
  background:var(--rl-raised) !important; color:var(--rl-ink) !important; border:1px solid var(--rl-line-strong) !important;
  border-radius:var(--rl-r-pill) !important; box-shadow:none !important;
}
html body .kl-dice-panel button.d:hover, html body .kl-rnd button#klCard:hover { border-color:var(--rl-gold) !important; color:var(--rl-gold) !important; }
html body .kl-dice-panel .x { color:var(--rl-gold) !important; }
html body .kl-dice-panel input, html body .kl-rnd select { background:var(--rl-raised) !important; color:var(--rl-ink) !important; border:1px solid var(--rl-line-strong) !important; border-radius:var(--rl-r-thread) !important; }
html body .kl-dice-panel .res { color:var(--rl-gold) !important; font-family:var(--f-label) !important; font-weight:700 !important; }
html body .kl-dice-panel .res.crit { color:var(--rl-teal) !important; }
html body .kl-dice-panel .res.fail { color:var(--rl-rose) !important; }
html body .kl-dice-panel ol li { border-top-color:var(--rl-line) !important; }
html body .kl-dice-panel .die { fill:rgba(var(--rl-gold-rgb),.18) !important; stroke:var(--rl-gilt) !important; }
html body .kl-card .ab { background:var(--rl-raised) !important; border:1px solid var(--rl-line-strong) !important; border-radius:12px !important; }
html body .kl-card .ab-n { color:var(--rl-muted) !important; } html body .kl-card .ab-v { color:var(--rl-gold) !important; }
html body .kl-card .ab-m, html body .kl-card .hp { color:var(--rl-teal) !important; } html body .kl-card .hp b { color:var(--rl-gold) !important; }
html body .kl-card .grid section { border-top:1px dashed var(--rl-line-strong) !important; }
html body .kl-card p { color:var(--rl-ink) !important; }
html body .kl-hint { background:var(--rl-raised) !important; border:0 !important; border-radius:12px !important; box-shadow:0 0 0 1px var(--rl-line) !important; color:var(--rl-ink) !important; }
html body .kl-pic-cap { background:rgba(var(--rl-surface-rgb),.92) !important; color:var(--rl-ink) !important; border:1px solid var(--rl-line-strong) !important; border-radius:var(--rl-r-pill) !important; }
html body .kl-rnd input[type=checkbox], html body .kl-dice-panel .kl-3d input { accent-color:var(--rl-gilt) !important; }
html body .kl-save a.kl-back { background:var(--rl-raised) !important; color:var(--rl-ink) !important; border:1px solid var(--rl-line-strong) !important; border-radius:var(--rl-r-pill) !important; }
html body .kl-save a.kl-back:hover { border-color:var(--rl-gold) !important; color:var(--rl-gold) !important; }
html body .kl-st { color:var(--rl-muted) !important; } html body .kl-st.dirty, html body .kl-st a { color:var(--rl-gold) !important; }

/* благодарность автору конструктора (builder-random.js): имя и ссылки были чернилами под пергамент — на ночном небе их не видно */
html body .kl-attr b, html body .kl-attr strong { color:var(--rl-gold) !important; }
html body .kl-attr a { color:var(--rl-gold) !important; text-decoration-color:rgba(var(--rl-gold-rgb),.45) !important; }
html body .kl-attr .kl-note, html body .kl-note { color:var(--rl-muted) !important; }

/* ══ движение (23.10.2026): переход между страницами, появление листов, живые баннеры, мерцание звёзд ══
   Только transform и opacity, разметка не меняется. При «меньше движения» в системе — всё выключено (см. конец блока). */

/* 1. переход между страницами: страница плавно сменяется, шапка-баннер перетекает из раздела в раздел.
      Браузер без поддержки (Firefox) просто открывает страницу как раньше. */
@view-transition { navigation: auto; }
header .in, html[data-page="builder"] header { view-transition-name: kl-head; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
::view-transition-group(kl-head) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
::view-transition-old(kl-head), ::view-transition-new(kl-head) { animation-duration: .5s; height: 100%; object-fit: cover; }

/* 2. листы карты всплывают при прокрутке (классы ставит realm-theme.js только тем, что ниже первого экрана) */
.kl-rise { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--kl-d, 0s); }
.kl-rise.kl-in { opacity: 1; transform: none; }
/* …и приподнимаются при наведении, хребет загорается золотом */
@media (hover: hover) {
  main .card, main a.tool, main .gen, main .region, main .step, main .spot, main .role, main .race-card, main .cls-card, main .grid > figure {
    transition: transform .25s ease, box-shadow .25s ease, opacity .6s cubic-bezier(.2,.7,.2,1);
  }
  main .card:hover, main a.tool:hover, main .gen:hover, main .region:hover, main .step:hover, main .spot:hover, main .role:hover, main .race-card:hover, main .cls-card:hover, main .grid > figure:hover {
    transform: translateY(-2px); box-shadow: var(--rl-shadow-glow) !important;
  }
  .panel::before, main > section::before { transition: background-color .4s ease; }
  .panel:hover::before, main > section:hover::before { background-color: var(--rl-gilt) !important; }
}

/* 3. живые баннеры: картинка шапки медленно приближается и плывёт (копия фона в ::after, двигается только она) */
html[data-page] header .in { isolation: isolate; overflow: hidden; }
html[data-page] header .in::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: inherit; border-radius: inherit; transform-origin: 50% 45%;
  animation: kl-drift 42s ease-in-out infinite alternate;
}
@keyframes kl-drift { from { transform: scale(1.02) translate3d(-.8%, -.4%, 0); } to { transform: scale(1.09) translate3d(.8%, .5%, 0); } }

/* …и звёзды ночного неба мерцают: два редких слоя под страницей, вспыхивают попеременно (только в «Полночи») */
body { background-color: transparent !important; } /* небо — цвет у html; иначе слои звёзд скрыты под body */
html::before, html::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: repeat; opacity: .2;
}
html::before {
  background-image:
    radial-gradient(1.8px 1.8px at 18% 22%, rgba(247,240,228,.95) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 63% 47%, rgba(239,198,109,.9) 50%, transparent 52%),
    radial-gradient(2px 2px at 82% 13%, rgba(247,240,228,.85) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 39% 81%, rgba(247,240,228,.9) 50%, transparent 52%);
  background-size: 760px 760px, 690px 690px, 910px 910px, 820px 820px;
  animation: kl-twinkle 5.5s ease-in-out infinite alternate;
}
html::after {
  background-image:
    radial-gradient(1.6px 1.6px at 8% 64%, rgba(247,240,228,.9) 50%, transparent 52%),
    radial-gradient(2px 2px at 51% 9%, rgba(239,198,109,.85) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 74% 71%, rgba(247,240,228,.95) 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 29% 38%, rgba(247,240,228,.8) 50%, transparent 52%);
  background-size: 830px 830px, 970px 970px, 720px 720px, 880px 880px;
  animation: kl-twinkle 7.5s ease-in-out -3.2s infinite alternate;
}
@keyframes kl-twinkle { from { opacity: .12; } to { opacity: .95; } }
html[data-realm="dawn"]::before, html[data-realm="dawn"]::after { display: none; }

/* меньше движения: без переходов, без всплытия, баннер и звёзды стоят */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .kl-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  html[data-page] header .in::after, html::before, html::after { animation: none !important; }
  html::before, html::after { opacity: .6; }
  main .card, main a.tool, main .gen, main .region, main .step, main .spot, main .role, main .race-card, main .cls-card, main .grid > figure { transition: none !important; }
  main .card:hover, main a.tool:hover, main .gen:hover, main .region:hover, main .step:hover, main .spot:hover, main .role:hover, main .race-card:hover, main .cls-card:hover, main .grid > figure:hover { transform: none; }
}
@media print {
  .kl-rise { opacity: 1 !important; transform: none !important; }
  html::before, html::after, html[data-page] header .in::after { display: none !important; }
}

/* подсказки терминов (terms.js): свои цвета пергамента «Алой книги» — в цвета царства */
html body .kl-term { border-bottom-color: var(--rl-gold) !important; }
html body .kl-term:hover, html body .kl-term[aria-expanded=true] { background: rgba(var(--rl-gold-rgb),.18) !important; }
html body .kl-term:focus-visible { outline-color: var(--rl-gold) !important; }
html body .kl-tip {
  background: var(--rl-surface) !important; color: var(--rl-ink) !important; border: 1px solid var(--rl-line-strong) !important; border-radius: 14px !important;
  box-shadow: var(--rl-shadow-moon) !important;
}
html body .kl-tip b { color: var(--rl-gold) !important; }
html body .kl-tip a { color: var(--rl-gold) !important; }
html body .kl-tip button { color: var(--rl-muted) !important; }
html body .kl-tip .kl-tip-row { border-top: 1px dashed var(--rl-line-strong) !important; }
html body .kl-tip a:focus-visible, html body .kl-tip button:focus-visible { outline-color: var(--rl-gold) !important; }
html body .kl-terms-opt input { accent-color: var(--rl-gilt) !important; }

@media print {
  .panel::before, main > section::before { display:none !important; }
  body { background:#fff !important; background-image:none !important; color:#000 !important; }
  .kl-nav, .kl-drawer { display:none !important; }
}