/* Профиль «сначала моё»: строка «аватар · имя · кошелёк» → баннер доступа бота → кошелёк (⚡ с «Забрать», 💎,
   «Энергия на срок») → полки «Мои персонажи» и «Понравившиеся» → разделы группой → настройки → ссылки.
   Телефон — одна колонка (порядок задаёт order: колонки aside/main растворены через display: contents);
   от 1024px — две колонки, левая («кто я», кошелёк, разделы) липнет при прокрутке. Шапка «Профиль» — только в fullscreen (полоса кнопок Telegram).
   Гейт 18+ (terms.js) — в terms-gate.css: profile.css подключён глобально, а гейт показывается до роутера. */
@import url("./terms-gate.css");

/* В обычном режиме заголовок не нужен: вкладка подсвечена в навигации, верх — строка пользователя */
html:not(.is-fullscreen) .profile__bar { display: none; }
.profile { padding-top: 10px; }
html:not(.is-fullscreen) .profile { padding-top: calc(var(--sat) + 12px); }
.profile__grid { display: flex; flex-direction: column; gap: 12px; }
.profile__aside, .profile__main { display: contents; }
.profile-head { order: 1; }
.profile-stats { order: 2; }
.profile-access-slot { order: 3; }
.profile-wallet { order: 4; }
.profile-shelves { order: 5; }
.profile-menu { order: 6; }
.profile-settings { order: 7; }
.profile-links { order: 8; }

/* ---------- Строка пользователя ---------- */
.profile-head { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 52px; }
.profile-head__ring { flex: 0 0 auto; padding: 2px; border-radius: 50%; background: var(--grad-diag); box-shadow: 0 4px 16px rgba(255, 45, 120, 0.3); }
.profile-head__avatar { width: 44px; height: 44px; border: 2px solid var(--bg); font-size: 18px; }
.profile-head__body { flex: 1; min-width: 0; }
.profile-head__name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.profile-head__first { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-head__badge {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--focus);
  background: rgba(139, 92, 246, 0.18);
  border: 1px solid rgba(139, 92, 246, 0.35);
}
/* @username и «с нами с …» — две строки: рядом с кошельком дата не резалась бы посередине (S-07) */
.profile-head__meta { display: flex; flex-direction: column; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--muted); min-width: 0; }
.profile-head__meta-item { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-head__sep { display: none; }

/* Статистика одной строкой (только ненулевая) */
.profile-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -4px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.profile-stat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.profile-stat b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.profile-stat__icon { display: inline-flex; color: var(--pink); }
.profile-stat__icon .icon { width: 15px; height: 15px; }
.profile-stat--media .profile-stat__icon { color: var(--amber); }
.profile-stat--calls .profile-stat__icon { color: var(--green); }

/* ---------- Баннер «бот не может писать» ---------- */
.profile-access-slot[hidden] { display: none; }
.profile-access {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 10px;
  border-radius: var(--r);
  background: linear-gradient(120deg, rgba(139, 92, 246, 0.2), rgba(255, 45, 120, 0.12));
  border: 1px solid rgba(139, 92, 246, 0.4);
}
.profile-access.is-blocked { background: rgba(255, 77, 94, 0.1); border-color: rgba(255, 77, 94, 0.4); }
.profile-access__icon { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--focus); background: rgba(139, 92, 246, 0.2); }
.profile-access.is-blocked .profile-access__icon { color: var(--red); background: rgba(255, 77, 94, 0.14); }
.profile-access__icon .icon { width: 18px; height: 18px; }
.profile-access__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.profile-access__body b { font-size: 14px; line-height: 1.25; }
.profile-access__body span { font-size: 12px; line-height: 1.3; color: var(--text-2); }
.profile-access__btn { flex: 0 0 auto; padding: 0 14px; }

/* ---------- Кошелёк: ⚡ с «Забрать», 💎 с долгом, «Энергия на срок» (profile/wallet.js) ---------- */
.profile-wallet { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.profile-wallet__row { display: flex; align-items: center; gap: 8px; padding-right: 10px; }
.profile-wallet__row + .profile-wallet__row { border-top: 1px solid var(--line); }
.profile-wallet__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 8px 4px 8px 12px;
  text-align: left;
  color: var(--text);
}
.profile-wallet__icon { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; }
.profile-wallet__icon .icon { width: 18px; height: 18px; }
.profile-wallet__icon--energy { color: var(--amber); background: rgba(255, 181, 71, 0.14); }
.profile-wallet__icon--gems { color: var(--gem); background: rgba(110, 231, 249, 0.12); }
.profile-wallet__icon--plan { color: var(--pink); background: rgba(255, 45, 120, 0.14); }
.profile-wallet__row--energy.can-claim .profile-wallet__icon { animation: profile-wiggle 2.6s var(--ease) infinite; }
.profile-wallet__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.profile-wallet__value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-wallet__sub { font-size: 12.5px; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; }
.profile-wallet__row.has-debt .profile-wallet__sub { color: var(--amber); }
.profile-wallet__row--plan.is-active .profile-wallet__value { color: var(--green); }
.profile-wallet__row .btn { flex: 0 0 auto; }
/* «Забрать +6», «Магазин», «Продлить» — мелкие кнопки (40 px), палец попадает в 48: невидимое расширение (К7) */
.profile-wallet__row .btn--sm::before { content: ""; position: absolute; inset: -4px 0; border-radius: inherit; }
.profile-wallet__claim { font-variant-numeric: tabular-nums; }
.profile-wallet__claim[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .profile-wallet__main:hover { background: var(--card-2); } }

/* ---------- Группа строк (разделы, ссылки) ---------- */
.profile-group { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.profile-group > * + * { border-top: 1px solid var(--line); }
.profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  color: var(--text);
  text-align: left;
  font-weight: 600;
  transition: background var(--t-fast);
}
.profile-row:active { background: var(--card-2); }
.profile-row__icon { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--text-2); background: var(--card-2); }
.profile-row__icon .icon { width: 18px; height: 18px; }
.profile-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.profile-row__title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-row__sub { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-row__chev { display: inline-flex; color: var(--muted-2); }
.profile-row__chev .icon { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.profile-row[aria-expanded="true"] .profile-row__chev--toggle .icon { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .profile-row:hover { background: var(--card-2); } }
/* Партнёрка — выделена: это заработок */
.profile-row--promo { background: linear-gradient(120deg, rgba(255, 45, 120, 0.18), rgba(139, 92, 246, 0.14) 70%); }
.profile-row--promo .profile-row__icon { color: #fff; background: var(--grad); box-shadow: var(--glow); }
.profile-row--promo .profile-row__sub { color: rgba(242, 240, 255, 0.78); }

/* История: раскрывается внутри группы */
.profile-history__body { padding: 2px 14px; }
.profile-history__body[hidden] { display: none; }
.profile-history__empty { padding: 12px 0; text-align: center; font-size: 13px; color: var(--muted); }
.profile-history__error { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13px; color: var(--muted); }
.tx-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 0; font-size: 14px; }
.tx-row + .tx-row { border-top: 1px solid var(--line); }
.tx-row__amt { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-row__amt.is-plus { color: var(--green); }
.tx-row__amt.is-minus, .tx-row__amt.is-zero { color: var(--muted); }
.tx-row__amt.is-plan { color: var(--violet-2); font-weight: 700; }
.tx-row__reason { flex: 1; min-width: 0; }
.tx-row__date { flex: 0 0 auto; font-size: 12px; color: var(--muted-2); white-space: nowrap; }

/* ---------- Полки персонажей ---------- */
.profile-shelves { display: flex; flex-direction: column; gap: 12px; }
.profile-shelves[hidden] { display: none; }
.shelf__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; margin-bottom: 8px; }
.shelf__title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.shelf__count { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--card-2); }
.shelf__rail {
  display: flex;
  gap: 8px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 2px var(--gutter) 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.shelf__rail::-webkit-scrollbar { display: none; }
.shelf__item { flex: 0 0 clamp(120px, 34vw, 160px); scroll-snap-align: start; }
.shelf__arrows { display: none; gap: 6px; }
.shelf__arrow { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--text); background: var(--card-2); border: 1px solid var(--line-2); }
.shelf__arrow .icon { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .shelf__arrows { display: flex; } }
.shelf__error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 56px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--line);
}
.shelf__error-text { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.shelf__error-text .icon { width: 18px; height: 18px; }

.shelf-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text);
  text-align: left;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.shelf-card:active { transform: scale(0.97); }
@media (hover: hover) { .shelf-card:hover { box-shadow: 0 10px 28px rgba(255, 45, 120, 0.22); } }
.shelf-card--skeleton { border: 0; }
.shelf-card__media { position: absolute; inset: 0; }
.shelf-card__ph { display: grid; place-items: center; font-size: 44px; }
.shelf-card__shade { position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, transparent, rgba(11, 10, 20, 0.88)); pointer-events: none; }
.shelf-card__heart { position: absolute; top: 8px; right: 8px; display: inline-flex; color: var(--pink); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6)); }
.shelf-card__heart .icon { width: 16px; height: 16px; }
.shelf-card__name {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  font-size: 14px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.shelf-card__name b { min-width: 0; font-weight: 800; }
.shelf-card__name span { flex: 0 0 auto; color: rgba(242, 240, 255, 0.75); font-weight: 600; }
.shelf-card__state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(11, 10, 20, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.shelf-card__state .icon { width: 26px; height: 26px; color: var(--amber); }
.shelf-card--create {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  background: var(--grad-soft);
  border: 1.5px dashed rgba(255, 45, 120, 0.55);
}
.shelf-card__plus { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 50%; color: #fff; background: var(--grad); box-shadow: var(--glow); }
.shelf-card__price { font-size: 12px; font-weight: 600; color: var(--muted); }

/* Пустая полка своих: одна строка-кнопка */
.profile-create-promo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 8px 12px 8px 8px;
  border-radius: var(--r);
  color: var(--text);
  text-align: left;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 45, 120, 0.2), transparent 60%), var(--card);
  border: 1px solid rgba(255, 45, 120, 0.35);
  transition: transform var(--t-fast) var(--ease);
}
.profile-create-promo:active { transform: scale(0.99); }
.profile-create-promo__art { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--grad); box-shadow: var(--glow); }
.profile-create-promo__art .icon { width: 22px; height: 22px; }
.profile-create-promo__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.profile-create-promo__body b { font-size: 15px; }
.profile-create-promo__body span { font-size: 12px; color: var(--muted); }
.profile-create-promo__price { flex: 0 0 auto; padding: 5px 10px; border-radius: 999px; font-weight: 800; white-space: nowrap; color: var(--amber); background: rgba(255, 181, 71, 0.12); }

/* ---------- Настройки (озвучка + «Скрывать текст уведомлений» одной карточкой) ---------- */
.profile-settings .section-title { margin-top: 4px; }
.profile-settings__card { padding: 0 14px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.profile-settings__card > * + *,
.profile-notify > * + * { border-top: 1px solid var(--line); }
.profile-notify[hidden] { display: none; }
.profile-setting { padding: 4px 0; }
.profile-setting .toggle { min-height: 48px; font-weight: 600; }
.profile-setting--select { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.profile-setting__label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.profile-setting__title { font-weight: 600; }
.profile-setting__sub { font-size: 12px; line-height: 1.3; color: var(--muted); }
.profile-setting--select .profile-setting__title { white-space: nowrap; }
.profile-setting--select .select { flex: 0 1 180px; min-width: 0; }

@keyframes profile-wiggle {
  0%, 70%, 100% { transform: rotate(0); }
  76% { transform: rotate(-12deg) scale(1.08); }
  84% { transform: rotate(10deg) scale(1.08); }
  92% { transform: rotate(-6deg); }
}

/* ---------- Десктоп: две колонки — экран шире узкой колонки по умолчанию (--page-narrow) ---------- */
@media (min-width: 1024px) {
  .screen[data-screen="profile"] { --page-max: 1120px; }
  .profile__grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 32px; align-items: start; }
  .profile__aside, .profile__main { display: flex; flex-direction: column; gap: 12px; }
  .profile__aside { position: sticky; top: calc(var(--screen-sticky-top, 0px) + 16px); }
  .shelf__rail { margin: 0; padding: 2px 0 4px; scroll-padding-inline: 0; }
}