/* Каталог в «Мирах», «Персонажах» и «Партиях» и витрина карточки (23.10, katalog-ui.js, vitrina.js).
   Только токены темы (--bg, --text, --gold…): тринадцать тем красятся сами. Подложки сплошные или почти сплошные от --bg,
   чтобы текст не лежал прямо на заднике темы. Нажатие — сжатие, как в листе «Партия» (ekran.css), без синей вспышки. */

/* --- вкладки «Свои / Каталог» ------------------------------------------------------------------------------------ */
.kt-main {
  display: flex; gap: 4px; padding: 4px; margin: 0 0 18px; width: min(100%, 420px); border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--tv-pod, color-mix(in srgb, var(--bg) 84%, var(--surface-2)));
}
.kt-main-tab {
  appearance: none; flex: 1 1 0; min-height: 44px; padding: 6px 18px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--text-2); background: transparent; -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-release, 160ms) var(--ease-std, ease), filter var(--t-release, 160ms) var(--ease-std, ease), background .16s ease, color .16s ease;
}
.kt-main-tab:hover { color: var(--text); }
.kt-main-tab.is-active { color: var(--text); background: color-mix(in srgb, var(--gold) 26%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-2) 65%, transparent); }
/* «Свои» и «Каталог» (владелец 24.10: «обе одинаково красочно, ни одна не выделяется»): у каждой своя картинка — журнал со
   свечой и библиотека (assets/img/vkladki, gpt-image-1-mini), — поверх тёмная вуаль под белой подписью, одинаковые для обеих.
   Выбранная отмечается только светлым кольцом и чуть ярче; невыбранная та же картинка, чуть приглушена — ни одна не «кричит».
   Блик пробегает по невыбранной раз в несколько секунд (зовёт переключиться); при «уменьшить движение» его нет. */
.kt-main { gap: 6px; }
.kt-main-tab--art, .kt-art { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
  background-size: cover; background-position: center; background-color: #1b1530;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  transition: filter .18s ease, box-shadow .18s ease, transform var(--t-release, 160ms) var(--ease-std, ease); }
.kt-main-tab--svoi, .kt-main-tab--svoi.is-active { background: radial-gradient(ellipse 60% 90% at 50% 50%, rgba(10, 6, 24, .55), rgba(10, 6, 24, .1)), url('../assets/img/vkladki/svoi.webp') center 45% / cover, #2a1a4a; }
.kt-main-tab--katalog, .kt-main-tab--katalog.is-active { background: radial-gradient(ellipse 60% 90% at 50% 50%, rgba(4, 16, 20, .55), rgba(4, 16, 20, .1)), url('../assets/img/vkladki/katalog.webp') center 55% / cover, #123a3a; }
.kt-main-tab--art:not(.is-active) { filter: saturate(.9) brightness(.9); }
.kt-main-tab--art:hover, .kt-art:hover { color: #fff; filter: none; }
.kt-main-tab--art.is-active { color: #fff; filter: none;
  box-shadow: inset 0 0 0 2px rgba(255, 244, 220, .95), 0 0 0 1px rgba(0, 0, 0, .35), 0 6px 18px -8px rgba(255, 214, 150, .8); }
/* «Создать свой мир» и «Открыть Таверну» — та же отделка картинкой: летающий остров (розово-алый) и таверна у очага (изумруд) */
.kt-art--sozdat { background: radial-gradient(ellipse 60% 90% at 50% 50%, rgba(28, 6, 10, .55), rgba(28, 6, 10, .1)), url('../assets/img/vkladki/sozdat.webp') center 40% / cover, #4a1520; }
.kt-art--taverna, .lp-filter-btn.kt-art--taverna { background: radial-gradient(ellipse 60% 90% at 50% 50%, rgba(4, 16, 10, .55), rgba(4, 16, 10, .1)), url('../assets/img/vkladki/taverna.webp') center 55% / cover, #123a25;
  border-color: rgba(255, 255, 255, .18); color: #fff; }
.kt-create { width: min(100%, 420px); border: 0; border-radius: 999px; padding: 6px 18px; margin: -8px 0 16px; font: inherit; font-weight: 700; cursor: pointer; }
/* сжатая шапка: место только вкладкам и поиску; «Создать свой мир» складывается по высоте (блок «плавная шапка» ниже) */
.kt-kat-ic { flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.kt-main-tab--art::after, .kt-art::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); transform: translateX(-120%); }
@media (prefers-reduced-motion: no-preference) {
  .kt-main-tab--art:not(.is-active)::after, .kt-art::after { animation: kt-kat-shine 7s ease-in-out 1.5s infinite; }
}
@keyframes kt-kat-shine { 0%, 72% { transform: translateX(-120%); } 86%, 100% { transform: translateX(120%); } }
.kt-main-tab:active, .kt-act:active, .kt-vit-x:active { transform: scale(.96); filter: brightness(.86); transition-duration: var(--t-press, 90ms); }
.kt-main-tab:focus-visible, .kt-act:focus-visible, .kt-vit-x:focus-visible { outline: 2px solid var(--gold-t, var(--gold)); outline-offset: 2px; }

/* «Своё» прячется целиком, пока выбран «Каталог»; каталог виден только в нём */
.kt-host { display: none; }
[data-ktab="catalog"] > .kt-own, [data-ktab="catalog"] .kt-own { display: none !important; }
[data-ktab="catalog"] .kt-host { display: block; }
#screen-heroes[data-ktab="catalog"] .kt-host { display: block; }

/* --- панель каталога --------------------------------------------------------------------------------------------- */
.kt-bar { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; position: relative; }
.kt-subrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kt-subtabs { flex: 0 1 auto; min-width: 0; }
.kt-sub { min-height: 38px; }
.kt-sub-info { flex: none; display: inline-flex; }
.kt-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.kt-tools .lp-search { flex: 1 1 220px; max-width: 420px; }
.kt-tavern { flex: none; } /* кнопка того же класса, что «Фильтры» (lp-filter-btn): та же форма и высота во всех темах */
.kt-pop select { width: 100%; }
/* переключатель «Миры / Персонажи» в каталоге «Партий» (25.10): стоит в строке поиска, чтобы остаться в сжатой шапке */
.kt-kind { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--tv-pod, color-mix(in srgb, var(--bg) 84%, var(--surface-2))); }
.kt-kind-btn { appearance: none; border: 0; background: none; cursor: pointer; font: inherit; font-size: .9rem; white-space: nowrap; min-height: 34px;
  padding: 4px 14px; border-radius: 999px; color: var(--text-2); transition: background .16s ease, color .16s ease; }
.kt-kind-btn:hover { color: var(--text); }
.kt-kind-btn.is-active { color: var(--text); font-weight: 600; background: color-mix(in srgb, var(--gold) 26%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-2) 65%, transparent); }
.kt-kind-btn:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.kt-gender[hidden] { display: none; }
.kt-check { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; }
.kt-check input { width: 20px; height: 20px; flex: none; accent-color: var(--gold-2); }
.kt-adult { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.kt-adult-info { flex: none; display: inline-flex; }
.kt-note { margin: -4px 0 14px; font-size: .86rem; color: var(--text); padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--tv-pod, color-mix(in srgb, var(--bg) 88%, var(--text) 12%)); }
.kt-note[hidden] { display: none; }

/* --- сетка и карточки -------------------------------------------------------------------------------------------- */
.kt-grid { min-height: 240px; }
.kt-card { position: relative; aspect-ratio: 3 / 4; perspective: 1100px; cursor: pointer; -webkit-tap-highlight-color: transparent; min-width: 0; }
.kt-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s var(--ease-std, ease); }
.kt-card.is-flipped .kt-flip { transform: rotateY(180deg); }
.kt-front, .kt-back {
  position: absolute; inset: 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--border-strong, var(--border));
  -webkit-backface-visibility: hidden; backface-visibility: hidden; box-sizing: border-box; margin: 0;
}
.kt-front { display: block; padding: 0; width: 100%; height: 100%; background: color-mix(in srgb, var(--bg) 86%, var(--text) 14%); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: filter var(--t-release, 160ms) ease, border-color .16s ease; }
.kt-front:active { filter: brightness(.86); }
.kt-card:hover .kt-front { border-color: var(--gold-2, var(--border-strong)); }
.kt-pic { position: absolute; inset: 0; display: block; }
.kt-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kt-pic .ec-letter { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-2); }
.kt-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(to top, rgba(6, 6, 12, .92) 0%, rgba(6, 6, 12, .6) 55%, rgba(6, 6, 12, 0) 100%); pointer-events: none; }
.kt-name {
  position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 2; margin: 0; font-size: 1.02rem; line-height: 1.22; font-weight: 700; color: #fff;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.kt-ic {
  position: absolute; left: 9px; top: 9px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
  background: rgba(8, 8, 14, .78); border: 1px solid rgba(255, 255, 255, .35); color: #fff;
}
.kt-ic svg { width: 15px; height: 15px; }
.kt-ic.is-world { border-color: #7fd0ff; } .kt-ic.is-world svg { color: #7fd0ff; }
.kt-ic.is-hero { border-color: #ffb877; } .kt-ic.is-hero svg { color: #ffb877; }
.kt-ic.is-party { border-color: #c4a6ff; } .kt-ic.is-party svg { color: #c4a6ff; }
.kt-back {
  transform: rotateY(180deg); display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 12px;
  background: var(--tv-pod, color-mix(in srgb, var(--bg) 92%, var(--text) 8%)); color: var(--text); border-color: var(--gold-2, var(--border-strong));
}
.kt-back-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; scrollbar-width: none; }
.kt-back-body::-webkit-scrollbar { display: none; } /* полоса прокрутки на узкой карточке выглядела золотой чертой у края (владелец 26.10); листается пальцем как прежде */
/* затухание у нижнего края: недолистанная строка не выглядит обрезанной на полуслове */
.kt-back-body { -webkit-mask-image: linear-gradient(#000 calc(100% - 14px), transparent); mask-image: linear-gradient(#000 calc(100% - 14px), transparent); padding-bottom: 10px; }
.kt-back-body > * { flex: none; } /* иначе блоки с overflow hidden (имя, описание) схлопываются в ноль, а не листаются */
.kt-back-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.22; color: var(--text); }
.kt-back .kt-badges { position: static; max-width: none; gap: 4px; }
.kt-back .kt-badge { font-size: .68rem; padding: 4px 7px; }
.kt-back .ec-short { margin: 0; font-size: .86rem; line-height: 1.35; color: var(--text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; overflow-wrap: anywhere; }
.kt-back .ec-tegi { display: flex; flex-wrap: wrap; gap: 4px; }
.kt-back .kt-teg { font: inherit; font-size: .7rem; line-height: 1.2; padding: 2px 7px; border-radius: 999px; color: var(--text); background: transparent; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); cursor: pointer; }
.kt-back .kt-teg:hover { border-color: var(--gold); }
.kt-back .kt-teg:focus-visible { outline: 2px solid var(--gold-t, var(--gold)); outline-offset: 1px; }
.kt-back .kt-meta, .kt-back .kt-author { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--text-2); }
.kt-back .kt-author { overflow-wrap: anywhere; }
.kt-open { flex: none; width: 100%; justify-content: center; min-height: 40px; }
.kt-front:focus-visible, .kt-open:focus-visible { outline: 2px solid var(--gold-t, var(--gold)); outline-offset: -4px; }
.kt-card.is-flipped .kt-front { pointer-events: none; }
/* на телефоне выше; описание короче, а тегов один ряд: при 5 строках теги уезжали под «Открыть» и без листания их никто не видел */
@media (max-width: 600px) {
  .kt-card, .kt-skel { aspect-ratio: 2 / 3; }
  .kt-back .ec-short { -webkit-line-clamp: 3; }
  /* плашки в один ряд: тип и так виден значком на лице и переключателем «Миры / Персонажи», а столбик из трёх плашек съедал место тегов */
  .kt-back .kt-badges .kt-type { display: none; }
  .kt-back .kt-badge { font-size: .62rem; padding: 2px 6px; }
  .kt-back .ec-tegi { max-height: 20px; overflow: hidden; } /* перенос остаётся: лишние теги уходят на скрытый второй ряд целиком, без обрезанной половинки */
}
@media (max-width: 400px) {
  .kt-back { padding: 9px; gap: 6px; }
  .kt-back .ec-short { -webkit-line-clamp: 2; font-size: .8rem; }
  .kt-name { font-size: .94rem; left: 9px; right: 9px; bottom: 9px; }
}
/* без движения: вместо поворота смена сторон на месте */
@media (prefers-reduced-motion: reduce) {
  .kt-flip, .kt-card.is-flipped .kt-flip { transition: none; transform: none; transform-style: flat; }
  .kt-back { transform: none; visibility: hidden; }
  .kt-card.is-flipped .kt-back { visibility: visible; }
  .kt-card.is-flipped .kt-front { visibility: hidden; }
}
.kt-card .kt-meta[hidden] { display: none; }
.kt-badges { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 20px); }
.kt-badge {
  font-style: normal; font-size: .72rem; font-weight: 700; line-height: 1; padding: 5px 9px; border-radius: 999px;
  color: #fff; background: rgba(8, 8, 14, .78); border: 1px solid rgba(255, 255, 255, .35);
}
.kt-badge.is-official { border-color: #ffd54a; }
.kt-badge.is-adult { background: #9b2c3a; border-color: #fff; }
.kt-skel { aspect-ratio: 3 / 4; pointer-events: none; background: color-mix(in srgb, var(--bg) 86%, var(--text) 14%); border: 1px solid var(--border); border-radius: 16px; }
.kt-skel { display: block; }
.kt-empty { grid-column: 1 / -1; }
.kt-empty-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.kt-more { display: flex; justify-content: center; margin-top: 16px; min-height: 36px; }
.kt-more button[hidden] { display: none; }
.kt-sentinel { height: 1px; }

/* --- витрина ----------------------------------------------------------------------------------------------------- */
.kt-vit-back { position: fixed; inset: 0; z-index: 80; background: rgba(6, 5, 10, .6); opacity: 0; transition: opacity var(--t-scrim-out, 200ms) linear; }
.kt-vit-back.is-open { opacity: 1; transition-duration: var(--t-scrim-in, 240ms); }
.kt-vit-back[hidden], .kt-vit[hidden] { display: none; }
.kt-vit {
  position: fixed; z-index: 81; left: 0; right: 0; bottom: 0; top: 0; display: flex; flex-direction: column; overflow: hidden; color: var(--text);
  background-color: var(--bg); background-image: var(--pt-sheen, none), linear-gradient(165deg, var(--surface), var(--surface-tint, var(--surface)));
  font-family: var(--pt-ui, inherit); outline: none;
  transform: translateY(102%); transition: transform var(--t-sheet-out, 200ms) var(--ease-sheet-out, ease-in);
}
.kt-vit.is-open { transform: none; transition: transform var(--t-sheet-in, 320ms) var(--ease-sheet-in, ease-out); }
.kt-vit.is-dragging { transition: none; }
.kt-vit-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

.kt-vit-art { position: relative; width: 100%; height: clamp(230px, 46vh, 460px); overflow: hidden; background: color-mix(in srgb, var(--bg) 78%, var(--gold) 22%); }
.kt-vit-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(90% 80% at 70% 20%, color-mix(in srgb, var(--gold) 34%, transparent), transparent 70%); }
.kt-vit-ph svg { width: 34%; max-width: 160px; height: auto; color: var(--text); opacity: .72; }
.kt-vit-ph[hidden], .kt-vit-img[hidden] { display: none; }
.kt-vit-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.kt-vit-art.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .35)); pointer-events: none; }
.kt-vit-badges { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 28px); }
.kt-vit-x {
  position: absolute; right: 12px; top: 12px; z-index: 3; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(8, 8, 14, .66); border: 1px solid rgba(255, 255, 255, .4); -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-release, 160ms) var(--ease-std, ease), filter var(--t-release, 160ms) var(--ease-std, ease);
}

.kt-vit-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px 0; }
.kt-act {
  width: 100%; min-height: 56px; padding: 10px 16px; border-radius: 10px; font-size: 1.02rem; font-weight: 700; line-height: 1.25; text-align: center; cursor: pointer; white-space: normal;
  -webkit-tap-highlight-color: transparent; transition: transform var(--t-release, 160ms) var(--ease-std, ease), filter var(--t-release, 160ms) var(--ease-std, ease);
}
.kt-act:disabled { cursor: progress; }
/* Режим на ремонте (remont.js): кнопка на месте, но неактивна; слово «Ремонт» и подпись мельче. Пунктир, а не прозрачность (читаемость состояний) */
.kt-act.is-closed { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: not-allowed; border-style: dashed; }
.kt-act.is-closed .kt-act-sub { font-size: .78rem; font-weight: 500; line-height: 1.2; }
.kt-vit-err { margin: 12px 16px 0; }
.kt-vit-err[hidden] { display: none; }

.kt-vit-body { padding: 18px 16px 6px; display: flex; flex-direction: column; gap: 12px; }
.kt-vit-title { margin: 0; font-family: var(--pt-title, inherit); font-weight: var(--pt-title-weight, 700); font-size: 1.5rem; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.kt-vit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kt-vit-meta[hidden] { display: none; }
.kt-vit-tail { display: inline-flex; align-items: center; gap: 8px; flex: none; max-width: 100%; }
.kt-vit-pill { font-size: .82rem; padding: 4px 11px; border-radius: 999px; color: var(--text); border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--bg) 86%, var(--text) 14%); }
.kt-vit-short { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--text); font-weight: 600; }
.kt-vit-short[hidden] { display: none; }
.kt-vit-desc { font-size: .95rem; line-height: 1.55; color: var(--text); min-height: 64px; }
.kt-vit-desc p { margin: 0 0 .8em; overflow-wrap: anywhere; }
.kt-vit-desc p:last-child { margin-bottom: 0; }
.kt-vit-desc.is-loading::before { content: ''; display: block; height: 14px; width: 70%; border-radius: 7px; background: color-mix(in srgb, var(--bg) 80%, var(--text) 20%); box-shadow: 0 24px 0 color-mix(in srgb, var(--bg) 80%, var(--text) 20%), 0 48px 0 -0px color-mix(in srgb, var(--bg) 80%, var(--text) 20%); margin-bottom: 52px; }
.kt-vit-nodesc { color: var(--text-2); }
.kt-vit-tegi { display: flex; flex-wrap: wrap; gap: 6px; }
.kt-vit-tegi[hidden] { display: none; }
.kt-tag { font-style: normal; font-size: .8rem; padding: 3px 11px; border-radius: 999px; color: var(--text); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border-strong)); background: color-mix(in srgb, var(--bg) 86%, var(--gold) 14%); }

/* ПК и планшет: большое окно по центру, кнопки рядом */
@media (min-width: 701px) {
  .kt-vit {
    left: 50%; right: auto; top: 50%; bottom: auto; width: min(760px, calc(100vw - 48px)); max-height: min(92vh, 900px);
    border-radius: 20px; border: 1px solid var(--pt-frame, var(--border-strong));
    box-shadow: 0 24px 80px -16px rgba(0, 0, 0, .8); transform: translate(-50%, calc(-50% + 24px)); opacity: 0;
    transition: transform var(--t-sheet-out, 200ms) var(--ease-sheet-out, ease-in), opacity var(--t-sheet-out, 200ms) linear;
  }
  .kt-vit.is-open { transform: translate(-50%, -50%); opacity: 1; transition: transform var(--t-sheet-in, 320ms) var(--ease-sheet-in, ease-out), opacity var(--t-scrim-in, 240ms) linear; }
  /* на ПК обложка (она портретная) лежит целиком по центру на размытой копии себя: при заливке на всю ширину резалась голова */
  .kt-vit-art { height: clamp(280px, 50vh, 480px); }
  .kt-vit-art.has-img::before { content: ''; position: absolute; inset: -30px; background: var(--kt-art, none) center / cover; filter: blur(26px) brightness(.55) saturate(1.1); }
  .kt-vit-art.has-img .kt-vit-img { object-fit: contain; }
  .kt-vit-actions { grid-template-columns: repeat(var(--kt-n, 1), minmax(0, 1fr)); padding: 16px 20px 0; }
  .kt-vit-actions[data-count="2"] { --kt-n: 2; }
  .kt-vit-body { padding: 20px 20px 8px; }
  .kt-vit-err { margin: 12px 20px 0; }
}

@media (max-width: 600px) {
  .kt-tools { flex-wrap: wrap; }
  .kt-tools .lp-search { flex-basis: 100%; max-width: none; }
  .kt-kind { width: 100%; }
  .kt-kind-btn { flex: 1 1 0; }
  .kt-tavern { flex: 1 1 auto; justify-content: center; }
  .kt-pop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 72px; width: auto; max-height: calc(100vh - 150px); }
  .kt-main { width: 100%; }
  .kt-subrow { flex-wrap: nowrap; }
}
@media (max-width: 400px) {
  /* три подвкладки и «!» в моноширинной теме (CRT) на 320 px не умещались: «Топ» уезжал за край */
  html body .kt-subtabs .kt-sub { padding-left: 10px; padding-right: 10px; font-size: .85rem; }
  .kt-subrow { gap: 4px; }
  .kt-main-tab { padding-left: 10px; padding-right: 10px; }
  .kt-vit-title { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kt-main-tab:active, .kt-act:active, .kt-vit-x:active { transform: none; }
}
@media (max-width: 340px) {
  html body .kt-subtabs .kt-sub { padding-left: 6px; padding-right: 6px; font-size: .78rem; }
  .kt-subtabs { gap: 2px; padding: 3px; }
}
/* «Розовое королевство»: глянцевая полоса кнопки лежала ПОВЕРХ текста, и двухстрочная подпись (320 px) задевала её.
   Полоса уходит под текст: у кнопки свой слой, полоса на -1 */
html[data-theme="pink_kingdom"] .btn-primary.kt-act { isolation: isolate; }
html[data-theme="pink_kingdom"] .btn-primary.kt-act::before { z-index: -1; height: 26%; opacity: .75; }

/* --- липкая шапка разделов (23.10, shapka.js) --------------------------------------------------------------------
   Название, «Свои / Каталог», панель списка, поиск и «Фильтры» остаются под верхней полосой игры при прокрутке.
   Прилипла - класс is-stuck: шапка становится position: fixed под верхней полосой, название уходит, ряды сжимаются,
   подложка сплошная, а маячок .kt-sent получает высоту развёрнутой шапки (shapka.js): карточки не сдвигаются.
   Не sticky нарочно: при вводе в поле внутри sticky Chrome «показывает каретку» по месту в потоке и сам прокручивает
   страницу вверх (это и был прыжок); у fixed такого нет.
   Без transform/filter/contain на шапке: окна «Фильтры» на телефоне - position: fixed внутри неё. */
.kt-sent { height: 0; margin: 0; padding: 0; pointer-events: none; }
/* Chrome «держит якорь» при смене раскладки выше видимого и сам двигает прокрутку; шапка то выходит из потока, то входит,
   а замер высоты временно меняет её состояние: якорь отключён, положение страницы решает только shapka.js */
#screen-list, #screen-heroes, #screen-worlds { overflow-anchor: none; }
.kt-head {
  position: relative; z-index: 30;
  margin: 0 -16px 8px; padding: 0 16px 10px; min-width: 0;
}
.kt-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 16px; }
.kt-title h1 { margin: 0; }
.kt-barhost { display: none; }
[data-ktab="catalog"] .kt-barhost { display: block; }
.kt-head .kt-main { margin-bottom: 12px; }
.kt-head .lp-bar, .kt-head .kt-bar { margin-bottom: 0; }
.kt-head .lp-host[hidden] { display: none; }
.kt-head.is-stuck {
  position: fixed; top: var(--igra-topbar-h, 56px); width: var(--kt-w, auto); box-sizing: border-box; margin-bottom: 0; /* по горизонтали остаётся на месте в потоке */
  padding-top: 6px; padding-bottom: 8px; /* сплошная подложка - .kt-head::before (плавная шапка ниже) */
}
.kt-head.is-stuck.has-under { box-shadow: 0 10px 14px -12px rgba(0, 0, 0, .75); border-bottom: 1px solid var(--border); }
.kt-head.is-stuck .kt-title { display: none; }
.kt-head.is-stuck .kt-main { margin-bottom: 6px; }
.kt-head.is-stuck .lp-bar, .kt-head.is-stuck .kt-bar { gap: 6px 10px; }

/* запас высоты под списком, пока шапка прилипла: список не становится короче окна, страница не срезается до нуля */
.kt-held #chatList, .kt-held #charCols, .kt-held #worldManageCards, .kt-held .kt-host {
  min-height: calc(100vh - var(--igra-topbar-h, 56px) - var(--kt-hc, 140px) - 12px);
  min-height: calc(100dvh - var(--igra-topbar-h, 56px) - var(--kt-hc, 140px) - 12px);
}
/* прокрутка к элементу (фокус, якорь) не прячет его под шапкой */
html:has(.igra-shell > .kt-head:not([hidden])) { scroll-padding-top: calc(var(--igra-topbar-h, 56px) + 150px); }

/* ПК и планшет: сжатая шапка в одну-две строки. Ряды сжатой шапки меньше развёрнутых; при свёртке (shapka.js fold) большой ряд
   сменяется маленьким на одном месте, без масштаба (25.10: масштаб тянул текст, а ряды полного размера делали шапку громоздкой) */
@media (min-width: 701px) {
  .kt-head.is-stuck .kt-main { width: min(100%, 300px); }
  .kt-head.is-stuck .kt-main-tab { min-height: 38px; padding-top: 3px; padding-bottom: 3px; }
}

/* Телефон: сжатая шапка не выше ~150 px (390x844) и ~140 px (320x640). Зоны нажатия остаются большими за счёт ::after */
@media (max-width: 700px) {
  .kt-head { margin-left: -16px; margin-right: -16px; }
  /* Чистка 23.10, п. 16: заголовок списка на телефоне мельче и ближе к вкладкам. Плашку НЕ убираем: замер задника под заголовком
     без плашки (chk_h1plaque, 13 тем, 390 px) - у 8 сюжетных тем контраст цвета заголовка к заднику 1.0-3.9 (pink_kingdom: белое на белом 1.0,
     crt 1.03, noir 1.76, fantasy 1.54), а плашка его держит; поэтому плашка остаётся, но компактнее. */
  .kt-title { margin-bottom: 10px; }
  html body .igra-shell .kt-title h1.display { font-size: 1.6rem; line-height: 1.15; } /* html body: перебивает clamp() у темы crt (themes.css:129) */
  html[data-story="1"] .igra-shell .kt-title h1.display:not(.igra-title) { padding: 3px 12px 4px; }
  .kt-head.is-stuck { padding-top: 4px; padding-bottom: 6px; }
  .kt-head.is-stuck .kt-main { padding: 3px; gap: 3px; width: 100%; margin-bottom: 5px; }
  html body .kt-head.is-stuck .kt-main-tab { min-height: 32px; padding: 2px 12px; font-size: .92rem; position: relative; }
  html body .kt-head.is-stuck .lp-tabs { padding: 3px; }
  html body .kt-head.is-stuck .lp-tab { min-height: 28px; padding: 3px 12px; font-size: .86rem; position: relative; }
  .kt-head.is-stuck .kt-main-tab::after, .kt-head.is-stuck .lp-tab::after { content: ''; position: absolute; inset: -3px 0; }
  .kt-head.is-stuck .lp-bar, .kt-head.is-stuck .kt-bar { gap: 5px; }
  .kt-head.is-stuck .kt-subrow { gap: 6px; }
  .kt-head.is-stuck .kt-tools, .kt-head.is-stuck .lp-tools { flex-wrap: nowrap; gap: 6px; }
  .kt-head.is-stuck .kt-tools .lp-search, .kt-head.is-stuck .lp-tools .lp-search { flex: 1 1 0; min-width: 0; }
  html body .kt-head.is-stuck .lp-search input { height: 36px; }
  .kt-head.is-stuck .lp-filter-btn { height: 36px; padding: 0 12px; }
  .kt-head.is-stuck .kt-tavern { display: none; }
  /* переключатель «Миры / Персонажи» остаётся в сжатой шапке: в одну строку с поиском, «Фильтры» без слова (значок и число) */
  .kt-head.is-stuck .kt-kind { width: auto; padding: 2px; }
  html body .kt-head.is-stuck .kt-kind-btn { flex: none; min-height: 30px; padding: 2px 9px; font-size: .84rem; position: relative; }
  .kt-head.is-stuck .kt-kind-btn::after { content: ''; position: absolute; inset: -3px 0; }
  .kt-head.is-stuck .kt-tools--kind .lp-filter-btn > span:not(.lp-badge) { display: none; }
  .kt-head.is-stuck .kt-tools--kind .lp-filter-btn { padding: 0 10px; gap: 5px; }
}
@media (max-width: 340px) {
  .kt-head.is-stuck { padding-top: 3px; padding-bottom: 5px; }
  html body .kt-head.is-stuck .kt-main-tab { min-height: 30px; }
  html body .kt-head.is-stuck .lp-tab { min-height: 26px; }
  html body .kt-head.is-stuck .lp-search input, .kt-head.is-stuck .lp-filter-btn { height: 34px; }
}
/* --- пометка типа на карточках: «Мир» / «Персонаж» / «Партия» (typechip.js) -------------------------------------------
   Одна система во всех разделах и в витрине. Фиксированные цвета, как у «Официальная» и «18+»: читается в любой теме. */
.kt-type { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; padding: 5px 9px 5px 7px; letter-spacing: .2px; }
.kt-type svg { flex: none; width: 13px; height: 13px; }
.kt-type.is-world { border-color: #7fd0ff; }
.kt-type.is-world svg { color: #7fd0ff; }
.kt-type.is-hero { border-color: #ffb877; }
.kt-type.is-hero svg { color: #ffb877; }
.kt-type.is-party { border-color: #c4a6ff; }
.kt-type.is-party svg { color: #c4a6ff; }
.ec-cover > .kt-badges, .pc-cover > .kt-badges { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 5px; max-width: calc(100% - 56px); } /* справа остаётся место под звезду */
.kt-lead {
  margin: 8px 0 0; padding: 6px 12px; font-size: .86rem; line-height: 1.35; color: var(--text); border-radius: 12px;
  border: 1px solid var(--border-strong); background: var(--tv-pod, color-mix(in srgb, var(--bg) 88%, var(--text) 12%)); /* сплошная подложка: поверх задника темы текст читается */
}
.kt-lead[hidden] { display: none; }
/* .kt-lead в сжатой шапке складывается - блок «плавная шапка» ниже */
@media (max-width: 400px) {
  .kt-type { font-size: .7rem; padding: 4px 7px 4px 6px; gap: 4px; }
  .kt-badge { font-size: .68rem; padding: 4px 7px; }
}
@media (max-width: 340px) {
  .kt-type svg { display: none; } /* «Персонаж» со значком шире места до звезды на 320 */
  /* карточка каталога на 320 уже двух плашек в ряд: четыре плашки встают столбиком и должны уложиться в обложку 103 px */
  .ec-cover > .kt-badges, .pc-cover > .kt-badges { gap: 3px; top: 8px; }
  .kt-type, .kt-badge { padding-top: 3px; padding-bottom: 3px; }
}

/* --- плавная шапка (25.10, владелец: «резкий переход, дёргается»; затем «не 60 кадров, графические баги») ----------------
   Прилипает шапка, когда до верхней полосы дошли вкладки (shapka.js, st.off): название уже уехало вместе со страницей.
   Раскладка сжатой/развёрнутой шапки меняется сразу, а плавность даёт flip() в shapka.js: части шапки едут со старых мест
   сдвигом и масштабом (transform/opacity на видеочипе), «Создать свой мир» тает, подложка (::before) растягивается.
   Высоты и шрифты здесь НЕ анимируются: такой переход пересчитывает раскладку каждый кадр и на телефоне идёт рывками.
   kt-measuring - на время замера в shapka.js переходы выключены. */
html body .kt-head.is-stuck .kt-create, .kt-head.is-stuck .kt-lead {
  max-height: 0; min-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0;
  overflow: hidden; visibility: hidden; pointer-events: none;
}
/* блоком, а не inline-flex: сложенная до нуля строчная кнопка оставляла строку высотой ~27 px */
.kt-head .kt-create { display: flex; }
/* подложка шапки - отдельным слоем: её растягивает flip(), а у самой шапки фон не меняется */
.kt-head::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bg); opacity: 0; pointer-events: none; }
.kt-head.is-stuck::before { opacity: 1; }
/* подложка прилипшей шапки заходит на 4 px под верхнюю полосу: высота полосы дробная, а шапка встаёт по округлённой
   (--igra-topbar-h), и между ними на плотном экране телефона просвечивала полоска карточек (владелец 25.10: «зазор в миллиметр») */
.kt-head.is-stuck::before { top: -4px; }
.kt-head.kt-measuring, .kt-head.kt-measuring * { transition: none !important; animation: none !important; }
/* копия развёрнутой шапки на время свёртки (shapka.js fold): стоит поверх, где стояла бы шапка в потоке, едет со страницей */
/* под настоящей шапкой (z 30): уходящие части уезжают под ряды и под проявляющуюся подложку */
.kt-head.kt-ghosthead { position: fixed; margin: 0; z-index: 29; box-sizing: border-box; pointer-events: none; }

/* Таверна на телефоне (чистка 23.10, п. 18). Было: «Все / Авторские / По мотивам», поиск, «Новые / Лучшие», жанры в две строки и
   «Показывать 18+» — семь рядов ≈ 250 px, первая запись с y 617. Стало: поиск; «откуда» и порядок — одной строкой; жанры и
   «18+» — одним рядом, жанры листаются вбок (затухание правого края — scrollfade.js, подключён в taverna-section.js).
   Только раскладка: цвета и состояния остаются у taverna.css и тем. Раздельный /taverna/ этих правил не получает. */
@media (max-width: 600px) {
  #screen-taverna .tv-filters { gap: 8px; margin-bottom: 12px; }
  #screen-taverna .tv-filter-row:not(.tv-filter-row-2) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  #screen-taverna .tv-filter-row:not(.tv-filter-row-2) > .tv-search { grid-column: 1 / -1; grid-row: 1; order: 0; }
  #screen-taverna .tv-filter-row:not(.tv-filter-row-2) > .tv-seg-origin { grid-column: 1; grid-row: 2; flex: none; justify-self: start; }
  #screen-taverna .tv-filter-row:not(.tv-filter-row-2) > .tv-seg:not(.tv-seg-origin) { grid-column: 2; grid-row: 2; justify-self: end; }
  #screen-taverna .tv-filter-row:not(.tv-filter-row-2) > .tv-seg label { flex: none; padding: 5px 8px; }
  /* Жанры и «18+»: «18+» всегда на виду слева, жанры справа от него листаются; рамка фокуса не режется — отступ внутри и минус снаружи */
  #screen-taverna .tv-filter-row-2 { flex-wrap: nowrap; gap: 8px; align-items: center; }
  #screen-taverna .tv-filter-row-2 > .tv-switch { order: -1; flex: none; }
  #screen-taverna .tv-filter-row-2 > .tv-chips {
    flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; padding: 4px; margin: -4px;
  }
  #screen-taverna .tv-chips::-webkit-scrollbar { display: none; }
  #screen-taverna .tv-chips label { flex: none; }
  /* Слово «Показывать» на телефоне не рисуем, но читалке оно остаётся: имя переключателя — «Показывать 18+» */
  #screen-taverna .tv-switch-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Узкие телефоны: «Все / Авторские / По мотивам» рядом с порядком уже не помещаются — порядок уходит к поиску */
@media (max-width: 374px) {
  #screen-taverna .tv-filter-row:not(.tv-filter-row-2) > .tv-search { grid-column: 1; }
  #screen-taverna .tv-filter-row:not(.tv-filter-row-2) > .tv-seg:not(.tv-seg-origin) { grid-column: 2; grid-row: 1; }
  #screen-taverna .tv-filter-row:not(.tv-filter-row-2) > .tv-seg-origin { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  #screen-taverna .tv-filter-row:not(.tv-filter-row-2) > .tv-seg-origin label { flex: 1; }
  /* поиск делит строку с порядком: порядок компактнее, подсказка «Название, тег…» (111 px) помещается и на 320 */
  #screen-taverna .tv-filter-row:not(.tv-filter-row-2) > .tv-seg:not(.tv-seg-origin) label { padding: 5px 6px; }
  #screen-taverna .tv-search input { padding-left: 38px; padding-right: 10px; }
  #screen-taverna .tv-search-ic { left: 10px; }
}
/* «Откуда» скрыто (лента без происхождения): порядок встаёт рядом с поиском и на широком телефоне */
@media (max-width: 600px) {
  #screen-taverna .tv-filter-row:not(.tv-filter-row-2):has(> .tv-seg-origin[hidden]) > .tv-search { grid-column: 1; }
  #screen-taverna .tv-filter-row:not(.tv-filter-row-2):has(> .tv-seg-origin[hidden]) > .tv-seg:not(.tv-seg-origin) { grid-column: 2; grid-row: 1; }
}