/* Панель над списками «Партии», «Герои», «NPC», «Миры» и крупные карточки (19.10, образец - StoryForge).
   Только токены темы: подложки - от --bg (непрозрачные), акцент - --gold, текст - --text. Разметка - js/libpanel.js. */

/* Экраны со списками шире: сетку карточек ограничивает уже .igra-main (справа колонка сцены), а не узкий shell */
#screen-list.igra-shell, #screen-heroes.igra-shell, #screen-worlds.igra-shell { width: min(1240px, 100%); }

.lp-host[hidden] { display: none; }
.lp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 0 0 18px; position: relative; }
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Вкладки-фильтры */
.lp-tabs {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--tv-pod, color-mix(in srgb, var(--bg) 84%, var(--surface-2))); border: 1px solid var(--border-strong);
}
.lp-tabs::-webkit-scrollbar { display: none; }
.lp-tab {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit; font-size: .9rem; white-space: nowrap;
  padding: 7px 16px; border-radius: 999px; color: var(--text-2); transition: background .16s ease, color .16s ease;
}
.lp-tab:hover { color: var(--text); }
.lp-tab[aria-pressed="true"] {
  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);
}
.lp-tab-n { margin-left: 3px; font-size: .76rem; opacity: .85; }
.lp-tab:focus-visible, .lp-filter-btn:focus-visible, .lp-star:focus-visible, .lp-create:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }

/* Поиск и «Фильтры» справа */
.lp-tools { display: flex; align-items: center; gap: 10px; flex: 1 1 340px; justify-content: flex-end; min-width: 0; }
.lp-search { position: relative; display: block; flex: 1 1 220px; max-width: 420px; min-width: 0; }
.lp-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
html .igra-shell .lp-search input {
  width: 100%; height: 42px; margin: 0; padding: 0 14px 0 40px; border-radius: 999px; font-size: .92rem;
  background: var(--tv-pod, color-mix(in srgb, var(--bg) 84%, var(--surface-2))); /* сплошная подложка: поверх задника темы текст запроса и подсказка должны читаться */
}
.lp-filter-wrap { position: relative; flex: none; }
.lp-filter-btn {
  appearance: none; cursor: pointer; font: inherit; font-size: .9rem; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px;
  border-radius: 999px; color: var(--text); border: 1px solid var(--border-strong);
  background: var(--tv-pod, color-mix(in srgb, var(--bg) 84%, var(--surface-2)));
}
.lp-filter-btn:hover, .lp-filter-btn[aria-expanded="true"], .lp-filter-btn.is-active { border-color: var(--gold-2); }
.lp-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: .74rem; line-height: 20px; text-align: center;
  color: var(--text); background: color-mix(in srgb, var(--gold) 45%, var(--bg)); border: 1px solid var(--gold-2);
}
.lp-badge[hidden] { display: none; }

/* Выпадающая панель */
.lp-pop {
  position: absolute; z-index: 40; right: 0; top: calc(100% + 8px); width: min(440px, calc(100vw - 32px)); max-height: min(70vh, 640px); overflow-y: auto;
  padding: 16px; border-radius: 16px; border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--bg) 94%, var(--text) 6%); box-shadow: 0 18px 48px -12px rgba(0,0,0,.65);
  --tv-pod: color-mix(in srgb, var(--bg) 86%, var(--text) 14%);
}
.lp-pop[hidden] { display: none; }
.lp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.lp-field > label { font-size: .8rem; font-weight: 600; color: var(--text); }
.lp-pop-foot { display: flex; justify-content: flex-end; gap: 10px; }
.lp-tegi .tv-tegbar { margin-bottom: 0; }
.lp-tegi .tv-tegbar-line { flex-wrap: wrap; }
/* 20.10 (замечание 8): в панели теги переносятся строками, а не листаются вбок; «Сбросить теги» убрана — есть «Сбросить» внизу панели */
.lp-tegi .tv-tegrow { flex-wrap: wrap; overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
.lp-tegi .tv-tegbar-line::after { display: none; }
.lp-tegi .tv-teg-reset { display: none !important; }
/* 25.10 (окно «Фильтры» на телефоне 412 px: «Все теги» слева отдельно, теги одним столбцом, огромные пилюли): правила Таверны для
   узкого экрана (taverna.css, max-width 600) ставят «Все теги» чипом слева (order -1) и дают строке тегов flex 1 1 0 - в окне она
   получала остаток ширины около 230 px, и каждый чип занимал строку; зоны нажатия 44 px (coarse) раздували чипы в высоту.
   В окне: «Все теги» кнопкой над рядом, теги плотным переносимым рядом на всю ширину, пилюли обычного размера */
.lp-tegi .tv-tegbar-line { flex-direction: column; align-items: stretch; gap: 8px; }
.lp-tegi .tv-teg-all { order: -1; align-self: flex-start; }
.lp-tegi .tv-tegrow { flex: 0 0 auto; width: 100%; margin: 0; row-gap: 6px; column-gap: 6px; }
.lp-tegi .tv-teg { min-height: 34px; padding: 4px 11px; font-size: .8rem; }
/* Панель «Все теги» Таверны красилась тёмным rgba(12,10,19,.72) в любой теме: на светлой её текст (--text-3) тонул. Подложка от --bg темы, как у остальных плашек */
.tv-tegpanel { background: var(--tv-pod, color-mix(in srgb, var(--bg) 84%, var(--surface-2))); }

/* Сетка крупных карточек */
.igra-list.lp-grid, .lp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-items: stretch;
}
.lp-grid > .lp-empty { grid-column: 1 / -1; }
.lp-empty {
  padding: 28px 20px; text-align: center; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 12px;
  border-radius: 16px; border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--bg) 90%, var(--text) 10%); /* сплошная подложка: текст не лежит прямо на заднике темы */
}
.tv-tegpanel-empty[hidden] { display: none !important; } /* у «Такого тега нет» в светлой теме display перебивал hidden, и подсказка торчала всегда */
.lp-empty p { margin: 0; }

/* «+ Создать» - первая карточка */
.lp-create {
  appearance: none; cursor: pointer; font: inherit; color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 200px; padding: 20px; border-radius: 16px; border: 2px dashed color-mix(in srgb, var(--gold-2) 60%, var(--border-strong));
  background: color-mix(in srgb, var(--bg) 88%, var(--gold) 12%);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.lp-create:hover { border-color: var(--gold-2); background: color-mix(in srgb, var(--bg) 78%, var(--gold) 22%); transform: translateY(-2px); }
.lp-create-plus {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  color: var(--text); background: color-mix(in srgb, var(--bg) 72%, var(--gold) 28%); border: 2px solid var(--gold-2); /* знак на подложке темы, а не белый на золоте: на светлых золотых темах белое не читалось */
}
.lp-create-plus svg { width: 26px; height: 26px; display: block; } /* крест рисунком, а не символом шрифта: символ садился ниже центра на 3-4 px (U2-005) */
.lp-create-t { font-weight: 600; font-size: .98rem; }

/* Звезда избранного: поверх картинки - тёмная подложка и светлая звезда, читается на любой обложке */
.lp-star {
  appearance: none; cursor: pointer; width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgba(8,8,14,.62); border: 1px solid rgba(255,255,255,.35); transition: background .14s ease, color .14s ease, transform .14s ease;
}
.lp-star:hover { background: rgba(8,8,14,.82); transform: scale(1.06); }
.lp-star.is-on { color: #ffd54a; border-color: #ffd54a; }

/* Карточка партии */
.igra-chat-item.igra-pcard {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-left-width: 1px; border-top: 4px solid var(--kc, var(--border-strong)); border-radius: 16px;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.igra-chat-item.igra-pcard:hover { transform: translateY(-2px); border-color: var(--gold-2); box-shadow: 0 12px 28px -14px rgba(0,0,0,.7); }
.pc-cover, .ec-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in srgb, var(--bg) 80%, var(--gold) 20%); }
.pc-cover img, .ec-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-cover::after, .ec-cover:has(> img)::after { /* затемнение под значками - только поверх картинки; на буквенной обложке светлой темы оно грязнило фон */ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.5)); pointer-events: none; }
.pc-cover .igra-kind-badge { position: absolute; left: 10px; bottom: 10px; z-index: 2; margin: 0; background: rgba(8,8,14,.78); color: #fff; }
.pc-cover .lp-star, .ec-cover .lp-star { position: absolute; right: 10px; top: 10px; z-index: 2; }
.igra-pcard .txt { padding: 12px 46px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.igra-pcard .txt b { font-size: 1.04rem; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.igra-pcard .txt small { display: block; font-size: .84rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igra-pcard .txt .pc-meta { white-space: normal; }
.igra-pcard .txt .pc-world { color: var(--text); }
/* специфичность выше темы: html[data-theme="neo_action"] .btn { position: relative } иначе уводит крестик из угла карточки (20.10) */
.igra-chat-item.igra-pcard .del { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 8px; }
/* «⋯» вместо «✕» (чистка 23.10, п. 23, libpanel.js attachCardMenu): тихая кнопка без рамки и заливки, цвета из токенов темы;
   зона нажатия 48 px — ::after в igra.css. Состояния без прозрачности: наведение и открытое меню — подложка из --text. */
.igra-pcard .del.lp-more, .igra-ecard .del.lp-more { background: transparent; border-color: transparent; color: var(--text-2); }
.igra-pcard .del.lp-more:hover, .igra-ecard .del.lp-more:hover,
.igra-pcard .del.lp-more[aria-expanded="true"], .igra-ecard .del.lp-more[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 12%, transparent); border-color: transparent; color: var(--text); }
.igra-pcard .del.lp-more:focus-visible, .igra-ecard .del.lp-more:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 1px; }
.lp-more svg { display: block; }

/* Карточки героев, NPC и миров - крупные, с обложкой и звездой */
.igra-cards.lp-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.igra-pick.igra-manage-card.igra-ecard {
  position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; border-radius: 16px; min-height: 0;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.igra-pick.igra-ecard:hover { transform: translateY(-2px); border-color: var(--gold-2); box-shadow: 0 12px 28px -14px rgba(0,0,0,.7); }
.ec-cover { aspect-ratio: 4 / 3; }
.ec-cover .ec-letter { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.2rem; font-weight: 700; color: var(--text-2); font-family: var(--font-display, inherit); }
.igra-pick.igra-ecard .ec-cover .igra-typebadge { position: absolute; left: 10px; bottom: 10px; z-index: 2; margin: 0; background: rgba(8,8,14,.78); color: #fff; border-color: rgba(255,255,255,.35); } /* перебивает светлую подложку метки NPC (.igra-pick.is-npc .igra-typebadge) */
.ec-cover .igra-typebadge svg { color: #fff; }
.igra-ecard .ec-body { padding: 12px 46px 14px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.igra-ecard .ec-body b { padding-right: 0; margin: 0; font-size: 1.02rem; }
.igra-ecard .ec-body .ec-short { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--text-2); }
.igra-ecard .ec-tegi { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.igra-ecard .ec-tegi i { font-style: normal; font-size: .72rem; padding: 1px 8px; 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%); }
.igra-pick.igra-ecard .del { position: absolute; top: auto; left: auto; right: 8px; bottom: 8px; }
.igra-pick.igra-ecard.is-hero, .igra-pick.igra-ecard.is-npc { border-left-width: 1px; border-left-style: solid; }

/* «Герои и NPC»: на ПК тоже одна колонка за раз, переключатель - вкладки (раньше две узкие колонки рядом) */
.igra-chars .igra-chartabs {
  display: inline-grid; grid-template-columns: auto auto; gap: 6px; margin-bottom: 16px; padding: 4px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--tv-pod, color-mix(in srgb, var(--bg) 84%, var(--surface-2)));
}
.igra-chars .igra-chartab {
  min-height: 40px; padding: 6px 20px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; color: var(--text-2); background: transparent;
}
.igra-chars .igra-chartab.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); }
.igra-chars .igra-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
.igra-chars .igra-cols[data-active="heroes"] #colNpcs, .igra-chars .igra-cols[data-active="npcs"] #colHeroes { display: none; }
.igra-chars .igra-col-head { display: none; }

@media (max-width: 600px) {
  .lp-tools { flex-basis: 100%; justify-content: stretch; }
  .lp-search { max-width: none; }
  .lp-pop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 72px; width: auto; max-height: calc(100vh - 150px); }
  .igra-list.lp-grid, .lp-grid, .igra-cards.lp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .lp-create { min-height: 150px; }
  .igra-pcard .txt, .igra-ecard .ec-body { padding: 10px 42px 12px 11px; }
}
@media (max-width: 400px) {
  .igra-list.lp-grid, .lp-grid, .igra-cards.lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-create, .igra-chat-item.igra-pcard, .igra-pick.igra-ecard, .lp-star, .lp-tab { transition: none; }
  .lp-create:hover, .igra-chat-item.igra-pcard:hover, .igra-pick.igra-ecard:hover, .lp-star:hover { transform: none; }
}

/* Зоны нажатия на телефоне >= 44 px (20.10, замечание 5) */
@media (pointer: coarse), (max-width: 767.98px) {
  .lp-filter-btn, html .igra-shell .lp-search input { height: 44px; }
}

/* Карточка без обложки: рисунок по типу (герой, персонаж, мир) на подложке из токенов темы */
.ec-cover .ec-ph { background: radial-gradient(90% 80% at 70% 20%, color-mix(in srgb, var(--gold) 34%, transparent), transparent 70%), color-mix(in srgb, var(--bg) 78%, var(--gold) 22%); font-size: 0; }
.ec-cover .ec-ph svg { width: 44%; height: auto; color: var(--text); opacity: .72; }