/* Дизайн v3 — единственный файл стилей вики: шкалы и цвета, базовые стили элементов,
   общие компоненты (wk-*), каркас и стили страниц по разделам. */
:root {
  /* Шрифт: 8 ступеней */
  --fs-xs: .8125rem;   /* 13 — счётчики и служебные пометки */
  --fs-sm: .875rem;    /* 14 — подписи, меню, заголовки таблиц */
  --fs-ui: .9375rem;   /* 15 — таблицы и элементы интерфейса */
  --fs-md: 1rem;       /* 16 — текст статьи, поля ввода */
  --fs-lg: 1.125rem;   /* 18 — вводный абзац */
  --fs-xl: 1.5rem;     /* 24 — ключевые числа */
  --fs-2xl: 1.875rem;  /* 30 — заголовок раздела */
  --fs-3xl: 2.5rem;    /* 40 — заголовок страницы */
  --lh-display: 1.1; --lh-ui: 1.4; --lh-prose: 1.6;

  /* Отступы: шаг 4px */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem;

  --r-sm: 4px;  /* иконки предметов, мелкие метки */
  --r-md: 6px;  /* поля, кнопки, всплывающие карточки */

  --bg: #0e1116; --panel: #161a21;
  --line: #272d37;          /* разделители */
  --line-strong: #5a6472;   /* границы полей: контраст с фоном 3:1 */
  --text: #e8eaed; --text-2: #c3c9d1; --quiet: #98a1ac;

  --positive: #3fb950;      /* «лучше» в сравнении — всегда вместе со знаком */
  --warn: #e3b341;          /* нет данных в дампах */
  --danger: #d1242f;        /* точки появления монстров на карте */
  --negative: #ff7b72;      /* «неудача» текстом в статье: --danger для текста слишком тёмный */
  --text-strong: #fff;      /* выделение в тексте статьи, подпись на точках карты */
  --on-accent: #1a1205;     /* текст на золотой кнопке */
  --sprite-bg: #07090c;     /* подложка иконки предмета */
  --code: #e685b5;          /* код вне статьи */

  /* Золото логотипа: только «вы здесь», фокус и главное действие */
  --accent: #fca73a; --accent-soft: rgba(252, 167, 58, .12);

  /* Шрифты подключает _app через next/font и кладёт в --font-body / --font-display */
  --body: var(--font-body, system-ui), system-ui, sans-serif;
  --display: var(--font-display, "Arial Narrow"), "Arial Narrow", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --header-h: 3.5rem; --side-w: 14.5rem; --content-w: 80rem;

  /* Грейды предметов — как в src/card/constants.ts */
  --g0: #c8d9ff; --g0b: #6d699a; --g1: #ffff80; --g2: #bd91ff; --g3: #fc9d07; --g4: #0099ff;
  --g5: #ffccff; --g6: #9af0fc; --g7: #66ff66; --g8: #66ff66; --g9: #ecd0a6; --g10: #ff3b0d;
}

/* ---------- Базовые стили элементов ----------
   Замена Bootstrap Reboot: те же отступы, размеры и поведение элементов по умолчанию,
   чтобы вёрстка не сдвинулась после удаления Bootstrap. Компоненты ниже на них опираются. */
*, ::before, ::after { box-sizing: border-box; }
/* Тёмные системные элементы: флажки, списки, полосы прокрутки */
:root { color-scheme: dark; }
@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } }
html, body, #__next { min-height: 100vh; background-color: var(--bg); color: var(--text); }
body { margin: 0; padding: 0; font-family: var(--body); font-size: 1rem; font-weight: 400; line-height: 1.5; font-variant-numeric: tabular-nums; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; }
h1 { font-size: calc(1.375rem + 1.5vw); } h2 { font-size: calc(1.325rem + .9vw); } h3 { font-size: calc(1.3rem + .6vw); } h4, legend { font-size: calc(1.275rem + .3vw); }
h5 { font-size: 1.25rem; } h6 { font-size: 1rem; }
@media (min-width: 1200px) { h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4, legend { font-size: 1.5rem; } }
p { margin-top: 0; margin-bottom: 1rem; }
hr { margin: 1rem 0; color: inherit; border: 0; border-top: 1px solid; opacity: .25; }
abbr[title] { text-decoration: underline dotted; cursor: help; text-decoration-skip-ink: none; }
address { margin-bottom: 1rem; font-style: normal; line-height: inherit; }
ol, ul { padding-left: 2rem; }
dl, ol, ul { margin-top: 0; margin-bottom: 1rem; }
ol ol, ol ul, ul ol, ul ul { margin-bottom: 0; }
dt { font-weight: 700; }
dd { margin-bottom: .5rem; margin-left: 0; }
blockquote, figure { margin: 0 0 1rem; }
b, strong { font-weight: bolder; }
small { font-size: .875em; color: var(--quiet); }
mark { padding: .1875em; color: var(--text); background-color: var(--accent-soft); }
sub, sup { position: relative; font-size: .75em; line-height: 0; vertical-align: baseline; }
sub { bottom: -.25em; } sup { top: -.5em; }

/* Ссылки без своего класса — как раньше: голубые с подчёркиванием */
a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:where(:hover) { text-decoration-color: currentColor; }   /* :where — чтобы наведение не перебивало стили ссылок с классом */
a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; }

code, kbd, pre, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; }
pre { display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; font-size: .875em; }
code { font-size: .875em; color: var(--code); word-wrap: break-word; }
pre code { font-size: inherit; color: inherit; word-break: normal; }
a > code { color: inherit; }
kbd { padding: .1875rem .375rem; font-size: .875em; color: var(--bg); background-color: var(--text-2); border-radius: .25rem; }
kbd kbd { padding: 0; font-size: 1em; }

img, svg { vertical-align: middle; }
table { caption-side: bottom; border-collapse: collapse; }
caption { padding-top: .5rem; padding-bottom: .5rem; color: var(--quiet); text-align: left; }
th { text-align: inherit; text-align: -webkit-match-parent; }
tbody, td, tfoot, th, thead, tr { border-color: inherit; border-style: solid; border-width: 0; }

label, output { display: inline-block; }
button { border-radius: 0; }
button:focus:not(:focus-visible) { outline: 0; }
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, select { text-transform: none; }
select { word-wrap: normal; }
select:disabled { opacity: 1; }
[role="button"] { cursor: pointer; }
[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator { display: none !important; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; }
::-moz-focus-inner { padding: 0; border-style: none; }
textarea { resize: vertical; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
legend { float: left; width: 100%; padding: 0; margin-bottom: .5rem; line-height: inherit; }
legend + * { clear: left; }
::-webkit-datetime-edit-fields-wrapper, ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-minute, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-year-field { padding: 0; }
::-webkit-inner-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-color-swatch-wrapper { padding: 0; }
::file-selector-button { font: inherit; -webkit-appearance: button; }
::placeholder { opacity: 1; }
iframe { border: 0; }
summary { display: list-item; cursor: pointer; }
progress { vertical-align: baseline; }
[hidden] { display: none !important; }
/* Фокус с клавиатуры — после сброса, чтобы перекрыть outline-offset у [type=search] */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Шапка ---------- */
.wk-top { display: flex; align-items: center; gap: var(--s5); height: var(--header-h); padding: 0 var(--s4); border-bottom: 1px solid var(--line); background: var(--panel); }
.wk-logo img { height: 1.875rem; display: block; }
.wk-links { display: flex; gap: var(--s5); font-size: var(--fs-sm); margin-right: auto; }
.wk-links a { padding: var(--s2) 0; color: var(--quiet); text-decoration: none; }
.wk-links a:hover { color: var(--text); }
.wk-links a[aria-current] { color: var(--text); box-shadow: 0 2px 0 var(--accent); }
.wk-lang { display: inline-flex; font-size: var(--fs-sm); border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; }
.wk-lang button { background: none; border: 0; padding: var(--s1) var(--s2); color: var(--quiet); cursor: pointer; font: inherit; }
.wk-lang button[aria-pressed="true"] { color: var(--text); background: rgba(255, 255, 255, .08); }
.wk-icon-btn { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; background: none; border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--text-2); cursor: pointer; flex-shrink: 0; }
.wk-icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.wk-icon-btn svg { width: 1.125rem; height: 1.125rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wk-only-mobile { display: none; }

/* ---------- Поиск в шапке ---------- */
.wk-top { position: relative; }
/* На узком десктопе сжимается поле, а не ссылки и переключатель языка */
.wk-links, .wk-top .wk-lang { flex-shrink: 0; white-space: nowrap; }
.wk-search { flex: 0 1 min(20rem, 30vw); min-width: 0; }
.wk-search-box { position: relative; }
.wk-search-panel { position: absolute; top: calc(100% + var(--s2)); right: 0; z-index: 1040; width: 100%; min-width: 24rem; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; padding: var(--s2) 0; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.wk-search-head { padding: var(--s2) var(--s3) var(--s1); font-size: var(--fs-xs); color: var(--quiet); }
.wk-search-row { display: flex; align-items: center; gap: var(--s3); min-height: 2.5rem; padding: var(--s1) var(--s3); color: var(--text); font-size: var(--fs-ui); line-height: var(--lh-ui); text-decoration: none; }
.wk-search-row[aria-selected="true"] { background: rgba(255, 255, 255, .06); }
.wk-search-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-search-meta { margin-left: auto; flex-shrink: 0; font-size: var(--fs-xs); color: var(--quiet); white-space: nowrap; }
.wk-search-note { padding: var(--s2) var(--s3); font-size: var(--fs-sm); color: var(--quiet); }

/* ---------- Каркас ---------- */
.wiki-shell-sidebar { flex: 0 0 var(--side-w); width: var(--side-w); padding: var(--s4) 0; background-color: var(--panel); border-right: 1px solid var(--line); }

/* ---------- Меню: текст без иконок, подкатегории раскрываются ---------- */
.wk-side { font-size: var(--fs-sm); }
.wk-side h2 { font: 400 var(--fs-xs)/var(--lh-ui) var(--body); color: var(--quiet); margin: var(--s5) var(--s4) var(--s1); }
.wk-side section:first-child h2 { margin-top: 0; }
.wk-side a, .wk-side-group { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: var(--s2) var(--s4); color: var(--text-2); text-decoration: none; text-align: left; background: none; border: 0; border-left: 2px solid transparent; font: inherit; cursor: pointer; }
.wk-side a:hover, .wk-side-group:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.wk-side a[aria-current] { color: var(--text); font-weight: 600; border-left-color: var(--accent); background: var(--accent-soft); }
.wk-side-group::after { content: "+"; color: var(--quiet); }
.wk-side-group[aria-expanded="true"]::after { content: "−"; }
.wk-side-children a { padding-left: var(--s6); }
.wk-side-extra { margin-top: var(--s5); padding: var(--s4) var(--s4) 0; border-top: 1px solid var(--line); }

/* Выезжающее меню на телефоне */
.wiki-sidebar-offcanvas { background: var(--panel); border-right: 1px solid var(--line); padding: var(--s3) 0; }
.wk-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 0 var(--s4) var(--s3); }

@media (max-width: 991.98px) {
  .wk-top { gap: var(--s3); padding: 0 var(--s3); }
  .wk-links, .wk-top .wk-lang, .wk-only-desktop { display: none; }
  .wk-only-mobile { display: inline-flex; }
  .wk-logo { margin-right: auto; }
  .wk-icon-btn { width: 2.75rem; height: 2.75rem; }
  /* Поиск: в шапке только лупа, развёрнутое поле закрывает шапку целиком */
  .wk-search { flex: 0 0 auto; }
  .wk-search-box { display: none; }
  .wk-search.is-expanded .wk-search-box { display: flex; align-items: center; gap: var(--s2); position: absolute; inset: 0; z-index: 1040; width: auto; padding: 0 var(--s3); background: var(--panel); }
  .wk-search-panel { top: 100%; left: 0; min-width: 0; max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); border-width: 1px 0; border-radius: 0; }
  .wk-search-row { min-height: 2.75rem; font-size: var(--fs-md); }
  .wk-side { font-size: var(--fs-md); }
  .wk-side a, .wk-side-group { padding-top: var(--s3); padding-bottom: var(--s3); }   /* цель нажатия 44px */
  .wk-drawer-head .wk-lang { font-size: var(--fs-md); }
  .wk-drawer-head .wk-lang button { min-height: 2.75rem; padding: 0 var(--s4); }
}

/* =====================================================================
   Компоненты страниц (префикс wk-). Образец — public/mockups/wiki-v3.css
   ===================================================================== */
.wk-main { padding: var(--s6) var(--s6) var(--s8); min-width: 0; }
.wk-content { max-width: var(--content-w); }

/* Заголовки */
.wk-h1 { font: 700 var(--fs-3xl)/var(--lh-display) var(--display); letter-spacing: .01em; margin: 0; text-transform: uppercase; text-wrap: balance; color: var(--text); }
.wk-h1 small { font: 400 var(--fs-ui) var(--body); color: var(--quiet); text-transform: none; letter-spacing: 0; margin-left: var(--s2); white-space: nowrap; }
.wk-lede { color: var(--quiet); margin: var(--s2) 0 0; max-width: 42rem; }
.wk-sec { font: 700 var(--fs-2xl)/var(--lh-display) var(--display); letter-spacing: .01em; text-transform: uppercase; margin: var(--s7) 0 var(--s3); color: var(--text); }
.wk-sec small { font: 400 var(--fs-ui) var(--body); color: var(--quiet); text-transform: none; letter-spacing: 0; margin-left: var(--s2); white-space: nowrap; }
.wk-sub { font: 600 var(--fs-lg)/var(--lh-ui) var(--body); margin: 0 0 var(--s3); color: var(--text); }
.wk-head-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s3); }
.wk-back { display: inline-block; font-size: var(--fs-sm); color: var(--quiet); padding: var(--s1) 0; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }
.wk-back:hover { color: var(--text); }
.wk-note { color: var(--quiet); font-size: var(--fs-sm); margin: var(--s2) 0 0; }
.wk-note a, .wk-link { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.wk-note a:hover, .wk-link:hover { text-decoration-color: currentColor; color: var(--text); }
.wk-tag { display: inline-block; font: 500 var(--fs-xs)/1 var(--body); color: var(--text-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--s1) var(--s2); vertical-align: middle; white-space: nowrap; }
.wk-empty { color: var(--quiet); padding: var(--s6) 0; text-align: center; }
.wk-error { color: var(--text-2); padding: var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
/* Состояния страницы (PageState): загрузка, «не найдено», ошибка с повтором */
.wk-state { padding: var(--s5) 0; color: var(--text-2); }
.wk-state--loading { color: var(--quiet); }
.wk-state p { margin: 0 0 var(--s3); }
.wk-state .wk-h1 { margin-bottom: var(--s3); }
/* Верх детальной страницы: ссылка «к списку» и действия; одна высота на всех страницах */
.wk-detail-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s2) var(--s4); flex-wrap: wrap; min-height: 2.5rem; margin-bottom: var(--s4); }
.wk-detail-top + .wk-state { padding-top: 0; }

/* Кнопки и поля */
.wk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 2.5rem; padding: 0 var(--s4); background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--r-md); font: 600 var(--fs-sm) var(--body); text-decoration: none; cursor: pointer; }
.wk-btn:hover { filter: brightness(1.08); color: var(--on-accent); }
.wk-btn-2 { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 2.5rem; padding: 0 var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-md); font: 500 var(--fs-sm) var(--body); color: var(--text); background: none; text-decoration: none; cursor: pointer; }
.wk-btn-2:hover { background: rgba(255,255,255,.06); color: var(--text); }
.wk-btn-2[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.wk-btn:disabled, .wk-btn-2:disabled { opacity: .5; cursor: default; }
/* Кнопка только для одной ширины экрана (display кнопки перебивает общий .wk-only-*) */
.wk-btn-2.wk-only-mobile { display: none; }
@media (max-width: 991.98px) { .wk-btn-2.wk-only-mobile { display: inline-flex; } .wk-btn-2.wk-only-desktop { display: none; } }
.wk-field:where(input, select) { height: 2.5rem; }
.wk-field { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: var(--s2) var(--s3); min-height: 2.25rem; font: inherit; font-size: var(--fs-ui); }
.wk-field::placeholder { color: var(--quiet); }
.wk-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; }
.wk-seg button { background: none; border: 0; border-left: 1px solid var(--line-strong); padding: 0 var(--s4); min-height: 2.5rem; cursor: pointer; color: var(--text-2); font: inherit; }
.wk-seg button:first-child { border-left: 0; }
.wk-seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); font-weight: 600; }
.wk-check { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-2); font-size: var(--fs-sm); }
.wk-check input { width: 1.125rem; height: 1.125rem; accent-color: var(--accent); }

/* Фильтры: одна строка */
.wk-filters { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: var(--s4) 0 var(--s3); }
.wk-filters .wk-field { width: auto; }
.wk-filters .wk-grow { flex: 1 1 14rem; }
.wk-filters .wk-lvl { width: 4rem; text-align: center; }
.wk-filters fieldset, .wk-filters label { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-2); font-size: var(--fs-sm); border: 0; padding: 0; margin: 0; }
.wk-count { margin-left: auto; color: var(--quiet); font-size: var(--fs-sm); white-space: nowrap; }

/* Таблица-список */
.wk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.wk-table thead th { font: 500 var(--fs-sm) var(--body); color: var(--quiet); text-align: left; padding: 0 var(--s3); height: 2.25rem; background: var(--panel); border-bottom: 1px solid var(--line); white-space: nowrap; }
.wk-table th button { background: none; border: 0; padding: var(--s2) 0; cursor: pointer; color: inherit; font: inherit; }
.wk-table th button:hover, .wk-table th[aria-sort] button { color: var(--text); }
.wk-table .wk-num { text-align: right; white-space: nowrap; }
.wk-table tbody tr { border-bottom: 1px solid var(--line); position: relative; }
.wk-table tbody tr:hover { background: rgba(255,255,255,.04); }
.wk-table td { padding: var(--s1) var(--s3); height: 2.75rem; vertical-align: middle; color: var(--text); }
.wk-table td.wk-lv { width: 3rem; color: var(--quiet); }
.wk-table td.wk-name { font-weight: 500; }
.wk-table td.wk-name > a { display: inline-flex; align-items: center; gap: var(--s3); color: inherit; text-decoration: none; vertical-align: middle; }
.wk-table td.wk-name > a::after { content: ""; position: absolute; inset: 0; }   /* вся строка — ссылка */
.wk-table td.wk-name > a:focus-visible { outline-offset: -2px; }
.wk-table td.wk-dim { color: var(--quiet); }
/* Код остаётся над растянутой ссылкой строки — его можно выделить и скопировать */
.wk-table td.wk-code { color: var(--quiet); font: var(--fs-xs) var(--mono); width: 5rem; position: relative; z-index: 1; }
.wk-thumb { width: 2rem; height: 2rem; object-fit: contain; flex-shrink: 0; }

/* Листалка */
.wk-pager { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; margin: var(--s4) 0; color: var(--quiet); font-size: var(--fs-sm); }
.wk-pager nav { display: flex; gap: var(--s1); margin-left: auto; }
.wk-pager button { min-width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-md); padding: 0 var(--s2); color: var(--text-2); background: none; cursor: pointer; font: inherit; }
.wk-pager button:hover:not(:disabled) { background: rgba(255,255,255,.06); }
.wk-pager button:disabled { opacity: .4; cursor: default; }
.wk-pager button[aria-current] { color: var(--text); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); font-weight: 600; }
.wk-pager span.wk-gap { min-width: 1.5rem; text-align: center; align-self: center; }

/* Детальная страница */
.wk-detail { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--s7); align-items: start; }
.wk-detail-side { position: sticky; top: var(--s4); }
.wk-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--s4) var(--s5); margin: var(--s5) 0 0; }
.wk-stats dt { color: var(--quiet); font-size: var(--fs-sm); font-weight: 400; }
.wk-stats dd { margin: 0; font: 600 var(--fs-xl)/1.2 var(--body); color: var(--text); }
.wk-kv { margin: 0; }
.wk-kv > div { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.wk-kv dt { color: var(--quiet); font-weight: 400; }
.wk-kv dd { margin: 0; font-weight: 500; text-align: right; color: var(--text); }
.wk-kv .wk-no { color: var(--quiet); font-weight: 400; }
.wk-list { margin: 0; padding: 0; list-style: none; }
.wk-list > li { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.wk-panel { background: var(--panel); border-radius: var(--r-md); padding: var(--s3) var(--s4); }
.wk-fold { border-bottom: 1px solid var(--line); }
.wk-fold > summary { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s3) 0; cursor: pointer; list-style: none; }
.wk-fold > summary::-webkit-details-marker { display: none; }
.wk-fold > summary b { font: 600 var(--fs-xl)/1.2 var(--body); min-width: 6.5rem; }
.wk-fold > summary span { color: var(--quiet); font-size: var(--fs-sm); }
.wk-fold > summary::after { content: attr(data-open-label); margin-left: auto; color: var(--quiet); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; }
.wk-fold[open] > summary::after { content: attr(data-close-label); }
.wk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 var(--s5); }

/* Иконка предмета: только 24, 32, 64 и 128px */
/* Размеры иконок — в px, а не в rem: лист спрайтов нарезан по 64px и с масштабом страницы не растёт */
.wk-spr { display: inline-block; width: 32px; height: 32px; overflow: hidden; flex-shrink: 0; border-radius: var(--r-sm); background: var(--sprite-bg); outline: 1px solid var(--line-strong); vertical-align: middle; }
.wk-spr > i { display: block; width: 64px; height: 64px; transform: scale(.5); transform-origin: 0 0; image-rendering: pixelated; background-repeat: no-repeat; }
.wk-spr > img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.wk-spr--sm { width: 24px; height: 24px; } .wk-spr--sm > i { transform: scale(.375); image-rendering: auto; }
.wk-spr--lg { width: 64px; height: 64px; } .wk-spr--lg > i { transform: none; }
.wk-spr--xl { width: 128px; height: 128px; border-radius: var(--r-md); outline-width: 2px; } .wk-spr--xl > i { transform: scale(2); }
/* Ссылка на предмет: рамка иконки и имя — цветом грейда */
.wk-ref { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; min-width: 0; line-height: 1.3; color: var(--text); text-decoration: none; }
.wk-ref:hover .wk-ref-name { text-decoration: underline; text-underline-offset: 3px; }
.wk-g0 .wk-ref-name, .wk-g0.wk-ref-name { color: var(--g0); } .wk-g0 .wk-spr, .wk-spr.wk-g0 { outline-color: var(--g0b); }
.wk-g1 .wk-ref-name, .wk-g1.wk-ref-name { color: var(--g1); } .wk-g1 .wk-spr, .wk-spr.wk-g1 { outline-color: var(--g1); }
.wk-g2 .wk-ref-name, .wk-g2.wk-ref-name { color: var(--g2); } .wk-g2 .wk-spr, .wk-spr.wk-g2 { outline-color: var(--g2); }
.wk-g3 .wk-ref-name, .wk-g3.wk-ref-name { color: var(--g3); } .wk-g3 .wk-spr, .wk-spr.wk-g3 { outline-color: var(--g3); }
.wk-g4 .wk-ref-name, .wk-g4.wk-ref-name { color: var(--g4); } .wk-g4 .wk-spr, .wk-spr.wk-g4 { outline-color: var(--g4); }
.wk-g5 .wk-ref-name, .wk-g5.wk-ref-name { color: var(--g5); } .wk-g5 .wk-spr, .wk-spr.wk-g5 { outline-color: var(--g5); }
.wk-g6 .wk-ref-name, .wk-g6.wk-ref-name { color: var(--g6); } .wk-g6 .wk-spr, .wk-spr.wk-g6 { outline-color: var(--g6); }
.wk-g7 .wk-ref-name, .wk-g7.wk-ref-name { color: var(--g7); } .wk-g7 .wk-spr, .wk-spr.wk-g7 { outline-color: var(--g7); }
.wk-g8 .wk-ref-name, .wk-g8.wk-ref-name { color: var(--g8); } .wk-g8 .wk-spr, .wk-spr.wk-g8 { outline-color: var(--g8); }
.wk-g9 .wk-ref-name, .wk-g9.wk-ref-name { color: var(--g9); } .wk-g9 .wk-spr, .wk-spr.wk-g9 { outline-color: var(--g9); }
.wk-g10 .wk-ref-name, .wk-g10.wk-ref-name { color: var(--g10); } .wk-g10 .wk-spr, .wk-spr.wk-g10 { outline-color: var(--g10); }

@media (max-width: 991.98px) {
  .wk-main { padding: var(--s4) var(--s4) var(--s7); }
  .wk-h1 { font-size: var(--fs-2xl); }
  .wk-sec { font-size: var(--fs-xl); margin-top: var(--s6); }
  .wk-field { font-size: 1rem; min-height: 2.75rem; }   /* 16px: айфон не приближает страницу при вводе */
  .wk-btn, .wk-btn-2, .wk-seg button { min-height: 2.75rem; }
  .wk-back { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .wk-detail-top { min-height: 2.75rem; }
  /* Отдельно стоящая текстовая ссылка: цель нажатия 44px */
  .wk-tap { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .wk-filters .wk-grow { flex-basis: 100%; }
  .wk-table thead { display: none; }
  .wk-table tbody tr { display: flex; flex-wrap: wrap; gap: 0 var(--s4); padding: var(--s2) 0; }
  .wk-table td { height: auto; padding: 0; }
  .wk-table td.wk-name { order: -1; flex: 0 0 100%; min-height: 2.25rem; display: flex; align-items: center; }
  .wk-table td[data-l] { font-size: var(--fs-sm); color: var(--text-2); width: auto; }
  .wk-table td[data-l]::before { content: attr(data-l) " "; color: var(--quiet); }
  .wk-table td.wk-code { display: none; }
  .wk-pager nav { flex-wrap: wrap; margin-left: 0; }
  .wk-pager button { min-width: 2.75rem; height: 2.75rem; }
  .wk-fold > summary { flex-wrap: wrap; }
  .wk-fold > summary b { min-width: 0; }
  .wk-detail { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .wk-detail-side { position: static; }
  .wk-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Монстры
   ===================================================================== */
/* ---------- Список ---------- */
.mon-list { transition: opacity .3s ease-in-out; }
.mon-list[data-loading] { opacity: 0; }
.wk-filters .mon-map-select { width: 16rem; }   /* ширина не зависит от загруженных названий карт */
.mon-name { overflow-wrap: anywhere; }
.mon-list .wk-table td.wk-name > a { vertical-align: middle; }
.wk-table td.wk-name > .wk-tag { margin-left: var(--s2); }
span.wk-thumb { display: inline-block; }

/* ---------- Страница монстра ---------- */
.mon-page .wk-h1 { overflow-wrap: anywhere; }
.mon-h1-tag { margin-left: var(--s3); text-transform: none; letter-spacing: 0; }

/* MonsterRender задаёт размер инлайном (его использует и страница задания) — здесь он тянется по колонке */
.mon-portrait .monster-render { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1; }

.mon-skills { max-width: 32rem; }

/* Карты: точки появления */
.mon-maps { display: flex; flex-wrap: wrap; gap: var(--s5); }
/* Картинки карт — 399px: показываем в родном размере, без дробного уменьшения (иначе мылятся) */
.mon-map { margin: 0; width: 399px; max-width: 100%; }
.mon-map-box { position: relative; background: var(--panel); border-radius: var(--r-sm); }
.mon-map-box > img { display: block; width: 100%; height: 100%; border-radius: var(--r-sm); opacity: 0; transition: opacity .3s; }
.mon-map-box > img[data-loaded] { opacity: 1; }
.mon-map figcaption { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--text-2); }
.mon-map-pt { position: absolute; transform: translate(-50%, -50%); z-index: 1; padding: var(--s1); cursor: default; }
.mon-map-pt:hover { z-index: 2; }
.mon-map-pt > i { display: block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--text-strong); box-shadow: 0 0 0 2px var(--danger); }
.mon-map-pt.is-group > i { width: auto; min-width: 1.375rem; height: 1.375rem; padding: 0 var(--s1); background: var(--danger); box-shadow: 0 0 0 2px var(--text-strong); color: var(--text-strong); font: 600 var(--fs-xs)/1.375rem var(--body); text-align: center; }
.mon-map-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); min-width: 9rem; padding: var(--s2) var(--s3); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: 0 4px 16px rgba(0, 0, 0, .5); font-size: var(--fs-xs); color: var(--text); white-space: nowrap; pointer-events: none; }
.mon-map-tip.is-below { bottom: auto; top: 100%; }
.mon-map-tip.is-left { left: 0; transform: none; }
.mon-map-tip.is-right { left: auto; right: 0; transform: none; }
.mon-map-tip b { display: block; font-weight: 600; white-space: normal; }
.mon-map-tip span { color: var(--quiet); margin-left: var(--s2); }

/* Добыча */
.mon-loot { padding-bottom: var(--s4); }
.mon-loot > a { display: block; min-width: 0; color: inherit; text-decoration: none; }

@media (max-width: 991.98px) {
  .wk-filters .mon-map-select { width: auto; min-width: 0; max-width: 100%; flex: 1 1 10rem; }
  .wk-filters .wk-check { min-height: 2.75rem; }
  /* Общая листалка на 390px шире экрана («Дальше» обрезается) — разрешаем перенос */
  .mon-list .wk-pager nav { flex-wrap: wrap; margin-left: 0; }
  .mon-portrait { max-width: 12rem; }
  .wk-fold > summary { min-height: 2.75rem; align-items: center; }
}

/* =====================================================================
   Карты (explorer, /wiki/maps)
   ===================================================================== */
.mx { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s5); align-items: start; margin-top: var(--s4); }
.mx-stage { min-width: 0; }
.mx-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.mx-hint { margin: 0; font-size: var(--fs-sm); color: var(--quiet); }
.mx-zoom { display: inline-flex; }
.mx-zoom .wk-btn-2 { min-width: 2.5rem; padding: 0 var(--s2); border-radius: 0; }
.mx-zoom .wk-btn-2:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.mx-zoom .wk-btn-2:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.mx-zoom .wk-btn-2 + .wk-btn-2 { border-left: 0; }
.mx-viewport { position: relative; overflow: hidden; width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); cursor: grab; touch-action: none; user-select: none; }
.mx-viewport.is-zoomed { cursor: move; }
.mx-viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mx-canvas { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.mx-canvas > img { display: block; width: 100%; height: 100%; pointer-events: none; }
.mx-marker { position: absolute; z-index: 1; padding: var(--s1); background: none; border: 0; cursor: pointer; }
.mx-marker:hover, .mx-marker.is-selected { z-index: 2; }
.mx-marker > i { display: block; width: .625rem; height: .625rem; border-radius: 50%; background: var(--text-strong); box-shadow: 0 0 0 2px var(--danger); }
.mx-marker.is-group > i { width: auto; min-width: 1.5rem; height: 1.5rem; padding: 0 var(--s1); background: var(--danger); box-shadow: 0 0 0 2px var(--text-strong); color: var(--text-strong); font: 600 var(--fs-xs)/1.5rem var(--body); text-align: center; }
.mx-marker.is-selected > i { background: var(--accent); box-shadow: 0 0 0 3px var(--text-strong); color: var(--bg); }
.mx-marker:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-radius: var(--r-sm); }
.mx-side { display: flex; flex-direction: column; gap: var(--s4); position: sticky; top: var(--s4); }
.mx-panel { padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.mx-panel-title { margin: 0 0 var(--s3); font: 600 var(--fs-ui)/var(--lh-ui) var(--body); color: var(--text); }
.mx-panel-title small { font-weight: 400; color: var(--quiet); margin-left: var(--s2); }
.mx-list, .mx-legend { list-style: none; margin: 0; padding: 0; }
.mx-list li + li, .mx-legend li + li { border-top: 1px solid var(--line); }
.mx-list a, .mx-legend button { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: var(--s2) 0; color: var(--text); text-decoration: none; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; }
.mx-list a:hover b, .mx-legend button:hover b { text-decoration: underline; text-underline-offset: 3px; }
.mx-list b, .mx-legend b { font-weight: 600; overflow-wrap: anywhere; }
.mx-list span, .mx-legend span { font-size: var(--fs-sm); color: var(--quiet); }
.mx-legend button[aria-pressed="true"] { color: var(--accent); }
.mx-legend { max-height: 28rem; overflow-y: auto; overscroll-behavior: contain; }
.mx-clear { width: 100%; margin-bottom: var(--s3); }
.mx-count { font: 600 var(--fs-ui) var(--body); color: var(--text); white-space: nowrap; }
.mx-count small { font-weight: 400; color: var(--quiet); margin-left: var(--s1); }

@media (max-width: 991.98px) {
  .mx { grid-template-columns: minmax(0, 1fr); }
  .mx-side { position: static; }
  .mx-toolbar .mx-hint { display: none; }
  .mx-zoom .wk-btn-2 { min-height: 2.75rem; min-width: 2.75rem; }
  .mx-legend { max-height: 20rem; }
}

/* =====================================================================
   Предметы
   ===================================================================== */
/* Пока грузится новая страница списка или другой предмет — прежнее содержимое приглушено */
.wk-items-loading { opacity: .5; transition: opacity .2s; }

/* Иконка из base64 (у части предметов нет спрайт-листа) */
.wk-spr > img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

/* Строка предмета (LootItemCard): длинные «грязные» названия переносятся */
.wk-loot { cursor: pointer; }
.wk-loot .wk-ref-name { min-width: 0; overflow-wrap: anywhere; }
a:hover > .wk-loot .wk-ref-name { text-decoration: underline; text-underline-offset: 3px; }
/* В таблице отступы даёт ячейка */
.wk-table td.wk-name .wk-loot { padding: 0; }

/* ---------- Страница предмета ---------- */
.wk-item-name { font: 600 var(--fs-xl)/1.25 var(--body); margin: var(--s4) 0 var(--s2); text-wrap: balance; overflow-wrap: anywhere; }
.wk-item-desc { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-prose); margin: var(--s4) 0 0; overflow-wrap: anywhere; }
.wk-item-flags { margin-top: var(--s4); }
.wk-item-stats { margin-top: 0; }
.wk-item-stats dd { white-space: nowrap; }
.wk-item-stats + .wk-item-attrs { margin-top: var(--s5); }
.wk-item-page .wk-kv dd { overflow-wrap: anywhere; }
.wk-item-dungeon { margin: 0; }
.wk-item-dungeon span { color: var(--quiet); margin-left: var(--s2); }

/* Гнёзда */
.wk-sockets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.wk-sockets li { border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: var(--s3); overflow-wrap: anywhere; }
.wk-sockets b { display: block; color: var(--quiet); font-weight: 400; font-size: var(--fs-sm); }

/* Сет: слоты и ступени бонуса */
.wk-set + .wk-set { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.wk-set .wk-sub { margin-top: var(--s5); }
.wk-set .wk-sub small { font-weight: 400; font-size: var(--fs-sm); color: var(--quiet); margin-left: var(--s2); }
.wk-set-slots { margin: 0; }
.wk-set-slots > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0 var(--s4); padding: var(--s1) 0; border-bottom: 1px solid var(--line); }
.wk-set-slots dt { color: var(--quiet); font-weight: 400; font-size: var(--fs-sm); padding-top: var(--s3); }
.wk-set-slots dd { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 var(--s4); }
.wk-set-slots a { display: block; min-width: 0; text-decoration: none; color: inherit; border-left: 2px solid transparent; padding-left: var(--s2); }
.wk-set-slots a[aria-current] { border-left-color: var(--accent); background: var(--accent-soft); }

@media (max-width: 991.98px) {
  /* Списки-фильтры встают по два в ряд, а не лесенкой */
  .wk-items-filters select.wk-field { flex: 1 1 9rem; min-width: 0; }
  .wk-sockets { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
  .wk-set-slots > div { grid-template-columns: minmax(0, 1fr); }
  .wk-set-slots dt { padding-top: var(--s2); }
  .wk-set-slots dd { grid-template-columns: minmax(0, 1fr); }
  .wk-set-slots .wk-loot { min-height: 2.75rem; }
  .wk-item-compare { margin-top: var(--s4); }
  .wk-detail-side { margin-bottom: var(--s4); }
}

/* =====================================================================
   Камни и руда
   ===================================================================== */
/* Кривые названия из игры («Красный Камень [Т1») переносятся, а не обрезаются */
.so-wrap { overflow-wrap: anywhere; min-width: 0; }

/* ---------- Список камней: одна таблица, типы — группами ---------- */
.so-gems { font-size: var(--fs-ui); }
.so-gems td.wk-name { width: 22rem; }
.wk-filters .so-type { flex: 0 1 16rem; }
.so-gems td { padding-top: var(--s2); padding-bottom: var(--s2); }
.so-gems tbody tr.so-group, .so-gems tbody tr.so-group:hover { background: none; border-bottom-color: var(--line-strong); }
.so-group th { font: 600 var(--fs-lg)/var(--lh-ui) var(--body); color: var(--text); text-align: left; padding: var(--s6) var(--s3) var(--s2); }
.so-gems tbody:first-of-type .so-group th { padding-top: var(--s4); }
.so-group small { font: 400 var(--fs-sm) var(--body); color: var(--quiet); margin-left: var(--s1); }
/* Эффекты: подпись тише, значение заметнее */
.so-effects { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.so-effects span { display: inline-block; margin-right: var(--s4); }
.so-effects b { color: var(--text); font-weight: 600; white-space: nowrap; }

/* ---------- Гайд под списком ---------- */
.so-guide { scroll-margin-top: var(--s4); }
.so-guide .wk-sub { margin-top: var(--s6); }
.so-guide-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s6); }
.so-guide-types h4 { font: 600 var(--fs-md)/var(--lh-ui) var(--body); color: var(--text); margin: 0 0 var(--s2); }
.so-prose { color: var(--text-2); line-height: var(--lh-prose); max-width: 42rem; margin: 0 0 var(--s3); }
ul.so-prose, ol.so-prose { padding-left: 1.25rem; }
.so-prose li + li { margin-top: var(--s2); }
.so-combine { max-width: 26rem; font-size: var(--fs-ui); }
.so-panel { max-width: 42rem; color: var(--text-2); line-height: var(--lh-prose); }
.so-panel b { color: var(--text); font-weight: 600; }
.so-panel p { margin: var(--s1) 0 0; }
.so-guide > .wk-note { margin-top: var(--s5); }

/* ---------- Страница камня и руды ---------- */
.so-name { font: 600 var(--fs-xl)/1.2 var(--body); color: var(--text); margin: var(--s4) 0 var(--s2); overflow-wrap: anywhere; }
.so-side-kv { margin-top: var(--s4); }
.so-body > .wk-sec:first-child { margin-top: 0; }
.so-body .wk-kv > div { align-items: center; }
.so-lead { margin: 0 0 var(--s2); }
.so-lead { margin-top: var(--s4); }
.so-kind { display: inline-block; color: var(--text); }
.so-items { margin-top: var(--s3); }
.so-desc { color: var(--text-2); line-height: var(--lh-prose); max-width: 42rem; margin: 0; white-space: pre-wrap; }
/* Руны сета: текущая — в золотой рамке */
.so-set { display: flex; flex-wrap: wrap; gap: var(--s3); }
.so-set a { display: block; line-height: 0; border-radius: var(--r-sm); }
.so-set a[aria-current] .wk-spr { outline: 2px solid var(--accent); }
.so-set a:hover .wk-spr { outline-color: var(--text-2); }

/* ---------- Руда ---------- */
.so-ores, .so-drops { font-size: var(--fs-ui); }
.so-ores td.wk-num, .so-drops td.wk-num { width: 10rem; }

@media (max-width: 991.98px) {
  .so-gems td { padding-top: 0; padding-bottom: 0; }
  .so-gems td.wk-name { width: auto; }
  .wk-filters .so-type { flex-basis: 100%; }
  .so-gems td.so-effects { flex: 0 0 100%; padding-bottom: var(--s1); }
  .so-group th { flex: 0 0 100%; padding: var(--s4) 0 0; }
  .so-guide-types { grid-template-columns: minmax(0, 1fr); }
  .so-name { margin-top: var(--s3); }
  .so-body > .wk-sec:first-child { margin-top: var(--s5); }
  /* цель нажатия 44px */
  .so-kind { padding: var(--s2) 0; }
  .wk-detail .wk-ref { min-height: 2.75rem; }
  .so-ores td.wk-num, .so-drops td.wk-num { width: auto; }
}

/* =====================================================================
   Задания и данжи
   ===================================================================== */
/* ---------- Список заданий ---------- */
/* Раса — полоска слева (цвет из RACE_COLORS через --race) плюс название текстом во второй строке */
/* Полоска рисуется поверх первой ячейки, а не рамкой: таблица остаётся на сетке страницы */
.qs-table td.wk-lv::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--race, var(--line-strong)); }
.qs-table td { padding-top: var(--s2); padding-bottom: var(--s2); vertical-align: top; }
.qs-table td.wk-name { overflow-wrap: anywhere; }
.qs-sub { color: var(--text-2); font-size: var(--fs-sm); font-weight: 400; }
.qs-table td.qs-reward { color: var(--text-2); font-size: var(--fs-sm); }
.qs-reward span { display: block; }
.qs-loading { opacity: .5; }

/* ---------- Страница задания ---------- */
.qd-race { border-left: 3px solid var(--race, var(--line-strong)); padding-left: var(--s2); }
.qd-next { margin-top: var(--s5); color: var(--text-2); }
.qd-next ul { margin: var(--s1) 0 0; padding: 0; list-style: none; }
.qd-next li { padding: var(--s1) 0; overflow-wrap: anywhere; }
.qd-text { max-width: 42rem; margin: 0; color: var(--text-2); line-height: var(--lh-prose); white-space: pre-wrap; overflow-wrap: anywhere; }

.qd-acts { margin: 0; padding: 0; list-style: none; counter-reset: act; border-top: 1px solid var(--line); }
.qd-acts > li { counter-increment: act; display: grid; grid-template-columns: 2rem minmax(0, 1fr); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.qd-acts > li::before { content: counter(act); color: var(--quiet); font-weight: 600; }
.qd-act-type { color: var(--quiet); font-size: var(--fs-sm); }
.qd-act-text { margin: 0; overflow-wrap: anywhere; }
.qd-act-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s1); color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.qd-act-meta dt, .qd-act-meta dd { display: inline; margin: 0; }
.qd-act-meta dt { color: var(--quiet); font-weight: 400; }
.qd-act-meta dd { color: var(--text); font-weight: 500; }
.qd-refs { max-width: 28rem; }
.qd-refs .wk-ref-name, .dg-rewards .wk-ref-name { overflow-wrap: anywhere; min-width: 0; }
.qd-qty { margin-left: auto; color: var(--quiet); white-space: nowrap; }
.qd-map { margin-top: var(--s3); }
.qd-maps { display: grid; gap: var(--s3); margin-top: var(--s3); }
.qd-rewards { max-width: 28rem; }
.qd-items { margin-top: var(--s5); }

/* ---------- Данжи ---------- */
.wk-sec small { font: 400 var(--fs-ui) var(--body); color: var(--quiet); text-transform: none; letter-spacing: 0; margin-left: var(--s2); }
.dg-table td { padding-top: var(--s3); padding-bottom: var(--s3); vertical-align: top; }
/* Одинаковые колонки во всех группах */
.dg-table { table-layout: fixed; }
.dg-table th:nth-child(1) { width: 44%; }   /* название с ключом */
.dg-table th:nth-child(2) { width: 9%; }    /* уровни */
.dg-table th:nth-child(3) { width: 18%; }   /* состав */
.dg-name { display: flex; align-items: flex-start; gap: var(--s3); }
.dg-key { margin-top: var(--s1); color: var(--quiet); font-size: var(--fs-sm); font-weight: 400; }
.dg-table td { overflow-wrap: anywhere; }
.dg-table .dg-nowrap { white-space: nowrap; }
.dg-rewards { margin: 0; padding: 0; list-style: none; }
.dg-rewards li { display: flex; gap: var(--s3); justify-content: space-between; padding: var(--s1) 0; }
.dg-exp { font-weight: 500; }
.dg-more { background: none; border: 0; padding: var(--s1) 0; color: var(--quiet); font: inherit; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dg-more:hover { color: var(--text); }

@media (max-width: 991.98px) {
  /* Задание: уровень слева, название и награда — столбиком справа */
  .qs-table tbody tr { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0; padding: var(--s2) 0 var(--s2) var(--s3); }
  .qs-table td.wk-lv { width: auto; }
  .qs-table td.wk-name { order: 0; display: block; min-height: 0; }
  .qs-table td.qs-reward { grid-column: 2; text-align: left; white-space: normal; }
  .qs-reward span { display: inline; }
  .qs-reward span + span::before { content: ", "; }

  .dg-table tbody tr { gap: var(--s1) var(--s4); padding: var(--s3) 0; }
  .dg-table td { padding-top: 0; padding-bottom: 0; }   /* отступ даёт сама строка, иначе пустоты между ячейками */
  .dg-table td.wk-name { display: block; min-height: 0; }
  .dg-table td.dg-wide { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); }
  .dg-rewards { flex: 0 0 100%; }
  .dg-key .wk-tap { min-height: 0; padding: var(--s2) 0; display: inline-block; }
  .dg-rewards li { min-height: 2.75rem; align-items: center; }
  .dg-more { min-height: 2.75rem; }
  .qd-refs .wk-ref { min-height: 2.75rem; }
}

/* =====================================================================
   Справочник сервера
   ===================================================================== */
/* ---------- Оглавление справочника ---------- */
.wk-wip { margin: var(--s4) 0 0; padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-md); max-width: 42rem; font-size: var(--fs-sm); color: var(--text-2); }
.wk-wip b { color: var(--text); font-weight: 600; }
.wk-wip + .wk-lede { margin-top: var(--s4); }
.wk-guide-gap { margin-top: var(--s5); }
.wk-chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0 var(--s7); margin-top: var(--s3); }
.wk-chapters h2 { font: 600 var(--fs-md)/var(--lh-ui) var(--body); color: var(--text); margin: var(--s5) 0 var(--s1); }
.wk-chapters a { display: block; padding: var(--s3) 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.wk-chapters a b { font-weight: 500; }
.wk-chapters a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.wk-chapters a small { display: block; color: var(--quiet); font-size: var(--fs-sm); }

/* ---------- Статья: текст и «На этой странице» ---------- */
/* Текст держит читаемую длину строки, оглавление стоит у правого края колонки страницы */
.wk-article { display: grid; grid-template-columns: minmax(0, 42rem) 14rem; justify-content: space-between; gap: var(--s7); align-items: start; }
.wk-article-meta { color: var(--quiet); font-size: var(--fs-sm); margin: var(--s3) 0 0; }

.wk-toc { position: sticky; top: var(--s4); font-size: var(--fs-sm); }
.wk-toc p { color: var(--quiet); margin: 0 0 var(--s2); }
.wk-toc a { display: block; padding: var(--s1) 0 var(--s1) var(--s3); color: var(--quiet); border-left: 2px solid var(--line); text-decoration: none; }
.wk-toc a:hover { color: var(--text); }
.wk-toc a[aria-current] { color: var(--text); border-left-color: var(--accent); }
.wk-toc-m { display: none; margin-top: var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-md); font-size: var(--fs-sm); }
.wk-toc-m summary { padding: var(--s3) var(--s4); cursor: pointer; color: var(--text); }
.wk-toc-m a { display: block; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); color: var(--text-2); text-decoration: none; }

.wk-nextprev { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--line); }
.wk-nextprev a { color: var(--text); text-decoration: none; }
.wk-nextprev a span { display: block; color: var(--quiet); font-size: var(--fs-sm); }
.wk-nextprev a b { font-weight: 500; }
.wk-nextprev a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.wk-nextprev > :last-child { text-align: right; }

/* ---------- Текст статьи ---------- */
.wk-prose { font-size: var(--fs-md); line-height: var(--lh-prose); margin-top: var(--s5); color: var(--text); overflow-wrap: break-word; }
.wk-prose > p:first-child { font-size: var(--fs-lg); line-height: 1.5; color: var(--text-2); }
.wk-prose h2 { font: 700 var(--fs-2xl)/var(--lh-display) var(--display); letter-spacing: .01em; text-transform: uppercase; margin: var(--s7) 0 var(--s3); color: var(--text); scroll-margin-top: var(--s4); }
.wk-prose h3, .wk-prose h4, .wk-prose h5, .wk-prose h6 { font: 600 var(--fs-lg)/var(--lh-ui) var(--body); margin: var(--s5) 0 var(--s2); color: var(--text); }
.wk-prose > :first-child { margin-top: 0; }
.wk-prose p { margin: 0 0 var(--s4); }
.wk-prose strong { font-weight: 600; color: var(--text-strong); }
.wk-prose ul, .wk-prose ol { margin: 0 0 var(--s4); padding-left: var(--s5); }
.wk-prose li { margin-bottom: var(--s1); }
.wk-prose li > ul, .wk-prose li > ol { margin: var(--s1) 0 0; }
.wk-prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; opacity: 1; }
.wk-prose code { font: var(--fs-sm) var(--mono); color: inherit; background: rgba(255, 255, 255, .07); padding: 0 var(--s1); border-radius: var(--r-sm); }
.wk-prose-tip { margin: var(--s4) 0; padding: var(--s3) var(--s4); background: var(--panel); border-radius: var(--r-md); color: var(--text-2); font-size: inherit; }
.wk-prose-tip > :last-child { margin-bottom: 0; }

/* Заметка «> [!info] Заголовок»: вид задаёт полоса слева, а не иконка */
.wk-note { margin: var(--s4) 0; padding: var(--s3) var(--s4); background: var(--panel); border-left: 3px solid var(--line-strong); border-radius: var(--r-md); color: var(--text-2); }
.wk-note > :last-child { margin-bottom: 0; }
.wk-prose .wk-note-title { margin: 0 0 var(--s1); font-weight: 600; color: var(--text); }
.wk-note--tip { border-left-color: var(--positive); }
.wk-note--warning { border-left-color: var(--warn); }

/* Сворачиваемый блок «> [!cut] Заголовок» */
.wk-cut { margin: var(--s3) 0; border-bottom: 1px solid var(--line); }
.wk-cut > summary { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s2) 0; cursor: pointer; list-style: none; font-weight: 500; color: var(--text); }
.wk-cut > summary::-webkit-details-marker { display: none; }
.wk-cut > summary::after { content: "Показать"; margin-left: auto; color: var(--quiet); font-size: var(--fs-sm); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.wk-cut[open] > summary::after { content: "Скрыть"; }
:root:lang(en) .wk-cut > summary::after { content: "Show"; }
:root:lang(en) .wk-cut[open] > summary::after { content: "Hide"; }
.wk-cut-body { padding: var(--s1) 0 var(--s3); color: var(--text-2); }
.wk-cut-body > :last-child { margin-bottom: 0; }
/* Последняя строка списка не дублирует черту самого блока */
.wk-cut-body > ul:last-child > :last-child { border-bottom: 0; }

/* Значение цветом: @good — удача, @bad — неудача, @warn — осторожно */
.wk-mark { font-weight: 500; }
.wk-mark--good { color: var(--positive); }
.wk-mark--bad { color: var(--negative); }
.wk-mark--warn { color: var(--warn); }

/* Слово с пояснением: по наведению и по Tab */
.wk-term { position: relative; text-decoration: underline dotted var(--line-strong); text-underline-offset: 4px; cursor: help; }
.wk-term-tip { display: none; position: absolute; z-index: 5; left: 0; top: calc(100% + var(--s1)); width: max-content; max-width: 20rem; padding: var(--s2) var(--s3); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--text); font-size: var(--fs-sm); font-weight: 400; line-height: var(--lh-ui); white-space: normal; text-align: left; }
.wk-term:hover > .wk-term-tip, .wk-term:focus > .wk-term-tip { display: block; }

/* Картинка статьи с подписью из alt */
.wk-figure { display: block; margin: var(--s4) 0; }
.wk-figure > img { display: block; max-width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--line); }
.wk-figure-cap { display: block; margin-top: var(--s2); color: var(--quiet); font-size: var(--fs-sm); }
@media (max-width: 47.99rem) {
  /* На телефоне пояснение встаёт во всю ширину абзаца и не вылезает за экран */
  .wk-prose p, .wk-prose li, .wk-prose td { position: relative; }
  .wk-term { position: static; }
  .wk-term-tip { right: 0; width: auto; max-width: none; }
}

/* Таблица листается внутри своей обёртки и не распирает страницу */
.wk-prose-table { overflow-x: auto; margin: var(--s2) 0 var(--s5); }
.wk-prose table { border-collapse: collapse; width: 100%; font-size: var(--fs-ui); }
.wk-prose th { text-align: left; font-weight: 500; color: var(--quiet); font-size: var(--fs-sm); padding: var(--s2) var(--s4) var(--s2) 0; border-bottom: 1px solid var(--line); }
.wk-prose td { padding: var(--s2) var(--s4) var(--s2) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.wk-prose .wk-num { text-align: right; white-space: nowrap; }
.wk-prose th:last-child, .wk-prose td:last-child { padding-right: 0; }

/* Формула: блок кода; имя величины до знака «=» выделено */
.wk-formula { margin: var(--s4) 0; padding: var(--s3) var(--s4); background: var(--panel); border-radius: var(--r-md); font: var(--fs-sm)/1.7 var(--mono); color: var(--text); overflow-x: auto; white-space: pre; }
.wk-formula b { color: var(--text-strong); font-weight: 700; }

/* ---------- Предметы в статье ---------- */
/* В тексте: иконка 24px и имя цветом грейда, пунктирное подчёркивание */
.wk-it { position: relative; color: var(--g0); text-decoration: underline dashed var(--line-strong); text-underline-offset: 4px; }
.wk-it:hover { text-decoration-style: solid; }
.wk-it .wk-spr { margin: -.25rem var(--s2) -.125rem 0; }
.wk-it-missing { font: var(--fs-sm) var(--mono); color: var(--quiet); }
/* Только иконка 64px */
.wk-ico { position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.wk-ico-missing { display: inline-flex; align-items: center; justify-content: center; }
.wk-ico-missing .wk-it-missing { font-size: var(--fs-xs); }
.wk-spr > img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

/* Рецепт: иконки, текст и операторы на подложке */
.wk-recipe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: var(--s4) 0; padding: var(--s3) var(--s4); background: var(--panel); border-radius: var(--r-md); }
.wk-recipe-op { font-size: var(--fs-xl); color: var(--quiet); line-height: 1; }

/* Список предметов: иконка 32px, имя, строка пояснения */
.wk-prose ul:has(> .wk-item-row) { padding-left: 0; margin: var(--s2) 0 var(--s5); }
.wk-prose .wk-item-row { position: relative; list-style: none; margin: 0; padding: var(--s2) 0 var(--s2) calc(2rem + var(--s3)); min-height: 3rem; border-bottom: 1px solid var(--line); line-height: var(--lh-ui); }
.wk-item-row-name { display: block; font-weight: 500; color: var(--text); text-decoration: none; }
.wk-item-row-name::after { content: ""; position: absolute; inset: 0; }   /* вся строка — ссылка */
.wk-item-row-name .wk-spr { position: absolute; left: 0; top: var(--s2); }
.wk-item-row-name:hover .wk-ref-name { text-decoration: underline; text-underline-offset: 3px; }
.wk-item-row small { display: block; color: var(--quiet); font-size: var(--fs-sm); }
.wk-item-row small a { position: relative; z-index: 1; }

/* Заглушка на время загрузки */
.wk-skel { display: block; border-radius: var(--r-sm); background: var(--line); animation: wk-skel 1.4s ease-in-out infinite; }
.wk-spr.wk-skel { display: inline-block; outline-color: var(--line); }
.wk-skel--text { display: inline-block; width: 6rem; height: .75rem; vertical-align: middle; }
@keyframes wk-skel { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .wk-skel { animation: none; } }

@media (max-width: 68.75rem) {
  .wk-article { grid-template-columns: minmax(0, 42rem); }
  .wk-toc { display: none; }
  .wk-toc-m { display: block; }
}
@media (max-width: 991.98px) {
  .wk-chapters { grid-template-columns: minmax(0, 1fr); }
  .wk-prose h2 { font-size: var(--fs-xl); margin-top: var(--s6); }
  .wk-nextprev a { display: flex; flex-direction: column; justify-content: center; min-height: 2.75rem; }
}

/* =====================================================================
   Калькулятор
   ===================================================================== */
/* ---------- Сводка: главные цифры, липнет к верху ---------- */
.calc-sum { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); margin: var(--s4) 0 0; padding: var(--s3) 0; }
.calc-sum dl { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: 0; }
.calc-sum dt { color: var(--quiet); font-size: var(--fs-xs); font-weight: 400; }
.calc-sum dd { margin: 0; font: 600 var(--fs-xl)/1.2 var(--body); color: var(--text); white-space: nowrap; }
.calc-sum .minor dd { font-size: var(--fs-md); line-height: 1.8; }

/* Баннер о заходе по ссылке */
.calc-notice { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); color: var(--text-2); font-size: var(--fs-sm); }

/* ---------- Две колонки: ввод и разбивка ---------- */
.calc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: var(--s6); align-items: start; margin-top: var(--s5); }
.calc-cols section { margin-bottom: var(--s6); }
.calc-h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.calc-h2 small { font-weight: 400; font-size: var(--fs-sm); color: var(--quiet); }
.calc-h2 .calc-link { margin-left: auto; }
.calc-statbox { position: static; }

/* Подпись над группой полей или строк */
.calc-label { display: block; color: var(--quiet); font: 400 var(--fs-sm)/var(--lh-ui) var(--body); margin: var(--s3) 0 var(--s1); }
.calc-label b { font-weight: 400; color: var(--text-2); }

/* Кнопка-ссылка: второстепенные действия в строках */
.calc-link { display: inline-flex; align-items: center; background: none; border: 0; padding: 0; color: var(--text-2); font: 400 var(--fs-sm) var(--body); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.calc-link:hover { color: var(--text); text-decoration-color: currentColor; }
.calc-link[aria-pressed="true"] { color: var(--text); font-weight: 600; text-decoration-color: currentColor; }
.calc-link:disabled { opacity: .5; cursor: default; }

/* ---------- Персонаж ---------- */
.calc-opts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.calc-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--s3) var(--s4); margin-top: var(--s4); }
.calc-form label { display: block; color: var(--quiet); font-size: var(--fs-sm); margin: 0; }
.calc-form label .wk-field { display: block; margin-top: var(--s1); }
.calc-form .wide { grid-column: span 2; }
.calc-form .wk-field:disabled { opacity: .5; }
.calc-page .wk-check { margin-top: var(--s3); cursor: pointer; }

/* ---------- Экипировка ---------- */
.calc-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); align-items: start; }
.calc-slot { min-width: 0; border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.calc-slot--filled { border-style: solid; }
.calc-slot-main { display: flex; align-items: center; gap: var(--s3); width: 100%; min-width: 0; min-height: 3.5rem; padding: var(--s2) var(--s3); background: none; border: 0; border-radius: var(--r-md); text-align: left; color: var(--text); font: inherit; cursor: pointer; }
.calc-slot-main:hover, .calc-slot-mods:hover { background: rgba(255, 255, 255, .04); }
.calc-slot-main > img { width: 2.5rem; height: 2.5rem; object-fit: contain; opacity: .45; flex-shrink: 0; }
.calc-slot-main > .wk-spr { margin: 0 var(--s1); }
.calc-slot-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.calc-slot-text b { font-weight: 400; font-size: var(--fs-sm); color: var(--quiet); }
.calc-slot-text > span { font-size: var(--fs-sm); color: var(--quiet); }
.calc-slot-text > .calc-slot-name { font-size: var(--fs-ui); font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.calc-slot-name small { font-size: var(--fs-xs); font-weight: 400; color: var(--quiet); }
.calc-slot-top { display: flex; align-items: center; }
.calc-slot-top > .calc-link { margin-right: var(--s3); }
.calc-slot-mods { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 2.25rem; padding: var(--s1) var(--s3); background: none; border: 0; border-top: 1px solid var(--line); text-align: left; color: var(--quiet); font: 400 var(--fs-sm) var(--body); cursor: pointer; }
.calc-slot-mods > :last-child { margin-left: auto; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.calc-tals, .calc-gems { display: inline-flex; align-items: center; }
.calc-tals { gap: 2px; }
.calc-gems { gap: var(--s1); }
.calc-tals img { width: 1rem; height: 1rem; object-fit: contain; }
.calc-tals img[data-empty="1"] { opacity: .3; filter: grayscale(1); }
.calc-gem-empty { display: inline-block; width: 1.5rem; height: 1.5rem; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); }
.calc-slot-edit { padding: 0 var(--s3) var(--s3); border-top: 1px solid var(--line); }
.calc-rows { display: flex; flex-direction: column; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.calc-row { display: flex; align-items: center; gap: var(--s2); min-width: 0; font-size: var(--fs-ui); }
.calc-row > .calc-grow { flex: 1; min-width: 0; }
.calc-row select.wk-field { width: auto; }
.calc-row select.calc-grow { width: 100%; }
.calc-hint { color: var(--quiet); font-size: var(--fs-xs); }
.calc-bonuses { margin: var(--s3) 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-sm); }
.calc-bonuses span { color: var(--quiet); }

/* ---------- Бафы ---------- */
.calc-buffs { margin: 0; padding: 0; list-style: none; }
.calc-buffs li { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.calc-buffs li > div { flex: 1; min-width: 0; line-height: 1.3; }
.calc-buffs small { display: block; color: var(--quiet); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-buffs small span { margin-right: var(--s3); }
.calc-buffs small b { font-weight: 500; color: var(--text-2); }
.calc-buffs select.wk-field { width: auto; flex-shrink: 0; }
.calc-buffs .wk-btn-2 { flex-shrink: 0; padding: 0 var(--s3); }
.calc-buffs--on { margin-bottom: var(--s4); }
.calc-buffs--on li > div { font-weight: 500; }
.calc-more { margin-top: var(--s3); min-height: 2.25rem; }

/* ---------- Таблица: откуда взялась каждая цифра ---------- */
.calc-stat { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.calc-stat th { font-weight: 500; color: var(--quiet); text-align: right; padding: var(--s2) 0 var(--s2) var(--s3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.calc-stat td { text-align: right; padding: var(--s2) 0 var(--s2) var(--s3); border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--text); }
.calc-stat th:first-child, .calc-stat td:first-child { text-align: left; padding-left: 0; }
.calc-stat td:first-child { white-space: normal; color: var(--text-2); }
.calc-stat td.tot { font-weight: 600; font-size: var(--fs-ui); }
.calc-stat .grp td { color: var(--quiet); font-size: var(--fs-xs); border-bottom: 0; padding-top: var(--s4); }
.calc-stat td.nil { color: var(--quiet); }
.calc-stat td button { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; text-decoration: underline dashed var(--line-strong); text-underline-offset: 3px; }
.calc-stat td button:hover, .calc-stat td button[aria-expanded="true"] { color: var(--text); }
.calc-stat .why td { text-align: left; white-space: normal; background: var(--panel); padding: var(--s2) var(--s3); color: var(--quiet); }
.calc-why { display: flex; justify-content: space-between; gap: var(--s3); padding: 2px 0; }
.calc-why > span { min-width: 0; overflow-wrap: anywhere; }
.calc-why b { font-weight: 500; color: var(--text); white-space: nowrap; }

/* ---------- Билды ---------- */
.calc-builds { display: flex; gap: var(--s2); flex-wrap: wrap; }
.calc-builds .wk-field { flex: 1 1 10rem; width: auto; }
.calc-saved { margin-top: var(--s3); }
.calc-saved li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); }
.calc-saved li > span { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
.calc-saved small { color: var(--quiet); font-size: var(--fs-xs); margin-left: var(--s2); }

/* ---------- Модальные окна выбора ---------- */
.calc-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--s4); background: rgba(0, 0, 0, .7); }
.calc-modal-box { display: flex; flex-direction: column; width: 100%; max-width: 42.5rem; max-height: 88vh; overflow: hidden; background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.calc-modal-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.calc-modal-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); color: var(--quiet); font-size: var(--fs-sm); }
.calc-modal-filters .wk-field { width: auto; max-width: 100%; }
.calc-modal-filters input.wk-field { width: 4.5rem; }
.calc-modal-filters label { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; }
.calc-modal-list { flex: 1; min-height: 8rem; overflow-y: auto; }
.calc-modal-list .wk-empty { padding: var(--s6) var(--s4); }
.calc-modal-list .wk-empty .wk-btn-2 { margin-top: var(--s3); }
.calc-pick { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 3rem; padding: var(--s2) var(--s4); background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--text); font: inherit; line-height: 1.3; cursor: pointer; }
.calc-pick:hover { background: rgba(255, 255, 255, .04); }
.calc-pick:focus-visible { outline-offset: -2px; }
.calc-pick-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.calc-pick-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-pick-text > .wk-ref-name { font-weight: 500; font-size: var(--fs-ui); }
.calc-pick-sub { color: var(--quiet); font-size: var(--fs-sm); }
.calc-pick-sub b { font-weight: 400; color: var(--text-2); }
.calc-modal-foot { display: flex; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s2) var(--s4); border-top: 1px solid var(--line); color: var(--quiet); font-size: var(--fs-sm); }
.calc-spr-img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

/* На десктопе поля — размером интерфейса; на телефоне v3.css держит 16px */
@media (min-width: 992px) {
  .calc-page .wk-field, .calc-modal .wk-field { font-size: var(--fs-ui); }
}
/* Сводка в две строки — правая колонка липнет ниже */
@media (max-width: 87rem) {
}
@media (max-width: 68.75rem) {
  .calc-cols { grid-template-columns: minmax(0, 1fr); }
  .calc-statbox { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 991.98px) {
  /* Цель нажатия 44px */
  .calc-link, .calc-more { min-height: 2.75rem; }
  .calc-page .wk-check, .calc-modal .wk-check { min-height: 2.75rem; }
  .calc-slot-mods { min-height: 2.75rem; }
  .calc-stat td button { display: flex; align-items: center; width: 100%; min-height: 2.75rem; }
  .calc-stat td { padding-top: 0; padding-bottom: 0; height: 2.75rem; }
  .calc-stat .why td { height: auto; padding: var(--s2) var(--s3); }
  .calc-pick { min-height: 3.5rem; }
  /* Окно выбора — лист на весь экран, прокручивается целиком */
  .calc-modal { padding: 0; align-items: stretch; }
  .calc-modal-box { max-width: none; max-height: none; height: 100dvh; overflow-y: auto; border: 0; border-radius: 0; }
  .calc-modal-head { position: sticky; top: 0; z-index: 1; background: var(--panel); }
  .calc-modal-list { flex: 1 0 auto; overflow: visible; }
  .calc-modal-foot { position: sticky; bottom: 0; background: var(--panel); }
}
@media (max-width: 56.25rem) {
  /* Сводка — одна строка, листается вбок: не занимает пол-экрана и не оставляет «висячих» чисел */
  .calc-sum dl { gap: var(--s2) var(--s5); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .calc-sum dl::-webkit-scrollbar { display: none; }
  .calc-sum dl > div { flex: 0 0 auto; }
  /* Строки бафов переносятся, а не обрезаются */
  .calc-buffs small { overflow: visible; text-overflow: clip; white-space: normal; }
  .calc-sum dd { font-size: var(--fs-lg); }
  .calc-sum .minor { display: none; }
  .calc-slots { grid-template-columns: minmax(0, 1fr); }
  .calc-stat .src { display: none; }   /* на телефоне: стат и итог, разбивка — по нажатию */
}

/* =====================================================================
   Классы и умения
   ===================================================================== */

/* ---------- Иконки: только 1× и 0,5× от нарисованного размера ---------- */
.cl-ico { display: inline-block; flex-shrink: 0; border-radius: var(--r-sm); background-color: var(--bg); background-repeat: no-repeat; outline: 1px solid var(--line-strong); vertical-align: middle; }
.cl-race-ico { display: inline-block; flex-shrink: 0; }
/* Раса строкой: эмблема + название */
.cl-race-line { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; font-weight: 500; }
.cl-races { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); }
.cl-warn { color: var(--warn) !important; }
.cl-mark { color: var(--text); font-weight: 600; margin-left: 1px; }   /* «*» — неточная расшифровка, сноска под таблицей */
.cl-raw { font-family: var(--mono); font-size: var(--fs-sm); }

/* ---------- Каскад: раса → 1-я → 2-я профессия ---------- */
.cl-cascade { gap: var(--s2) var(--s4); }
.cl-cascade select { min-width: 11rem; color-scheme: dark; }
.cl-cascade select:disabled { opacity: .5; }

/* ---------- Дерево классов ---------- */
.cl-race { margin-top: var(--s6); }
.cl-race-head { display: flex; align-items: center; gap: var(--s3); margin: 0; padding-bottom: var(--s2); border-bottom: 2px solid var(--race-c, var(--line-strong)); }
.cl-branch { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: var(--s2) var(--s4); align-items: start; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.cl-branch-base { display: flex; align-items: center; gap: var(--s3); }
.cl-branch-base > span { flex: 0 0 6.5rem; color: var(--quiet); font-size: var(--fs-sm); }
.cl-jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); border-left: 1px solid var(--line-strong); }
.cl-jobs > li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding-left: var(--s4); }
.cl-jobs > li::before { content: ""; position: absolute; left: 0; top: 1.125rem; width: var(--s3); border-top: 1px solid var(--line-strong); }
.cl-jobs > li > .cl-chip { min-width: 11rem; }
.cl-jobs-next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.cl-jobs-next::before { content: "→"; color: var(--quiet); }

.cl-chip { display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.25rem; padding: 0 var(--s3) 0 var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--text); font-size: var(--fs-ui); font-weight: 500; text-decoration: none; }
.cl-chip:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.cl-chip[aria-current] { border-color: var(--accent); background: var(--accent-soft); }
.cl-chip--cross { border-style: dashed; }
.cl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.cl-items > span { display: inline-flex; align-items: center; gap: var(--s1); color: var(--quiet); font-size: var(--fs-sm); }

/* ---------- Браузер умений ---------- */
.cl-tabs { margin-top: var(--s2); max-width: 100%; }
.cl-tabs button { font-size: var(--fs-ui); }
.cl-tabs small { margin-left: var(--s1); font-size: var(--fs-xs); font-weight: 400; color: var(--quiet); }
.cl-tabs button[aria-pressed="true"] small { color: inherit; }
.cl-skills { font-size: var(--fs-ui); }
.cl-skills td.wk-name { white-space: nowrap; }
.cl-skills--short td.wk-name { width: 45%; }
.cl-missing { display: inline-flex; align-items: center; gap: var(--s3); color: var(--quiet); }
.cl-group { margin: var(--s5) 0 var(--s2); }
.cl-group small { margin-left: var(--s1); color: var(--quiet); font-size: var(--fs-sm); font-weight: 400; }

/* ---------- Страницы класса и умения ---------- */
.cl-title { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s2); }
.cl-levels-note .wk-tag { margin-right: var(--s2); }
.cl-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 0; }
.cl-detail { margin-top: var(--s5); }
.cl-detail .wk-detail-side { position: static; }   /* колонка бывает выше экрана */
.cl-detail .wk-sec:first-child { margin-top: 0; }
.cl-detail .wk-kv dd.cl-race-line { justify-content: flex-end; }
.cl-side-head { margin: var(--s5) 0 var(--s1); }
.cl-row-link { display: block; padding: var(--s1) 0; }
.cl-raw-fold { margin-top: var(--s6); }
.cl-raw-fold .wk-kv { max-width: 30rem; margin-bottom: var(--s3); }

/* Таблица по уровням: числа вправо, на телефоне прокручивается в своей обёртке */
/* Широкая таблица: заметная полоса прокрутки, а пока справа есть скрытые колонки — край уходит в прозрачность
   (data-more ставит SkillLevelTable). Тень на тёмном фоне не читается, поэтому затухание. */
.cl-scroll { overflow-x: auto; margin-top: var(--s3); }
.cl-scroll[data-more] { -webkit-mask-image: linear-gradient(to right, black calc(100% - 4rem), transparent); mask-image: linear-gradient(to right, black calc(100% - 4rem), transparent); }
.cl-scroll::-webkit-scrollbar-track { background: var(--panel); }
.cl-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); }
.cl-levels { min-width: min(100%, 28rem); border-collapse: collapse; font-size: var(--fs-ui); }
.cl-levels th, .cl-levels td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); white-space: nowrap; text-align: left; color: var(--text); }
.cl-levels thead th { font: 500 var(--fs-sm) var(--body); color: var(--quiet); background: var(--panel); }
.cl-levels tbody th { font-weight: 500; }
.cl-levels .wk-num { text-align: right; }
.cl-levels .cl-lv { position: sticky; left: 0; background: var(--bg); }   /* уровень остаётся на месте при прокрутке */
.cl-levels thead .cl-lv { background: var(--panel); }
.cl-levels .wk-dim { color: var(--quiet); }
.cl-levels tbody tr:hover { background: rgba(255, 255, 255, .04); }
.cl-levels td:has(.cl-eff) { white-space: normal; min-width: 16rem; }

/* Эффект строкой: тихая подпись, заметное значение */
.cl-eff { display: flex; justify-content: space-between; gap: var(--s3); padding: 1px 0; color: var(--text-2); }
.cl-eff b { font-weight: 600; color: var(--text); white-space: nowrap; }

/* Мини-карточка умения (в body через портал) */
.cl-tip { position: fixed; z-index: 1080; pointer-events: none; width: 20rem; max-width: calc(100vw - 1rem); padding: var(--s3); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.cl-tip-head { display: flex; align-items: center; gap: var(--s3); padding-bottom: var(--s2); margin-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.cl-tip-head b { display: block; color: var(--text); font-size: var(--fs-ui); }
.cl-tip-head span:not(.cl-ico) { color: var(--quiet); font-size: var(--fs-xs); }
.cl-tip-effects { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.cl-tip-note { margin-top: var(--s2); color: var(--quiet); font-size: var(--fs-xs); }

@media (max-width: 991.98px) {
  .cl-cascade label { flex: 1 1 100%; }
  .cl-cascade label select { flex: 1; min-width: 0; margin-left: auto; max-width: 60%; }
  .cl-branch { grid-template-columns: minmax(0, 1fr); }
  .cl-chip { min-height: 2.75rem; }
  .cl-jobs > li::before { top: 1.375rem; }
  .cl-jobs > li > .cl-chip { min-width: 0; }
  .cl-tabs { display: flex; width: 100%; }
  .cl-tabs button { flex: 1 1 0; padding: var(--s1) var(--s2); line-height: 1.2; }
  .cl-tabs small { display: block; margin: 0; }
  .cl-skills td.wk-name { white-space: normal; width: auto; }
  .cl-skills td.cl-none { display: none; }   /* пустые «—» на телефоне не показываем */
  .cl-title { gap: var(--s3); }
  .cl-row-link { display: flex; align-items: center; min-height: 2.75rem; padding: 0; }
}

/* =====================================================================
   Главная, сравнение, подвал, меню
   ===================================================================== */
/* ---------- Меню: количество записей справа от пункта ---------- */
.wk-side-count { margin-left: var(--s2); color: var(--quiet); font-size: var(--fs-xs); font-weight: 400; white-space: nowrap; }

/* ---------- Футер ---------- */
.wk-foot { background: var(--panel); border-top: 1px solid var(--line); padding: var(--s6) var(--s6) var(--s4); font-size: var(--fs-sm); color: var(--quiet); }
.wk-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); max-width: var(--content-w); }
.wk-foot h2 { font: 400 var(--fs-xs)/var(--lh-ui) var(--body); color: var(--quiet); margin: 0 0 var(--s2); }
.wk-foot ul { list-style: none; margin: 0; padding: 0; }
.wk-foot a { display: inline-block; padding: var(--s1) 0; color: var(--text-2); text-decoration: none; }
.wk-foot a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.wk-foot-bottom { display: flex; align-items: center; gap: var(--s3); max-width: var(--content-w); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-xs); }
.wk-foot-bottom img { height: 1.5rem; width: auto; opacity: .8; }

/* ---------- Главная: оглавление разделов ---------- */
.home-toc > li { display: grid; grid-template-columns: 14rem minmax(0, 1fr) auto; gap: var(--s4); align-items: baseline; }
.home-toc .wk-link { color: var(--text); font-weight: 500; }
.home-toc-desc { color: var(--quiet); font-size: var(--fs-ui); }
.home-toc-count { color: var(--quiet); font-size: var(--fs-sm); white-space: nowrap; }

/* ---------- Сравнение предметов ---------- */
.cmp-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s7); margin-top: var(--s5); }
.cmp-slot { min-width: 0; }
.cmp-slot-title { margin: 0; }
.cmp-slot-actions { display: flex; gap: var(--s4); }
.cmp-pick-btn { width: 100%; }
.cmp-item { display: flex; align-items: center; gap: var(--s3); min-width: 0; text-align: left; }
.cmp-item-text { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.cmp-item-name { font-weight: 600; font-size: var(--fs-md); line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.cmp-item-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmp-meta { color: var(--quiet); font-size: var(--fs-sm); font-weight: 400; }
.cmp-missing, .cmp-none { color: var(--quiet); }
.cmp-parts > li { display: flex; align-items: center; gap: var(--s2); }
.cmp-part-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-ui); }
.cmp-actions { display: flex; gap: var(--s3); margin-top: var(--s5); }
.cmp-slots + .wk-error { margin-top: var(--s4); }

.cmp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cmp-table th, .cmp-table td { padding: var(--s2) var(--s3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.cmp-table thead th { font-weight: 400; vertical-align: bottom; padding-bottom: var(--s3); }
.cmp-table thead th:first-child, .cmp-table tbody th { width: 26%; color: var(--quiet); font-size: var(--fs-sm); font-weight: 400; }
.cmp-table thead .cmp-item { margin-top: var(--s1); }
.cmp-table td { font-size: var(--fs-ui); color: var(--text); }
.cmp-better { font-weight: 700; }
.cmp-delta { margin-left: var(--s2); font-size: var(--fs-sm); white-space: nowrap; }
.cmp-better .cmp-delta { color: var(--positive); }
.cmp-worse .cmp-delta { color: var(--quiet); font-weight: 400; }
.cmp-wins { color: var(--quiet); font-size: var(--fs-sm); }
.cmp-wins--lead { color: var(--text); font-weight: 600; }
.cmp-nostats { color: var(--quiet); text-align: center; }
.cmp-effects { list-style: none; margin: 0; padding: 0; }
.cmp-effects li + li { margin-top: var(--s1); }
.cmp-tier { margin-top: var(--s2); }
.cmp-tier b { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }

/* Окно выбора предмета */
/* Окно выбора — общий ModalShell (.calc-modal) */
.cmp-dialog-head { display: flex; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.cmp-cats { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.cmp-results { flex: 1; min-height: 50vh; overflow-y: auto; padding: 0 var(--s4); }   /* окно не прыгает, пока грузится список */
.cmp-pick { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 2.75rem; padding: var(--s1) 0; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cmp-pick:hover .wk-ref-name { text-decoration: underline; text-underline-offset: 3px; }
.cmp-pick-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.cmp-pick-text .wk-ref-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-results .wk-list > li { padding: 0; }
.cmp-pager { margin: 0; padding: var(--s2) var(--s4); border-top: 1px solid var(--line); }

/* ---------- Служебная страница ---------- */
.adm-login { max-width: 24rem; margin: 15vh auto 0; }
.adm-login form { display: grid; gap: var(--s3); }
.adm-login .wk-note { margin: 0; }
.adm-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.adm-sub { margin: 0; }

@media (max-width: 991.98px) {
  .wk-foot { padding: var(--s5) var(--s4) var(--s4); font-size: var(--fs-md); }
  .wk-foot-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .wk-foot a { padding: var(--s3) 0; }   /* цель нажатия 44px */

  .home-toc > li { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s4); padding: 0 0 var(--s3); }
  .home-toc .wk-link { padding: var(--s3) 0 var(--s1); }
  .home-toc-desc { grid-column: 1 / -1; grid-row: 2; }

  .cmp-slots { grid-template-columns: minmax(0, 1fr); }
  .cmp-slot .wk-back { padding: var(--s3) 0; }
  /* Подпись строки — над парой значений */
  .cmp-table, .cmp-table thead, .cmp-table tbody { display: block; }
  .cmp-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
  .cmp-table th, .cmp-table td { padding: 0; border: 0; }
  .cmp-table thead th:first-child { display: none; }
  .cmp-table thead th:first-child, .cmp-table tbody th { width: auto; }
  .cmp-table tbody th, .cmp-nostats { grid-column: 1 / -1; }
  .cmp-table thead .cmp-item { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   Каркас страницы (WikiLayout), мобильное меню, рендер монстра, полосы прокрутки
   ===================================================================== */
/* === Полосы прокрутки === */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

/* === Рендеры монстров (public/img/RenderResults) === */
.monster-render {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.monster-render__poster,
.monster-render__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.monster-render__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.monster-render__video.is-ready { opacity: 1; }
.monster-render__poster.is-hidden { visibility: hidden; }

/* === Каркас страниц вики === */
.wiki-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg);
}

.wiki-shell-body {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
}

.wiki-shell-content {
  flex: 1 1 auto;
  /* Без этого широкие таблицы растягивают флекс-контейнер */
  min-width: 0;
}

/* === Боковое меню (ширина, фон, отступы — в v3.css) === */
.wiki-shell-sidebar {
  align-self: stretch;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  transition: width 0.25s ease, flex-basis 0.25s ease, padding 0.25s ease;
}

.wiki-shell--collapsed .wiki-shell-sidebar {
  flex-basis: 0;
  width: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  border-right-color: transparent;
}

.wiki-shell-sidebar::-webkit-scrollbar { width: 6px; }
.wiki-shell-sidebar::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 3px; }
.wiki-shell-sidebar:hover::-webkit-scrollbar-thumb { background-color: var(--line-strong); }

/* === Выезжающее меню на телефоне (<992px) === */
.wiki-sidebar-offcanvas {
  display: none;
  position: fixed;
  top: 0;
  left: -320px;
  width: 300px;
  height: 100vh;
  z-index: 1045;
  overflow-y: auto;
  transition: left 0.3s ease;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6);
}
.wiki-sidebar-offcanvas.open { left: 0; }

.wiki-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1044;
  cursor: pointer;
}
.wiki-sidebar-backdrop.open { display: block; }

@media (max-width: 991.98px) {
  .wiki-shell-sidebar { display: none; }
  .wiki-sidebar-offcanvas { display: block; }
}

/* =====================================================================
   Страница по центру экрана. Шапка, меню и содержимое образуют одну колонку
   шириной --page-w с равными полями по бокам; фон шапки и подвала — во всю ширину.
   На экранах уже --page-w всё как раньше: меню у левого края.
   ===================================================================== */
:root { --page-w: calc(var(--side-w) + var(--content-w) + 2 * var(--s6)); --page-gap: max(0px, calc((100% - var(--page-w)) / 2)); }
.wiki-shell-body { width: 100%; max-width: var(--page-w); margin-inline: auto; }
@media (min-width: 992px) {
  .wk-top { padding-inline: calc(var(--page-gap) + var(--s4)); }
  .wk-foot { padding-inline: calc(var(--page-gap) + var(--s6)); }
  /* Меню стоит внутри колонки, а не у края окна — отдельный фон ему больше не нужен */
  .wiki-shell-sidebar { background-color: transparent; }
}
/* Ширина 80rem выбрана по замерам: на 1920 страница занимает 82% окна и фильтры списков
   помещаются в одну строку; на 1536 и уже — во всю ширину. На очень широких окнах растёт
   не колонка, а масштаб: все размеры в rem, поэтому страница увеличивается целиком. */
@media (min-width: 2400px) { html { font-size: 112.5%; } }