/* База знаний /db/... (app/views/pages/db): планка с поиском, карточки, сведения, вкладки с таблицами, карта, списки.
   Всё внутри main.db, классы с префиксом db-. Палитра и стекло — как у панелей сайта (site.css). Подсказки — dbtt.css. */

.db,.db-suggest{--q0:#9d9d9d;--q1:#f2f4f7;--q2:#1eff00;--q3:#3d9bff;--q4:#b45cff;--q5:#ff8000;--q6:#e6cc80}
.db{--db-panel:linear-gradient(rgba(7,11,18,.45),rgba(7,11,18,.25));--db-line:var(--mw-line);--db-line2:rgba(255,255,255,.055);
  --q0:#9d9d9d;--q1:#f2f4f7;--q2:#1eff00;--q3:#3d9bff;--q4:#b45cff;--q5:#ff8000;--q6:#e6cc80;--db-ph:#f0b43c;--db-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding-top:22px;padding-bottom:56px;font-size:14px;line-height:1.5}
/* стекло блоков — как .mw-panel / .mw-steps на остальных страницах: фон под блоком притемнён и размыт.
   Блок внутри такого же блока не размывает (вложенный backdrop-filter видит только родителя) — у вложенных гасить */
.db-bar,.db-card,.db-facts,.db-side-box,.db-tabs,.db-map,.db-filters,.db-sim,.dh-strip,.dh-hero,.dh-ix{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* сброс старых глобальных стилей style_main.css (h2 48px с градиентом, input/select/button 30px с тенью) */
.db h1,.db h2,.db h3{display:block;margin:0;padding:0;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;
  color:var(--mw-head);text-transform:none;letter-spacing:0;font-family:var(--mw-title)}
.db input,.db select,.db button{margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;color:inherit;font:inherit;font-weight:400;text-align:left;
  vertical-align:middle;transition:border-color .15s,background-color .15s,color .15s}
.db input[type=search]{-webkit-appearance:none;appearance:none;box-sizing:border-box}
.db ul,.db ol{margin:0;padding:0;list-style:none}
.db p{margin:0}
.db a{color:var(--mw-link);text-decoration:none;transition:color .15s}
.db a:hover{color:var(--mw-link-hover)}
.db code{padding:0;border:0;border-radius:0;background:none;font-family:var(--db-mono);font-size:12.5px;color:var(--mw-head);white-space:nowrap}
.db .muted{color:var(--mw-muted)}
.iq0{color:var(--q0)!important}.iq1{color:var(--q1)!important}.iq2{color:var(--q2)!important}.iq3{color:var(--q3)!important}.iq4{color:var(--q4)!important}.iq5{color:var(--q5)!important}.iq6{color:var(--q6)!important}
.db a[class*=iq]:hover{filter:brightness(1.18)}

/* ---------- планка раздела ---------- */
/* разделы и поиск стоят на одной линии текста (baseline), а не по центру коробок: у шрифтов разные отступы, по центру пункты
   меню и текст поля расходятся на пиксель-два. У формы поиска линия — по тексту поля.
   Подпись базы — отдельная ячейка у левого края на всю высоту планки (растянута, в линию текста не входит):
   «База данных», под ней зелёным версия игры. На узких экранах ячейка становится плашкой (см. внизу) */
.db-bar{display:flex;align-items:baseline;gap:16px;padding:7px 7px 7px 0;border:1px solid var(--db-line);border-radius:6px;background:var(--db-panel);
  position:relative;z-index:30}
.db-brand{display:flex;flex-direction:column;justify-content:center;gap:3px;flex:none;align-self:stretch;margin:-7px 0;padding:0 18px 0 16px;
  border-right:1px solid var(--db-line);border-radius:5px 0 0 5px;background:rgba(132,214,92,.075);transition:background-color .15s}
.db .db-brand,.db .db-brand:hover{color:var(--mw-head)}
.db-brand:hover{background:rgba(132,214,92,.11)}
.db-brand:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--mw-link)}
.db-brand b{font:700 14.5px/1.1 var(--mw-title);letter-spacing:.1px}
.db-ver{font:500 11.5px/1.15 var(--mw-sans);color:#a9e48c;white-space:nowrap}
.db-nav{display:flex;gap:2px;flex:none}
.db-nav a{padding:7px 10px;border-radius:5px;font-size:13.5px;color:var(--mw-nav);transition:background-color .15s,color .15s}
.db-nav a:hover{background:rgba(255,255,255,.05);color:var(--mw-head)}
.db-nav a.on{background:rgba(143,216,255,.1);color:var(--mw-head)}
.db-nav a:focus-visible{outline:1px solid rgba(143,216,255,.55);outline-offset:-1px}
/* «Прочее» — выпадающий список разделов. Панель как у подсказок поиска: сплошная подложка и рамка, без тени
   (полупрозрачная с размытием здесь не выйдет: планка сама размыта, а вложенное размытие видит только её) */
.db-nav-more{position:relative;flex:none}
.db-nav-more>summary{display:flex;align-items:center;gap:5px;padding:7px 8px 7px 10px;border-radius:5px;font-size:13.5px;color:var(--mw-nav);
  list-style:none;cursor:pointer;user-select:none;transition:background-color .15s,color .15s}
.db-nav-more>summary::-webkit-details-marker{display:none}
.db-nav-more>summary:hover,.db-nav-more[open]>summary{background:rgba(255,255,255,.05);color:var(--mw-head)}
.db-nav-more>summary.on{background:rgba(143,216,255,.1);color:var(--mw-head)}
.db-nav-more>summary:focus-visible{outline:1px solid rgba(143,216,255,.55);outline-offset:-1px}
.db-nav-more>summary svg{width:10px;height:10px;opacity:.75;transition:transform .15s}
.db-nav-more[open]>summary svg{transform:rotate(180deg)}
.db-nav-more-list{position:absolute;top:calc(100% + 6px);left:0;z-index:5;display:flex;flex-direction:column;gap:1px;min-width:170px;padding:4px;
  border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#0b1220}
@media(prefers-reduced-motion:reduce){.db-nav a,.db-nav-more>summary,.db-nav-more>summary svg{transition:none}}
/* «Подземелья» (_layout.twig): на широком экране — в планке, на телефоне — первым пунктом «Прочее» (там же и подсветка) */
.db-nav-more-list .db-nav-zones-m{display:none}
@media(max-width:640px){
  .db-nav>.db-nav-zones{display:none}
  .db-nav-more-list .db-nav-zones-m{display:block}
  .db-nav-more>summary.on-m{background:rgba(143,216,255,.1);color:var(--mw-head)}
}
.db-search{position:relative;flex:1;max-width:440px;margin-left:auto;display:flex;align-items:center;gap:8px;height:38px;padding:0 8px 0 34px;
  border:1px solid var(--db-line);border-radius:6px;background:rgba(0,0,0,.35)}
.db-search:focus-within{border-color:rgba(143,216,255,.55);background:rgba(0,0,0,.45)}
.db-search>svg{position:absolute;left:11px;top:50%;width:15px;height:15px;margin-top:-7.5px;color:var(--mw-muted)}
.db-search input{flex:1;min-width:0;height:36px;font-size:14px;color:var(--mw-head)}
.db-search input::placeholder{color:var(--mw-muted)}
.db-search kbd{flex:none;font:11px/1 var(--db-mono);padding:3px 6px;border:1px solid var(--db-line);border-radius:4px;color:var(--mw-muted)}
.db-search:focus-within kbd{display:none}
.db-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;padding:4px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#0b1220;
  box-shadow:0 12px 32px rgba(0,0,0,.5);max-height:min(70vh,520px);overflow:auto}
.db-suggest a{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:9px;padding:6px 8px;border-radius:5px;color:var(--mw-text)}
.db-suggest a:hover,.db-suggest a.on{background:rgba(143,216,255,.1)}
.db-suggest .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-suggest .nm small{margin-left:6px;font-size:12px;color:var(--mw-muted)}
.db-suggest .t{font-size:10.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--mw-muted)}
.db-suggest .ph{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;background:rgba(255,255,255,.06);
  font:700 10px/1 var(--mw-title);color:var(--mw-muted)}
.db-suggest .all{display:block;padding:8px;margin-top:2px;border-top:1px solid var(--db-line2);border-radius:0 0 5px 5px;font-size:13px;color:var(--mw-link)}
.db-suggest .empty{padding:10px 8px;color:var(--mw-muted);font-size:13px}
.db-suggest .fix{padding:6px 8px 7px;margin-bottom:2px;border-bottom:1px solid var(--db-line2);color:var(--mw-muted);font-size:12.5px}
.db-suggest .fix b{font-weight:600;color:var(--mw-text)}
.db-suggest a.alias .nm>span{font-weight:600;color:var(--mw-head)}
/* широкий экран: поле поиска сжимают разделы планки (в RU ~330 px) — список шире поля, к его правому краю, иначе обрезались
   «Комплекты 5-го уровня (…» и подписи */
@media(min-width:641px){.db-suggest{left:auto;width:max(100%,460px)}}
/* телефон: список во всю ширину планки (left/right ставит js/db.js по краям .db-bar), строка — название целиком (до двух
   строк) и под ним подпись; касание — не меньше 44 px */
@media(max-width:640px){
  .db-suggest{max-height:min(62vh,520px)}
  .db-suggest a{align-items:start;gap:10px;min-height:44px;padding:7px 10px}
  .db-suggest a>.ph,.db-suggest a>.db-ic{margin-top:1px}
  .db-suggest a>.t{align-self:center}
  .db-suggest .nm{white-space:normal;line-height:1.3}
  .db-suggest .nm>span:first-child{display:block;overflow-wrap:anywhere}
  .db-suggest .nm small{display:block;margin:2px 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.3}
  .db-suggest .db-nm-cu{flex-wrap:wrap;column-gap:5px}
  .db-suggest .db-nm-cu>span:first-child{display:inline;max-width:calc(100% - 20px)}
  .db-suggest .db-nm-cu small{flex-basis:100%}
  .db-suggest .all{padding:11px 10px}
}

/* ---------- шапка карточки ---------- */
.db-head{display:flex;align-items:flex-start;gap:16px;margin:28px 0 20px}
.db-head-plain{margin-bottom:16px}
.db-head-t{min-width:0;flex:1}
.db-crumbs{display:flex;flex-wrap:wrap;gap:0 6px;margin-top:6px;font-size:12.5px}
.db-crumbs a{color:var(--mw-muted)}
.db-crumbs a:hover{color:var(--mw-head)}
.db-crumbs>*+*::before{content:'›';margin-right:6px;color:rgba(255,255,255,.28)}
.db-crumbs span{color:var(--mw-muted)}
.db-head h1{font-size:30px;line-height:1.15;font-weight:800;overflow-wrap:anywhere}
.db-head h1 small{font:600 16px var(--mw-sans);color:var(--mw-muted)}
.db-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font-size:13.5px;color:var(--mw-muted)}
/* «Показаны результаты для «меч»»: запрос исправлен сам (раскладка, опечатка) */
.db-fixed{margin-top:4px;font-size:13.5px;color:var(--mw-muted)}
.db-fixed b{font-weight:600;color:var(--mw-head)}
/* карточка-ответ сокращения поиска («чх» → Черный храм): название, вид, число боёв; вкладки сразу под ней */
.db-answer{padding:12px 16px}
.db-answer-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.db-answer-nm{font-size:17px;font-weight:700;line-height:1.3;color:var(--mw-head)}
a.db-answer-nm:hover{color:var(--mw-link-hover)}
.db-answer-m{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:3px;font-size:13px;color:var(--mw-muted)}
.db-answer-m span:first-child{font-variant-numeric:tabular-nums}
.db-tabs.db-tabs-after{margin-top:12px}
/* под карточкой комплекса — его подземелья, у комплектов — каждый комплект ссылкой (подпись вида или класса мельче) */
.db-answer-l{margin-top:10px}
.db-answer-l small{margin-left:6px;font-size:11.5px;color:var(--mw-muted)}
.db-tag-cls{color:var(--mw-text)}
/* вкладка «Предметы» у комплектов: заголовок группы «Комплект: Броня Разрушителя · Воин · 5» над её таблицей */
.db-set-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:12px 14px 6px;font-size:13.5px;color:var(--mw-head)}
.db-set-h b{font-weight:600}
.db-set-h .db-n{font:12px var(--db-mono);color:var(--mw-muted);font-variant-numeric:tabular-nums}
.db-set-h+.db-scroll{border-bottom:1px solid var(--db-line2)}
.db-set-h+.db-scroll:last-child{border-bottom:0}
/* таблицы групп — одна сетка колонок, иначе «Ур.» и «Тип» у каждой группы стоят по-своему (на телефоне колонок две —
   там не нужно) */
@media(min-width:641px){
  .db-set-h+.db-scroll .db-table{table-layout:fixed}
  .db-set-h+.db-scroll .db-table th:nth-child(2),.db-set-h+.db-scroll .db-table th:nth-child(3){width:76px}
  .db-set-h+.db-scroll .db-table th:nth-child(4){width:260px}
  .db-set-h+.db-scroll .db-table th.db-cmp-td{width:44px}
  .db-set-h+.db-scroll .db-table:not(.db-cmp-on) th:nth-child(4){width:304px}     /* жетоны: без галочек сравнения */
}
.db-head-a{display:flex;align-items:center;gap:8px;flex:none;padding-top:4px}

.db-btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px!important;border:1px solid var(--db-line)!important;border-radius:5px!important;
  background:rgba(0,0,0,.3)!important;font-size:13px;color:var(--mw-head)!important;cursor:pointer;white-space:nowrap;transition:border-color .15s,background-color .15s,transform .1s!important}
.db-btn svg{width:14px;height:14px}
.db-btn:hover{border-color:rgba(143,216,255,.45)!important;background:rgba(0,0,0,.45)!important}
.db-btn:active{transform:scale(.97)}
.db-btn:focus-visible,.db-tab:focus-visible,.db-zone:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.db-btn.ok{border-color:rgba(95,211,95,.5)!important;color:#9be79b!important}
.db-btn.off{opacity:.4;cursor:default}
.db-btn-p{border-color:rgba(143,216,255,.5)!important;background:rgba(63,168,232,.14)!important;color:var(--mw-link)!important}
.db-btn-p:hover{background:rgba(63,168,232,.24)!important;color:#fff!important}

/* ---------- иконки, ссылки, метки ---------- */
.db-ic{display:inline-block;flex:none;vertical-align:middle;border-radius:3px;background:#05080e center/cover no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.db-ic-s{width:20px;height:20px}
.db-ic-m{width:36px;height:36px;border-radius:5px}
.db-ic-l{width:56px;height:56px;border-radius:7px}
.db-ic.bq2{box-shadow:0 0 0 1px rgba(30,255,0,.55)}.db-ic.bq3{box-shadow:0 0 0 1px rgba(61,155,255,.65)}.db-ic.bq4{box-shadow:0 0 0 1px rgba(180,92,255,.7)}
.db-ic.bq5{box-shadow:0 0 0 1px rgba(255,128,0,.75)}.db-ic.bq6{box-shadow:0 0 0 1px rgba(230,204,128,.7)}
.db-link{display:inline-flex;align-items:center;gap:8px;max-width:100%;vertical-align:middle}
.db-link span{overflow-wrap:anywhere}
.db-link:hover span{text-decoration:underline;text-underline-offset:2px}
.db-sub{font-size:12.5px;color:var(--mw-muted)}
.db-cnt{font-size:12.5px;color:var(--mw-muted);font-variant-numeric:tabular-nums}
.db-num{font-variant-numeric:tabular-nums}
.db-tag{display:inline-block;padding:1px 7px;border:1px solid var(--db-line);border-radius:10px;font-size:11px;line-height:1.5;color:var(--mw-muted);white-space:nowrap;vertical-align:1px}
.db-tag-ph{border-color:rgba(240,180,60,.45);color:var(--db-ph)}
/* значок своего предмета Moonwell (макрос cu): фавиконка сервера после названия, надпись — .db-ptip по наведению / касанию */
.db-cu{display:inline-block;flex:none;width:14px;height:14px;margin-left:5px;vertical-align:middle;border-radius:3px;
  background:url(../favicons/favicon-sm.png) center/contain no-repeat;opacity:.9;cursor:help;transition:opacity .15s,transform .1s}
.db-cu:hover,.db-cu:focus-visible{opacity:1}
.db-cu:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.db-cu:active{transform:scale(.92)}
.db-cu-l{width:20px;height:20px;margin-left:8px;vertical-align:2px}
.db-itw{display:inline-flex;align-items:center;max-width:100%;vertical-align:middle}
.db-itw>.db-link{min-width:0}
.db-suggest .db-nm-cu{display:flex;align-items:center}
.db-suggest .db-nm-cu>span:first-child,.db-suggest .db-nm-cu small{min-width:0;overflow:hidden;text-overflow:ellipsis}
.db-suggest .db-nm-cu small{flex-shrink:100}
.db-suggest .db-cu{width:13px;height:13px;cursor:inherit}
.db-ptip.db-ptip-w{box-sizing:border-box;max-width:min(320px,calc(100vw - 16px));white-space:normal}
/* бэдж праздника у задания (_macros.twig tag): тыквенный; сторона — цвет стороны */
.db-tag-ev{border-color:rgba(255,150,60,.45);color:#ffb56b}
/* колонка «Условие» (_macros.twig cond): задание — золото, особое условие — янтарь, праздник — тыквенный, сторона — её цвет,
   профессия — обычный текст; подсказка — в title. На узком экране колонки нет — строка под названием (db-cond-line) */
.db-table td.db-cond{font-size:12.5px;white-space:nowrap}
.db-cond span,.db-cond-line span{cursor:help;border-bottom:1px dotted rgba(255,255,255,.25)}
.db-cond-q{color:#d9be4a}
.db-cond-c{color:#e0a85a}
.db-cond-e{color:#ffb56b}
.db-cond-a{color:#7aa8ff}
.db-cond-h{color:#ff7a6e}
.db-cond-s{color:var(--mw-text)}
.db-cond-line{display:none}
.db-tag-a{border-color:rgba(79,142,255,.45);color:#7aa8ff}
.db-tag-h{border-color:rgba(255,74,61,.45);color:#ff7a6e}
.db-tag[title]{cursor:help}
.db-boss{color:#ff6a5c;font-weight:600}
.db-rank{color:var(--mw-head)}
.db-rank-3{color:#ff6a5c}.db-rank-1,.db-rank-2{color:#ffd100}.db-rank-4{color:#c0c8d4}
.db-react{display:inline-flex;gap:5px;font:700 11.5px/1 var(--mw-title)}
.db-react b{font-weight:700}
.db-react .f{color:#3dd65a}.db-react .n{color:#ffd100}.db-react .h{color:#ff4a3d}
.db-side-a{color:#4f8eff}.db-side-h{color:#ff4a3d}
.db-later td{opacity:.62}
.db-later td:first-child{opacity:1}

/* деньги и валюта */
.dbm{display:inline-flex;gap:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dbm span::after{content:'';display:inline-block;width:9px;height:9px;margin-left:3px;border-radius:50%;vertical-align:0;box-shadow:inset 0 -1px 0 rgba(0,0,0,.35)}
.dbm-g::after{background:#e8b923}.dbm-s::after{background:#c5ccd6}.dbm-c::after{background:#c8733c}
.db-cost{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.db-cur{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;color:var(--mw-head)!important;white-space:nowrap}
/* значки с Wowpedia: честь — герб стороны торговца (db-cur-a / -h), у общих — половинки обоих; арена — значок 2.4.3 */
.db-cur-honor::before,.db-cur-arena::before{content:'';flex:none;width:20px;height:20px;background:url(../../dbimg/ui/honor.png) center/contain no-repeat}
.db-cur-a::before{background-image:url(../../dbimg/ui/honor_a.png)}.db-cur-h::before{background-image:url(../../dbimg/ui/honor_h.png)}
.db-cur-arena::before{background-image:url(../../dbimg/ui/arena.png)}
/* реагенты: значки с числом — flex во внутренней обёртке; сама ячейка остаётся table-cell (ровная линия строки, середина по высоте) */
.db-reag{display:flex;flex-wrap:wrap;gap:4px 10px}

/* ---------- раскладка карточки ---------- */
.db-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.db-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.db-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.db-card{border:1px solid var(--db-line);border-radius:6px;background:var(--db-panel);padding:16px 18px;min-width:0}
.db-card h2{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:10px}
/* серая пометка у заголовка блока («за 7 дней» у «Популярного») */
.db-h2-note{margin-left:8px;font:500 12px var(--mw-sans);letter-spacing:0;text-transform:none;color:var(--mw-muted)}
.db-empty{color:var(--mw-muted);font-size:13.5px}
.db-note{padding:12px 14px;color:var(--mw-muted);font-size:13.5px}
.db-note-ph{color:var(--db-ph)}
.db-note-ev{color:#ffb56b}
.db-tt{max-width:100%;padding:2px}

/* сведения */
.db-facts{margin:0;border:1px solid var(--db-line);border-radius:6px;background:var(--db-panel)}
.db-facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 14px;border-top:1px solid var(--db-line2);font-size:13.5px}
.db-facts>div:first-child{border-top:0}
.db-facts dt{flex:none;color:var(--mw-muted);font-weight:400}
.db-facts dd{margin:0;min-width:0;color:var(--mw-head);text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.db-facts-in{margin-top:12px;border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.db-facts-in>div{padding:7px 0}
.db-side-box{border:1px solid var(--db-line);border-radius:6px;background:var(--db-panel);padding:12px 14px}
.db-side-box h3{font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px;color:var(--mw-muted)}
.db-side-box li{padding:4px 0;font-size:13.5px}
/* «Похожие» под вкладками карточки предмета и НПС (_macros.twig sim, макет mockups/item-rel/rel-4.html): лента плиток —
   картинка (иконка предмета, портрет боя), название, у НПС зона; восемь в строку, на узком экране листается вбок */
.db-sim{margin-top:20px;border:1px solid var(--db-line);border-radius:6px;background:var(--db-panel);min-width:0}
.db-sim-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--db-line2)}
.db-sim-h h2{margin:0;font:700 11.5px/1.3 var(--mw-sans);letter-spacing:.8px;text-transform:uppercase;color:var(--mw-muted)}
.db .db-sim-all{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:13px;color:var(--mw-muted)}
.db .db-sim-all:hover{color:var(--mw-head)}
.db-sim-all svg{width:13px;height:13px}
.db-sim-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr))}
.db-sim-it{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:12px 14px 11px;box-shadow:inset -1px 0 0 var(--db-line2);
  transition:background-color .15s}
.db-sim-it:last-child{box-shadow:none}
.db-sim-it:hover{background:rgba(255,255,255,.035)}
.db-sim-it:focus-visible,.db-sim-all:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--mw-link);border-radius:4px}
.db-sim-it .db-ic,.db-sim-img{transition:box-shadow .15s,transform .1s}
.db-sim-it:hover .db-ic{box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.db-sim-it:active .db-ic,.db-sim-it:active .db-sim-img{transform:scale(.96)}
.db-sim-img{display:block;width:96px;height:48px;object-fit:contain;object-position:left center}
.db-sim-nm{font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.db-sim-it:hover .db-sim-nm{text-decoration:underline;text-underline-offset:2px}
.db-sim-z{margin-top:-5px;font-size:12px;line-height:1.35;color:var(--mw-muted)}
@media(prefers-reduced-motion:reduce){.db-sim-it,.db-sim-it .db-ic,.db-sim-img{transition:none}}
.db-chain{counter-reset:ch}
.db-chain li{position:relative;padding-left:24px!important;counter-increment:ch}
.db-chain li::before{content:counter(ch);position:absolute;left:0;top:5px;width:17px;height:17px;border-radius:50%;border:1px solid var(--db-line);
  font:600 10.5px/16px var(--mw-sans);text-align:center;color:var(--mw-muted)}
.db-chain li.cur::before{border-color:rgba(143,216,255,.6);color:var(--mw-link)}
.db-chain li.cur b{color:var(--mw-head);font-weight:600}
/* связи задания (_qopts.twig): варианты строками, «одно из» / «все» — подпись над ними, «+» — нужны все */
.db-chain-opt{display:block}
.db-chain-opt+.db-chain-opt{margin-top:3px}
.db-chain-lbl{display:block;font-size:11.5px;font-weight:500;line-height:17px;color:var(--mw-muted)}
.db-chain-and{margin:0 5px;color:var(--mw-muted)}
.db-qlinks{font-size:13.5px}
.db-qlinks .db-chain-opt{padding:2px 0}
.db-qlinks b{color:var(--mw-head);font-weight:600}

/* задание */
.db-quest-text p{font-size:14.5px;line-height:1.65;color:var(--mw-text)}
.db-req{margin-top:12px!important;display:flex;flex-direction:column;gap:6px}
.db-req li{display:flex;align-items:center;gap:6px;font-size:14px}
.db-req li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--mw-muted);flex:none;margin-right:4px}
.db-req li.has-pt::before{width:7px;height:7px;margin:0 3px 0 -1px;background:var(--qc,#ff6a3c);box-shadow:0 0 0 2px rgba(5,8,14,.55)}   /* цель на карте — цвет её меток */
/* строка под целью: «засчитывается за убийство: …» (KillCredit), с отступом под текст цели */
.db-req li.db-credit{display:block;margin-top:-3px;padding-left:15px;font-size:12.5px;line-height:1.5;color:var(--mw-muted)}
.db-req li.db-credit::before{display:none}
.db-given{margin-top:12px!important;font-size:13.5px;color:var(--mw-muted)}
.db-hint{margin:4px 0 8px!important;font-size:13px!important;color:var(--mw-muted)!important}
.db-items2{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 16px;margin-bottom:6px!important}
.db-more-text{padding:0}
.db-more-text summary{padding:13px 18px;cursor:pointer;list-style:none;font:700 12px var(--mw-title);letter-spacing:.8px;text-transform:uppercase;color:var(--mw-head)}
.db-more-text summary::-webkit-details-marker{display:none}
.db-more-text summary::after{content:'+';float:right;color:var(--mw-muted);font-size:15px;line-height:1}
.db-more-text[open] summary::after{content:'−'}
.db-more-text p{padding:0 18px 16px}
.db-buff p{color:var(--mw-text)}
.db-list2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.db-list2 li{padding:3px 0}
/* эффекты заклинания (spell.twig): номер, у ауры — пометка эффекта, название · расшифровка, значение справа моноширинным;
   ниже цель, радиус, период и ссылки на то, что эффект вызывает или создаёт */
.db-eff li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:12px;padding:10px 0;border-top:1px solid var(--db-line2)}
.db-eff li:first-child{padding-top:2px;border-top:0}
.db-eff li:last-child{padding-bottom:0}
.db-eff-n{width:18px;height:18px;margin-top:1px;border:1px solid var(--db-line);border-radius:50%;font:600 10.5px/16px var(--mw-sans);text-align:center;
  color:var(--mw-muted);font-variant-numeric:tabular-nums}
.db-eff-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:14px;line-height:1.45}
.db-eff-h b{font-weight:600;color:var(--mw-head)}
.db-eff-k{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--mw-muted)}
.db-eff-d{color:var(--mw-text)}
.db-eff-d::before{content:'·';margin-right:8px;color:var(--mw-muted)}
.db-eff-v{font:500 13px/20px var(--db-mono);color:var(--mw-head);font-variant-numeric:tabular-nums;white-space:nowrap}
.db-eff-m{display:flex;flex-wrap:wrap;gap:2px 16px;margin-top:3px;font-size:12.5px;color:var(--mw-text)}
.db-eff-m i,.db-eff-l i{font-style:normal;color:var(--mw-muted)}
.db-eff-l{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px;font-size:13.5px}
.db-eff-l i{font-size:12.5px}
/* текущий ранг во вкладке «Ранги» */
.db-table tbody tr.on td{background:rgba(143,216,255,.07)}
.db-table tbody tr.on .db-link span{color:var(--mw-head);font-weight:600}
.db-book .db-page{white-space:normal;font-size:14px;line-height:1.65}
.db-book .db-page+.db-page{margin-top:14px;padding-top:14px;border-top:1px solid var(--db-line2)}
/* размеченная страница книги (lib/objects.php dbPageHtml): заголовок, абзацы, выравнивание */
.db-page .db-page-h{display:block;margin:0 0 8px;font-size:15px;font-weight:700;line-height:1.4;color:var(--mw-head)}
.db-page p{margin:0 0 8px}
.db-page p:last-child,.db-page .db-page-h:last-child{margin-bottom:0}
.db-page .db-page-c{text-align:center}
.db-page .db-page-r{text-align:right}

/* ---------- вкладки и таблицы ---------- */
.db-tabs{margin-top:26px;border:1px solid var(--db-line);border-radius:6px;background:var(--db-panel);min-width:0}
.db-tabs-list{margin-top:12px}
.db-tabbar{display:flex;align-items:center;gap:12px;padding:10px;border-bottom:1px solid var(--db-line)}
/* вкладки — сегментный переключатель: дорожка, выбранную вкладку подсвечивает плашка (макет mockups/db-tabs.html, вариант 1) */
.db-tablist{position:relative;display:flex;gap:2px;min-width:0;padding:3px;border:1px solid var(--db-line);border-radius:8px;background:rgba(0,0,0,.28);
  overflow-x:auto;scrollbar-width:none}
.db-tablist::-webkit-scrollbar{display:none}
.db-tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px!important;border:0!important;border-radius:5px;
  font-size:13px!important;font-weight:600!important;color:var(--mw-muted)!important;white-space:nowrap;cursor:pointer;transition:color .15s,transform .1s}
.db-tab:hover,.db-tab.on{color:var(--mw-head)!important}
.db-tab:active{transform:scale(.98)}
.db-n{display:inline-block;min-width:20px;padding:0 6px;border:1px solid var(--db-line);border-radius:9px;font-size:11px;line-height:17px;font-weight:600;
  text-align:center;color:var(--mw-muted);font-variant-numeric:tabular-nums}
.db-n{transition:border-color .2s,color .2s}
.db-tab .db-n{min-width:0;padding:0;border:0;font:500 11.5px/1 var(--db-mono)}
.db-tab.on .db-n{color:var(--mw-link)}
/* плашка выбранной вкладки: db.js ставит её под вкладку и плавно переносит при переключении; без JS и на поиске (вкладки-ссылки) — фон .db-tab.on */
.db-tab.on,.db-tabline{background:rgba(255,255,255,.085);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.db-tabline{position:absolute;top:3px;left:0;width:0;height:28px;border-radius:5px;pointer-events:none}
.db-tabline.ready{transition:transform .28s cubic-bezier(.2,.8,.2,1),width .28s cubic-bezier(.2,.8,.2,1)}
.db-tablist.has-line .db-tab.on{background:none;box-shadow:none}
.db-tablist .db-tab:focus-visible,.db-tablist.has-line .db-tab.on:focus-visible{box-shadow:inset 0 0 0 1px var(--mw-link)}
.db-tabs.anim{overflow:hidden}/* пока db.js плавно меняет высоту блока под новую вкладку */
@media(prefers-reduced-motion:reduce){.db-tabline.ready{transition:none}}
.db-filter{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto;height:36px;padding:0 10px;border:1px solid var(--db-line);border-radius:8px;background:rgba(0,0,0,.28)}
.db-filter:focus-within{border-color:rgba(143,216,255,.5)}
.db-tabbar label{margin-bottom:0}/* у label из bootstrap отступ снизу 5px — фильтр и списки вставали выше вкладок */
.db-filter svg{width:13px;height:13px;color:var(--mw-muted)}
.db-filter input{width:170px;height:28px;font-size:13px;color:var(--mw-head)}
/* поиск: «Копировать ID» перед фильтром — прижимает к правому краю их обоих; тихая, в цвет поля фильтра */
.db-tabbar .db-ids{flex:none;gap:6px;margin-left:auto;height:36px;padding:0 10px!important;border-radius:8px!important;background:rgba(0,0,0,.28)!important;
  font-size:13px;color:var(--mw-muted)!important}
.db-tabbar .db-ids svg{width:13px;height:13px}
.db-tabbar .db-ids:hover{color:var(--mw-head)!important}
.db-tabbar .db-ids.ok{color:#9be79b!important}
.db-ids+.db-filter{margin-left:0}
.db-panel{display:none}
.db-panel.on{display:block}
.db-scroll{overflow-x:auto}
.db-more{padding:10px 14px;border-top:1px solid var(--db-line2);font-size:12.5px;color:var(--mw-muted)}
/* «Показать ещё» под длинной таблицей вкладки (db.js capTable): слева «Показано N из M», справа кнопки. margin-top -1px —
   своя линия ложится на нижнюю линию последней видимой строки, а не второй чертой под ней */
.db-cap{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:-1px;padding:8px 10px 8px 16px;font-variant-numeric:tabular-nums}
.db-cap[hidden]{display:none}
.db-cap-t:empty{display:none}
.db-cap-b{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.db-cap .db-btn{height:28px;padding:0 11px!important;font-size:12.5px}
.db-cap .db-btn[hidden]{display:none}
.db-table tr.cut{display:none}
/* урезанная вкладка (lib/tabrows.php, db.js loadRows): пока строки идут с сервера — таблица приглушена; у таблицы с группами
   после первых отдельных строк — строка «Показать ещё N» */
.db-panel .db-scroll{transition:opacity .15s}
.db-panel.db-busy .db-scroll,.db-panel.db-busy .db-cap{opacity:.55;cursor:progress}
.db-table th.wait{cursor:progress;color:var(--mw-head)}
.db-table tr.db-cut-r td{padding-top:8px;padding-bottom:8px}
.db-table tbody tr.db-cut-r:hover{background:none}
.db-cut-r .db-btn{height:28px;padding:0 11px!important;font-size:12.5px}
/* фильтр ничего не нашёл (_macros.twig nofit, db.js countBox): надпись и «Сбросить фильтр» вместо пустой таблицы */
.db-nofit{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:16px;font-size:13.5px;color:var(--mw-muted)}
.db-nofit[hidden]{display:none}
.db-nofit .db-btn{height:30px;font-size:12.5px}
@media(prefers-reduced-motion:reduce){.db-panel .db-scroll{transition:none}}

.db-table{width:100%;border-collapse:collapse;font-size:13.5px}
.db-table th{padding:9px 12px;border-bottom:1px solid var(--db-line);text-align:left;font:600 11px/1.3 var(--mw-sans);letter-spacing:.5px;text-transform:uppercase;
  color:var(--mw-muted);white-space:nowrap;background:none}
.db-table th[data-sort]{cursor:pointer;user-select:none;transition:color .15s}
.db-table th[data-sort]:hover{color:var(--mw-head)}
.db-table th.asc::after,.db-table th.desc::after{display:inline-block;margin-left:4px;color:var(--mw-link)}
.db-table th.asc::after{content:'↑'}
.db-table th.desc::after{content:'↓'}
.db-table td{padding:7px 12px;border-bottom:1px solid var(--db-line2);vertical-align:middle;color:var(--mw-text)}
.db-table tbody tr:last-child td{border-bottom:0}
.db-table tbody tr{transition:background-color .1s}
.db-table tbody tr:hover{background:rgba(255,255,255,.03)}
.db-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.db-table td:first-child,.db-table th:first-child{padding-left:16px}
.db-table td:last-child,.db-table th:last-child{padding-right:16px}
.db-table tr.hide{display:none}
/* группы лута «выпадает 1 из N»: каждая — свой tbody со строкой-заголовком (db.js): .closed — свёрнута целиком; .shut — спрятаны
   редкие строки (.lo), заметные видны, кнопка «ещё N» открывает остальные; .flt — идёт фильтр, в свёрнутых видно найденное */
.db-table tbody+tbody{border-top:1px solid var(--db-line)}
.db-table tbody.hide{display:none}
.db-grp-h{cursor:pointer}
.db-grp-h td{padding-top:6px;padding-bottom:6px;background:rgba(255,255,255,.025);transition:background-color .15s}
.db-table tbody tr.db-grp-h:hover{background:none}
.db-grp-h:hover td{background:rgba(255,255,255,.05)}
.db-grp-t{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px 8px;font-size:12.5px!important;line-height:1.5;color:var(--mw-text)!important;cursor:pointer}
.db-grp-t:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link);border-radius:3px}
.db-grp-t svg{flex:none;width:12px;height:12px;margin:0 -2px 0 -1px;color:var(--mw-muted);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.db-grp-t[aria-expanded=true] svg,.db-table.flt .db-grp-t svg{transform:rotate(90deg)}
.db-grp.closed>tr:not(.db-grp-h){display:none}
.db-grp.closed .db-grp-h td{border-bottom:0}
.db-grp-t b{font-weight:600;color:var(--mw-head)}
.db-grp-q{font-weight:500}
.db-grp-d{color:var(--mw-muted)}
.db-grp-h .num{font-weight:600;color:var(--mw-head)}
.db .db-grp-more{margin-left:8px;padding:0 7px;border:1px solid var(--db-line);border-radius:9px;font-size:11px;line-height:17px;
  color:var(--mw-muted);font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .15s,color .15s}
.db .db-grp-more:focus-visible{outline:none;border-color:var(--mw-link)}
.db .db-grp-more:hover{border-color:rgba(143,216,255,.4);color:var(--mw-head)}
.db-grp:not(.shut) .db-grp-more,.db-table.flt .db-grp-more{display:none}
.db-grp.shut>tr.lo{display:none}
.db-table.flt .db-grp.shut>tr.lo:not(.hide),.db-table.flt .db-grp.closed>tr:not(.hide){display:table-row}
@media(prefers-reduced-motion:reduce){.db-grp-t svg{transition:none}}
/* способности НПС: подпись под названием — с отступом на ширину иконки (20px + зазор ссылки 8px) */
.db-table .db-ab-note{display:block;margin:2px 0 0 28px;font-size:12px;line-height:1.45}

/* ---------- карта ---------- */
.db-map{border:1px solid var(--db-line);border-radius:6px;background:var(--db-panel);padding:14px}
.db-map-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:10px}
.db-map h2{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.db-zones{display:flex;flex-wrap:wrap;gap:6px}
.db-zone{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px!important;border:1px solid var(--db-line)!important;border-radius:14px!important;
  font-size:12.5px!important;color:var(--mw-text)!important;cursor:pointer}
.db-zone:hover{border-color:rgba(143,216,255,.4)!important;color:var(--mw-head)!important}
.db-zone.on{border-color:rgba(143,216,255,.55)!important;background:rgba(143,216,255,.1)!important;color:var(--mw-head)!important}
.db-zone-one{font-size:13px;color:var(--mw-muted)}
.db-map-z{display:none}
.db-map-z.on{display:block}
.db-map-img{position:relative;border-radius:6px;overflow:hidden;line-height:0;background:#05080e}
.db-map-img img{display:block;width:100%;height:auto}
.db-pt{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#8ff3ff;
  box-shadow:0 0 0 2px rgba(5,8,14,.75),0 0 10px rgba(143,243,255,.85);transition:transform .12s,opacity .15s}
.db-pt:hover{transform:scale(1.6);z-index:3}
/* метка, подсвеченная из списка (бои подземелья, js/db.js) */
.db-pt.hl{z-index:3;transform:scale(1.8)}
@media(prefers-reduced-motion:reduce){.db-pt{transition:none}}

/* ---------- карта задания (views/pages/db/_qmap.twig, js/db_qmap.js; данные — lib/quests.php dbQuestMap) ----------
   Значки в духе Questie: выдаёт «!» и принимает «?» — жёлтые (у ежедневного и повторяемого — синие), цели — свой значок и
   цвет (DB_QMAP_COLORS); тёмный контур — штрих под заливкой (paint-order), читается на любой карте. Облако — выпуклая
   оболочка точек с толстым скруглённым штрихом (отступ вокруг), прозрачность у группы слоя — перекрытия не темнеют.
   Метки не растут вместе с картой: scale(1 / --qs) */
.qm-zd{display:inline-flex;gap:3px}
.qm-zd:empty{display:none}
.qm-zd i{width:6px;height:6px;border-radius:50%;box-shadow:0 0 0 1px rgba(5,8,14,.7)}
.qm .db-n{font:500 11.5px var(--db-mono);color:var(--mw-muted);font-variant-numeric:tabular-nums}
.qm .db-n:empty{display:none}
.qm-lg{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:0 18px;margin:-2px 0 10px!important}
.qm-lg li{display:flex;align-items:center;gap:8px;min-width:0;min-height:30px}
.qm-lg label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;margin:0;font-size:13px;font-weight:400;line-height:1.35;color:var(--mw-text);cursor:pointer}
.qm-lg li[data-why] label{cursor:default;color:var(--mw-muted)}
.qm-lg li[data-why] .qm-ic,.qm-lg li[data-why] .qm-v{opacity:.5}
.qm-lg input{-webkit-appearance:none;appearance:none;flex:none;width:15px;height:15px;border:1px solid rgba(255,255,255,.3)!important;border-radius:4px!important;
  background:center/11px no-repeat!important;cursor:pointer}
.qm-lg input:checked{border-color:rgba(143,216,255,.7)!important;background-color:rgba(143,216,255,.16)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23eef3fa' stroke-width='2' d='M3.5 8.3l3 3 6-6.6'/%3E%3C/svg%3E")!important}
.qm-lg input:hover:not(:disabled){border-color:rgba(143,216,255,.6)!important}
.qm-lg input:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(143,216,255,.45)}
.qm-lg input:disabled{opacity:.3;cursor:default}
.qm-ic{flex:none;width:18px;height:18px}
.qm-v{flex:none;font-weight:600;color:var(--mw-head);white-space:nowrap;font-variant-numeric:tabular-nums}
.qm-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qm-w{flex:none;font-size:12px;color:var(--mw-muted);white-space:nowrap}
.qm-go{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 5px 0 9px!important;border:1px solid var(--db-line)!important;border-radius:12px!important;
  font-size:12px!important;color:var(--mw-text)!important;cursor:pointer}
.qm-go:hover{border-color:rgba(143,216,255,.45)!important;color:var(--mw-head)!important}
.qm-go:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.qm-go svg{width:12px;height:12px}
.qm-ic,.qm-mk svg,.qm-tt svg{fill:currentColor;stroke:#150e03;stroke-width:1.7px;stroke-linejoin:round;paint-order:stroke;overflow:visible}
.qm-sprite{position:absolute;width:0;height:0;overflow:hidden}
.qm-stage{position:relative;overflow:hidden;border-radius:6px;background:#05080e;aspect-ratio:772/515;touch-action:pan-y;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent}
.qm-stage[hidden]{display:none}
.qm-stage.qm-zoomed{touch-action:none;cursor:grab}
.qm-stage.qm-zoomed:active{cursor:grabbing}
.qm-world{position:absolute;inset:0;transform-origin:0 0;--qs:1}
.qm-world.qm-anim{transition:transform .16s ease-out}
.qm-world img{display:block;width:100%;height:100%;pointer-events:none}
.qm-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.qm-area,.qm-edge g,.qm-cut{fill:currentColor;stroke:currentColor;stroke-linejoin:round;stroke-linecap:round}
.qm-area{opacity:.24;transition:opacity .15s}
.qm-edge{opacity:.9;transition:opacity .15s}
.qm-edge g:first-child{opacity:.55}
.qm-dots circle{fill:currentColor;stroke:#150e03}
.qm-dots g{opacity:0;transition:opacity .15s}
.qm-near .qm-dots g,.qm-dots g.on{opacity:1}
.qm-mks{position:absolute;inset:0}
.qm-mk{position:absolute;display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin:0!important;padding:0!important;border-radius:50%!important;
  transform:translate(-50%,-50%) scale(calc(1 / var(--qs)));filter:drop-shadow(0 0 1.5px rgba(0,0,0,.85));cursor:pointer;transition:transform .12s,opacity .15s!important}
.qm-mk svg{width:22px;height:22px;flex:none}
.qm-mk.qm-g svg{width:28px;height:28px}
.qm-mk.qm-se svg{width:24px;margin:0 -6px}
.qm-mk:hover,.qm-mk[aria-expanded=true],.qm-mk.hl{z-index:2;transform:translate(-50%,-50%) scale(calc(1.3 / var(--qs)))}
.qm-mk:focus-visible{outline:none;box-shadow:0 0 0 2px #eef3fa}
.qm.qm-hl .qm-mk:not(.hl):not(.qm-g),.qm.qm-hl .qm-area:not(.hl),.qm.qm-hl .qm-edge:not(.hl){opacity:.2}
.qm-ctl{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:4px}
.qm-ctl button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid rgba(255,255,255,.16)!important;border-radius:5px!important;
  background:rgba(8,12,20,.85)!important;color:var(--mw-head)!important;cursor:pointer}
.qm-ctl button:hover{background:rgba(24,32,46,.95)!important;border-color:rgba(255,255,255,.28)!important}
.qm-ctl button:active{transform:scale(.96)}
.qm-ctl button:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.qm-ctl button[hidden]{display:none}
.qm-ctl svg{width:14px;height:14px}
.qm-xy{position:absolute;left:8px;bottom:8px;padding:1px 7px;border-radius:4px;background:rgba(5,8,14,.82);font:500 12px/1.6 var(--db-mono);color:var(--mw-head);
  font-variant-numeric:tabular-nums;pointer-events:none}
.qm-xy[hidden]{display:none}
/* подсказка метки — в body, с классом db (переменные и сброс кнопок раздела); щелчок закрепляет её: ссылки и /way */
.db.qm-tip{position:fixed;z-index:60;box-sizing:border-box;width:max-content;max-width:min(300px,calc(100vw - 16px));margin:0;padding:8px 10px 9px;
  border:1px solid rgba(255,255,255,.14);border-radius:6px;background:#0a101b;font:12.5px/1.45 var(--mw-sans);color:var(--mw-text);pointer-events:none}
.db.qm-tip.qm-pin{pointer-events:auto}
.db.qm-tip[hidden]{display:none}
.qm-tt{display:flex;align-items:flex-start;gap:6px}
.qm-tt+.qm-tt{margin-top:2px}
.qm-tt svg{flex:none;width:16px;height:16px;margin-top:1px}
.qm-tt span{color:var(--mw-head)}
.qm-tt b{font-weight:600}
.qm-tip ul{margin:4px 0 0!important;padding-left:22px!important}
.qm-tip li{line-height:1.5}
.qm-tip li i{font-style:normal;color:var(--mw-muted)}
.qm-tip li.qm-more{color:var(--mw-muted)}
.qm-pos{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin-top:5px;padding-left:22px}
.qm-pos code{font-size:12px;color:var(--mw-head)}
.qm-pos span{font-size:12px;color:var(--mw-muted)}
.qm-way{display:inline-flex;align-items:center;gap:6px;height:26px;white-space:nowrap;margin:8px 0 0 22px!important;padding:0 10px!important;border:1px solid rgba(255,255,255,.18)!important;
  border-radius:5px!important;background:rgba(255,255,255,.04)!important;font-size:12px!important;font-weight:500!important;color:var(--mw-head)!important;cursor:pointer}
.qm-way:hover{background:rgba(255,255,255,.09)!important}
.qm-way:active{transform:scale(.98)}
.qm-way:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.qm-way.ok{border-color:rgba(132,214,92,.5)!important;color:#a9e48c!important}
.qm-way svg{flex:none;width:14px;height:14px}
@media(max-width:600px){.qm-lg{grid-template-columns:1fr}.qm-lg li{padding:3px 0}.qm-nm{white-space:normal}.qm-ctl button{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.qm-world.qm-anim,.qm-mk,.qm-area,.qm-edge,.qm-dots g{transition:none!important}}
.db-ptip{position:fixed;z-index:60;pointer-events:none;padding:4px 8px;border:1px solid rgba(255,255,255,.14);border-radius:4px;background:#0a101b;
  font:12px/1.4 var(--mw-sans);color:var(--mw-head);max-width:calc(100vw - 16px)}   /* длинная подсказка цели на телефоне переносится */

/* ---------- главная раздела (pages/db/home.twig, макет mockups/db-boss/boss-3.html): лента боссов, главный блок боя, подземелья ---------- */
/* лента: сверху рейды-ярлыки и стрелки, ниже все боссы портретами группами по рейдам; колесо листает вбок, мышью тянется (js/db.js) */
.dh-strip{margin-top:14px;border:1px solid var(--db-line);border-radius:8px;background:var(--db-panel)}
.dh-top{display:flex;align-items:center;gap:12px;padding:8px 8px 0 10px}
.dh-raids{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.dh-raids::-webkit-scrollbar,.dh-view::-webkit-scrollbar{display:none}
.db .dh-raid{flex:none;height:28px;padding:0 11px;border:1px solid var(--db-line);border-radius:14px;font-size:12.5px;font-weight:600;color:var(--mw-text);
  white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .1s}
.db .dh-raid:hover{border-color:rgba(255,255,255,.22);color:var(--mw-head)}
.db .dh-raid:active{transform:scale(.97)}
.db .dh-raid.on{border-color:rgba(240,196,106,.5);background:rgba(240,196,106,.1);color:#f0c46a}
.dh-ctl{display:flex;gap:4px;flex:none}
.db .dh-arr{display:flex;align-items:center;justify-content:center;width:30px;height:28px;border:1px solid var(--db-line);border-radius:6px;color:var(--mw-text);
  cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .1s}
.dh-arr svg{width:14px;height:14px}
.db .dh-arr:hover{border-color:rgba(143,216,255,.45);color:var(--mw-link)}
.db .dh-arr:active{transform:scale(.95)}
.db .dh-arr:disabled{opacity:.3;pointer-events:none}
.db .dh-raid:focus-visible,.db .dh-arr:focus-visible,.db .dh-boss:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.dh-view{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.dh-track{display:flex;width:max-content;padding:10px 24px 10px 14px;-webkit-user-select:none;user-select:none}
.dh-grp{display:flex;flex-direction:column;flex:none;padding:0 14px 0 0}
.dh-grp+.dh-grp{padding-left:14px;box-shadow:-1px 0 0 var(--db-line2)}
.dh-gh{position:sticky;left:22px;display:flex;align-items:baseline;gap:8px;width:max-content;max-width:100%;padding:0 4px 6px;white-space:nowrap}
.dh-gh b{font:800 11.5px/1 var(--mw-title);letter-spacing:.8px;text-transform:uppercase;color:var(--mw-head)}
.dh-gh small{font-size:11px;color:var(--mw-muted)}
.dh-grp.on .dh-gh b{color:#f0c46a}
.dh-row{display:flex;gap:4px}
.db .dh-boss{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:104px;padding:6px 4px 7px;border:1px solid transparent;border-radius:7px;
  color:var(--mw-text);-webkit-user-drag:none;transition:background-color .15s,border-color .15s,color .15s,transform .1s}
.dh-boss img,.dh-boss i{display:block;width:96px;height:48px;object-fit:contain;object-position:center bottom;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.dh-boss i,.dh-ir i{background:radial-gradient(closest-side,rgba(255,255,255,.06),transparent)}
.dh-boss span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em;font-size:12px;line-height:1.25;text-align:center}
.db .dh-boss:hover{background:rgba(255,255,255,.04);color:var(--mw-head)}
.dh-boss:hover img{transform:translateY(-2px) scale(1.04)}
.db .dh-boss:active{transform:scale(.97)}
.db .dh-boss.on{border-color:rgba(143,216,255,.42);background:rgba(63,168,232,.1);color:#fff}
.dh-view.is-drag{cursor:grabbing}
.dh-view.is-drag .dh-boss{pointer-events:none}

/* главный блок: кадр (data-mode: cover — во всю ширину, bp — кадр не собран, портрет боя на размытой обложке рейда), поверх —
   рейд и имя; ниже описание с кнопками и добыча в две колонки. Смена боя — класс is-sw (js/db.js) */
.dh-hero{position:relative;margin-top:14px;border:1px solid var(--db-line);border-radius:8px;overflow:hidden;background:var(--db-panel)}
.dh-hero-img{position:relative;display:block;height:430px;--dh-fade:linear-gradient(to bottom,#000 40%,rgba(0,0,0,.738) 51.4%,rgba(0,0,0,.541) 60.4%,rgba(0,0,0,.382) 68.2%,rgba(0,0,0,.278) 73.9%,rgba(0,0,0,.194) 79%,rgba(0,0,0,.126) 83.8%,rgba(0,0,0,.075) 88.1%,rgba(0,0,0,.042) 91.7%,rgba(0,0,0,.021) 94.6%,rgba(0,0,0,.008) 97.1%,rgba(0,0,0,.002) 98.9%,transparent 100%)}
.dh-hero-img img{position:absolute;top:0;left:0;width:100%;height:calc(100% + 170px);object-fit:cover;object-position:50% 30%;
  -webkit-mask-image:var(--dh-fade);mask-image:var(--dh-fade);transition:opacity .17s ease}
.dh-hero-o{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:120px 30px 24px;z-index:1;isolation:isolate;
  transition:opacity .17s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.dh-hero-o::before{content:'';position:absolute;inset:0 0 -170px;z-index:-1;background:linear-gradient(to right,rgba(7,11,18,.6) 0%,rgba(7,11,18,.25) 50%,transparent 80%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 50%,rgba(0,0,0,.738) 59.5%,rgba(0,0,0,.541) 67%,rgba(0,0,0,.382) 73.5%,rgba(0,0,0,.278) 78.2%,rgba(0,0,0,.194) 82.5%,rgba(0,0,0,.126) 86.5%,rgba(0,0,0,.075) 90.1%,rgba(0,0,0,.042) 93%,rgba(0,0,0,.021) 95.5%,rgba(0,0,0,.008) 97.6%,rgba(0,0,0,.002) 99.1%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 50%,rgba(0,0,0,.738) 59.5%,rgba(0,0,0,.541) 67%,rgba(0,0,0,.382) 73.5%,rgba(0,0,0,.278) 78.2%,rgba(0,0,0,.194) 82.5%,rgba(0,0,0,.126) 86.5%,rgba(0,0,0,.075) 90.1%,rgba(0,0,0,.042) 93%,rgba(0,0,0,.021) 95.5%,rgba(0,0,0,.008) 97.6%,rgba(0,0,0,.002) 99.1%,transparent 100%)}
.dh-zone{font-size:14px;font-weight:600;color:#f0c46a;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.dh-name{font:800 46px/1.02 var(--mw-title);text-transform:uppercase;letter-spacing:.2px;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.dh-hero-b{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:0 36px;padding:22px 30px;
  transition:opacity .17s ease}
.dh-hero-t,.dh-hero-l{min-width:0}
.db .dh-hero-t p{font-size:15.5px;line-height:1.65;color:var(--mw-text)}
.dh-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.db .dh-sub{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 4px;padding-bottom:8px;border-bottom:1px solid var(--db-line);
  font:800 12px/1 var(--mw-title);letter-spacing:1px;text-transform:uppercase;color:var(--mw-head)}
.dh-sub span{font:400 11.5px/1 var(--mw-sans);letter-spacing:0;text-transform:none;color:var(--mw-muted)}
.dh-loot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.dh-loot li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:5px 0}
.dh-loot .db-link{min-width:0;gap:10px}
.dh-in{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.dh-in span{overflow:hidden;font-size:13.5px;white-space:nowrap;text-overflow:ellipsis;transition:filter .15s}
.dh-in small{overflow:hidden;font-size:11.5px;color:var(--mw-muted);white-space:nowrap;text-overflow:ellipsis}
/* наведение — без подчёркивания, название вещи светлеет */
.db .dh-loot .db-link:hover span{text-decoration:none}
.dh-loot .db-link:hover .dh-in span{filter:brightness(1.35)}
.dh-ch{flex:none;font:600 12px/1 var(--mw-sans);color:var(--mw-text);font-variant-numeric:tabular-nums}
.dh-hero.is-sw .dh-img,.dh-hero.is-sw .dh-bg,.dh-hero.is-sw .dh-hero-b{opacity:0}
.dh-hero.is-sw .dh-hero-o{opacity:0;transform:translateY(6px);transition-duration:.17s}
.dh-bg{display:none}
.dh-hero[data-mode=bp] .dh-bg{display:block;object-position:50% 40%;filter:blur(26px) brightness(.5) saturate(1.15);transform:scale(1.15)}
/* портрет боя 128×64 — скриншот ещё не залит: вдвое, не больше, иначе мылит */
.dh-hero[data-mode=bp] .dh-img{left:auto;right:10%;top:110px;width:256px;height:128px;object-fit:contain;
  -webkit-mask-image:linear-gradient(to bottom,#000 65%,transparent);mask-image:linear-gradient(to bottom,#000 65%,transparent)}

/* подземелья TBC: плитки 4×4 — портрет последнего боя, название, комплекс и уровни */
.dh-sec{margin-top:40px}
.db .dh-h{display:flex;align-items:center;gap:14px;margin:0 0 16px;font:800 18px/1.1 var(--mw-title);letter-spacing:1px;text-transform:uppercase;color:var(--mw-head)}
.db .dh-more{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font:400 13px/1 var(--mw-sans);letter-spacing:0;text-transform:none;white-space:nowrap}
.dh-more svg{width:12px;height:12px;transition:transform .15s}
.dh-more:hover svg{transform:translateX(2px)}
.dh-ix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 20px;padding:4px 16px;border:1px solid var(--db-line);border-radius:8px;background:var(--db-panel)}
.db .dh-ir{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 0;border-top:1px solid var(--db-line2);color:var(--mw-text)}
.db .dh-ir:nth-child(-n+4){border-top:0}
.dh-ir img,.dh-ir i{flex:none;width:56px;height:34px;border-radius:5px;background-color:rgba(255,255,255,.035);object-fit:contain;object-position:center bottom;
  box-shadow:0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .15s,transform .15s}
.dh-ir span{display:flex;flex-direction:column;gap:3px;min-width:0}
.dh-ir b{overflow:hidden;font-size:13px;font-weight:600;line-height:1.3;color:var(--mw-head);white-space:nowrap;text-overflow:ellipsis;transition:color .15s}
.dh-ir small{overflow:hidden;font-size:11px;color:var(--mw-muted);white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.dh-ir em{font-style:normal;color:var(--mw-text)}
.dh-ir:hover b{color:var(--mw-link)}
.dh-ir:hover img{box-shadow:0 0 0 1px var(--mw-link)}
.dh-ir:active img{transform:scale(.98)}
.db .dh-ir:focus-visible{outline:1px solid var(--mw-link);outline-offset:2px;border-radius:4px}
@media(max-width:1199px){
  .dh-ix{grid-template-columns:repeat(3,minmax(0,1fr))}
  .db .dh-ir:nth-child(n){border-top:1px solid var(--db-line2)}
  .db .dh-ir:nth-child(-n+3){border-top:0}
}
@media(max-width:900px){
  .dh-ix{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db .dh-ir:nth-child(n){border-top:1px solid var(--db-line2)}
  .db .dh-ir:nth-child(-n+2){border-top:0}
  .dh-hero-b{grid-template-columns:minmax(0,1fr);gap:20px}
  .dh-hero-img{height:360px}
  .dh-name{font-size:36px}
}
@media(max-width:600px){
  .dh-ctl{display:none}
  .db .dh-boss{width:92px}
  .dh-boss img,.dh-boss i{width:84px;height:42px}
  .dh-hero-b{padding:16px}
  .dh-hero-o{padding:90px 16px 16px}
  .dh-hero-img{height:300px}
  .dh-name{font-size:28px}
  .dh-hero[data-mode=bp] .dh-img{right:4%;top:60px}
  .dh-loot{grid-template-columns:minmax(0,1fr)}
  .dh-sec{margin-top:30px}
  .db .dh-h{font-size:16px}
  .db .dh-more{display:none}
  .dh-ix{grid-template-columns:minmax(0,1fr);padding:4px 14px}
  .db .dh-ir:nth-child(n){border-top:1px solid var(--db-line2)}
  .db .dh-ir:first-child{border-top:0}
}
@media(prefers-reduced-motion:reduce){
  .dh-raid,.dh-arr,.dh-boss,.dh-boss img,.dh-hero-img img,.dh-hero-o,.dh-hero-b,.dh-zone,.dh-name,.dh-more svg,.dh-ir img,.dh-ir b,.db-chips a{transition:none!important}
}

/* ярлыки-ссылки (поиск: ответ сокращения — подземелья, комплекты) */
.db-chips{display:flex;flex-wrap:wrap;gap:6px}
.db-chips a{padding:4px 10px;border:1px solid var(--db-line);border-radius:14px;font-size:12.5px;color:var(--mw-text);transition:border-color .15s,color .15s,transform .1s}
.db-chips a:hover{border-color:rgba(143,216,255,.45);color:var(--mw-head)}
.db-chips a:active{transform:scale(.97)}

/* ---------- списки: фильтры, сортировка, страницы ---------- */
.db-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;padding:14px;border:1px solid var(--db-line);border-radius:6px;background:var(--db-panel)}
.db-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.db-f>span{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--mw-muted)}
.db-f input,.db-f select{height:34px;padding:0 10px!important;border:1px solid var(--db-line)!important;border-radius:5px!important;background:rgba(0,0,0,.35)!important;
  font-size:13.5px!important;color:var(--mw-head)!important}
.db-f select{padding-right:6px!important;min-width:140px;max-width:220px}
.db-f select option{background:#0b1220;color:var(--mw-head)}
.db-f input:focus,.db-f select:focus{border-color:rgba(143,216,255,.55)!important}
.db-f-q input{width:220px}
.db-f-rng{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:5px 6px}
.db-f-rng>span{width:100%}
.db-f-rng input{width:70px}
.db-f-chk{flex-direction:row;align-items:center;gap:7px;height:34px;cursor:pointer}
.db-f-chk>span{font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--mw-text)}
.db-f-chk input{width:15px;height:15px;padding:0!important;accent-color:#8fd8ff}
.db-f-act{display:flex;gap:8px;margin-left:auto}
.db-f-act .db-btn{height:34px}
.db-sortbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:12px;font-size:13px}
.db-sortbar a{color:var(--mw-text)}
.db-sortbar a.on{color:var(--mw-link)}
/* нумерация страниц списка (list.twig): «← Назад 1 … 6 7 8 9 10 … 522 Дальше →», текущая — как основная кнопка;
   на телефоне — стрелки без слов и «1 … 8 … 522», кнопки по 40 px */
.db-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:16px;font-size:13px}
.db-pg-nums,.db-pg-m{display:flex;align-items:center;gap:4px}
.db-pg-m{display:none}
.db .db-pg{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;height:32px;padding:0 9px;border:1px solid var(--db-line);
  border-radius:5px;background:rgba(0,0,0,.3);color:var(--mw-head);font-variant-numeric:tabular-nums;text-decoration:none;white-space:nowrap;
  transition:border-color .15s,background-color .15s,color .15s,transform .1s}
.db .db-pg svg{width:14px;height:14px;flex:none}
.db a.db-pg:hover{border-color:rgba(143,216,255,.45);background:rgba(0,0,0,.45);color:var(--mw-head)}
.db a.db-pg:active{transform:scale(.97)}
.db a.db-pg:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.db .db-pg.on,.db a.db-pg.on:hover{border-color:rgba(143,216,255,.5);background:rgba(63,168,232,.14);color:var(--mw-link)}
.db .db-pg.off{opacity:.4;cursor:default}
.db-pg-arr{margin:0 4px}
.db-pg-gap{min-width:16px;text-align:center;color:var(--mw-muted)}
@media (pointer:coarse),(max-width:640px){.db .db-pg{min-width:40px;height:40px;padding:0 10px}}
@media(max-width:640px){
  .db-pager{gap:4px}
  .db-pg-nums{display:none}
  .db-pg-m{display:flex}
  .db-pg-arr{margin:0}
  .db-pg-arr span{display:none}
}
@media(prefers-reduced-motion:reduce){.db .db-pg{transition:none}}
.db-empty{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 14px;font-size:13.5px;color:var(--mw-muted)}
/* предметы: класс, откуда, «характеристика не меньше» (list.twig, .db-fx) — под первой строкой фильтров строки «подпись
   слева — поля справа»; «Откуда» — флажки-чипы, отмеченный подсвечен как вкладка зоны карты; пара «характеристика +
   число» — одно поле из двух половин */
.db-fx{flex-basis:100%;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 16px;align-items:start;
  padding-top:12px;border-top:1px solid var(--db-line2)}
.db-fx-r{display:contents}
.db-fx-l{padding-top:9px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--mw-muted);white-space:nowrap}
.db-fx-c{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.db-fx select,.db-fx input[type=number]{height:34px;padding:0 10px!important;border:1px solid var(--db-line)!important;border-radius:5px!important;
  background:rgba(0,0,0,.35)!important;font-size:13.5px!important;color:var(--mw-head)!important}
.db-fx select{padding-right:6px!important;min-width:160px;max-width:240px}
.db-fx select option,.db-fx select optgroup{background:#0b1220;color:var(--mw-head)}
.db-fx select:focus,.db-fx input[type=number]:focus{position:relative;border-color:rgba(143,216,255,.55)!important}
.db-fx .db-f-chk{margin-left:4px}
.db-fx .db-f-act{margin-left:auto}
.db-chip{position:relative;display:inline-flex;cursor:pointer}
.db-chip input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.db-chip span{display:inline-flex;align-items:center;height:28px;padding:0 11px;border:1px solid var(--db-line);border-radius:14px;font-size:12.5px;font-weight:500;
  color:var(--mw-text);white-space:nowrap;-webkit-user-select:none;user-select:none;transition:border-color .15s,background-color .15s,color .15s,transform .1s}
.db-chip:hover span{border-color:rgba(143,216,255,.4);color:var(--mw-head)}
.db-chip:active span{transform:scale(.97)}
.db-chip input:checked+span{border-color:rgba(143,216,255,.55);background:rgba(143,216,255,.1);color:var(--mw-head)}
.db-chip input:checked+span::before{content:'';width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--mw-link)}
.db-chip input:focus-visible+span{box-shadow:0 0 0 1px var(--mw-link)}
.db-sp{display:inline-flex}
.db-sp[hidden],.db-sp-add[hidden]{display:none}
.db-sp select{border-radius:5px 0 0 5px!important}
.db-sp input[type=number]{width:76px;margin-left:-1px!important;border-radius:0 5px 5px 0!important;font-variant-numeric:tabular-nums}
.db-sp-add{height:34px;color:var(--mw-muted)!important}
.db-sp-add:hover{color:var(--mw-head)!important}
/* колонки фильтров в таблице предметов: заголовок — ссылка серверной сортировки, выбранная колонка ярче */
.db-table th.db-th-s a{color:inherit;transition:color .15s}
.db-table th.db-th-s a:hover{color:var(--mw-head)}
.db-table th.db-th-s a.on{color:var(--mw-link)}
.db-table th.db-th-s i{margin-left:4px;font-style:normal}
.db-table td.db-td-s{color:var(--mw-head)}
.db-table[data-type=items] td:first-child{min-width:180px}
/* самоцветы и чары (list.twig, таблицы gems / enchants): цвет — значки гнёзд и подпись (на узком экране — строкой под
   названием), эффект ярче остальных колонок, под ним мелко «уникальный (надетый)» и условие мета-камня; строка-пояснение
   под фильтрами (.db-lnote: «показаны и чары на оружие», ссылка на самоцветы) */
.db-lnote{margin-top:12px;font-size:13px;color:var(--mw-muted)}
.db-gc{white-space:nowrap}
.db-gsock{display:inline-flex;gap:2px;margin-right:8px;vertical-align:-2px}
.db-gsock img{display:block;width:14px;height:14px}
.db-table td.db-eff{min-width:200px;color:var(--mw-head)}
.db-eff small{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--mw-muted)}
.db-esrc{white-space:nowrap}
.db-table[data-type=gems] td:first-child,.db-table[data-type=enchants] td:first-child{min-width:190px}
@media(max-width:640px){
  .db-table td.db-eff{min-width:0}
  .db-table[data-type=gems] td:first-child,.db-table[data-type=enchants] td:first-child{min-width:120px}
  .db-table[data-type=gems] th,.db-table[data-type=gems] td,.db-table[data-type=enchants] th,.db-table[data-type=enchants] td{padding-left:8px;padding-right:8px}
  .db-table[data-type=gems] td:first-child,.db-table[data-type=enchants] td:first-child{padding-left:12px}
  .db-gsock{margin-right:6px}
}

/* ---------- калькулятор талантов (pages/db/talents.twig, js/talents.js) ---------- */
/* пункт в планке раздела: инструмент, а не список — отделён от списков чертой */
.db-nav-tool{display:inline-flex;align-items:center;gap:7px;position:relative;margin-left:9px}
.db-nav-tool::before{content:'';position:absolute;left:-6px;top:7px;bottom:7px;width:1px;background:var(--db-line)}
.db-nav-tool svg{width:14px;height:14px;flex:none;opacity:.85}

/* планка классов: девять равных ячеек «иконка над именем» в одной панели, текущий класс — подложка и черта его цвета */
.tc-cls{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));border:1px solid var(--db-line);border-radius:6px;background:var(--db-panel);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:hidden}
.db .tc-cls a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 9px;font-size:12.5px;color:var(--mw-nav);
  box-shadow:inset -1px 0 0 var(--db-line2);transition:background-color .15s,color .15s}
.tc-cls a:last-child{box-shadow:none}
.tc-cls .db-ic{width:30px;height:30px;border-radius:4px;filter:saturate(.6) brightness(.8);transition:filter .15s,transform .1s}
.tc-cls a span+span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db .tc-cls a:hover{background:rgba(255,255,255,.04);color:var(--c)}
.tc-cls a:hover .db-ic,.tc-cls a.on .db-ic{filter:none}
.tc-cls a:active .db-ic{transform:scale(.94)}
.db .tc-cls a.on{background:color-mix(in srgb,var(--c) 11%,transparent);color:var(--c)}
.tc-cls a.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c)}
.tc-cls a:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--mw-link)}

/* панель под деревьями: уровень, очки, кнопки */
.tc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:12px;padding:9px 10px 9px 14px;border:1px solid var(--db-line);border-radius:6px;
  background:var(--db-panel);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tc-stat{display:flex;flex-direction:column;gap:1px;min-width:0}
.tc-stat>span{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--mw-muted);white-space:nowrap}
.tc-stat>b{font:600 16px/32px var(--db-mono);color:var(--mw-head);font-variant-numeric:tabular-nums}
.tc-stat>b.over,.tc-stat.over>b{color:#ff6a5c}
.tc-stat[hidden]{display:none}
/* уровень: «−  70  +» */
.tc-step{display:inline-flex;align-items:stretch;height:32px;border:1px solid var(--db-line);border-radius:5px;background:rgba(0,0,0,.3);overflow:hidden}
.db .tc-step button{display:flex;align-items:center;justify-content:center;width:30px;color:var(--mw-muted);cursor:pointer;transition:background-color .15s,color .15s}
.db .tc-step button:hover:not(:disabled){background:rgba(255,255,255,.06);color:var(--mw-head)}
.db .tc-step button:disabled{opacity:.35;cursor:default}
.tc-step button:active:not(:disabled) svg{transform:scale(.85)}
.db .tc-step button:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--mw-link)}
.tc-step svg{width:10px;height:10px;transition:transform .1s}
.db .tc-step input{width:42px;height:auto!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;
  box-shadow:inset 1px 0 0 var(--db-line),inset -1px 0 0 var(--db-line)!important;text-align:center;font:600 15px/30px var(--db-mono);
  color:var(--mw-head)!important;-moz-appearance:textfield}
.tc-step input::-webkit-inner-spin-button,.tc-step input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.db .tc-step input:focus{background:rgba(143,216,255,.07)!important}
.tc-act{display:flex;gap:8px;margin-left:auto}
.tc-bad{margin-top:10px}

/* деревья: три панели на всю ширину, сетка 4 × 9 по центру картинки ветви. Панель непрозрачная (картинка во всю
   площадь) — размытие ей не нужно. Размеры клетки — те же числа CELL/GAP в js/talents.js */
.tc-trees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.tc-tree{border:1px solid var(--db-line);border-radius:6px;overflow:hidden;background:#05080e;min-width:0}
.tc-tree.on{border-color:rgba(255,209,0,.28)}
.tc-tree-h{position:relative;z-index:2;display:flex;align-items:center;gap:9px;height:42px;padding:0 6px 0 12px;border-bottom:1px solid var(--db-line);
  background:rgba(7,11,18,.88)}
.db .tc-tree-h h2{flex:1;min-width:0;font:700 14px/1.2 var(--mw-title);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-tree-n{font:600 15px var(--db-mono);color:var(--mw-muted);font-variant-numeric:tabular-nums}
.tc-tree.on .tc-tree-n{color:#ffd100}
/* полоска под шапкой: сколько очков из 41 (до нижнего таланта) вложено в ветвь */
.tc-tree-p{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:rgba(255,255,255,.06)}
.tc-tree-p b{display:block;height:100%;width:0;background:#ffd100;transition:width .2s}
.db .tc-clear{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:4px;color:var(--mw-muted);cursor:pointer;
  transition:background-color .15s,color .15s,transform .1s}
.tc-clear svg{width:12px;height:12px}
.db .tc-clear:hover{background:rgba(255,255,255,.07);color:var(--mw-head)}
.tc-clear:active{transform:scale(.92)}
.tc-clear:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.tc-body{position:relative;padding:20px 0 24px}
.tc-art{position:absolute;inset:0;background:center top/cover no-repeat;opacity:.82}
.tc-art::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(5,8,14,.1),rgba(5,8,14,.45))}
.tc-grid{position:relative;display:grid;grid-template-columns:repeat(4,44px);grid-auto-rows:44px;gap:14px;justify-content:center;width:218px;margin:0 auto}
.tc-arrows{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tc-arrows path{stroke:#4d5463;transition:stroke .15s}
.tc-arrows polygon{fill:#4d5463;transition:fill .15s}
.tc-arrows path.on{stroke:#ffd100}
.tc-arrows polygon.on{fill:#ffd100}

/* талант: иконка в рамке, ранг в углу. Цвета — как в игре: доступен/вложен — зелёный, выучен до конца — жёлтый, закрыт — серый */
.db .tc-t{position:relative;z-index:1;width:44px;height:44px;padding:2px;border:1px solid rgba(255,255,255,.16);border-radius:5px;background:#05080e;
  cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.65);transition:border-color .15s,box-shadow .15s,transform .1s}
.tc-ic{display:block;width:100%;height:100%;border-radius:3px;background:center/cover no-repeat;transition:filter .15s}
.tc-r{position:absolute;right:-7px;bottom:-7px;min-width:24px;padding:0 4px;border:1px solid rgba(255,255,255,.14);border-radius:3px;background:#05080e;
  font:700 10.5px/14px var(--db-mono);color:var(--mw-muted);text-align:center;font-variant-numeric:tabular-nums;pointer-events:none}
.db .tc-t.lock{border-color:rgba(255,255,255,.1)}
.tc-t.lock .tc-ic{filter:grayscale(1) brightness(.5)}
.db .tc-t.open,.db .tc-t.part{border-color:rgba(30,255,0,.7)}
.tc-t.open .tc-r,.tc-t.part .tc-r{border-color:rgba(30,255,0,.5);color:#1eff00}
.db .tc-t.max{border-color:#ffd100;box-shadow:0 0 0 1px rgba(0,0,0,.65),0 0 8px rgba(255,209,0,.28)}
.tc-t.max .tc-r{border-color:rgba(255,209,0,.6);color:#ffd100}
.tc-t:hover .tc-ic{filter:brightness(1.18)}
.tc-t.lock:hover .tc-ic{filter:grayscale(1) brightness(.68)}
.tc-t:active{transform:scale(.95)}
.db .tc-t:focus-visible{outline:none;box-shadow:0 0 0 2px var(--mw-link)}
.tc-hint{margin-top:8px;font-size:12px;color:var(--mw-muted);text-align:center}

/* готовые билды: спойлер, по умолчанию свёрнут; заголовок-строка открывает. Карточка ставит билд целиком; горит, пока на экране
   ровно её билд. Карточки разнесены — размытие у каждой */
.tc-pre{margin-top:18px}
.tc-pre-h{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:4px 0;list-style:none;cursor:pointer;
  user-select:none}
.tc-pre-h::-webkit-details-marker{display:none}
.db .tc-pre-h h2{font-size:18px;font-weight:700;transition:color .15s}
.tc-pre-ch{width:14px;height:14px;color:var(--mw-muted);transform:rotate(-90deg);transition:transform .2s,color .15s}
.tc-pre[open]>.tc-pre-h .tc-pre-ch{transform:none}
.tc-pre-h:hover h2,.tc-pre-h:hover .tc-pre-ch{color:var(--mw-link)}
.tc-pre-h:focus-visible{outline:1px solid rgba(143,216,255,.55);outline-offset:2px;border-radius:3px}
/* «Сейчас: …» появляется при выборе билда — строка не должна менять высоту: высота строки как у h2, без переноса, длинное — многоточием */
.tc-pre-h h2,.tc-pre-ch{flex:none}
.tc-pre-h .tc-cur{min-width:0;margin-left:4px;overflow:hidden;line-height:18px;white-space:nowrap;text-overflow:ellipsis}
.tc-pre[open]>.tc-pre-h{margin-bottom:8px}
.tc-cur{font-size:13px;color:var(--mw-muted)}
.tc-cur b{font-weight:600;color:var(--mw-head)}
.tc-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tc-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--db-line);border-radius:6px;background:var(--db-panel);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .15s,background-color .15s}
.tc-card:hover{border-color:rgba(255,209,0,.35)}
.tc-card.on{border-color:rgba(255,209,0,.75);background:linear-gradient(rgba(40,32,4,.5),rgba(40,32,4,.3))}
.db .tc-card-b{display:flex;flex-direction:column;gap:10px;flex:1;width:100%;padding:13px 14px 14px;cursor:pointer;text-align:left;transition:transform .1s}
.tc-card-b:active{transform:scale(.99)}
.db .tc-card-b:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--mw-link);border-radius:6px}
.tc-card-top{display:flex;align-items:center;gap:10px}
.tc-card-top .db-ic{width:34px;height:34px;border-radius:4px}
.tc-card-nm{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.tc-card-nm b{font:700 15px/1.2 var(--mw-title);color:var(--mw-head)}
.tc-card-nm small{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--mw-muted)}
.tc-card-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.tc-card-sp{font:600 14px/1.2 var(--db-mono);color:var(--mw-muted);font-variant-numeric:tabular-nums}
.tc-card.on .tc-card-sp{color:#ffd100}
.tc-card-note{font-size:12.5px;line-height:18px;color:var(--mw-text);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tc-card-ok{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#ffd100;opacity:0;transition:opacity .15s}
.tc-card.on .tc-card-ok{opacity:1}
/* доля ветвей в билде: три оттенка золота — как «выучено» в игре; f — недобранные до 61 очки */
.tc-split{display:flex;gap:2px;height:6px;border-radius:2px;overflow:hidden}
.tc-split i{min-width:0}
.tc-split .s0{background:#ffd100}
.tc-split .s1{background:rgba(255,209,0,.62)}
.tc-split .s2{background:rgba(255,209,0,.34)}
.tc-split .f{background:rgba(255,255,255,.08)}

/* подсказка таланта — разметка и вид как у подсказок базы (dbtt.css), своя только у курсора; на сенсорных экранах — панель снизу */
#tc-tip{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;opacity:0;transition:opacity .08s}
#tc-tip.on{opacity:1}
#tc-tip .dbtt-box,.tc-sheet .dbtt-box{max-width:340px;background:rgba(1,7,33,.92)}
.dbtt .tt-r td{color:#ff2020}
.dbtt .tt-rr{color:#ff4a3d}
.dbtt span.tt-g{color:#1eff00}
.dbtt .tc-tt-hint td{padding-top:6px}
.tc-sheet{position:fixed;left:50%;bottom:12px;z-index:2147483000;display:none;flex-direction:column;align-items:stretch;gap:8px;
  width:min(380px,calc(100% - 24px));transform:translateX(-50%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tc-sheet.on{display:flex}
.tc-sheet .dbtt-box{max-width:none;flex:1}
.tc-sheet-a{display:flex;gap:8px}
.tc-sheet-a .db-btn{flex:1;justify-content:center;height:42px;font:600 22px/1 var(--db-mono);border-color:#777!important;background:#020a26!important}
.tc-sheet-a .db-btn-p{border-color:rgba(30,255,0,.55)!important;color:#1eff00!important}
.tc-sheet-a [data-act=close]{flex:0 0 52px}
.tc-sheet-a .db-btn:disabled{opacity:.4}

@media(max-width:1100px){
  .tc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  .tc-cls{grid-template-columns:repeat(9,88px);overflow-x:auto;scrollbar-width:none}
  .tc-cls::-webkit-scrollbar{display:none}
  .tc-trees{grid-template-columns:minmax(0,1fr)}
  .tc-tree{max-width:420px;width:100%;margin:0 auto}
}
@media(max-width:640px){
  .tc-cards{grid-template-columns:minmax(0,1fr)}
  .tc-bar{gap:8px 16px}
  .tc-act{width:100%;margin-left:0}
  .tc-act .db-btn{flex:1;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.tc-t,.tc-ic,.tc-arrows path,.tc-arrows polygon,.tc-tree-p b,.tc-card,.tc-card-b{transition:none}}

/* ---------- подземелья и рейды: /db/zone/<зона> (zone.twig), /db/zones (zones.twig), блок на главной ---------- */
/* бои по порядку: номер в кружке (тот же номер — метка на карте), составной бой — название и под ним ссылки на его НПС;
   крыло многокрылого подземелья — подпись-разделитель */
.db-encs h2{display:flex;align-items:center;gap:8px}
.db-enc li{display:flex;align-items:center;gap:10px;padding:7px 6px;margin:0 -6px;border-top:1px solid var(--db-line2);border-radius:4px;
  font-size:14px;transition:background-color .15s}
.db-enc li:first-child,.db-enc .db-enc-w+li{border-top-color:transparent}
.db-enc li[data-enc]:hover,.db-enc li.hl{background:rgba(255,255,255,.035)}
.db-enc li.db-enc-w{padding:14px 6px 4px;border-top-color:transparent;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--mw-muted)}
.db-enc li.db-enc-w:first-child{padding-top:2px}
.db-enc-i{flex:none;width:22px;height:22px;border:1px solid var(--db-line);border-radius:50%;font:600 11px/20px var(--db-mono);text-align:center;
  color:var(--mw-muted);font-variant-numeric:tabular-nums;transition:border-color .15s,color .15s}
.db-enc li.hl .db-enc-i,.db-enc li[data-enc]:hover .db-enc-i{border-color:rgba(255,209,0,.6);color:#ffd100}
.db-enc-b{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.db-enc-t{color:var(--mw-head);overflow-wrap:anywhere}
a.db-enc-t{color:var(--mw-link)}
a.db-enc-t:hover{text-decoration:underline;text-underline-offset:2px}
.db-enc-l{display:flex;flex-wrap:wrap;gap:0 12px;font-size:12.5px}
.db .db-enc-l a{color:var(--mw-muted)}
.db .db-enc-l a:hover{color:var(--mw-link-hover)}
.db .db-enc-pts a{color:var(--mw-link)}
.db .db-enc-pts a:hover{text-decoration:underline;text-underline-offset:2px}
.db-enc-pts i,.db-enc-ph i{font-style:normal;color:var(--mw-muted)}
.db-enc-ph{gap:0 6px}
.db .db-note-at a{color:var(--mw-link)}
.db-tag-h{border-color:rgba(255,106,92,.45);color:#ff8a7c}
.db .db-enc-bj{display:inline-flex;align-items:center;gap:5px;flex:none;font:500 12px var(--db-mono);color:var(--mw-muted);font-variant-numeric:tabular-nums}
.db .db-enc-bj:hover{color:var(--mw-head)}
.db-enc-bj .db-ic{width:18px;height:18px}
/* метка боя на карте: жёлтый кружок с номером; наведение на бой в списке подсвечивает его метку (.hl, js/db.js) */
.db-pt.db-pin{z-index:2;width:20px;height:20px;margin:-10px 0 0 -10px;background:#ffd100;color:#151000;font:700 11px/20px var(--db-mono);
  font-style:normal;text-align:center;box-shadow:0 0 0 2px rgba(5,8,14,.8),0 0 10px rgba(255,209,0,.55);cursor:default}
.db-pt.db-pin.hl{transform:scale(1.35)}
/* сведения: длинное значение (настройка, ключ героика) — под подписью */
.db-facts>div.db-fact-w{flex-direction:column;align-items:stretch;gap:2px}
.db-fact-w dd{text-align:left}
/* выбор класса и слота над таблицей добычи: как поле фильтра, своя стрелка; выбранное — подсвечено */
.db-sels{display:flex;gap:8px;flex:none;margin-left:auto}
.db-sels+.db-filter{margin-left:0}
.db-sel{position:relative;display:flex;align-items:center;height:36px;border:1px solid var(--db-line);border-radius:8px;background:rgba(0,0,0,.28);
  transition:border-color .15s,background-color .15s}
.db-sel:hover{border-color:rgba(143,216,255,.35)}
.db-sel:focus-within{border-color:rgba(143,216,255,.55)}
.db-sel.on{border-color:rgba(143,216,255,.5);background:rgba(143,216,255,.08)}
.db .db-sel select{height:34px;max-width:190px;padding:0 30px 0 12px;-webkit-appearance:none;appearance:none;font-size:13px;color:var(--mw-head);cursor:pointer}
.db .db-sel select:focus{outline:none}
.db-sel select option{background:#0b1220;color:var(--mw-head)}
.db-sel svg{position:absolute;right:10px;top:50%;width:12px;height:12px;margin-top:-6px;color:var(--mw-muted);pointer-events:none}
.db-sel.on svg{color:var(--mw-link)}
/* колонка «Босс» / «Кто» в добыче */
.db-who{font-size:13px}
.db .db-who a{color:var(--mw-text)}
.db .db-who a:hover{color:var(--mw-link-hover)}
.db-who small{display:block;font-size:12px;line-height:1.35}
.db-who-s{display:none}
.db-ty-s{display:none}
/* список подземелий /db/zones: таблицы групп в две колонки */
.db-lead{max-width:700px;margin-top:6px!important;font-size:14.5px;color:var(--mw-text)}
.db-zl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.db-zl-g{margin-top:0}
.db-zl-h{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--db-line)}
.db-zl-h h2{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.db .db-zl-nm{color:var(--mw-head)}
.db-zl-g td:first-child{white-space:nowrap}
.db .db-zl-nm:hover{color:var(--mw-link)}
.db-zone-hit{margin:-4px 0 12px!important;font-size:14px}
@media(max-width:1100px){.db-zl{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
  .db-sels{order:2;width:100%;margin:0}
  .db-sel{flex:1;min-width:0}
  .db .db-sel select{width:100%;max-width:none}
  .db-sels+.db-filter{order:3}
  .db-zl-g td:first-child{white-space:normal}
  .db-who-s{display:block;margin-top:1px;padding-left:28px;font-size:12px;line-height:1.35;color:var(--mw-muted)}
  /* тип вещи (слот, тип) — под названием: колонки «Тип» на узком экране нет (_macros.twig ty_s) */
  .db-ty-s{display:block;margin-top:1px;padding-left:28px;font-size:12px;line-height:1.35;color:var(--mw-muted)}
  /* «Создаётся» / «Реагент» на карточках: строка-карточка — название и навык, под ними реагенты значками с числом.
     :where — чтобы скрытие строк фильтром и «Показать ещё» (display:none) оставалось сильнее */
  :where(.db-table[data-type=craft]),:where(.db-table[data-type=craft]) thead,:where(.db-table[data-type=craft]) tbody{display:block}
  :where(.db-table[data-type=craft]) tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .db-table[data-type=craft] tr{border-bottom:1px solid var(--db-line2)}
  .db-table[data-type=craft] tbody tr:last-child{border-bottom:0}
  .db-table[data-type=craft] td,.db-table[data-type=craft] th{border-bottom:0}
  .db-table[data-type=craft] td:first-child,.db-table[data-type=craft] th:first-child{grid-row:1;grid-column:1;min-width:0}
  .db-table[data-type=craft] .num{grid-row:1;grid-column:2;max-width:52vw;white-space:normal}
  .db-table[data-type=craft] td.num .db-sub{display:block;margin-bottom:2px;line-height:1.3}
  .db-table[data-type=craft] td.db-rg{display:block;grid-row:2;grid-column:1/-1;padding:0 16px 8px 44px}
  .db-table[data-type=craft] td.db-rg:empty{display:none}
  .db-cond-line{display:block;margin-top:1px;padding-left:28px;font-size:12px;line-height:1.35}
  .db-cond-line.bare{padding-left:0}
  /* этажи карты подземелья — одной прокручиваемой строкой */
  .db-map-dg .db-zones{flex-wrap:nowrap;width:100%;overflow-x:auto;scrollbar-width:none}
  .db-map-dg .db-zones::-webkit-scrollbar{display:none}
  .db-map-dg .db-zone{flex:none}
}
@media(prefers-reduced-motion:reduce){.db-enc li,.db-enc-i,.db-sel{transition:none}}

/* ---------- питомцы охотника: /db/pets и /db/pets/<семейство> (pets.twig, lib/pets.php) ---------- */
.pet-note{max-width:680px;margin-top:8px!important;font-size:13px;line-height:1.55;color:var(--mw-muted)}
.pet-note b{font-weight:600;color:var(--mw-head)}
/* плитки семейств: значок, имя, сколько зверей в мире, значки своих способностей. Плитки разнесены — размытие у каждой */
.pet-fams{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.db .pet-fam{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:12px 14px;border:1px solid var(--db-line);border-radius:6px;
  background:var(--db-panel);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--mw-text);
  transition:border-color .15s,background-color .15s,transform .1s}
.db .pet-fam:hover{border-color:rgba(143,216,255,.4);background:rgba(143,216,255,.06);color:var(--mw-text)}
.pet-fam:active{transform:scale(.98)}
.pet-fam:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.pet-fam-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pet-fam-t b{font:700 15px/1.25 var(--mw-title);color:var(--mw-head);transition:color .15s}
.pet-fam:hover .pet-fam-t b{color:var(--mw-link)}
.pet-fam-t small{font-size:12.5px;color:var(--mw-muted)}
.pet-fam-ab{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:20px;margin-top:6px}
.pet-fam-ab em{font-style:normal;font-size:12px;color:var(--mw-muted)}
/* планка всех семейств на странице семейства: 23 равные ячейки со значком, текущее — подложка и кольцо; на узких — прокрутка */
.pet-strip{display:grid;grid-template-columns:repeat(23,minmax(0,1fr));gap:2px;margin:0 0 16px;padding:4px;border:1px solid var(--db-line);border-radius:6px;
  background:var(--db-panel);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.db .pet-strip a{display:flex;justify-content:center;padding:5px 0;border-radius:5px;transition:background-color .15s,transform .1s}
.pet-strip .db-ic{width:30px;height:30px;border-radius:4px;filter:saturate(.55) brightness(.75);transition:filter .15s}
.db .pet-strip a:hover{background:rgba(255,255,255,.06)}
.pet-strip a:hover .db-ic,.pet-strip a.on .db-ic{filter:none}
.db .pet-strip a.on{background:rgba(143,216,255,.12);box-shadow:inset 0 0 0 1px rgba(143,216,255,.45)}
.pet-strip a:active{transform:scale(.94)}
.pet-strip a:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--mw-link)}
/* блок в колонке карточки: заголовок строкой, таблица во всю ширину блока */
.pet-sec{min-width:0;border:1px solid var(--db-line);border-radius:6px;background:var(--db-panel);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pet-sec-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:13px 16px 11px;border-bottom:1px solid var(--db-line)}
.db .pet-sec-h h2{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.pet-sec-d{font-size:12.5px;color:var(--mw-muted)}
.pet-sec-a{margin-left:auto;font-size:13px;white-space:nowrap}
.pet-chips{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 16px 14px!important}
.pet-chips li{display:inline-flex;align-items:center;gap:2px;font-size:13.5px}
/* способности (таблица pet_abil): заголовок группы — способность, строки — ранги под её значком */
.pet-grp .db-grp-t{flex-wrap:nowrap;white-space:nowrap}
.pet-grp .db-grp-t .db-ic{margin-right:-1px}
.db-table .pet-grp .db-grp-h .num{font-weight:500;color:var(--mw-muted)}
.pet-grp>tr:not(.db-grp-h)>td:first-child{padding-left:38px}
.pet-src{font-size:12.5px;color:var(--mw-muted)}
.pet-who{font-size:13px;line-height:1.6}
.pet-more{white-space:nowrap}
/* приручаемые (таблица pet_beasts): редкий — серебром, редкий элитный — золотом; «Учит» — значок ранга и его номер */
.db-tag.pet-rare-4{border-color:rgba(192,200,212,.4);color:#c0c8d4}
.db-tag.pet-rare-2{border-color:rgba(255,209,0,.4);color:#ffd100}
.pet-teach{white-space:nowrap}
.db .pet-ab{display:inline-flex;align-items:center;gap:4px;margin-right:10px;font:600 11.5px/1 var(--db-mono);color:var(--mw-muted);
  vertical-align:middle;transition:color .15s,transform .1s}
.db .pet-ab:hover{color:var(--mw-head)}
.pet-ab:hover .db-ic{filter:brightness(1.2)}
.pet-ab:active{transform:scale(.94)}
.pet-side-note p{font-size:13px;line-height:1.55;color:var(--mw-text)}
@media(max-width:960px){
  .pet-strip{grid-template-columns:repeat(23,40px);overflow-x:auto;scrollbar-width:none}
  .pet-strip::-webkit-scrollbar{display:none}
}
@media(max-width:640px){
  .pet-fams{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .db .pet-fam{flex-direction:column;gap:8px;padding:11px 12px}
  .pet-fam-t b{font-size:14px}
  .pet-sec-a{width:100%;margin-left:0}
  /* способности: строка — «Ранг N · ур. · очки», под ней «где учить» во всю ширину; колонки одной ширины во всех строках.
     :where — чтобы скрытие строк фильтром и свёрнутой группой (display:none) оставалось сильнее */
  :where(.db-table[data-type=pet_abil]),:where(.db-table[data-type=pet_abil]) thead,:where(.db-table[data-type=pet_abil]) tbody{display:block}
  :where(.db-table[data-type=pet_abil]) tr{display:grid;grid-template-columns:minmax(0,1fr) 58px 62px;align-items:center}
  .db-table[data-type=pet_abil] tr{border-bottom:1px solid var(--db-line2)}
  .db-table[data-type=pet_abil] tbody tr:last-child{border-bottom:0}
  .db-table[data-type=pet_abil] td,.db-table[data-type=pet_abil] th{border-bottom:0}
  .db-table[data-type=pet_abil] .num{padding-left:6px;padding-right:6px}
  .db-table[data-type=pet_abil] th:last-child{display:none}
  .db-table[data-type=pet_abil] th:nth-child(3),.db-table[data-type=pet_abil] td:nth-child(3){padding-right:16px}
  .db-table[data-type=pet_abil] .pet-who,.db-table[data-type=pet_abil] .pet-src{grid-column:1/-1;padding:0 16px 8px}
  .db-table[data-type=pet_abil] .pet-src:empty{display:none}
  .pet-grp .db-grp-t{flex-wrap:wrap;white-space:normal}
  .pet-grp>tr:not(.db-grp-h)>td:first-child,.db-table[data-type=pet_abil] .pet-grp .pet-who{padding-left:30px}
}
@media(prefers-reduced-motion:reduce){.pet-fam,.pet-fam-t b,.pet-strip a,.pet-strip .db-ic,.pet-ab{transition:none}}

/* ---------- профессии: /db/professions и /db/professions/<профессия> (professions.twig, lib/professions.php, js/db.js [data-prof]) ---------- */
/* навык рецепта четырьмя числами цветами Wowhead: навык изучения, жёлтый, зелёный, серый (и в таблицах «Создаётся» карточек) */
.db-sk{display:inline-flex;gap:7px;font:600 12.5px/1.4 var(--db-mono);font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:baseline}
.db-sk b{font-weight:600;transition:opacity .15s}
.db-sk-o{color:#ff8040}.db-sk-y{color:#ffff00}.db-sk-g{color:#40bf40}.db-sk-x{color:#808080}
.db-sk[title]{cursor:help}
/* плитки /db/professions: значок, имя, число рецептов; две группы — профессии и вторичные навыки. Плитки разнесены — размытие у каждой */
.pf-group+.pf-group{margin-top:22px}
.db .pf-h{margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--mw-muted)}
.pf-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.db .pf-tile{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;border:1px solid var(--db-line);border-radius:6px;background:var(--db-panel);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--mw-text);transition:border-color .15s,background-color .15s,transform .1s}
.db .pf-tile:hover{border-color:rgba(143,216,255,.4);background:rgba(143,216,255,.06);color:var(--mw-text)}
.pf-tile:active{transform:scale(.98)}
.pf-tile:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.pf-tile-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf-tile-t b{font:700 15px/1.25 var(--mw-title);color:var(--mw-head);transition:color .15s}
.pf-tile:hover .pf-tile-t b{color:var(--mw-link)}
.pf-tile-t small{font-size:12.5px;color:var(--mw-muted);font-variant-numeric:tabular-nums}
/* планка профессий на странице профессии: значок над именем, текущая — подложка; вторичные отделены чертой; на узких — прокрутка */
.pf-nav{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));margin:0 0 16px;border:1px solid var(--db-line);border-radius:6px;background:var(--db-panel);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:hidden}
.db .pf-nav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:9px 2px 8px;font-size:11.5px;line-height:1.2;
  text-align:center;color:var(--mw-nav);box-shadow:inset -1px 0 0 var(--db-line2);transition:background-color .15s,color .15s}
.pf-nav a:last-child{box-shadow:none}
.pf-nav a[data-sep]::before{content:'';position:absolute;left:-1px;top:8px;bottom:8px;width:1px;background:var(--db-line)}
.pf-nav .db-ic{width:28px;height:28px;border-radius:4px;filter:saturate(.6) brightness(.8);transition:filter .15s,transform .1s}
.pf-nav a span+span{max-width:100%}
.db .pf-nav a:hover{background:rgba(255,255,255,.04);color:var(--mw-head)}
.pf-nav a:hover .db-ic,.pf-nav a.on .db-ic{filter:none}
.pf-nav a:active .db-ic{transform:scale(.94)}
.db .pf-nav a.on{background:rgba(143,216,255,.1);color:var(--mw-head)}
.pf-nav a.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mw-link)}
.pf-nav a:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--mw-link)}
/* секция-таблица: строка заголовка с фильтрами, легенда цветов, таблица; в колонке карточки — без верхнего отступа */
.pf-top .db-col>.db-tabs{margin-top:0}
.pf-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;padding:11px 12px 11px 16px;border-bottom:1px solid var(--db-line)}
.db .pf-bar h2{display:flex;align-items:center;gap:8px;align-self:center;margin-right:auto;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.pf-ctl{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px}
.pf-ctl .db-filter{margin-left:0;height:34px;border-radius:5px}
.pf-ctl .db-f select{min-width:0;max-width:200px}
.pf-my input{width:96px;font-family:var(--db-mono)!important;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.pf-my input::-webkit-inner-spin-button,.pf-my input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pf-av{height:34px}
.pf-note{padding:10px 16px 12px;font-size:13px;line-height:1.55;color:var(--mw-muted)}
.pf-note-l{color:var(--mw-text)}
.pf-note-b{padding-bottom:10px;border-bottom:1px solid var(--db-line2)}
/* легенда цветов: точка, подпись, число строк (с «Моим навыком»), что даёт цвет */
.pf-sum{display:flex;flex-wrap:wrap;gap:4px 18px;padding:8px 16px;border-bottom:1px solid var(--db-line2);font-size:12px;line-height:1.5;color:var(--mw-muted)}
.pf-sum>span{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap;color:var(--mw-text)}
.pf-sum>span[hidden]{display:none}
.pf-sum i{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor;align-self:center}
.pf-sum b{font:600 12px var(--db-mono);font-variant-numeric:tabular-nums;color:var(--mw-head)}
.pf-sum b:empty{display:none}
.pf-sum small{font-size:12px;color:var(--mw-muted)}
.pf-c-o i{color:#ff8040}.pf-c-y i{color:#ffff00}.pf-c-g i{color:#40bf40}.pf-c-x i{color:#808080}.pf-c-no i{color:#4a5160}
/* «Мой навык» (js/db.js): название рецепта цветом сложности — как окно профессии в игре; у чисел ярче нынешний цвет;
   серые и те, что учить ещё рано, приглушены; фильтры прячут строку (.pf-off) */
.pf-table tr.pf-off{display:none}
.pf-table tr.pf-on .db-sk b{opacity:.35}
.pf-table tr.pf-o .db-sk-o,.pf-table tr.pf-y .db-sk-y,.pf-table tr.pf-g .db-sk-g,.pf-table tr.pf-x .db-sk-x{opacity:1;text-decoration:underline;text-underline-offset:3px}
.pf-table tr.pf-o td:first-child .db-link span{color:#ff8040}
.pf-table tr.pf-y td:first-child .db-link span{color:#ffff00}
.pf-table tr.pf-g td:first-child .db-link span{color:#40bf40}
.pf-table tr.pf-x td:first-child .db-link span{color:#808080}
.pf-table tr.pf-x td,.pf-table tr.pf-no td{opacity:.42}
.pf-table tr.pf-x:hover td,.pf-table tr.pf-no:hover td{opacity:.8}
/* где учить: источники столбиком — учитель с ценой, предметы-рецепты с подписью источника, задания, открытие */
.pf-how{display:flex;flex-direction:column;gap:3px}
.pf-src{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:13px}
.pf-src-t{color:var(--mw-text)}
.pf-src-t[title]{cursor:help}
.pf-ranks td:first-child{white-space:nowrap}
/* рецепт: значок созданного предмета (ссылка на предмет) перед названием; реагенты — значок и число (разметка сжата, без классов) */
.pf-rc{min-width:220px}
.pf-rc>.db-ic{margin-right:8px;vertical-align:middle;transition:filter .15s}
.pf-rc>.db-link{max-width:calc(100% - 64px)}
.pf-rc>a.db-ic:hover{filter:brightness(1.2)}
.pf-rg a{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;color:var(--mw-head);white-space:nowrap}
.pf-rg i{display:block;flex:none;width:20px;height:20px;border-radius:3px;background:#05080e center/cover no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.16);
  transition:filter .15s}
.pf-rg a:hover i{filter:brightness(1.2)}
/* специализации: сеткой, у каждой — как получить; кнопка «N рецептов» ставит фильтр таблицы */
.pf-specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.pf-spec{min-width:0;padding:12px 16px 13px;border-top:1px solid var(--db-line2);box-shadow:inset -1px 0 0 var(--db-line2)}
.pf-spec-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.pf-spec-h .db-link{font-weight:600}
.db .pf-spec-n{padding:0 8px;border:1px solid var(--db-line);border-radius:9px;font-size:11.5px;line-height:19px;color:var(--mw-muted);font-variant-numeric:tabular-nums;
  cursor:pointer;transition:border-color .15s,color .15s,transform .1s}
.db .pf-spec-n:hover{border-color:rgba(143,216,255,.45);color:var(--mw-head)}
.pf-spec-n:active{transform:scale(.96)}
.db .pf-spec-n:focus-visible{outline:none;border-color:var(--mw-link)}
.pf-spec-d{display:flex;flex-direction:column;gap:4px;margin:8px 0 0 28px}
.pf-spec-d>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:13px}
.pf-spec-d dt{flex:none;color:var(--mw-muted);font-weight:400}
.pf-spec-d dd{display:flex;flex-wrap:wrap;gap:2px 12px;margin:0;min-width:0}
@media(max-width:1240px){
  .pf-nav{grid-template-columns:repeat(13,92px);overflow-x:auto;scrollbar-width:none}
  .pf-nav::-webkit-scrollbar{display:none}
}
@media(max-width:640px){
  .pf-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .db .pf-tile{flex-direction:column;align-items:flex-start;gap:8px;padding:11px 12px}
  .pf-tile-t b{font-size:14px}
  /* таблица рецептов на телефоне — строка-карточка: название и навык в первой строке, под ними реагенты значками с числом
     (колонка .pf-rg, на узком экране — строкой), ниже — где учить */
  .pf-table thead{display:none}
  .pf-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-bottom:1px solid var(--db-line2)}
  .pf-table tbody tr:last-child{border-bottom:0}
  .pf-table tbody td{border-bottom:0;padding:7px 12px}
  .pf-table td.pf-rc,.pf-table td:first-child{grid-row:1;grid-column:1;min-width:0;padding-right:4px}
  .pf-table td.num{grid-row:1;grid-column:2}
  .pf-table td.pf-rg{display:block;grid-row:2;grid-column:1/-1;padding:0 12px 6px 44px}
  .pf-table td:last-child:not(.num):not(.hide-s){grid-row:3;grid-column:1/-1;padding-top:0;padding-left:44px}
  .pf-rc>.db-link{max-width:calc(100% - 30px)}
  .pf-ranks th,.pf-ranks td{padding-left:8px;padding-right:8px}
  .pf-bar{padding:10px 12px}
  .pf-ctl{width:100%}
  .pf-ctl .db-f{flex:1 1 140px}
  .pf-ctl .db-f select{width:100%;max-width:none}
  .pf-my input{width:100%}
  .pf-ctl .db-filter{flex:1 1 100%;width:auto}
  .pf-spec-d{margin-left:0}
  .pf-src{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){.pf-tile,.pf-tile-t b,.pf-nav a,.pf-nav .db-ic,.pf-spec-n,.db-sk b{transition:none}}

/* ---------- узкие экраны ---------- */
/* планка раздела на узком экране: поиск уходит строкой ниже на всю ширину, разделы переносятся (не прокрутка: в
   прокручиваемой полосе обрезался бы выпадающий список «Прочее»). С 1100 px: уже на ширине 1024 поиску в одной строке
   с разделами оставалось меньше 150 px */
@media(max-width:1100px){
  .db-bar{flex-wrap:wrap;gap:8px 12px;padding-left:7px}
  .db-brand{align-self:center;margin:0;padding:6px 12px;border-right:0;border-radius:5px}
  .db-search{order:3;flex-basis:100%;max-width:none;margin-left:0}
  .db-nav{order:2;flex-wrap:wrap;flex:1;row-gap:2px}
}
/* телефон: подпись базы и поиск — первой строкой, разделы — под ними на всю ширину */
@media(max-width:640px){
  .db-search{order:1;flex:1 1 0;min-width:0}
  .db-search kbd{display:none}
  .db-nav{flex-basis:100%;margin-left:-3px}
}
@media(max-width:960px){
  .db-grid{grid-template-columns:minmax(0,1fr)}
  .db-sim-row{display:flex;overflow-x:auto;scrollbar-width:none}
  .db-sim-row::-webkit-scrollbar{display:none}
  .db-sim-it{flex:none;width:150px}
}
@media(max-width:640px){
  .db{padding-top:14px}
  .db-head{flex-wrap:wrap;gap:12px;margin-top:20px}
  .db-head h1{font-size:24px}
  .db-head-a{width:100%;padding-top:0}
  .db-table .hide-s{display:none}
  .db-tabbar{flex-wrap:wrap;gap:8px;padding:8px}
  .db-filter{width:100%;margin:0}
  .db-filter input{width:100%}
  .db-tabbar .db-ids{margin:0}
  .db-ids+.db-filter{flex:1;width:auto;min-width:0}
  .db-list2{grid-template-columns:1fr}
  .db-f-q input{width:100%}
  .db-f-q{flex-basis:100%}
  .db-f-act{width:100%;margin-left:0}
  .db-fx{grid-template-columns:minmax(0,1fr);gap:6px}
  .db-fx-r+.db-fx-r .db-fx-l{padding-top:8px}
  .db-fx-l{padding-top:0}
  .db-fx-c>select{flex:1;max-width:none}
  .db-sp{width:100%}
  .db-sp select{flex:1;min-width:0;max-width:none}
  .db-fx .db-f-act{width:100%;margin-left:0}
}

/* ---------- сравнение предметов: галочки «Сравнить», планка снизу (_layout.twig), страница /db/compare (compare.twig);
   поведение — js/db.js «сравнение», макет — mockups/item-cmp/cmp-1.html ---------- */
/* галочка: квадрат, отмеченная — залита, с птичкой */
.db-cb{position:relative;display:inline-block;flex:none;box-sizing:border-box;width:13px;height:13px;border:1.3px solid currentColor;border-radius:3px;
  vertical-align:middle;transition:background-color .15s,border-color .15s}
.db-cb::after{content:'';position:absolute;left:3.4px;top:.6px;width:3.2px;height:6.6px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);
  opacity:0;transition:opacity .15s}
.on>.db-cb{background:rgba(63,168,232,.9);border-color:rgba(63,168,232,.9)}
.on>.db-cb::after{opacity:1}
/* у заголовка карточки */
.db .db-btn.db-cmp-head.on{border-color:rgba(143,216,255,.5)!important;background:rgba(63,168,232,.12)!important;color:var(--mw-link)!important}
/* в таблицах — последней колонкой справа (узкая, по ширине галочки); у несравнимых строк ячейка пустая */
.db-table .db-cmp-td{width:1px;padding-left:4px;text-align:right}
.db .db-cmp{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;vertical-align:middle;
  color:var(--mw-muted);opacity:.5;cursor:pointer;transition:opacity .15s,color .15s,background-color .15s,transform .1s}
.db-table tbody tr:hover .db-cmp,.db .db-cmp:focus-visible{opacity:1}
.db .db-cmp:hover{color:var(--mw-head);background:rgba(255,255,255,.06)}
.db .db-cmp:active{transform:scale(.9)}
.db .db-cmp:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.db .db-cmp.on{opacity:1;color:var(--mw-link)}
/* под плиткой «Похожих»: плитка в обёртке, разделитель — у обёртки */
.db-sim-cell{display:flex;flex-direction:column;min-width:0;box-shadow:inset -1px 0 0 var(--db-line2)}
.db-sim-cell:last-child{box-shadow:none}
.db-sim-cell .db-sim-it{flex:1;box-shadow:none}
.db-sim-cell .db-sim-it:focus-visible{box-shadow:inset 0 0 0 1px var(--mw-link)}
.db .db-cmp-chk{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin:-2px 10px 11px;padding:3px 7px 3px 5px;border-radius:4px;
  font-size:12.5px;color:var(--mw-muted);cursor:pointer;user-select:none;transition:background-color .15s,color .15s,transform .1s}
.db .db-cmp-chk:hover{background:rgba(255,255,255,.05);color:var(--mw-head)}
.db .db-cmp-chk:active{transform:scale(.97)}
.db .db-cmp-chk:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.db .db-cmp-chk.on{color:var(--mw-link)}
/* крестик «убрать» и переключатель */
.db .db-x{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:5px;color:var(--mw-muted);cursor:pointer;
  transition:background-color .15s,color .15s,transform .1s}
.db .db-x svg{width:14px;height:14px}
.db .db-x:hover{background:rgba(255,255,255,.08);color:var(--mw-head)}
.db .db-x:active{transform:scale(.92)}
.db .db-x:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.db-sw{position:relative;display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:400;color:var(--mw-text);white-space:nowrap;cursor:pointer;user-select:none}
.db .db-sw input{position:absolute;opacity:0;pointer-events:none}
.db-sw i{position:relative;flex:none;width:28px;height:16px;border-radius:8px;background:rgba(255,255,255,.12);transition:background-color .15s}
.db-sw i::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#cbd4e2;transition:transform .15s,background-color .15s}
.db-sw input:checked+i{background:rgba(63,168,232,.55)}
.db-sw input:checked+i::after{transform:translateX(12px);background:#fff}
.db-sw input:focus-visible+i{box-shadow:0 0 0 1px var(--mw-link)}
.db-sw:hover{color:var(--mw-head)}

/* планка снизу: стоит вне main (класс db — переменные раздела), фон под ней размыт */
/* спрятанная (за нижним краем) — visibility:hidden, когда доехала: кнопки не ловят фокус Tab (и inert в db.js); появление — сразу */
.db.db-tray{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 15px 14px;font-family:var(--mw-sans);pointer-events:none;
  transform:translateY(calc(100% + 20px));visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s}
.db.db-tray.vis{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s}
.db-tray button{width:auto}
.db-tray-in{position:relative;max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 16px;pointer-events:auto;
  border:1px solid rgba(255,255,255,.14);border-radius:8px;background:linear-gradient(rgba(7,11,18,.86),rgba(7,11,18,.78));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.db-tray.shake .db-tray-in{animation:db-tray-shake .36s}
@keyframes db-tray-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.db-tray-t{display:flex;flex-direction:column;gap:2px;flex:none;width:112px}
.db-tray-t b{font:700 13px/1.2 var(--mw-title);color:var(--mw-head)}
.db-tray-t span{font-size:12px;color:var(--mw-muted);font-variant-numeric:tabular-nums}
.db-tray-slots{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-width:0}
.db-tray-slot{position:relative;display:flex;align-items:center;gap:9px;min-width:0;height:46px;padding:0 4px 0 8px;border:1px solid var(--db-line);border-radius:6px;
  background:rgba(0,0,0,.28)}
.db-tray-slot.new{animation:db-tray-in .3s cubic-bezier(.2,.8,.2,1)}
@keyframes db-tray-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.db-tray-slot .db-ic{width:28px;height:28px}
.db-tray-slot a{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12.5px;line-height:1.3;overflow-wrap:anywhere}
.db-tray-slot.empty{justify-content:center;border-style:dashed;background:none;font-size:12.5px;color:var(--mw-muted)}
.db-tray-a{display:flex;align-items:center;gap:6px;flex:none}
.db .db-tray-go{height:36px;padding:0 16px!important;font-weight:600}
.db .db-tray-go.off{opacity:.45}
.db-tray-go b{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:rgba(143,216,255,.2);
  font:600 12px/1 var(--mw-sans);font-variant-numeric:tabular-nums}
.db .db-tray-clr{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 10px;border-radius:5px;font-size:13px;color:var(--mw-muted);
  cursor:pointer;transition:background-color .15s,color .15s,transform .1s}
.db-tray-clr svg{display:none;width:15px;height:15px}
.db .db-tray-clr:hover{background:rgba(255,255,255,.08);color:var(--mw-head)}
.db .db-tray-clr:active{transform:scale(.97)}
.db .db-tray-clr:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.db-tray-msg{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);padding:7px 12px;border:1px solid rgba(255,255,255,.14);border-radius:6px;
  background:#0b1220;font-size:13px;color:var(--mw-head);white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
.db-tray-msg.vis{opacity:1}
/* пока планка видна, низ страницы не прячется под ней */
body.db-tray-on.mw-site footer.mw-footer{padding-bottom:120px}

/* страница сравнения */
.db-cmp-box{border:1px solid var(--db-line);border-radius:6px;background:var(--db-panel);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.db-cmp-tools{display:flex;align-items:center;gap:22px;padding:11px 16px;border-bottom:1px solid var(--db-line)}
.db-cmp-box .db-scroll{overflow:visible}
.db-cmp-t{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:13.5px}
.db-cmp-t col.l{width:220px}
.db-cmp-t thead th{position:sticky;top:0;z-index:3;padding:14px 14px 13px;border-bottom:1px solid var(--db-line);background:rgba(11,17,29,.97);text-align:left;vertical-align:top}
.db-cmp-t thead th:first-child{vertical-align:bottom;font:600 11px/1.3 var(--mw-sans);letter-spacing:.5px;text-transform:uppercase;color:var(--mw-muted)}
.db-cmp-t thead th+th{box-shadow:inset 1px 0 0 var(--db-line2)}
.db-cmp-it{position:relative;display:flex;flex-direction:column;gap:9px;padding-right:22px}
.db-cmp-it .db-ic{width:44px;height:44px;border-radius:6px}
.db-cmp-nm{font-size:14px;font-weight:600;line-height:1.35}
.db-cmp-it small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--mw-muted)}
.db-cmp-it .db-x{position:absolute;top:-4px;right:-6px}
.db-cmp-t tbody th{padding:8px 14px 8px 16px;border-bottom:1px solid var(--db-line2);text-align:left;font-weight:400;color:var(--mw-muted);vertical-align:top}
.db-cmp-t tbody td{padding:8px 14px;border-bottom:1px solid var(--db-line2);color:var(--mw-text);vertical-align:top;font-variant-numeric:tabular-nums;
  box-shadow:inset 1px 0 0 var(--db-line2);overflow-wrap:anywhere}
.db-cmp-t tbody td small{margin-left:6px;font-size:11.5px;color:var(--mw-muted)}
.db-cmp-t tbody tr:hover th,.db-cmp-t tbody tr:hover td{background:rgba(255,255,255,.025)}
.db-cmp-t tr.g th{padding:16px 16px 7px;border-bottom:1px solid var(--db-line);font:700 11px/1.3 var(--mw-sans);letter-spacing:.8px;text-transform:uppercase;
  color:var(--mw-head);background:none!important}
.db-cmp-t tr.g:first-child th{padding-top:12px}
.db-cmp-t tbody tr:last-child th,.db-cmp-t tbody tr:last-child td{border-bottom:0}
.db-cmp-best .db-cmp-t td.best{color:#9be79b;font-weight:600;background:rgba(95,211,95,.06)}
.db-cmp-best .db-cmp-t tr:hover td.best{background:rgba(95,211,95,.09)}
.db-cmp-t td.best small{font-weight:400}
.db-cmp-diff .db-cmp-t tr.same{display:none}
.db-cmp-0{color:var(--mw-muted)}
.db-cmp-src{display:flex;flex-direction:column;gap:1px;line-height:1.35}
.db-cmp-src b{font-weight:600;color:var(--mw-head)}
.db-cmp-src b .db-sub{font-weight:400}
.db-cmp-t .db-cmp-src small{margin-left:0}
.db-cmp-socks{display:inline-flex;gap:5px;vertical-align:middle}
.db-cmp-socks img{display:block}
.db-cmp-fx{display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.45}
.db-cmp-fx a{color:#7ee07e}
.db-cmp-fx a:hover{color:#b5f5b5}
.db-cmp-fx-k{color:var(--mw-muted)}
/* «Добавить предмет» */
.db-cmp-add{position:relative}
.db .db-cmp-add-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:86px;border:1px dashed rgba(255,255,255,.18);
  border-radius:6px;font-size:13px;color:var(--mw-muted);text-align:center;cursor:pointer;transition:border-color .15s,color .15s,background-color .15s,transform .1s}
.db-cmp-add-b svg{width:18px;height:18px}
.db .db-cmp-add-b:hover{border-color:rgba(143,216,255,.5);color:var(--mw-link);background:rgba(63,168,232,.06)}
.db .db-cmp-add-b:active{transform:scale(.98)}
.db .db-cmp-add-b:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.db-cmp-pick{padding:4px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0b1220}
.db-cmp-add .db-cmp-pick{position:absolute;top:10px;right:10px;width:max(100% - 20px,280px);z-index:5;box-shadow:0 12px 32px rgba(0,0,0,.5);font-weight:400;text-transform:none;letter-spacing:0}
.db .db-cmp-pick input{width:100%;height:34px;padding:0 10px;border:1px solid var(--db-line);border-radius:5px;background:rgba(0,0,0,.35);font-size:13px;color:var(--mw-head)}
.db .db-cmp-pick input:focus{border-color:rgba(143,216,255,.55);outline:none}
.db-cmp-pick ul{max-height:300px;overflow:auto}
.db-cmp-pick ul:not(:empty){margin-top:4px}
.db .db-cmp-pick li button{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:5px;font-size:13px;
  text-align:left;cursor:pointer;transition:background-color .1s}
.db .db-cmp-pick li button:hover,.db .db-cmp-pick li button.on,.db .db-cmp-pick li button:focus-visible{background:rgba(143,216,255,.1);outline:none}
.db-cmp-pick li button span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-cmp-pick li small{font-size:12px;color:var(--mw-muted)}
.db-cmp-pick .empty{padding:8px;font-size:13px;color:var(--mw-muted)}
.db-cmp-empty{padding:22px 20px 24px}
.db-cmp-empty p{max-width:640px;margin-bottom:14px;color:var(--mw-text);line-height:1.55}
.db-cmp-empty .db-cmp-pick{max-width:420px}

@media(max-width:960px){
  .db-sim-cell{flex:none;width:150px}
  .db-sim-cell .db-sim-it{width:auto}
  .db-tray-t,.db-tray-slot a{display:none}
  .db-tray-in{gap:10px;padding:8px}
  .db-tray-slots{display:flex;gap:9px}
  .db-tray-slot{flex:none;justify-content:center;width:38px;height:38px;padding:0}
  .db .db-tray-slot .db-x{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:#0b1220;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
  .db-tray-slot .db-x svg{width:10px;height:10px}
  .db-tray-slot.empty span{display:none}
  .db .db-tray-go{padding:0 12px!important}
  .db .db-tray-clr{width:32px;padding:0}
  .db-tray-clr svg{display:block}
  .db-tray-clr span{display:none}
  .db-cmp-tools{gap:16px;padding:10px 12px}
  .db-cmp-box .db-scroll{overflow-x:auto}
  .db-cmp-t{min-width:680px}
  .db-cmp-t col.l{width:132px}
  .db-cmp-t thead th{position:static}
  .db-cmp-t thead th:first-child,.db-cmp-t tbody tr:not(.g) th{position:sticky;left:0;z-index:2;background:#0b111d}
  .db-cmp-t tbody tr:not(.g) th{padding-left:12px;padding-right:10px}
  .db-cmp-t tr.g th span{position:sticky;left:12px}
}
/* узкий телефон: планка сжимается, чтобы «Очистить» не уходила под ячейки */
@media(max-width:480px){
  .db.db-tray{padding:0 10px 10px}
  .db-tray-in{gap:8px}
  .db-tray-slots{gap:8px}
  .db-tray-slot{width:32px;height:32px}
  .db-tray-slot .db-ic{width:24px;height:24px}
  .db-tray-a{gap:4px}
  .db .db-tray-clr{width:30px}
  .db .db-tray-go{padding:0 10px!important}
}
@media(max-width:340px){
  .db-tray-slots{gap:6px}
  .db-tray-slot{width:28px;height:28px}
  .db-tray-slot .db-ic{width:22px;height:22px}
  .db .db-tray-clr{width:28px}
  .db .db-tray-go{padding:0 8px!important}
}
@media(hover:none){.db .db-cmp{opacity:.8}}
@media(prefers-reduced-motion:reduce){
  .db-cb,.db-cb::after,.db .db-cmp,.db .db-cmp-chk,.db .db-x,.db .db-tray-clr,.db-sw i,.db-sw i::after,.db.db-tray,.db-tray-msg,.db .db-cmp-add-b{transition:none}
  .db-tray-slot.new,.db-tray.shake .db-tray-in{animation:none}
}

/* ---------- скриншоты: карточка в правой колонке (макрос shots в _macros.twig) ---------- */
/* главный кадр — рамка 16:10, кадр целиком; поля по бокам (у узких) или сверху и снизу (у широких) — его же размытое превью */
.db .db-shots-h{display:flex;align-items:center;gap:8px}
.db .db-shots-h .db-n{min-width:0;padding:0;border:0;font:500 11.5px/1 var(--db-mono);letter-spacing:0;color:var(--mw-muted)}
.db a.db-shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#05080e;isolation:isolate}
.db a.db-shot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);pointer-events:none}
.db a.db-shot:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.db-shot-bg{position:absolute;inset:-24px;z-index:-1;background-size:cover;background-position:center;filter:blur(18px) brightness(.5) saturate(1.15)}
.db-shot img{position:relative;display:block;width:100%;height:100%;object-fit:contain;transition:transform .25s ease,filter .15s}
.db-shot:hover img{filter:brightness(1.08)}
.db-shot:active img{transform:scale(.99)}
/* миниатюры под главным кадром: квадраты 4 в ряд, на четвёртой «+N» — сколько кадров ещё не видно */
.db-shot-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
.db a.db-shot-th{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:4px;background:#05080e}
.db a.db-shot-th::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);pointer-events:none}
.db a.db-shot-th:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.db-shot-th img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s ease,filter .15s}
.db-shot-th:hover img{filter:brightness(1.12)}
.db-shot-th:active img{transform:scale(.97)}
.db-shot-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,8,14,.62);font:600 14px/1 var(--db-mono);color:var(--mw-head);
  transition:background-color .15s}
.db-shot-th:hover .db-shot-more{background:rgba(5,8,14,.48)}
@media(prefers-reduced-motion:reduce){.db-shot img,.db-shot-th img,.db-shot-more{transition:none}}

/* ---------- просмотр скриншотов во весь экран (js/db.js, блок [data-shots]) ---------- */
/* окно лежит внутри main.db: переменные и сбросы раздела действуют. Фон страницы под окном притемнён и размыт */
.db-ssv{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;color:var(--mw-head);
  background:rgba(4,7,12,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overscroll-behavior:contain;touch-action:none}
.db-ssv::backdrop{background:transparent}
.db-ssv:focus{outline:none}
.db-ssv[open]{display:grid;grid-template-rows:56px minmax(0,1fr) auto}
.db-ssv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px}
.db-ssv-n{font:500 12.5px/1 var(--db-mono);color:var(--mw-muted);font-variant-numeric:tabular-nums}
.db .db-ssv-btn{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--db-line);border-radius:6px;background:rgba(255,255,255,.03);
  color:var(--mw-text);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .1s}
.db .db-ssv-btn:hover,.db .db-ssv.go-l .db-ssv-prev,.db .db-ssv.go-r .db-ssv-next{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:var(--mw-head)}
.db .db-ssv-btn:active{transform:scale(.96)}
.db .db-ssv-btn:focus-visible,.db .db-ssv-film button:focus-visible{outline:none;box-shadow:0 0 0 1px var(--mw-link)}
.db-ssv-btn svg{width:16px;height:16px}
/* щелчок мимо кадра листает (половина экрана — сторона, js подсвечивает её кнопку классом go-l / go-r); колесо приближает,
   увеличенный кадр обрезается по сцене и тянется (zoomed, drag) */
.db-ssv.go-l,.db-ssv.go-r{cursor:pointer}
.db-ssv-stage{position:relative;display:grid;place-items:center;min-height:0;padding:0 76px;overflow:hidden}
.db-ssv-img{position:relative;z-index:0;display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:4px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);user-select:none;cursor:zoom-in;transition:transform .15s ease-out;will-change:transform}
.db-ssv.zoomed .db-ssv-img{cursor:grab}
.db-ssv.drag,.db-ssv.drag .db-ssv-img{cursor:grabbing}
.db-ssv.drag .db-ssv-img{transition:none}
.db .db-ssv-prev,.db .db-ssv-next{position:absolute;z-index:1;top:50%;width:44px;height:44px;margin-top:-22px}
.db-ssv-prev{left:16px}.db-ssv-next{right:16px}
.db-ssv-foot{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;padding:12px 16px 16px}
.db-ssv-cap{max-width:720px;font-size:13.5px;color:var(--mw-text);text-align:center}
.db-ssv-film{display:flex;gap:6px;max-width:100%;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}
.db-ssv-film::-webkit-scrollbar{display:none}
.db .db-ssv-film button{flex:none;width:64px;height:40px;padding:0;border-radius:4px;overflow:hidden;opacity:.5;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--db-line);transition:opacity .15s,box-shadow .15s}
.db .db-ssv-film button:hover{opacity:.85}
.db .db-ssv-film button.on{opacity:1;box-shadow:0 0 0 1px var(--mw-head)}
.db-ssv-film img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.db-ssv.one .db-ssv-prev,.db-ssv.one .db-ssv-next,.db-ssv.one .db-ssv-film,.db-ssv.one .db-ssv-n{display:none}
@media(max-width:640px){
  .db-ssv[open]{grid-template-rows:52px minmax(0,1fr) auto}
  .db-ssv-stage{padding:0 8px}
  .db .db-ssv-prev,.db .db-ssv-next{display:none}
}
@media(prefers-reduced-motion:reduce){.db .db-ssv-btn,.db .db-ssv-film button,.db-ssv-img{transition:none}}

/* ---------- полосы с прокруткой вбок (вкладки, классы талантов, профессии, семейства питомцев, «Похожие», этажи карты):
   у края, за которым есть что прокрутить, — затухание маской (классы ставит db.js) ---------- */
.db-fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.db-fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px);mask-image:linear-gradient(90deg,transparent,#000 44px)}
.db-fade-l.db-fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
/* список подземелий /db/zones: строка нажимается целиком (db.js) */
.db-table tbody tr.db-row-a{cursor:pointer}
.db-table tbody tr.db-row-a:hover .db-zl-nm{color:var(--mw-link)}

/* ---------- калькулятор талантов на узком экране: сводка очков у нижнего края (talents.twig .tc-dock, talents.js) ----------
   деревья идут столбиком, панель с очками — под третьим; пока она не видна — снизу очки по ветвям значками, «Осталось»,
   «Уровень»; касание — к панели. Полупрозрачная поверх страницы — с размытием, как планка сравнения */
.db .tc-dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:55;display:flex;align-items:center;gap:16px;max-width:520px;margin:0 auto;
  padding:8px 10px 8px 14px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:linear-gradient(rgba(7,11,18,.86),rgba(7,11,18,.78));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--mw-head);text-align:left;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(calc(100% + 16px));transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s,visibility 0s linear .28s}
.db .tc-dock.on{opacity:1;visibility:visible;transform:none;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s,visibility 0s}
.db .tc-dock.on:active{transform:scale(.99)}
.tc-dock-tr{display:flex;gap:12px;margin-right:auto}
.tc-dock-tr span{display:inline-flex;align-items:center;gap:6px;font:600 15px/1 var(--db-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tc-dock-s{display:flex;flex-direction:column;gap:3px;font:600 15px/1 var(--db-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tc-dock-tr i{flex:none;width:18px;height:18px;border-radius:3px;background:center/cover no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.tc-dock-tr span.z{color:var(--mw-muted)}
.tc-dock-s small{font:600 10px/1.1 var(--mw-sans);letter-spacing:.4px;text-transform:uppercase;color:var(--mw-muted)}
.tc-dock-s b{font-weight:600}
.tc-dock-s b.over{color:#ff6a5c}
.tc-dock>svg{flex:none;width:14px;height:14px;color:var(--mw-muted)}
body.db-tray-on .db .tc-dock{bottom:84px}
@media(max-width:400px){.db .tc-dock{gap:12px}.tc-dock-tr{gap:9px}}
@media(max-width:350px){.db .tc-dock{gap:9px;padding-left:10px}.tc-dock-tr{gap:7px}.tc-dock-tr i{width:16px;height:16px}}
/* подсказка «Коснитесь таланта…» на сенсорном экране — над деревьями (talents.js переносит) */
.tc-hint.tc-hint-top{margin:14px 0 -2px;text-align:left}
@media(prefers-reduced-motion:reduce){.db .tc-dock,.db .tc-dock.on{transition:none}}

/* ---------- сенсорный экран и узкое окно: зона нажатия мелких кнопок — не меньше 40 px. Видимый размер, где можно, прежний:
   зону расширяет псевдоэлемент; где нельзя (кнопка в полосе с прокруткой — псевдоэлемент обрежется), выше сама кнопка ---------- */
@media (pointer:coarse),(max-width:640px){
  .db .db-cmp,.db .db-cmp-chk,.db .tc-clear,.db .db-grp-more,.db .db-x,.db .pf-spec-n{position:relative}
  .db .db-cmp::before,.db .tc-clear::before{content:'';position:absolute;inset:-10px}
  .db .db-cmp-chk::before{content:'';position:absolute;inset:-8px -6px}
  .db .db-grp-more::before,.db .pf-spec-n::before{content:'';position:absolute;inset:-12px -6px}
  .db .db-x::before{content:'';position:absolute;inset:-8px}
  .db .db-tray-slot .db-x::before{inset:-11px}
  .db-tab{height:40px}
  .db-tabline{height:40px}
  .db-filter{height:44px}
  .db-filter input{height:40px}
  .db-sel{height:44px}
  .db .db-sel select{height:42px}
  .db .db-btn,.db-cap .db-btn,.db-cut-r .db-btn,.db-nofit .db-btn,.db-f-act .db-btn{height:40px}
  .db-zone{height:40px}
  .db-nav a,.db-nav-more>summary{padding-top:11px;padding-bottom:11px}
  .db-zl-g td{padding-top:11px;padding-bottom:11px}
  .tc-step{height:42px}
  .db .tc-step button{width:40px}
  .db .tc-step input{line-height:40px}
  .db .db-tray-clr,.db .db-tray-go{height:40px}
  .db .db-tray-clr{min-width:40px}
  .db-f input:not([type=checkbox]),.db-f select{height:40px}
  .db-chip span{height:36px}
  .db .tc-sheet-a .db-btn{height:42px}
}