/* «Тридесятое царство» — единая тема 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 поверх копии конструктора (/builder/). 23.09.2026, выбор Димы:
   «1 Алая книга, переводи весь сайт». Сам конструктор не меняем — только перекрываем его CSS.
   Подключается в <head> после <style> конструктора (build-builder.py), поэтому при равной специфичности
   выигрывает этот файл. Цвета — те же, что в theme-redbook.css: пергамент, чернила, киноварь, золото. */
@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&family=Monomakh&family=Ruslan+Display&display=swap");

:root {
  /* переменные самого конструктора — на нашу шкалу */
  --bg: var(--rl-ground);
  --card: var(--rl-surface);
  --ink: var(--rl-ink);
  --muted: var(--rl-muted);
  --line: var(--rl-line);
  --accent: var(--rl-gold);
  --accent2: var(--rl-raised);
  --ok: var(--rl-teal);
  --warn: var(--rl-gold);
  --bad: var(--rl-gold);
  --soft: var(--rl-raised);
  --brown: var(--rl-ink);
  --text: var(--rl-ink);
  /* наши */
  --kl-paper: var(--rl-surface);
  --kl-paper2: var(--rl-raised);
  --kl-tint: var(--rl-raised);
  --kl-line2: var(--rl-line-strong);
  --kl-btn: var(--rl-raised);
  --kl-btn-hover: var(--rl-raised-hover);
  --kl-gold: var(--rl-gilt);
  --kl-body: var(--rl-ink);
  --kl-red: var(--rl-gold);
  --f-text: "EB Garamond", Georgia, serif;
  --f-title: Monomakh, "EB Garamond", Georgia, serif;
  --f-label: "Cormorant Unicase", "EB Garamond", Georgia, serif;
  --f-mono: "EB Garamond", Georgia, serif;
  --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");
  color-scheme: dark;
}

html { background: none !important; min-height: 100%; } /* фон — на body, он протекает на весь холст */
body {
  background-color: var(--rl-ground) !important;
  background-image: radial-gradient(ellipse at 50% 30%, transparent 55%, rgba(var(--rl-shadow-rgb), 0.30) 100%), var(--blotch), var(--grain) !important;
  background-repeat: no-repeat, repeat, repeat !important;
  background-size: 100% 100%, auto, auto !important;
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 17px;
  font-variant-numeric: lining-nums;
}
h1, h2, h3, h4 { font-family: var(--f-title); font-weight: 400; letter-spacing: .01em; color: var(--ink); }
h1::first-letter, h2::first-letter { color: var(--rl-gold); }
h3 { color: var(--accent); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--rl-fire-deep); }
::selection { background: rgba(var(--rl-gold-rgb), .22); color: var(--rl-ink); }

/* ---------- шапка: лист с двойной киноварной рамкой ---------- */
header {
  background-color: var(--kl-paper) !important;
  background-image: linear-gradient(180deg, rgba(var(--rl-surface-rgb), .55), rgba(var(--rl-surface-rgb), 0) 40%), var(--grain) !important;
  color: var(--ink);
  border: 1px solid var(--rl-gold);
  outline: 3px double var(--rl-gold);
  outline-offset: -8px;
  border-radius: 2px;
  box-shadow: 0 14px 30px -12px rgba(var(--rl-shadow-rgb), 0.52);
}
header h1 { font-family: var(--f-title); }
header p { color: var(--kl-body); }
.notice { background: var(--kl-tint); border: 1px solid var(--line); border-radius: 0; color: var(--ink); }
.hero-copy a { color: var(--accent); }
.hero-logo { filter: none; mix-blend-mode: multiply; }

/* ---------- секции и карточки: листы рукописи ---------- */
section {
  background-color: var(--kl-paper);
  background-image: linear-gradient(180deg, rgba(var(--rl-surface-rgb), .55), rgba(var(--rl-surface-rgb), 0) 40%), var(--grain);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(var(--rl-shadow-rgb), 0.22), 0 14px 30px -12px rgba(var(--rl-shadow-rgb), 0.45);
}
.live-sheet { background: var(--kl-paper); border: 1px solid var(--rl-gold); }
.ability-result-item, .cardline, details, .live-ability, .live-stat, .live-panel, .spell-metric, .spell-group,
.resource-row, .lss-editor-row, .race-info-card, .class-info-card, .race-rule, .race-choice-help, .feat-help,
.subclass-description, .invocation-picker, .metamagic-picker, .metamagic-option, .equipment-ref-group,
.equipment-reference, .spell-card, .spell-level-group, .spell-source-group, .race-subtype, .race-choice-box,
.race-mechanics-note, .concept-note, .class-empty, .advanced-json, .project-support, .author-contact-link {
  background: rgba(var(--rl-surface-rgb), .55);
  border-color: var(--line);
  border-radius: 0;
  box-shadow: none;
}
.race-info-card, .class-info-card { background: var(--kl-paper); border: 1px solid var(--line); }
.race-rule, .spell-card, .metamagic-option, .live-ability, .live-stat, .spell-metric { background: var(--kl-paper2); border-color: var(--kl-line2); }
.race-choice-box .race-rule, .race-choice-box .field { background: transparent; }
.spell-card:hover { border-color: var(--rl-gold); }
.summary { background: var(--kl-tint); border: 1px solid var(--line); border-radius: 0; color: var(--kl-body); }
.summary strong { color: var(--ink); }
.race-mechanics-note, .race-choice-help .choice-mechanics, .subclass-description { color: var(--kl-body); }
.race-choice-help .choice-summary { background: var(--kl-paper2); color: var(--ink); }
.subclass-description strong, .race-choice-help strong, .feat-help > strong { color: var(--accent); }
.feat-help .mini, .concept-help, .hint, .small, .race-source, .spell-meta, .spell-count, .live-empty, .spell-group-description,
.background-brief, .equipment-buy-note, .detail-reference, .spell-level-meta { color: var(--muted); }
.race-description, .class-description { color: var(--kl-body); }
.race-feature-text, .class-feature-text { color: var(--kl-body); }
.concept-warning { background: var(--rl-warn-bg); border-left-color: var(--rl-gilt); color: var(--ink); border-radius: 0; }

/* списки рас/классов слева */
.race-list, .class-list { background: var(--kl-tint); border: 1px solid var(--line); border-radius: 0; }
.race-choice, .class-choice { color: var(--ink); border-radius: 0; font-weight: 500; font-family: var(--f-text); }
.race-choice:hover, .class-choice:hover { background: var(--kl-btn-hover); border-color: var(--kl-line2); }
.race-choice.active, .class-choice.active { background: var(--rl-fire); color: var(--rl-on-fire); border-color: var(--rl-fire-deep); }
.race-list-title { color: var(--accent); font-family: var(--f-label); font-weight: 700; letter-spacing: .08em; }

/* галереи (картинки подставляет builder-random.js — наши портреты и арт классов) */
.race-image-box, .class-image-box { background: var(--rl-raised-hover); border: 1px solid var(--kl-line2); border-radius: 0; box-shadow: 0 0 0 4px var(--kl-paper), 0 0 0 5px var(--rl-gold); }
.race-image-box { height: 300px; }
.class-image-box { height: 320px; }
.race-image-box img, .class-image-box img { border-radius: 0; mix-blend-mode: multiply; }
.race-image-fallback { color: var(--muted); }

/* плашки-факты */
.pill, .race-fact, .class-fact, .spell-flag, .invocation-group, .equipment-ref-item, .invocation-picker-count {
  background: var(--kl-paper2); border-color: var(--kl-line2); color: var(--ink); border-radius: 0;
}
.pill.fixed { background: var(--rl-ok-bg); border-color: var(--rl-teal); }
.pill.choice { background: var(--rl-warn-bg); border-color: var(--rl-gilt); }
.spell-slot-pill { background: var(--rl-ok-bg); border-color: var(--rl-teal); color: var(--ink); border-radius: 0; }

/* статусы */
.warning, .live-warn { background: var(--rl-warn-bg); border-left-color: var(--rl-gilt); color: var(--ink); border-radius: 0; }
.error { background: var(--rl-bad-bg); border-left-color: var(--rl-gold); color: var(--ink); border-radius: 0; }
.ok { background: var(--rl-ok-bg); border-left-color: var(--rl-teal); color: var(--ink); border-radius: 0; }
.spell-count.bad { color: var(--bad); }
.spell-count.okay { color: var(--ok); }
.json-save-state.unsaved { background: var(--rl-bad-bg); color: var(--rl-gold); border-color: var(--rl-fire); }
.json-save-state.saved { background: var(--rl-ok-bg); color: var(--rl-teal); border-color: var(--rl-teal); }
.spell-lss-note { background: var(--kl-tint); border-left-color: var(--rl-line-strong); color: var(--kl-body); }
.spell-empty { color: var(--muted); }

/* обязательные незаполненные — заметно, киноварью */
.required-missing-control { border-color: var(--rl-gold) !important; background: var(--rl-bad-bg) !important; box-shadow: 0 0 0 3px rgba(var(--rl-fire-rgb), .18); }
select.required-missing-control { background: var(--rl-bad-bg) !important; box-shadow: inset 0 0 0 1px var(--rl-gold), 0 0 0 3px rgba(var(--rl-fire-rgb), .18); }
select.required-missing-control option, select.required-missing-control optgroup { background: var(--rl-raised) !important; color: var(--ink) !important; }
.required-missing-field > label, .required-missing-field > div > label { color: var(--rl-gold); }
.required-missing-panel { border-color: var(--rl-gold) !important; background: var(--rl-bad-bg) !important; box-shadow: none; }
.required-warning { background: var(--rl-bad-bg); border-color: var(--rl-fire); border-left-color: var(--rl-gold); box-shadow: none; color: var(--ink); border-radius: 0; }
.required-warning-title { color: var(--rl-gold); }
.required-warning > div:not(.required-warning-head):not(.required-missing-list) { color: var(--kl-body); }
.required-warning-icon { box-shadow: none; background: var(--rl-fire); color: var(--rl-on-fire); }
.required-missing-link { background: var(--rl-raised); color: var(--rl-gold); border-color: var(--rl-fire); border-radius: 0; }
.required-missing-link:hover, .required-missing-link:focus { background: var(--rl-bad-bg); color: var(--rl-fire-deep); }
.invocation-picker-head.required-missing-control, .spell-group.required-missing-control { background: var(--rl-bad-bg); }
.ability-minimum-failed { border-color: var(--rl-gold) !important; background: var(--rl-bad-bg) !important; box-shadow: 0 0 0 3px rgba(var(--rl-fire-rgb), .18) !important; }
.ability-minimum-failed-label { color: var(--rl-gold) !important; }
.ability-min-note { color: var(--rl-gold); }
.class-ability-minimum.failed { background: var(--rl-bad-bg); border-color: var(--rl-fire); color: var(--rl-gold); }
.class-ability-minimum.okay { background: var(--rl-ok-bg); border-color: var(--rl-teal); color: var(--rl-teal); }

/* ---------- поля ---------- */
input, select, textarea {
  background: var(--rl-raised);
  border: 1px solid var(--kl-line2);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--f-text);
}
input::placeholder, textarea::placeholder { color: var(--rl-muted); }
select option, select optgroup { background: var(--rl-raised); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(var(--rl-gold-rgb), .35); outline-offset: 0; border-color: var(--rl-gold); }
select:disabled, input:disabled { background: var(--rl-raised); color: var(--rl-muted); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--rl-gold); }
#preview { background: var(--rl-raised); }

/* ---------- кнопки: главная — киноварь с золотой нитью ---------- */
button {
  background: var(--rl-fire);
  color: var(--rl-on-fire);
  border: 1px solid var(--rl-fire-deep);
  border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--rl-gold), inset 0 0 0 3px var(--rl-gilt);
  font-family: var(--f-label);
  font-weight: 700;
  letter-spacing: .05em;
}
button:where(:hover:not(:disabled)) { background: var(--rl-fire); border-color: var(--rl-fire-deep); }
button:focus-visible, a:focus-visible, .race-rule:focus-visible { outline: 2px solid var(--rl-gold); outline-offset: 2px; }
button.secondary, button.light { background: var(--kl-btn); color: var(--ink); border: 1px solid var(--kl-line2); box-shadow: none; font-family: var(--f-text); font-weight: 500; letter-spacing: 0; }
button.secondary:where(:hover:not(:disabled)), button.light:where(:hover:not(:disabled)) { background: var(--kl-btn-hover); border-color: var(--rl-gold); }
button.danger, .resource-remove, .lss-remove { background: var(--rl-raised); color: var(--rl-gold); border: 1px solid var(--rl-gold); box-shadow: none; }
button.danger:where(:hover:not(:disabled)), .resource-remove:where(:hover:not(:disabled)), .lss-remove:where(:hover:not(:disabled)) { background: var(--rl-bad-bg); border-color: var(--rl-gold); }
.race-choice, .class-choice { background: transparent; border: 1px solid transparent; box-shadow: none; letter-spacing: 0; }
.race-choice.active, .class-choice.active { background: var(--rl-fire); border-color: var(--rl-fire-deep); }
.class-feature-toggle, .class-feature-toggle:hover { background: transparent; border: 0; box-shadow: none; color: var(--accent); }
.spell-info-icon { background: var(--kl-btn-hover); color: var(--ink); border: 0; border-radius: 999px; box-shadow: none; }
.spell-info-icon:hover, .spell-info-icon:focus { background: var(--rl-fire); color: var(--rl-on-fire); }
.export-guide-close { background: var(--kl-btn); color: var(--ink); border: 1px solid var(--kl-line2); border-radius: 999px; box-shadow: none; }
.export-guide-close:hover { background: var(--kl-btn-hover); border-color: var(--rl-gold); }
.actions { background: var(--kl-paper); border: 1px solid var(--line); border-radius: 0; }

/* ---------- характеристики сверху (липкая полоса) ---------- */
.top-abilities { background: rgba(var(--rl-surface-rgb), .96); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 8px 18px -12px rgba(var(--rl-shadow-rgb), 0.75); }
.top-ability { background: var(--kl-paper2); border-color: var(--kl-line2); border-radius: 0; }
.top-ability-name, .live-ability-name, .live-stat-label, .spell-metric-label { color: var(--accent); font-family: var(--f-label); font-weight: 700; }
.top-ability-value, .live-ability-score, .live-stat-value, .spell-metric-value { color: var(--ink); font-family: var(--f-title); font-weight: 400; }
.top-ability-mod, .live-ability-mod { color: var(--ok); }
.live-sheet-name { color: var(--ink); font-family: var(--f-title); }
.live-sheet-sub { color: var(--muted); }

/* ---------- заклинания ---------- */
.spell-tooltip { background: var(--kl-paper); border: 1px solid var(--rl-gold); box-shadow: 0 14px 30px -12px rgba(var(--rl-shadow-rgb), 0.68); color: var(--ink); border-radius: 0; }
.spell-tooltip h4 { color: var(--ink); }
.spell-tooltip-body { border-top-color: var(--line); color: var(--kl-body); }
.spell-level-group > summary, .spell-source-group > summary { background: var(--kl-tint); color: var(--ink); border-radius: 0; }
.spell-source-group > summary { background: var(--rl-raised); }
.spell-source-choice { color: var(--muted); }

/* ---------- таблицы воззваний и метамагия ---------- */
.invocation-picker-head { background: var(--kl-tint); border-bottom-color: var(--line); }
.invocation-picker-title, .invocation-name, .metamagic-name { color: var(--ink); }
.invocation-picker-note { color: var(--muted); border-bottom-color: var(--line); }
.invocation-table th { background: var(--rl-raised); color: var(--accent); border-bottom-color: var(--line); font-family: var(--f-label); }
.invocation-table td { border-bottom-color: var(--line); }
.invocation-table tr.invocation-selected { background: var(--rl-warn-bg); }
.invocation-table tr.invocation-unavailable { background: transparent; }
.invocation-requirement { color: var(--rl-gold); }
.invocation-effect, .metamagic-effect { color: var(--kl-body); }
.metamagic-cost { color: var(--rl-gold); }
.metamagic-option.selected { background: var(--rl-warn-bg); border-color: var(--rl-gilt); }
.metamagic-option.disabled { background: transparent; }
.invocation-picker-count.okay, .invocation-picker-status.okay { background: var(--rl-ok-bg); border-color: var(--rl-teal); color: var(--rl-teal); }
.invocation-picker-count.bad { background: var(--rl-bad-bg); border-color: var(--rl-fire); color: var(--rl-gold); }
.invocation-picker-status { border-top-color: var(--line); }
.invocation-picker-status.warn { background: var(--rl-warn-bg); color: var(--rl-gold); }

/* ---------- ссылки-справки ---------- */
.class-reference-link, .detail-reference a, .inspiration-link, .export-guide-link, .equipment-reference-head a { color: var(--accent); }
.class-reference-link:hover, .detail-reference a:hover, .detail-reference a:focus { color: var(--rl-fire-deep); }

/* ---------- окно «Скачать лист» и подвал автора ---------- */
.export-guide-backdrop { background: rgba(var(--rl-shadow-rgb), 0.83); }
.export-guide-card { background: var(--kl-paper); border: 1px solid var(--rl-gold); border-radius: 0; box-shadow: 0 24px 60px -20px rgba(var(--rl-shadow-rgb), 0.85); color: var(--ink); }
.export-gif-slot { background: var(--rl-raised-hover); border-color: var(--line); border-radius: 0; }
.export-support { border-top-color: var(--line); }
.project-support { color: var(--kl-body); border: 1px solid var(--line); }
.project-support-copy strong { color: var(--ink); }
.project-support-link { background: var(--kl-btn); color: var(--ink); border: 1px solid var(--kl-line2); border-radius: 0; }
.project-support-link:hover, .project-support-link:focus { background: var(--kl-btn-hover); color: var(--rl-gold); outline: 2px solid var(--rl-gold); }
.author-contact-link { color: var(--accent); }
.site-footer-contact, .site-footer-free, .author-contact-email { color: var(--muted); }
.site-footer-contact a { color: var(--accent); }
.advanced-json > summary { color: var(--muted); }

@media (max-width: 850px) {
  /* два портрета (мужчина и женщина) — рядом, а не друг под другом на два экрана */
  .race-gallery:not(.single) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .race-image-box { height: 250px; padding: 4px; }
  .class-image-box { height: 300px; }
}

/* меню сайта (nav.js) тоже липкое, высотой ~47 px: полоса характеристик и списки рас/классов встают под ним, а не за ним */
.top-abilities { top: 50px; }
.race-list, .class-list { top: 140px; max-height: calc(100vh - 160px); }
@media (max-width: 700px) { .top-abilities { top: 48px; } }

/* автоматические ресурсы (Очки везения и т. п.), наведение на контакт автора, воззвания/метамагия без выбора */
.resource-auto { background: var(--rl-ok-bg); border-color: var(--rl-teal); border-radius: 0; color: var(--ink); }
.resource-auto .small { color: var(--rl-teal); }
.author-contact-link:hover, .author-contact-link:focus { background: var(--kl-btn-hover); color: var(--rl-gold); outline: 2px solid var(--rl-gold); }
.metamagic-picker .invocation-picker-head.required-missing-control { background: var(--rl-bad-bg); }

@media print {
  html, body { background: #fff !important; background-image: none !important; }
  header, section { background: #fff !important; background-image: none !important; box-shadow: none !important; outline: 0 !important; }
}

/* ═════ формы «Тридесятого царства» для конструктора ═════ */
:root { color-scheme:dark; }
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(ellipse 70% 40% at 50% -6%, rgba(var(--rl-gold-rgb),.10), transparent 70%) !important;
  background-size:420px 420px,520px 520px,610px 610px,100% 100% !important;
  background-repeat:repeat,repeat,repeat,no-repeat !important;
  color:var(--rl-ink);
}
h1::first-letter, h2::first-letter { color:inherit; }
h1, h2 { color:var(--rl-gold); }
html[data-page="builder"] header { background:linear-gradient(180deg,rgba(18,15,42,.55),rgba(18,15,42,.88)), url("/img/realm/razdely/konstruktor.jpg") 45% 55% / cover no-repeat !important; }
html[data-realm="dawn"][data-page="builder"] header { background:linear-gradient(180deg,rgba(251,246,238,.74),rgba(251,246,238,.92)), url("/img/realm/razdely/konstruktor.jpg") 45% 55% / cover no-repeat !important; }
header { background:rgba(var(--rl-surface-rgb),.6) !important; background-image:none !important; border:1px solid var(--rl-line) !important; outline:0 !important; border-radius:var(--rl-r-card) !important; box-shadow:var(--rl-shadow-moon) !important; }
.hero-logo { mix-blend-mode:normal !important; }
section, .live-sheet, .actions, .export-guide-card, .spell-tooltip {
  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;
}
.ability-result-item, .cardline, details, .live-ability, .live-stat, .live-panel, .spell-metric, .spell-group,
.resource-row, .lss-editor-row, .race-info-card, .class-info-card, .race-rule, .race-choice-help, .feat-help,
.subclass-description, .invocation-picker, .metamagic-picker, .metamagic-option, .equipment-ref-group,
.equipment-reference, .spell-card, .spell-level-group, .spell-source-group, .race-subtype, .race-choice-box,
.race-mechanics-note, .concept-note, .class-empty, .advanced-json, .project-support, .summary, .notice,
.race-list, .class-list, .top-ability, .pill, .race-fact, .class-fact, .spell-flag, .spell-slot-pill, .resource-auto { border-radius:12px !important; }
.top-abilities { border-radius:0 0 14px 14px !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.top-ability-value, .live-ability-score, .live-stat-value, .spell-metric-value { color:var(--rl-gold) !important; font-family:var(--f-label) !important; font-weight:700 !important; }
.top-ability-name, .live-ability-name, .live-stat-label, .spell-metric-label { color:var(--rl-muted) !important; }
.warning, .live-warn, .error, .ok, .concept-warning, .spell-lss-note, .required-warning { border-left:0 !important; border-radius:12px !important; box-shadow:0 0 0 1px var(--rl-line) !important; }
.race-image-box, .class-image-box {
  background:var(--rl-raised) !important; border:0 !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) !important; overflow:hidden;
}
.race-image-box img, .class-image-box img { mix-blend-mode:normal !important; }
input, select, textarea { background:var(--rl-raised) !important; color:var(--rl-ink) !important; border-color:var(--rl-line-strong) !important; border-radius:var(--rl-r-thread) !important; }
select option, select optgroup { background:var(--rl-surface) !important; color:var(--rl-ink) !important; }
input[type="checkbox"], input[type="radio"] { accent-color:var(--rl-gilt); }
button {
  background:var(--rl-fire); color:var(--rl-on-fire); border:1px solid var(--rl-gilt); border-radius:var(--rl-r-pill);
  box-shadow:inset 0 -3px 0 var(--rl-fire-deep); font-family:var(--f-label); letter-spacing:.08em;
}
button:where(:hover:not(:disabled)) { background:var(--rl-fire); box-shadow:inset 0 -3px 0 var(--rl-fire-deep),var(--rl-shadow-glow); }
button.secondary, button.light, .export-guide-close, .project-support-link, .required-missing-link {
  background:var(--rl-raised); color:var(--rl-ink); border:1px solid var(--rl-line-strong); border-radius:var(--rl-r-pill); box-shadow:none;
}
button.secondary:where(:hover:not(:disabled)), button.light:where(:hover:not(:disabled)) { background:var(--rl-raised-hover); border-color:var(--rl-gold); box-shadow:var(--rl-shadow-glow); }
button.danger, .resource-remove, .lss-remove { background:transparent; color:var(--rl-rose); border:1px solid var(--rl-rose); border-radius:var(--rl-r-pill); box-shadow:none; }
.race-choice, .class-choice { border-radius:10px !important; background:transparent; color:var(--rl-ink); box-shadow:none; }
.race-choice:hover, .class-choice:hover { background:var(--rl-raised) !important; }
.race-choice.active, .class-choice.active { background:var(--rl-fire) !important; color:var(--rl-on-fire) !important; border-color:var(--rl-gilt) !important; }
.class-feature-toggle, .class-feature-toggle:hover { background:transparent !important; border:0 !important; box-shadow:none !important; color:var(--rl-gold); }
.spell-info-icon { background:var(--rl-raised); color:var(--rl-ink); }
.spell-info-icon:hover, .spell-info-icon:focus { background:var(--rl-fire); color:var(--rl-on-fire); }
.export-guide-backdrop { background:rgba(var(--rl-shadow-rgb),.72) !important; }
.kl-cookie { background:var(--rl-surface) !important; color:var(--rl-ink) !important; border:1px solid var(--rl-line-strong) !important; border-radius:14px !important; }
.kl-cookie a { color:var(--rl-gold) !important; }
@media (max-width: 760px) { section { border-radius:14px !important; } }
@media print {
  html, body { background:#fff !important; background-image:none !important; color:#000 !important; }
  header, section { background:#fff !important; border-color:#999 !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; }


/* ── виджеты сайта (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; }