/* Мини-аппка LOOKISM.
   Цвета берём из темы Telegram (--tg-theme-*), но у каждой переменной
   есть свой фолбэк: в обычном браузере тема не приезжает, и без него
   страница была бы чёрным по чёрному. */

:root {
  --bg:      var(--tg-theme-bg-color, #0e1014);
  --panel:   var(--tg-theme-secondary-bg-color, #171a21);
  --fg:      var(--tg-theme-text-color, #eef1f6);
  --dim:     var(--tg-theme-hint-color, #8b93a3);
  --line:    rgba(255, 255, 255, .08);
  --track:   rgba(255, 255, 255, .06);
  --raise:   rgba(255, 255, 255, .04);
  --accent:  var(--tg-theme-button-color, #e2483d);
  --on-acc:  var(--tg-theme-button-text-color, #ffffff);
  --gold:    #e5b45c;
  --mine:    #3fa66b;
  --enemy:   #c8463c;
  --radius:  16px;
  --navh:    64px;
}

/* Светлая тема Telegram. Полупрозрачный белый на белом фоне не виден
   вообще — границы, дорожки полосок и золото приходится переопределять,
   иначе в светлой теме экран разваливается в сплошное пятно. */
:root[data-scheme="light"] {
  --line:  rgba(0, 0, 0, .10);
  --track: rgba(0, 0, 0, .07);
  --raise: rgba(0, 0, 0, .035);
  --gold:  #9a6f1c;
  --mine:  #2e8555;
  --enemy: #b23a30;
}

* { box-sizing: border-box; }

/* Атрибут hidden скрывает элемент правилом display:none из БРАУЗЕРНОГО
   стиля, а любое авторское правило его перебивает. У .boot и .nav стоит
   display:flex — и hidden на них не делал ровным счётом ничего.
   Заставка с z-index 40 висела поверх готового приложения, а игрок видел
   вечное «рисую…». Приложение при этом было отрисовано и работало.
   Правило ниже возвращает hidden обещанное поведение — для всех
   элементов сразу, включая те, что появятся потом. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  padding: 0 14px calc(var(--navh) + 18px + env(safe-area-inset-bottom));
  max-width: 620px;
  margin: 0 auto;
}

/* ── заставка ─────────────────────────────────────────────────────── */
.boot {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; background: var(--bg); z-index: 40;
}
.boot-mark {
  font-size: 30px; font-weight: 800; letter-spacing: .22em;
  color: var(--fg); opacity: .92;
  animation: mark-in .6s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes mark-in {
  from { opacity: 0; letter-spacing: .5em; }
}
.boot-sub { color: var(--dim); font-size: 13px; }
.boot.is-err .boot-sub { color: var(--accent); max-width: 300px;
  text-align: center; line-height: 1.5; }
/* Полоска под логотипом вместо неподвижного «соединение…»: видно, что
   приложение живо, а не подвисло. */
.boot-bar {
  width: 132px; height: 2px; border-radius: 2px;
  background: var(--track); overflow: hidden;
}
.boot-bar i {
  display: block; width: 40%; height: 100%; border-radius: 2px;
  background: var(--accent); animation: sweep 1.15s ease-in-out infinite;
}
@keyframes sweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}
.boot.is-err .boot-bar { display: none; }

/* ── шапка ────────────────────────────────────────────────────────── */
.top {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 2px 14px;
}
.ava {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 14px; background: var(--panel);
  display: grid; place-items: center;
  font-size: 19px; font-weight: 700; color: var(--dim);
  border: 1px solid var(--line);
}
.who { min-width: 0; flex: 1; }
.who-name {
  font-size: 17px; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.who-tag { color: var(--dim); font-size: 13px; }
.badges { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.badge {
  font-size: 11px; padding: 4px 8px; border-radius: 999px;
  background: rgba(229, 180, 92, .13); color: var(--gold);
  border: 1px solid rgba(229, 180, 92, .3); white-space: nowrap;
}

/* ── экран ────────────────────────────────────────────────────────── */
/* Раздел один и рисуется в #view. Направление сдвига берётся из порядка
   вкладок: уходишь вправо по навигации — экран приезжает справа. Так
   переход подсказывает, где ты находишься, а не просто «что-то мигнуло». */
#view.in-r { animation: slide-r .26s cubic-bezier(.22, .8, .3, 1) both; }
#view.in-l { animation: slide-l .26s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes slide-r {
  from { opacity: 0; transform: translateX(22px); }
}
@keyframes slide-l {
  from { opacity: 0; transform: translateX(-22px); }
}

/* Карточки внутри экрана появляются лесенкой — глаз читает сверху вниз,
   а не получает всё разом. Задержку ставит JS через --i.
   Класс fresh ставится ТОЛЬКО на смену раздела: без него дозагрузка
   коллекции и смена плотности перезапускали появление всей страницы —
   каждый тычок по «Ещё» мигал экраном целиком. */
#view.fresh .card {
  animation: card-in .3s cubic-bezier(.22, .8, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 38ms);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(9px) scale(.99); }
}

/* ── выбор игры ───────────────────────────────────────────────────── */
/* Первый экран: во что играем. 03.09.2026, менеджер: «пусть начальный
   экран выбора будет по квадратикам, в одном ряду по 3, внутри которых
   игры». Пять игр ложатся 3 + 2; последняя строка не растягивается —
   плитки одинаковые, а пустое место справа честнее полуторной плитки. */
.games {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Высоту НЕ фиксируем через aspect-ratio: строка состояния бывает в две
   строки («113 of 237 collected»), и в жёстком квадрате её обрезало
   вместе с названием. Сетка и так тянет все плитки ряда до высоты
   самой высокой — ряд остаётся ровным, а текст цел. */
.game {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; width: 100%;
  min-height: 118px; padding: 12px 8px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
  color: inherit; font: inherit; text-align: center; cursor: pointer;
  transition: transform .13s, border-color .15s;
  animation: card-in .32s cubic-bezier(.22, .8, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
  overflow: hidden;
}
.game:active { transform: scale(.972); }
.game.idle { opacity: .58; }
.game-i {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px;
  background: var(--raise); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 23px;
}
/* Названия разной длины («Ролл» и «Лукизм Кардс») — даём две строки и
   режем многоточием, иначе плитка растёт и ряд разъезжается. */
.game-n {
  width: 100%; font-size: 13px; font-weight: 650; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Строка состояния на плитке узкая — «113 of 237 collected» в одну
   строку не влезает и обрывается на полуслове. Даём две. */
.game-s {
  width: 100%; font-size: 10.5px; line-height: 1.22; color: var(--gold);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.game.idle .game-s { color: var(--dim); }

/* На узком экране три квадрата по 100px — текст в них не помещается.
   Ниже 340px переходим на две колонки: лучше две читаемые плитки, чем
   три с обрезанными названиями. */
@media (max-width: 339px) {
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Кнопка «назад» появляется только внутри игры. */
.back {
  flex: 0 0 34px; width: 34px; height: 34px; margin-right: -4px;
  border-radius: 11px; border: 1px solid var(--line);
  background: var(--panel); color: var(--fg);
  font: 700 24px/1 -apple-system, "Segoe UI", sans-serif;
  padding: 0 0 3px; cursor: pointer;
  transition: transform .13s;
}
.back:active { transform: scale(.9); }

/* На домашнем экране нижней навигации нет — незачем держать под неё
   пустое поле высотой в палец. */
body.at-home { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

/* ── нижняя навигация ─────────────────────────────────────────────── */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: var(--panel);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.nav-b {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px 6px; border-radius: 11px;
  color: var(--dim); font: inherit;
  transition: background .15s, color .15s;
}
.nav-b.is-on { color: var(--fg); background: var(--raise); }
.nav-b.is-on .nav-i { animation: nav-pop .34s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes nav-pop {
  0%   { transform: translateY(2px) scale(.9); }
  100% { transform: translateY(0) scale(1); }
}
.nav-b:active .nav-i { transform: scale(.86); }
.nav-i { font-size: 19px; line-height: 1; }
.nav-t { font-size: 10.5px; font-weight: 550; letter-spacing: .01em; }

/* ── карточки ─────────────────────────────────────────────────────── */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.card-title { font-size: 16px; font-weight: 650; }
.card-note { color: var(--dim); font-size: 12px; }

.hero { font-size: 21px; font-weight: 700; line-height: 1.2; }
.hero-sub { color: var(--dim); font-size: 13px; margin-top: 3px; }

/* сетка статов */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border-radius: 12px; overflow: hidden;
  margin-top: 14px;
}
.cell { background: var(--panel); padding: 12px 8px; text-align: center; }
.cell-v {
  font-size: 17px; font-weight: 680;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.cell-k { color: var(--dim); font-size: 11px; margin-top: 3px; }
.cell-v.gold { color: var(--gold); }

/* Изменившееся после действия число подсвечивается: зелёным вверх,
   красным вниз. Игрок сразу видит, что именно сдвинулось, и не сверяет
   экран с памятью. */
.cell.up   { animation: bump-up .9s ease both; }
.cell.down { animation: bump-dn .9s ease both; }
@keyframes bump-up {
  0%   { background: color-mix(in srgb, var(--mine) 30%, var(--panel)); }
  22%  { transform: scale(1.05); }
  100% { background: var(--panel); transform: scale(1); }
}
@keyframes bump-dn {
  0%   { background: color-mix(in srgb, var(--enemy) 28%, var(--panel)); }
  22%  { transform: scale(1.05); }
  100% { background: var(--panel); transform: scale(1); }
}
.delta {
  position: absolute; right: 7px; top: 5px;
  font-size: 11px; font-weight: 700;
  animation: float-up 1.3s ease both; pointer-events: none;
}
.delta.up   { color: var(--mine); }
.delta.down { color: var(--enemy); }
@keyframes float-up {
  0%   { opacity: 0; transform: translateY(5px); }
  18%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-12px); }
}
.cell { position: relative; }

/* ── кнопки действий ──────────────────────────────────────────────── */
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.act {
  border: 1px solid var(--line); background: var(--raise); color: var(--fg);
  border-radius: 12px; padding: 13px 12px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600;
  display: flex; align-items: center; gap: 9px; text-align: left;
  transition: transform .1s, opacity .15s;
}
.act:active { transform: scale(.975); }
.act[disabled] { opacity: .42; cursor: default; }
.act-i { font-size: 18px; line-height: 1; }
.act-sub {
  display: block; font-size: 11.5px; font-weight: 400; color: var(--dim);
  margin-top: 2px;
}
.act.wide { grid-column: 1 / -1; }
.act.primary {
  background: var(--accent); color: var(--on-acc); border-color: transparent;
}
.act.primary .act-sub { color: var(--on-acc); opacity: .78; }
.act.busy { pointer-events: none; opacity: .6; }
.act.busy .act-i { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.act:not([disabled]):hover { border-color: var(--line-2, var(--line)); }

/* Успешное действие — короткая зелёная волна по кнопке. */
.act.done { animation: act-done .8s ease both; }
@keyframes act-done {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mine) 70%, transparent); }
  100% { box-shadow: 0 0 0 16px transparent; }
}

/* ── карта города ─────────────────────────────────────────────────── */
.map {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px;
  margin-top: 4px;
}
.d {
  aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line);
  background: var(--track); color: var(--dim);
  display: grid; place-items: center; cursor: default;
  font-size: 12px; font-weight: 620; font-variant-numeric: tabular-nums;
  position: relative; transition: transform .1s;
  padding: 0;
}
.d.mine  { background: color-mix(in srgb, var(--mine) 26%, transparent);
           border-color: var(--mine); color: var(--fg); }
.d.enemy { background: color-mix(in srgb, var(--enemy) 20%, transparent);
           border-color: color-mix(in srgb, var(--enemy) 55%, transparent);
           color: var(--fg); }
.d.can   { cursor: pointer; border-color: var(--gold);
           box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
           animation: breathe 2.6s ease-in-out infinite; }
.d.can:active { transform: scale(.92); }
.d.sel   { background: var(--gold); color: #14171d; border-color: var(--gold);
           animation: none; }

/* Доступные цели тихо «дышат» — на сетке из 32 клеток иначе не видно,
   куда вообще можно ткнуть. Задержка от номера, чтобы не пульсировали
   в унисон, как гирлянда. */
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent); }
  50%      { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
}

/* Захваченный район: вспышка и переворот в свой цвет. */
.d.won { animation: capture 1s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes capture {
  0%   { transform: rotateY(0) scale(1); background: var(--gold); }
  40%  { transform: rotateY(90deg) scale(1.16); background: var(--gold); }
  60%  { background: color-mix(in srgb, var(--mine) 26%, transparent); }
  100% { transform: rotateY(0) scale(1);
         background: color-mix(in srgb, var(--mine) 26%, transparent); }
}
.d.lost { animation: shake .5s ease both; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}

.legend {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 13px;
  font-size: 12px; color: var(--dim);
}
.lg { display: flex; align-items: center; gap: 6px; }
.lg-s {
  width: 11px; height: 11px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--track);
}
.lg-s.mine  { background: var(--mine); border-color: var(--mine); }
.lg-s.enemy { background: var(--enemy); border-color: var(--enemy); }
.lg-s.can   { background: transparent; border-color: var(--gold); }

/* ── коллекция карт ───────────────────────────────────────────────── */
.tiers {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px;
  scrollbar-width: none;
}
.tiers::-webkit-scrollbar { display: none; }

/* 03.09.2026, менеджер: «не листается с ПК в кампании, с телефона да, а
   с ПК нет». Лента чипов кампаний прокручивается вбок, полосу мы прячем
   (на телефоне она уродует вёрстку), а колесо мыши крутит страницу
   ВНИЗ, а не вбок — на ПК до дальних кампаний было просто не добраться.

   Пальцу лента нужна, мыши — нет: там, где есть настоящий курсор, чипы
   просто переносятся на вторую строку и видны все сразу. */
@media (hover: hover) and (pointer: fine) {
  .tiers { flex-wrap: wrap; overflow-x: visible; }
}
.tier-b {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--raise);
  color: var(--dim); border-radius: 999px; padding: 6px 13px;
  font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer;
  white-space: nowrap;
}
.tier-b.is-on { background: var(--accent); color: var(--on-acc);
                border-color: transparent; }

/* Плотность сетки выбирает игрок: на 4 колонках видно вдвое больше
   карт, и собирать отряд из 250 штук становится реально. Число колонок
   ставит JS через --cols. */
.coll {
  display: grid; gap: 9px;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}
/* Чем мельче плитка, тем меньше на ней помещается текста. */
.coll[style*="--cols:4"] .cc-n { font-size: 10.5px; }
.coll[style*="--cols:4"] .cc-t { font-size: 9px; }
.coll[style*="--cols:4"] .cc-tier { display: none; }
.coll[style*="--cols:3"] .cc-n { font-size: 11.5px; }
.coll[style*="--cols:3"] .cc-t { font-size: 9.5px; }

/* ── панель управления коллекцией ─────────────────────────────────── */
.tools { display: flex; gap: 7px; align-items: center; margin-bottom: 10px; }
.search {
  flex: 1; min-width: 0; border: 1px solid var(--line);
  background: var(--raise); color: var(--fg);
  border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14px;
}
.search::placeholder { color: var(--dim); }
.search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.dens { display: flex; gap: 3px; flex: 0 0 auto; }
.dens button {
  width: 30px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--raise);
  display: grid; place-items: center; padding: 0;
}
.dens button.on { border-color: var(--accent); background: var(--accent); }
/* Иконка — сами колонки: три полоски = три в ряд. Понятнее любой подписи. */
.dens i {
  display: grid; gap: 2px; width: 15px;
  grid-template-columns: repeat(var(--n), 1fr);
}
.dens i b { height: 11px; border-radius: 1px; background: var(--dim);
            display: block; }
.dens button.on i b { background: var(--on-acc); }

/* ── режим выбора бойца ───────────────────────────────────────────── */
.picking {
  position: sticky; top: 0; z-index: 20;
  background: var(--gold); color: #14171d;
  border-radius: 11px; padding: 10px 13px; margin-bottom: 11px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6);
}
.picking button {
  margin-left: auto; border: 0; background: rgba(0, 0, 0, .16);
  color: #14171d; border-radius: 8px; padding: 5px 11px;
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
/* В режиме выбора карта, которая уже в отряде, помечена — чтобы не
   ставить одного бойца дважды и не гадать, кто где. */
.cc.in-team::after {
  content: '✓ в отряде'; position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--mine); color: #fff; font-size: 9.5px; font-weight: 700;
  text-align: center; padding: 3px 0;
}
.cc {
  position: relative; min-width: 0; padding: 0; border: 0;
  /* Арты 1080×1791. При 3/4 плитка резала персонажу голову и ноги —
     ровно то, ради чего арты и рисовали. Держим родную пропорцию: тогда
     object-fit: cover ничего не обрезает. */
  aspect-ratio: 1080 / 1791; border-radius: 13px; overflow: hidden;
  background: var(--panel);
  /* Тир читается по свечению рамки: цвет — единственное, что видно на
     плитке размером с ноготь, и он же отличает бронзу от обсидиана. */
  box-shadow: inset 0 0 0 1.5px var(--tier-c, var(--line)),
              0 2px 10px -4px rgba(0, 0, 0, .5);
  cursor: pointer; transition: transform .13s;
  font: inherit; color: var(--fg); text-align: left; display: block;
}
/* Лесенка по 22 мс: сорок карт въезжают волной, а не мигают разом.
   Кап на 12-й — иначе нижние ждали бы почти секунду. */
#view.fresh .cc {
  animation: cc-in .28s ease both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
.cc:active { transform: scale(.96); }
@keyframes cc-in { from { opacity: 0; transform: translateY(7px) scale(.97); } }

.cc-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
  opacity: 0; transition: opacity .35s ease;
}
.cc-img.on { opacity: 1; }
/* Пока арт грузится — заглушка в цвет тира, а не белая дыра. */
.cc-fall {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 26px; font-weight: 800; opacity: .3;
  color: var(--tier-c, var(--dim));
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--tier-c, var(--panel)) 18%, var(--panel)),
    var(--panel));
}
/* Тёмная подложка снизу: без неё имя тонет в светлых участках арта. */
.cc-veil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(to top,
    rgba(8, 10, 14, .93) 12%, rgba(8, 10, 14, .55) 52%, transparent);
}
.cc-info { position: absolute; left: 9px; right: 9px; bottom: 8px; }
.cc-n {
  font-size: 12.5px; font-weight: 650; line-height: 1.2; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.cc-t {
  font-size: 10.5px; margin-top: 3px; color: rgba(255, 255, 255, .72);
  font-variant-numeric: tabular-nums;
}
.cc-tier {
  position: absolute; top: 7px; left: 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 999px;
  background: rgba(8, 10, 14, .72); color: var(--tier-c, #fff);
  backdrop-filter: blur(4px);
}
.cc-m {
  position: absolute; top: 7px; right: 7px;
  font-size: 10.5px; font-weight: 800; padding: 3px 7px;
  border-radius: 999px; background: var(--gold); color: #14171d;
}

/* Только что поставленная в отряд карта — короткая вспышка золотом. */
.cc.taken, .slot.taken { animation: taken .8s ease both; }
@keyframes taken {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 75%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
.cc-n {
  font-size: 13.5px; font-weight: 620; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-t { font-size: 11px; color: var(--dim); margin-top: 2px; }
.cc-s {
  display: flex; gap: 10px; margin-top: 8px;
  font-size: 11.5px; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.cc-s b { color: var(--fg); font-weight: 600; }
.cc-m {
  display: inline-block; margin-left: 5px; color: var(--gold);
  font-size: 11px; font-weight: 700;
}

.more {
  width: 100%; margin-top: 10px; border: 1px solid var(--line);
  background: var(--raise); color: var(--fg); border-radius: 12px;
  padding: 12px; font: inherit; font-size: 14px; cursor: pointer;
}

/* ── отряд ────────────────────────────────────────────────────────── */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* Слот был высотой в 92 пикселя, и от карты в нём оставалась четверть.
   Теперь слот — это карта: та же пропорция, что и в коллекции. */
.slot {
  position: relative; overflow: hidden; padding: 0; min-width: 0;
  aspect-ratio: 1080 / 1791; border-radius: 13px; cursor: pointer;
  border: 1px dashed var(--line); background: var(--raise);
  display: grid; place-items: center;
  font: inherit; color: var(--fg); text-align: left;
  transition: transform .13s;
}
.slot:active { transform: scale(.96); }
.slot.full {
  border: 0; display: block;
  box-shadow: inset 0 0 0 1.5px var(--tier-c, var(--line)),
              0 2px 10px -4px rgba(0, 0, 0, .5);
}
.slot-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  opacity: 0; transition: opacity .35s ease;
}
.slot-img.on { opacity: 1; }
.slot-veil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(to top,
    rgba(8, 10, 14, .93) 12%, rgba(8, 10, 14, .55) 52%, transparent);
}
.slot-b { position: absolute; left: 8px; right: 8px; bottom: 7px; }
.slot-n {
  font-size: 12px; font-weight: 650; line-height: 1.2; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.slot-m {
  font-size: 10px; margin-top: 2px; color: rgba(255, 255, 255, .74);
  font-variant-numeric: tabular-nums;
}
.slot-t {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 999px; color: #fff;
  background: color-mix(in srgb, var(--tier-c, #444) 78%, rgba(0, 0, 0, .55));
}
.slot-x {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  font-size: 9.5px; font-weight: 700; padding: 2px 6px;
  border-radius: 999px; background: rgba(8, 10, 14, .72); color: var(--gold);
}
.slot-e { color: var(--dim); font-size: 12px; text-align: center;
          line-height: 1.5; }

/* ── живой бой ────────────────────────────────────────────────────── */
.fight-side { margin-bottom: 12px; }
.fight-side:last-child { margin-bottom: 0; }
.fight-k {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 7px;
}
.fu { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.fu:last-child { margin-bottom: 0; }
.fu.dead { opacity: .38; }
.fu-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px;
  background: var(--line);
}
.fu.act .fu-dot { background: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
.fu-n {
  flex: 1; min-width: 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fu.act .fu-n { font-weight: 620; }
.fu-hp {
  width: 84px; flex: 0 0 84px; height: 6px; border-radius: 3px;
  background: var(--track); overflow: hidden;
}
/* Полоска HP не прыгает, а съезжает — видно, СКОЛЬКО сняли за ход. */
.fu-hp i {
  display: block; height: 100%; background: var(--mine);
  transition: width .55s cubic-bezier(.3, .9, .3, 1);
}
.fu.foe .fu-hp i { background: var(--enemy); }
.fu-v {
  width: 40px; text-align: right; font-size: 11.5px; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.turn-tag {
  display: inline-block; font-size: 11px; padding: 4px 9px;
  border-radius: 999px; background: var(--accent); color: var(--on-acc);
  font-weight: 600;
}
.turn-tag.wait { background: var(--track); color: var(--dim); }

/* ── шторка с карточкой ───────────────────────────────────────────── */
.sheet-bg {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .55);
  animation: fade .18s ease both;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  max-width: 620px; margin: 0 auto;
  background: var(--bg); border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--line);
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  max-height: 86vh; overflow-y: auto;
  animation: up .24s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes up { from { transform: translateY(100%); } }
.sheet-grip {
  width: 38px; height: 4px; border-radius: 2px; background: var(--line);
  margin: 6px auto 14px;
}
/* Крупный арт вверху карточки: ради него всё и затевалось — в боте
   персонаж виден только именем.
   Было height:230px с обрезкой по краям — от вытянутого портрета
   1080×1791 оставалась горизонтальная полоска посередине. Теперь карта
   держит родную пропорцию и вписывается целиком (contain), а высота
   ограничена долей экрана, чтобы под артом остались статы. */
.sheet-art {
  /* Высота ведущая, ширина считается из пропорции: иначе на широком
     экране max-height обрезал бы высоту, а ширина оставалась во всю
     шторку — и по бокам появлялись пустые поля. */
  position: relative; margin: 0 auto 14px;
  height: min(54vh, 460px); aspect-ratio: 1080 / 1791; max-width: 100%;
  overflow: hidden; border-radius: 14px; background: var(--panel);
  border: 1px solid var(--line); cursor: zoom-in;
}
.sheet-art img {
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .4s ease;
}
.sheet-zoom {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  font-size: 10.5px; padding: 4px 9px; border-radius: 999px;
  background: rgba(8, 10, 14, .68); color: #fff; pointer-events: none;
}
.sheet-art img.on { opacity: 1; }

.sheet h3 { margin: 0 0 3px; font-size: 19px; line-height: 1.2; }
.sheet-sub { color: var(--dim); font-size: 13px; margin-bottom: 15px; }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
      margin-bottom: 16px; }
.kv-i { background: var(--panel); border: 1px solid var(--line);
        border-radius: 10px; padding: 9px 10px; }
.kv-k { font-size: 10.5px; color: var(--dim); }
.kv-v { font-size: 14.5px; font-weight: 620; margin-top: 2px;
        font-variant-numeric: tabular-nums; }
.ab {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
}
.ab-h { display: flex; align-items: baseline; gap: 8px; }
.ab-n { font-size: 14px; font-weight: 620; flex: 1; }
.ab-c { font-size: 11.5px; color: var(--gold); white-space: nowrap; }
.ab-d { font-size: 13px; color: var(--dim); margin-top: 5px; line-height: 1.45; }
.ab.passive .ab-n::after {
  content: 'пассивка'; font-size: 10px; color: var(--dim);
  font-weight: 400; margin-left: 7px;
}

/* ── родословная ──────────────────────────────────────────────────── */
.perks { display: flex; flex-direction: column; gap: 9px; }
.perk {
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
  background: var(--raise);
}
.perk.done { border-color: color-mix(in srgb, var(--mine) 45%, transparent); }
.perk-h { display: flex; align-items: baseline; gap: 8px; }
.perk-n { flex: 1; font-size: 13.5px; font-weight: 620; }
.perk-c { font-size: 11.5px; color: var(--dim);
          font-variant-numeric: tabular-nums; }
.perk-d { font-size: 12.5px; color: var(--dim); line-height: 1.4; }
.perk-d b { color: var(--gold); }
.perk-b {
  margin-top: 9px; width: 100%; border: 0; border-radius: 9px;
  padding: 8px; font: inherit; font-size: 13px; font-weight: 600;
  background: var(--accent); color: var(--on-acc); cursor: pointer;
}
.perk-b.off { background: var(--track); color: var(--dim); cursor: default; }

/* ── кампания ─────────────────────────────────────────────────────── */
.zones { display: flex; flex-direction: column; gap: 3px; }
.zone {
  display: grid; align-items: center; gap: 0 9px;
  grid-template-columns: 18px 1fr auto;
  padding: 8px 4px 9px; border-radius: 9px; font-size: 13.5px;
}
.zone.done { color: var(--dim); }
.zone.lock { opacity: .45; }
.zone-m { text-align: center; font-size: 12px; }
.zone.done .zone-m { color: var(--mine); }
.zone-n { min-width: 0; overflow: hidden; text-overflow: ellipsis;
          white-space: nowrap; }
.zone-p { font-size: 11.5px; color: var(--dim);
          font-variant-numeric: tabular-nums; }
.zone-bar { grid-column: 2 / -1; height: 4px; margin-top: 5px; }

/* ── полоски / списки ─────────────────────────────────────────────── */
.bars { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.bar-name { width: 88px; flex: 0 0 88px; color: var(--dim);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track {
  flex: 1; height: 7px; border-radius: 4px;
  background: var(--track); overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 4px; background: var(--accent); }
.bar-num {
  width: 42px; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.rank { display: flex; flex-direction: column; gap: 2px; }
.rank-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px; border-radius: 9px; font-size: 14px;
}
.rank-n {
  width: 22px; flex: 0 0 22px; text-align: center;
  color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums;
}
.rank-row:nth-child(1) .rank-n,
.rank-row:nth-child(2) .rank-n,
.rank-row:nth-child(3) .rank-n { color: var(--gold); font-weight: 700; }
.rank-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank-v { color: var(--dim); font-variant-numeric: tabular-nums; }
.rank-v.win  { color: var(--mine); }
.rank-v.loss { color: var(--enemy); }

/* ── пусто / подсказки ────────────────────────────────────────────── */
.empty { text-align: center; padding: 30px 16px; color: var(--dim); }
.empty-mark { font-size: 30px; opacity: .35; margin-bottom: 8px; }
.empty-txt { font-size: 14px; line-height: 1.5; }

.hint {
  font-size: 12.5px; color: var(--dim); line-height: 1.5;
  margin-top: 12px;
}

/* ── тост ─────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(var(--navh) + 14px + env(safe-area-inset-bottom));
  z-index: 50; max-width: 596px; margin: 0 auto;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 13px 15px;
  font-size: 14px; line-height: 1.45;
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .6);
  animation: pop .34s cubic-bezier(.2, 1.3, .4, 1) both;
  max-height: 46vh; overflow-y: auto;
}
.toast.ok { border-left-color: var(--mine); }
.toast.out { animation: pop-out .2s ease both; }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes pop-out { to { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── список-строка ────────────────────────────────────────────────── */
/* Один и тот же скелет на постройки, уников, достижения, прилавок и
   стычки: значок слева, название с подписью, значение справа. Заводить
   каждому разделу свою вёрстку — верный способ развести их по мелочам. */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.rows .row:first-child { border-top: 0; padding-top: 2px; }
.row-i {
  flex: 0 0 26px; width: 26px; text-align: center;
  font-size: 16px; line-height: 1;
  /* 30.08.2026: слот узкий, а внутрь клали по три ⭐ — эмодзи вылезали
     на соседнюю колонку, и текст читался поверх звёзд. Обрезаем, чтобы
     никакой значок больше не мог наехать на название. */
  overflow: hidden;
}

/* Мутатор дня — правило, по которому идёт бой. Он меняет врагов, поэтому
   стоит НАД списком сложностей, а не в подписи мелким шрифтом. */
.mutator {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; margin: 0 0 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.mut-i { font-size: 20px; line-height: 1.1; }
.mut-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mut-n { font-size: 13px; font-weight: 650; color: var(--gold); }
.mut-d { font-size: 12px; color: var(--dim); line-height: 1.35; }
.row-b { flex: 1; min-width: 0; }
.row-n {
  display: block; font-size: 14px; font-weight: 550; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-s {
  display: block; color: var(--dim); font-size: 11.5px; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-v {
  flex: 0 0 auto; font-size: 13px; font-weight: 650; color: var(--gold);
  font-variant-numeric: tabular-nums; text-align: right;
}
.row.off { opacity: .5; }
.row.off .row-v { color: var(--dim); }
.row.done .row-v { color: var(--mine); }
.row.top .row-i { filter: drop-shadow(0 0 6px var(--gold)); }
.row.me .row-n { color: var(--gold); }

/* ── плашки ───────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip {
  font-size: 11.5px; padding: 4px 9px; border-radius: 999px;
  background: var(--raise); border: 1px solid var(--line);
  color: var(--dim); white-space: nowrap;
}
.chip.on {
  color: var(--gold); border-color: rgba(229, 180, 92, .35);
  background: rgba(229, 180, 92, .12);
}
.chip.bad { color: var(--enemy); border-color: rgba(200, 70, 60, .3); }

/* ── скелет загрузки ──────────────────────────────────────────────── */
/* Пустой экран на секунду выглядит как поломка — особенно в этой аппке,
   где «пусто» игрок уже видел часами. Полоски честно говорят: гружу. */
.skel-h, .skel-r {
  height: 13px; border-radius: 7px; margin-bottom: 10px;
  background: linear-gradient(90deg,
    var(--track) 25%, var(--raise) 37%, var(--track) 63%);
  background-size: 400% 100%;
  animation: skel 1.3s ease infinite;
}
.skel-h { height: 17px; width: 44%; margin-bottom: 16px; }
.skel-r:nth-child(3) { width: 88%; }
.skel-r:nth-child(4) { width: 72%; }
.skel-r:nth-child(5) { width: 80%; }
@keyframes skel { from { background-position: 100% 0; }
                  to   { background-position: 0 0; } }

/* Полоска в рейтинге и в списке фракций: своя строка выделяется. */
.rank-row.me .rank-name, .bar-row.me .bar-name { color: var(--gold); }
.bar-row.me .bar-fill { background: var(--gold); }

/* ── шторка выбора бойца ──────────────────────────────────────────── */
/* Живёт поверх отряда, а не в другом разделе: замена бойца — это одно
   действие, а не путешествие по вкладкам. */
.picker-bg {
  position: fixed; inset: 0; z-index: 62;
  background: rgba(0, 0, 0, .58); animation: fade .18s ease both;
}
.picker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 63;
  max-width: 620px; margin: 0 auto;
  background: var(--bg); border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--line);
  padding: 8px 14px calc(18px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto;
  animation: up .24s cubic-bezier(.2, .8, .3, 1) both;
}
.picker-head {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;
}
.picker-head h3 { margin: 0 0 2px; font-size: 18px; }
.picker-head .sheet-sub { margin: 0; }
.picker-x {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--dim);
  font: inherit; font-size: 14px; cursor: pointer;
}
.picker .tiers { margin-bottom: 10px; }
.picker .coll { margin-bottom: 4px; }

/* ── арт во весь экран ────────────────────────────────────────────── */
.artview {
  position: fixed; inset: 0; z-index: 70; cursor: zoom-out;
  background: rgba(6, 7, 10, .94);
  display: grid; place-items: center; padding: 16px;
  animation: fade .16s ease both;
}
.artview-i {
  max-width: 100%; max-height: 88vh; object-fit: contain;
  border-radius: 12px; opacity: 0; transition: opacity .3s ease;
}
.artview-i.on { opacity: 1; }
.artview-n {
  position: absolute; left: 0; right: 0; bottom: 22px; text-align: center;
  color: #fff; font-size: 15px; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}
.artview-x {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .45); color: #fff; font: inherit; font-size: 15px;
}

/* ── что выпало из набора ─────────────────────────────────────────── */
.drop {
  position: fixed; inset: 0; z-index: 68; cursor: pointer;
  background: rgba(6, 7, 10, .92);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px; padding: 20px;
  animation: fade .2s ease both;
}
.drop-h {
  font-size: 20px; font-weight: 700; color: #fff;
  animation: mark-in .4s cubic-bezier(.2, 1.4, .4, 1) both;
}
.drop-l { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.drop-c {
  position: relative; width: min(42vw, 190px);
  aspect-ratio: 1080 / 1791; border-radius: 14px; overflow: hidden;
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--tier-c, #555),
              0 0 34px -8px var(--tier-c, #555);
  animation: drop-in .5s cubic-bezier(.2, 1.3, .4, 1) both;
}
.drop-c:nth-child(2) { animation-delay: .12s; }
@keyframes drop-in {
  from { opacity: 0; transform: translateY(18px) scale(.9) rotate(-3deg); }
}
.drop-i {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .35s ease;
}
.drop-i.on { opacity: 1; }
.drop-n {
  position: absolute; left: 8px; right: 8px; bottom: 20px; color: #fff;
  font-size: 13px; font-weight: 650; text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95);
}
.drop-m {
  position: absolute; left: 8px; right: 8px; bottom: 6px;
  color: var(--gold); font-size: 11px; text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95);
}
.drop-x {
  border: 1px solid var(--line); background: var(--panel); color: var(--fg);
  border-radius: 12px; padding: 11px 26px; font: inherit; font-weight: 600;
  cursor: pointer;
}

/* ── доска боя ────────────────────────────────────────────────────── */
/* Раскладка как в боте: тройка противника в ряд, под ней своя тройка.
   Раньше это был вертикальный список на шесть строк — чтобы увидеть,
   кто с кем дерётся, приходилось листать. */
.fight-top {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
}
.turn-left {
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
}
.turn-left.hot {
  color: var(--enemy);
  border-color: color-mix(in srgb, var(--enemy) 45%, transparent);
  animation: pulse 1s ease infinite;
}
@keyframes pulse { 50% { opacity: .45; } }

.fteam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.fvs {
  text-align: center; font-size: 10.5px; letter-spacing: .14em;
  color: var(--dim); margin: 9px 0; font-weight: 700;
}
/* Кто дерётся СЕЙЧАС — словами над доской. Рамки на портрете мало:
   портретов до шести в ряд, и на телефоне её не видно. */
.fnow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 8px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--raise);
  font-size: 13px; font-weight: 700;
}
.fnow-s { min-width: 0; overflow: hidden; text-overflow: ellipsis;
          white-space: nowrap; max-width: 42%; }
.fnow-s.mine { color: var(--gold); text-align: right; }
.fnow-s.foe { color: var(--enemy); text-align: left; }
.fnow-vs { flex: 0 0 auto; font-size: 12px; }

/* Запасные приглушены — активный сам бросается в глаза. */
.fp:not(.on):not(.dead) { opacity: .55; }

.fp { min-width: 0; text-align: center; }
.fp.dead { opacity: .38; }
/* Портрет квадратный, а не в полную карту: шесть карт по 3:5 не влезли бы
   на экран без прокрутки, а лицо видно и так. */
.fp-a {
  position: relative; aspect-ratio: 1; border-radius: 11px;
  overflow: hidden; background: var(--panel);
  box-shadow: inset 0 0 0 1.5px var(--tier-c, var(--line));
}
.fp.on .fp-a {
  box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px -4px var(--gold);
}
.fp-i {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  opacity: 0; transition: opacity .35s ease;
}
.fp-i.on { opacity: 1; }
.fp-mark {
  position: absolute; top: 3px; left: 4px; z-index: 2;
  color: var(--gold); font-size: 13px; line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.fp-x {
  position: absolute; inset: 0; display: grid; place-items: center;
  z-index: 2; font-size: 26px; color: var(--enemy);
  background: rgba(8, 10, 14, .55);
}
.fp-n {
  font-size: 10.5px; font-weight: 600; margin-top: 4px; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp.on .fp-n { color: var(--gold); }
/* Число HP пишем прямо НА полоске: отдельная строка под каждой полоской
   добавляла к ряду сорок пикселей, и доска переставала помещаться. */
.fp-bar {
  position: relative; height: 13px; border-radius: 4px;
  background: var(--track); overflow: hidden; margin: 3px 0 0;
}
.fp-bar i {
  display: block; height: 100%; background: var(--mine);
  transition: width .45s cubic-bezier(.2, .8, .3, 1);
}
.fp-bar b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 8.5px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95);
  font-variant-numeric: tabular-nums;
}
.fp.foe .fp-bar i { background: var(--enemy); }
.fp-bar.mana { height: 4px; margin-top: 2px; }
.fp-bar.mana i { background: #4a7fd0; }

/* Полная доска БОЛЬШЕ НЕ ПРИЛИПАЕТ: 330 пикселей, едущих за экраном,
   и были той самой «игрой на 80% экрана». Прилипает полоса поединка —
   она в четыре раза ниже. */
.fboard { margin-top: 10px; }

/* ── полоса поединка ──────────────────────────────────────────────── */
.fstrip {
  position: sticky; top: 0; z-index: 5; cursor: pointer;
  background: var(--panel); margin: 0 -14px; padding: 8px 14px 6px;
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .6);
}
.fd { display: flex; align-items: flex-start; gap: 10px; }
.fd-side { flex: 1 1 0; min-width: 0; }
.fd-side.foe { text-align: right; }
.fd-vs { flex: 0 0 auto; font-size: 13px; padding-top: 2px; }
.fd-n {
  font-size: 12.5px; font-weight: 700; line-height: 1.2; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-side.mine .fd-n { color: var(--gold); }
.fd-side.foe .fd-n { color: var(--enemy); }
.fd-side.foe .fp-bar i { background: var(--enemy); }
.fd-side.foe .fp-bar.mana i { background: #4a7fd0; }
.fd-side.foe .fp-es { justify-content: flex-end; }

/* Скамейка — столбики: цвет чей, заливка снизу = сколько ХП. Имена тут
   не нужны, они есть на полной доске. */
.fd-bench {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 5px;
}
.fd-dots { display: flex; gap: 3px; }
.fd-dot {
  position: relative; width: 13px; height: 8px; border-radius: 3px;
  background: var(--track); overflow: hidden;
  border: 1px solid transparent;
}
.fd-dot i {
  position: absolute; left: 0; right: 0; bottom: 0; display: block;
  background: var(--mine);
}
.fd-dot.foe i { background: var(--enemy); }
.fd-dot.on { border-color: var(--gold); }
.fd-dot.dead { opacity: .3; }
.fd-dot.dead i { display: none; }
.fd-more { color: var(--dim); font-size: 11px; line-height: 1; }
.fp-es { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center;
         margin-top: 3px; }
.fp-e {
  font-size: 8.5px; padding: 1px 5px; border-radius: 999px;
  background: var(--raise); border: 1px solid var(--line); color: var(--dim);
}

/* Итог прошлого хода бывает на пять строк и отодвигал кнопки за край
   экрана. Показываем две, остальное — по тапу. */
.fsum {
  font-size: 12.5px; color: var(--dim); line-height: 1.45;
  margin: 10px 0 0; white-space: pre-line; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fsum.open { -webkit-line-clamp: unset; display: block; }

/* ── кнопки хода ──────────────────────────────────────────────────── */
.fmoves { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
/* min-height 48px — меньше палец не берёт уверенно. Менеджер: «кнопки,
   на которые хуй нажмёшь». */
.fmove {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 48px;
  padding: 8px 12px; border-radius: 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line);
  color: inherit; font: inherit; text-align: left;
  transition: transform .12s, border-color .15s;
}
/* Обычная атака — то, что жмут чаще всего: её видно первой. */
.fmove.attack { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.fmove:active { transform: scale(.985); }
.fmove.off { opacity: .42; cursor: default; }
.fmove.attack { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.fmove.counter { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.fmove-i { flex: 0 0 22px; font-size: 17px; line-height: 1; text-align: center; }
.fmove-b { flex: 1; min-width: 0; }
.fmove-n {
  display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fmove-n b { color: var(--gold); font-weight: 600; }
.fmove-n i { color: var(--dim); font-style: normal; }
.fmove-s {
  display: block; font-size: 11px; color: var(--dim); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.fturn {
  margin-left: auto; font-size: 12px; color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.fgive { margin-top: 12px; }
.fgive summary {
  cursor: pointer; font-size: 12px; color: var(--dim); padding: 4px 0;
}

.flog-d { margin-top: 12px; }
.flog-d summary {
  cursor: pointer; font-size: 12px; color: var(--dim); padding: 4px 0;
}
.flog { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.flog-l {
  font-size: 12px; color: var(--dim); line-height: 1.4;
  padding-left: 11px; position: relative;
}
.flog-l::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--line);
}
.flog-l:first-child { color: var(--fg); }
.flog-l:first-child::before { background: var(--gold); }

/* Кнопка «в бой» в списке зон кампании. */
.zone-go {
  grid-column: 1 / -1; margin-top: 7px;
  border: 1px solid var(--line); background: var(--raise); color: var(--fg);
  border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; transition: transform .12s;
}
.zone-go:active { transform: scale(.97); }
.zone.lock .zone-go { display: none; }

/* Итог боя поверх экрана — тот же слой, что у выпадения из набора. */
.drop-sum { color: var(--dim); font-size: 14px; }
.drop-rs {
  display: flex; flex-direction: column; gap: 6px; max-width: 340px;
  text-align: center;
}
.drop-r { color: var(--gold); font-size: 13px; line-height: 1.4; }

/* Выбор сортировки — родной select: на телефоне он открывается системным
   колесом, а список из шести пунктов чипами занял бы две строки. */
.sortsel {
  flex: 1; min-width: 0; border: 1px solid var(--line);
  background: var(--raise); color: var(--fg);
  border-radius: 10px; padding: 8px 11px; font: inherit; font-size: 13.5px;
}
.sortsel:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ── Магазин Карточек ─────────────────────────────────────────────── */
/* Прилавок разбит по тирам, как в боте: семьдесят карт одним списком —
   это не витрина, а свалка. */
.shop {
  display: grid; gap: 9px;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}
.sc { min-width: 0; }
.sc.sold { opacity: .45; }
.sc-a {
  position: relative; aspect-ratio: 1080 / 1791; border-radius: 12px;
  overflow: hidden; background: var(--panel);
  box-shadow: inset 0 0 0 1.5px var(--tier-c, var(--line));
}
.sc-info { position: absolute; left: 8px; right: 8px; bottom: 7px; }
.sc-sold {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background: rgba(8, 10, 14, .6); color: #fff; font-size: 12px;
  font-weight: 700; letter-spacing: .04em;
}
.sc-buy {
  width: 100%; margin-top: 5px; padding: 7px 6px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--raise); color: var(--gold);
  font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: transform .12s;
}
.sc-buy:active { transform: scale(.96); }
.sc-buy.off { color: var(--dim); cursor: default; }
.sc-buy s { color: var(--dim); font-weight: 400; font-size: 10.5px; }
.sale {
  margin-top: 12px; padding: 8px 12px; border-radius: 10px;
  background: rgba(229, 180, 92, .13); color: var(--gold);
  border: 1px solid rgba(229, 180, 92, .3); font-size: 13px; font-weight: 600;
}

/* Кнопки обучения у наставника — три стадии подряд. */
.trains { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.trains .perk-b { width: 100%; }

/* Плашка «бот отстал от кода страницы». */
.stale {
  margin: 0 0 12px; padding: 10px 13px; border-radius: 11px;
  background: rgba(200, 70, 60, .14); color: var(--enemy);
  border: 1px solid rgba(200, 70, 60, .35);
  font-size: 12.5px; line-height: 1.45;
}

/* ── Ролл ─────────────────────────────────────────────────────────── */
.rolls { display: flex; flex-direction: column; gap: 8px; }
.rollc {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 11px;
  background: var(--panel); border: 1px solid var(--line);
  animation: card-in .3s cubic-bezier(.22, .8, .3, 1) both;
}
.rollc-m { flex: 0 0 auto; font-size: 17px; line-height: 1; }
.rollc-b { flex: 1; min-width: 0; }
.rollc-n { display: block; font-size: 14px; font-weight: 650; }
.rollc-d { display: block; font-size: 11.5px; color: var(--dim); margin-top: 2px; }

/* ── Башня: что за этаж впереди ───────────────────────────────────── */
.tw-next {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.tw-h { font-size: 13.5px; font-weight: 650; }
.tw-foes, .tw-mods { display: flex; flex-wrap: wrap; gap: 6px; }
.tw-team { font-size: 12px; color: var(--dim); }
.tw-rew { font-size: 11.5px; color: var(--dim); }
.tw-next .zone-go { grid-column: auto; margin: 2px 0 0; }

/* ── Второй шаг техники и скопированные ───────────────────────────── */
.fpick-h {
  padding: 2px 2px 6px; font-size: 13px; font-weight: 650; color: var(--fg);
}
.fmove.pick { border-color: rgba(200, 168, 90, .35); }
.fmove.back { opacity: .8; }
.fcop { margin-top: 8px; }
.fcop > summary {
  cursor: pointer; list-style: none; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel); font-size: 13px; font-weight: 650;
}
.fcop > summary::-webkit-details-marker { display: none; }
.fcop[open] > summary { margin-bottom: 8px; }

/* ── Дуэль ────────────────────────────────────────────────────────── */
.duel-call { display: flex; gap: 8px; align-items: stretch; }
.duel-in {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg);
  font: inherit; font-size: 14px;
}
.duel-in:focus { outline: none; border-color: var(--gold); }
.duel-call .act { flex: 0 0 auto; margin: 0; }
.duel-who { font-size: 16px; font-weight: 650; margin-bottom: 10px; }

/* Взведённая кнопка: следующее нажатие сработает по-настоящему. */
.zone-go.armed {
  background: var(--enemy); color: #fff; border-color: var(--enemy);
}

/* Плашка «связи нет» — отличается от «старый бот»: там надо
   перезапускать, здесь просто ждать сеть. */
.stale.offl {
  background: var(--track); color: var(--dim);
  border-color: var(--line);
}

/* ── «Что нового» ─────────────────────────────────────────────────── */
.news-e { padding: 8px 0; }
.news-e + .news-e { border-top: 1px solid var(--line); }
.news-h {
  display: flex; gap: 8px; align-items: baseline; justify-content: space-between;
  font-size: 13px; font-weight: 700; margin-bottom: 4px;
}
/* Свежая запись должна быть видна сразу — иначе список читается как
   одинаковая простыня и новое теряется. */
.news-e.new .news-h { color: var(--gold); }
.news-d { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--dim); }
.news-l { font-size: 12.5px; line-height: 1.5; color: var(--dim); }

/* ── Реферальная ссылка ───────────────────────────────────────────── */
.ref-link {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  padding: 9px 11px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--raise);
  cursor: pointer;
}
/* Ссылка длинная и без пробелов — рвём её, а не страницу. */
.ref-link code {
  font-size: 12px; word-break: break-all; min-width: 0; line-height: 1.35;
}
.ref-copy {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: .03em;
}

/* ── Сетка турнира ───────────────────────────────────── */
.trn-match {
  margin: 8px 0 4px; padding: 9px 10px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--raise);
}
.br-lab { font-size: 12px; font-weight: 700; color: var(--dim);
          margin: 10px 0 4px; }
/* Сетка на 32 человека шире любого телефона — катаем её
   внутри своей коробки, а не ломаем страницу. */
.br-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Сетку перенести нельзя — она и есть сетка. На ПК возвращаем полосу
   прокрутки (тонкую), иначе прокрутить её мышью нечем. */
@media (hover: hover) and (pointer: fine) {
  .br-wrap { scrollbar-width: thin; padding-bottom: 2px; }
  .br-wrap::-webkit-scrollbar { height: 8px; }
  .br-wrap::-webkit-scrollbar-thumb {
    background: var(--line); border-radius: 4px;
  }
}
.br-cols { display: flex; gap: 22px; padding-bottom: 6px; align-items: stretch; }
.br-col { flex: 0 0 auto; min-width: 150px; display: flex;
          flex-direction: column; }
.br-ct { font-size: 11px; font-weight: 700; color: var(--dim);
         margin-bottom: 6px; letter-spacing: .3px; }

/* Колонка раздаёт матчам РАВНЫЕ доли высоты. За счёт этого матч второго
   раунда встаёт ровно между двумя, которые в него ведут: путь по сетке
   читается глазами, без линий. Раньше раунды начинались от верха, и
   сопоставить пары было нельзя. */
.br-list { flex: 1; display: flex; flex-direction: column;
           justify-content: space-around; gap: 4px; }
.br-cell { flex: 1 1 0; display: flex; align-items: center;
           position: relative; min-height: 46px; }
.br-m {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--panel); width: 100%;
}
.br-m.done { border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); }
.br-p {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; font-size: 12px; line-height: 1.3;
}
.br-nm { flex: 1; min-width: 0;
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-w { color: var(--gold); font-weight: 700; }
.br-p + .br-p { border-top: 1px solid var(--line); }
.br-p.win { font-weight: 650; }
.br-p.lost { color: var(--dim); }
.br-p.bye { color: var(--dim); font-style: italic; }
.br-p.me .br-nm { color: var(--gold); font-weight: 700; }

/* Скобка к следующему раунду. Рисуем только у колонок, помеченных
   paired: там следующий раунд ровно вдвое короче, и линия говорит
   правду. В нижней сетке двойного выбывания это не всегда так. */
.br-col.paired .br-cell::after {
  content: ''; position: absolute; right: -11px; top: 50%;
  width: 11px; height: 1px; background: var(--line);
}
.br-col.paired .br-cell:nth-child(odd)::before {
  content: ''; position: absolute; right: -11px; top: 50%;
  width: 1px; height: 100%; background: var(--line);
}

/* ── Драфт ────────────────────────────────────────────────────────── */
.draft-turn { margin-bottom: 10px; }
.draft-grid {
  display: grid; gap: 6px; margin: 10px 0;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.draft-cell {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 7px 8px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--fg); font: inherit;
  text-align: left; cursor: pointer; min-width: 0;
}
.draft-cell:disabled { cursor: default; }
.draft-cell:not(:disabled):active { transform: scale(.97); }
.draft-num { font-size: 11px; font-weight: 700; color: var(--dim); }
.draft-nm {
  font-size: 12px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.draft-mk { position: absolute; top: 5px; right: 6px; font-size: 12px; }
/* Забаненный слот должен читаться как выбывший, а не просто «серый»:
   игрок сверяет доску с картинкой из чата. */
.draft-cell.banned { opacity: .4; }
.draft-cell.banned .draft-nm { text-decoration: line-through; }
.draft-cell.p-host {
  border-color: #4a86ff; background: color-mix(in srgb, #4a86ff 12%, var(--panel));
}
.draft-cell.p-guest {
  border-color: #ff9a3c; background: color-mix(in srgb, #ff9a3c 12%, var(--panel));
}
.tier-btn { min-width: 0; }
.hint.warn { color: var(--enemy); font-weight: 600; }

/* ── Наборы пачками (×1/×3/×5/×10) и гены ─────────────────────────── */
.packs { display: flex; flex-direction: column; gap: 10px; }
.pack {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px;
  background: var(--panel);
}
.pack.poor { opacity: .62; }
.pack-h { display: flex; gap: 10px; align-items: flex-start; }
.pack-i { flex: 0 0 auto; font-size: 17px; line-height: 1.2; }
.pack-b { flex: 1; min-width: 0; }
.pack-n { display: block; font-size: 14px; font-weight: 650; }
.pack-s {
  display: block; font-size: 11.5px; color: var(--dim); margin-top: 2px;
}
.pack-q { display: flex; gap: 6px; margin-top: 9px; }
.pack-b-q {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 7px 4px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: var(--raise); color: var(--fg);
  font: inherit; font-size: 13px; font-weight: 650;
  transition: transform .12s;
}
.pack-b-q i { font-style: normal; font-size: 10.5px; color: var(--dim); }
.pack-b-q:active { transform: scale(.96); }
.pack-b-q.off { opacity: .45; cursor: default; }
.genes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gene {
  padding: 4px 9px; border-radius: 999px; font-size: 11.5px;
  border: 1px solid var(--line); background: var(--raise); color: var(--dim);
}
.gene b { color: var(--fg); font-weight: 650; }

/* Кнопки слота билда: «Надеть» и крестик рядом. */
.build-btns { display: flex; gap: 6px; }
.build-btns .zone-go.off { padding: 7px 10px; opacity: .6; }

/* Редкость выпавшего уника — рядом с именем, но тише его. */
.drop-t {
  font-size: 11px; font-weight: 600; opacity: .75;
  letter-spacing: .4px;
}

/* Множитель покупки: ряд ×1 … ×100 над списком товаров. */
.qty { display: flex; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.qty-b {
  flex: 1 1 auto; min-width: 46px;
  padding: 7px 4px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--raise);
  color: var(--dim); font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.qty-b.on {
  border-color: var(--gold); color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}

/* «Бой идёт» — дорога обратно в свёрнутый бой. Цветом отличается от
   плашек-предупреждений: это не поломка, а приглашение вернуться. */
.inbat {
  margin: 0 0 10px; padding: 10px 12px;
  border-radius: 12px; cursor: pointer;
  font-size: 13px; font-weight: 600; text-align: center;
  color: var(--on-acc); background: var(--accent);
}
.inbat:active { filter: brightness(.9); }

/* Ползунок доли (взнос в казну клана). Дорожка и бегунок задаются
   вручную: системный вид ползунка в вебвью телеграма разный на iOS и
   Android, и без этого он то теряется на фоне, то вылезает за карточку. */
.slider { margin: 2px 0 10px; }
.slider input[type="range"] {
  width: 100%; height: 26px; margin: 0;
  background: transparent; -webkit-appearance: none; appearance: none;
}
.slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--track);
}
.slider input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px; background: var(--track);
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px;
  border-radius: 50%; border: 2px solid var(--bg);
  background: var(--gold); cursor: pointer;
}
.slider input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%; border: 2px solid var(--bg);
  background: var(--gold); cursor: pointer;
}
.slider-v {
  margin-top: 2px; font-size: 12px; color: var(--dim); text-align: center;
}
.slider-v b { color: var(--gold); font-size: 13px; }

/* Переключатель языка в шапке. Виден всегда — и на выборе игры, и
   внутри любого раздела: искать его в настройках неудобно, а английскому игроку
   ещё и непонятно, где эти настройки. */
.lang-b {
  flex: 0 0 auto; min-width: 38px; height: 30px;
  padding: 0 9px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--raise);
  color: var(--dim); font-size: 12px; font-weight: 700;
  letter-spacing: .5px; cursor: pointer;
}
.lang-b:active { transform: scale(.94); }
.lang-b.busy { opacity: .5; }

/* ── Лента донатных наборов ──────────────────────────────────────────
   05.09.2026, менеджер: «сверху лента, в которой будут картинки
   наборов, если нажмут — все подробности и возможность покупки».

   Горизонтальный свиток: четыре набора в столбик заняли бы весь экран,
   а обложки без картинки не работают — ради них лента и затевалась. */
.pstrip {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.pstrip::-webkit-scrollbar { display: none; }
.pcard {
  flex: 0 0 auto; width: 148px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px;
  padding: 0; border: 0; background: none; color: var(--fg);
  font: inherit; text-align: left; cursor: pointer;
}
.pcard:active { transform: scale(.97); }
.pcard-img {
  display: block; width: 100%; aspect-ratio: 3 / 4;
  border-radius: 12px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
}
.pcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard-n {
  font-size: 12.5px; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard-p { font-size: 12px; font-weight: 700; color: var(--gold); }

/* Обложка в шторке подробностей: пропорция та же, что у плитки. */
.pack-art {
  margin: 0 auto 14px; max-width: 320px; width: 100%;
  aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
}
.pack-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pack-desc {
  white-space: pre-line; font-size: 13.5px; line-height: 1.45;
  color: var(--fg); margin-bottom: 16px;
}

/* ── Предложение наборов после серии поражений ───────────────────────
   «даётся лента на экран, которая будет убрана если он нажмет на любое
   место кроме ленты» — поэтому подложка ловит клик и закрывает, а сама
   лента его останавливает. */
.poffer-bg {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, .5);
  display: flex; align-items: flex-end;
  animation: fade .18s ease both;
}
.poffer {
  width: 100%; max-width: 620px; margin: 0 auto;
  background: var(--bg); border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  animation: up .24s cubic-bezier(.2, .8, .3, 1) both;
}
.poffer-h { font-size: 17px; font-weight: 680; margin-bottom: 2px; }
.poffer-s { font-size: 12.5px; color: var(--dim); margin-bottom: 12px; }

/* Одноразовый набор, который уже куплен: гасим, но не прячем — иначе
   непонятно, куда он делся с ленты. */
.pcard.mine { opacity: .55; }
.pcard.mine .pcard-p { color: var(--dim); }

/* Модификаторы следующего боя зоны — узнать о них надо ДО входа. */
.zone-mods {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 6px;
}
.zone-mods .chip { font-size: 10.5px; }