/* Главная: витрина персонажей, как у Luna — компактная шапка в две строки и сразу сетка высоких карточек.
   Строка 1: стиль «Реализм | Аниме» + баланс (≥600 слева логотип). Строка 2: «Все · Популярные · Новые» + «Фильтры».
   В обычном режиме Telegram логотип не нужен (имя бота в шапке Telegram); в fullscreen логотип — в полосе
   кнопок Telegram (.home-topbar, контракт К1), строки — под ней. «Создать» — плавающая кнопка над навигацией справа.
   Колонки сетки считаются от ширины каталога (container queries), а не окна: 2 → 3 → 4 → 5.
   sizes картинок (CARD_SIZES в js/screens/home/grid.js) повторяет эти числа — меняйте вместе. */

@import url("./home-cards.css");

/* Колонка каталога — до --page-max; поля 12 на телефоне (как у Luna), дальше --gutter */
.home {
  container-type: inline-size;
  max-width: var(--page-max);
  margin: 0 auto;
}
.home__inner {
  --home-pad: 12px;
  padding: calc(var(--sat) + 8px) var(--home-pad) 8px;
}
@container (min-width: 600px) {
  .home__inner { --home-pad: var(--gutter); padding-top: calc(var(--sat) + 14px); }
}
/* Под плавающей «Создать»: последний ряд карточек можно докрутить выше неё */
.home--fab .home__inner { padding-bottom: 64px; }

/* ---------- Полоса Telegram в fullscreen: только логотип по центру (вид полосы — .is-fullscreen .topbar, К1) ---------- */
.home-topbar { display: none; }
.is-fullscreen .home-topbar { display: flex; }
.is-fullscreen .home__inner { padding-top: 8px; }

/* ---------- Шапка: две строки ---------- */
.home__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

.home-bar { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.home-bar__logo { display: none; }
.home-bar__energy { margin-left: auto; }
@container (min-width: 600px) {
  .home-bar { gap: 16px; }
  .home-bar__logo { display: block; }
}
/* В fullscreen логотип уже в полосе Telegram — второй в строке не нужен (планшет) */
.is-fullscreen .home-bar__logo { display: none; }

/* Сегмент стиля: 36 px на вид, зона касания 44 (::before) — строка остаётся компактной */
.home-seg { flex: 1 1 auto; min-width: 0; max-width: 320px; padding: 3px; }
.home-seg .seg__item { position: relative; min-height: 36px; padding: 0 10px; font-size: 14px; }
.home-seg .seg__item::before { content: ""; position: absolute; inset: -4px 0; }
@container (min-width: 600px) { .home-seg { flex: 0 0 280px; } }

/* ---------- Строка сортировок и «Фильтры» ---------- */
.home-filters { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.home-filters__views {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Узкие экраны (<340): строка листается; поля по вертикали — чтобы не обрезать зону касания и тень чипа */
  margin: -6px 0;
  padding: 6px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.home-filters__views::-webkit-scrollbar { display: none; }
.home-chip {
  position: relative;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: var(--fw-bold);
  color: rgba(242, 240, 255, 0.78);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line);
}
/* Зона касания 44 px при виде 34 (inset от рамки: 32 + 2 × 6) */
.home-chip::before { content: ""; position: absolute; inset: -6px 0; }
.home-chip:active { transform: scale(0.95); }
.home-chip.is-active { color: #fff; box-shadow: 0 3px 10px rgba(255, 45, 120, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.home-chip--personal { gap: 6px; padding: 0 10px 0 12px; }
.home-chip__icon { display: inline-flex; }
.home-chip__icon .icon { width: 15px; height: 15px; }
.home-chip__x { display: inline-flex; margin-left: 2px; opacity: 0.85; }
.home-chip__x .icon { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .home-chip:not(.is-active):hover { color: var(--text); border-color: var(--line-2); background: rgba(255, 255, 255, 0.08); }
}

.home-filter-btn {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 34px;
  border-radius: var(--r-pill);
  color: rgba(242, 240, 255, 0.86);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast), background var(--t-fast);
}
.home-filter-btn::before { content: ""; position: absolute; inset: -6px 0; }
.home-filter-btn .icon { width: 18px; height: 18px; }
.home-filter-btn:active { transform: scale(0.94); }
.home-filter-btn.is-on { color: #fff; border-color: rgba(255, 45, 120, 0.6); background: rgba(255, 45, 120, 0.16); }
.home-filter-btn__count {
  position: absolute;
  top: -5px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: var(--fw-heavy);
  color: #fff;
  background: var(--grad);
  box-shadow: 0 0 0 2px var(--bg);
}
@media (hover: hover) and (pointer: fine) {
  .home-filter-btn:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.08); }
}

/* ---------- Шторка «Фильтры» ---------- */
.home-sheet__group + .home-sheet__group { margin-top: 18px; }
.home-sheet__title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}
.home-sheet__chip .icon { width: 16px; height: 16px; }
.home-sheet__chip:not(.is-active) .icon { color: var(--pink); }
.home-sheet__actions { display: flex; gap: 10px; margin-top: 22px; padding-bottom: 4px; }
.home-sheet__done { flex: 1; }

/* ---------- Сетка ---------- */
.char-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@container (min-width: 600px) { .char-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@container (min-width: 780px) { .char-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 1040px) { .char-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }

/* ---------- Плавающая «Создать»: справа над навигацией, по правому краю «пилюли» навигации ---------- */
.home-fab {
  left: auto;
  right: calc(max(16px, (100% - min(100% - 32px, 380px)) / 2) + var(--sar));
  margin: 0;
  min-height: 44px;
  padding: 0 18px 0 14px;
  gap: 6px;
  font-size: 15px;
  box-shadow: 0 10px 24px rgba(255, 45, 120, 0.45), 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.home-fab .icon { width: 18px; height: 18px; }
@media (min-width: 1024px) {
  .home-fab { right: calc(var(--gutter) + var(--sar)); }
}
.home.is-create-empty ~ .home-fab { display: none; }

/* ---------- Приглашение «Создай персонажа мечты» (пустые «Мои») ---------- */
.create-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 16px;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: center;
  color: var(--text);
  border: 1px solid transparent;
  background:
    radial-gradient(100% 55% at 50% 0%, rgba(255, 45, 120, 0.3), transparent 70%) padding-box,
    radial-gradient(100% 55% at 50% 100%, rgba(139, 92, 246, 0.34), transparent 70%) padding-box,
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--grad-diag) border-box;
  box-shadow: 0 14px 34px -18px rgba(255, 45, 120, 0.6);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
  animation: card-in 440ms var(--ease) both;
}
.create-card:active { transform: scale(0.97); }
.create-card__orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 2px;
  border-radius: 50%;
  color: #fff;
  background: var(--grad);
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.create-card__orb .icon { width: 24px; height: 24px; }
.create-card__title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; text-wrap: balance; }
.create-card__text { max-width: 260px; font-size: 13px; line-height: 1.35; color: var(--muted); text-wrap: balance; }
.create-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px; /* как .btn--sm: вся карточка — кнопка, но «Создать» выглядит кнопкой и не должна быть мельче */
  margin-top: 6px;
  padding: 0 8px 0 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 8px 20px -6px rgba(255, 45, 120, 0.6);
}
.create-card__cta .icon { width: 16px; height: 16px; }
.create-card__price {
  margin-left: 2px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  background: rgba(11, 10, 20, 0.28);
}
.create-card__cta:not(:has(.create-card__price)) { padding-right: 16px; }
@media (hover: hover) {
  .create-card:hover { box-shadow: 0 18px 40px -16px rgba(255, 45, 120, 0.75); }
}
.create-card--wide { width: 100%; }

/* ---------- Пустые состояния и ошибка: компактно, кнопка сразу под текстом (не уходит под навигацию) ---------- */
.home-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 16px;
  text-align: center;
  border-radius: var(--r-lg);
  background: radial-gradient(80% 60% at 50% 0%, rgba(139, 92, 246, 0.16), transparent 70%), var(--card);
  border: 1px solid var(--line);
  animation: rise-in 300ms var(--ease) both;
}
.home-empty--create { padding: 0; background: none; border: 0; }
.home-empty__icon { font-size: 32px; line-height: 1; margin-bottom: 2px; }
.home-empty__title { font-size: 16px; font-weight: 800; color: var(--text); }
.home-empty__hint { max-width: 300px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.home-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.home-empty .btn { min-height: 44px; padding: 0 20px; }
.home-empty--error .btn { margin-top: 8px; }
.home-empty .btn .icon { width: 16px; height: 16px; }

/* Возврат из кэша: без повторной анимации появления */
.home.no-enter .char-card:not(.char-card--skeleton),
.home.no-enter .create-card { animation: none; }
.home.no-enter .live-avatar__img { transition: none; }