/* SF Rounded Semibold — единственное начертание в проекте. Диапазон весов указан
   целиком намеренно: иначе браузер доутолщал бы глифы там, где в стилях стоит
   700, и буквы бы поплыли. */
@font-face {
  font-family: "SF Rounded";
  src: url("fonts/sf-rounded-semibold.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sf-pro: "SF Rounded", "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --color-text: #fff;
  /* Палитра карточек — из присланного образца */
  --secondary-bg: #1a1a1a;
  --gold: #443926;
  --hint: #98989e;
  --accent: #3e88f7;
  --line: rgba(255, 255, 255, 0.1);
  --gift-bg: radial-gradient(50% 50% at 50% 50%, #6f6f6f 0%, #282829 100%);

  /* Telegram отдаёт отступ под системную панель; env() — фоллбэк для браузера */
  --safe-area-bottom: max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --safe-area-top: max(var(--tg-safe-area-inset-top, 0px), env(safe-area-inset-top, 0px));
  --content-top: var(--tg-content-safe-area-inset-top, 0px);

  --header-h: 44px;
  --tabs: 4;
  --ease: cubic-bezier(0.34, 1.2, 0.5, 1);

  /* Жидкое стекло.
     Кромка стеклянной поверхности: четыре внутренние тени, которые не
     рисуют ободок по краю, а собирают свет в толще — сильнее сверху,
     слабее снизу. Этим держатся все стеклянные элементы приложения, и
     менять их стоит только здесь, разом. Сам материал бывает двух видов:
     прозрачный (класс .glass) и плотный, когда фон под ним не нужен. */
  --glass-edge:
    inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.06),
    inset 2px 2px 0 -2px rgba(255, 255, 255, 0.09),
    inset -2px -2px 2px -2px rgba(255, 255, 255, 0.09),
    inset -1.8px -3px 0 -2px rgba(255, 255, 255, 0.06);

}

/* Монохромная подложка под подарком: свет сверху, темнее к низу. Тон задаёт
   сам подарок — app.js достаёт из него господствующий цвет и правит
   --tint-h/--tint-s. Запасные значения нарочно бесцветные: цвет не достали
   — карточка останется нейтрально-тёмной, а не покажет чужой оттенок.

   Рецептом живут обе крупные карточки, купленная и та, что на продажу,
   поэтому он здесь классом, а не переменной: var() внутри переменной
   разрешилась бы там, где переменная объявлена, и тон у всех был бы один. */
.tint-face {
  --tint-h: 240;
  --tint-s: 7%;
  /* Светлота вынесена отдельно: на мелкой карточке витрины тот же тон
     нужен глуше, иначе две сотни карточек спорят друг с другом */
  --tint-glow: 62%;
  --tint-top: 36%;
  --tint-bottom: 20%;
  background:
    radial-gradient(120% 85% at 50% -5%, hsla(var(--tint-h), var(--tint-s), var(--tint-glow), 1) 0%, hsla(var(--tint-h), var(--tint-s), var(--tint-glow), 0) 65%),
    linear-gradient(180deg, hsl(var(--tint-h), var(--tint-s), var(--tint-top)) 0%, hsl(var(--tint-h), var(--tint-s), var(--tint-bottom)) 100%);
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

* {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
}

body {
  background: #0d0d10;
  font-family: var(--font-sf-pro);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  overscroll-behavior: none;
}

.stage {
  height: var(--tg-viewport-stable-height, 100dvh);
  /* Верхний отступ держит содержимое ниже шапки с балансами */
  /* Карточек станет много — прокрутку держим на сцене, body её запрещает */
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(var(--safe-area-top) + var(--content-top));
  padding-bottom: calc(var(--safe-area-bottom) + 108px);
  /* Полосу прокрутки не показываем: на телефоне она рисовалась чертой у края */
  scrollbar-width: none;
}

.stage::-webkit-scrollbar {
  display: none;
}

/* Содержимое начинается на том же расстоянии от шапки, что и раньше */
.stage > .pane {
  padding-top: 14px;
}

/* Раздел виден только когда выбрана его вкладка */
.pane {
  display: none;
  /* Угловые накладки раздела (кружок языка в профиле) считают углы от него */
  position: relative;
}

.stage[data-section="home"] .pane[data-pane="home"] {
  display: block;
}

/* Карусель баннеров */

.slider__track {
  display: flex;
  gap: 12px;
  /* Боковые отступы живут на дорожке, иначе крайние слайды липнут к краю экрана */
  padding: 0 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

.slider__slide {
  /* Слайд уже дорожки — следующий выглядывает справа */
  flex: 0 0 calc(100% - 56px);
  aspect-ratio: 696 / 259;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  scroll-snap-align: start;
  -webkit-user-drag: none;
  transition: transform 0.18s ease;
}

.slider__slide:active {
  transform: scale(0.985);
}

.slider__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.slider__dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  /* Заливка не должна вылезать за скругление вытянутой точки */
  overflow: hidden;
  cursor: pointer;
  transition: width 0.3s var(--ease);
}

.slider__dot.is-active {
  width: 22px;
}

/* Белая заливка — это и есть таймер: дошла до края, баннер сменился */
.slider__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #fff;
}

/* У неактивной точки заливки нет вовсе */
.slider__dot:not(.is-active) .slider__fill {
  width: 0;
  transition: none;
}

/* Навбар и кнопка рядом — одной группой по центру экрана.
   336 на капсулу, 8 на зазор, 60 на кнопку. На узком экране группа жмётся,
   и капсула отдаёт ширину первой: кнопка круглая, ей сжиматься некуда. */
.navbar {
  position: fixed;
  z-index: 50;
  bottom: max(32px, var(--safe-area-bottom, 0px));
  left: 50%;
  translate: -50%;
  width: min(404px, calc(100% - 24px));
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Контейнер — из присланного кода, ширина пересчитана под 4 вкладки.
   Материал тот же, что у кнопки рядом: обе на жидком стекле из .glass */
._footer_1mfct_7 {
  -webkit-user-select: none;
  user-select: none;
  border-radius: 30px;
  /* Позицию задаёт обёртка; капсула занимает всё, что осталось от кнопки */
  position: relative;
  flex: 1;
  min-width: 0;
  height: 60px;
  padding: 4px;
  display: flex;
  /* Горизонтальный жест забираем себе, иначе его перехватит страница */
  touch-action: none;
}

/* Подложка под стеклом — та же, что у кнопки справа */
._footer_1mfct_7::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0.33;
  background: linear-gradient(180deg, #1e1e1e, #191919);
  pointer-events: none;
}

/* Кнопка справа. Само стекло приходит из .glass — того же, которым сделаны
   плашки и кнопка GetGems. Здесь только форма, размер и подложка под ним */
.navbar__side {
  position: relative;
  flex: none;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease;
}

/* Подложка под стеклом: без неё на светлом фоне кружок выцветает, а с ней
   держит глубину. Лежит ниже стекла, поэтому z-index отрицательный */
.navbar__side::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0.33;
  background: linear-gradient(180deg, #1e1e1e, #191919);
  pointer-events: none;
}

.navbar__side:active {
  transform: scale(0.95);
}

.navbar__icon {
  width: 24px;
  height: 24px;
  display: block;
  fill: currentColor;
  /* Значок не в полную силу: так он не спорит с иконками в капсуле */
  opacity: 0.85;
  pointer-events: none;
}

/* Подложка активной вкладки — едет за --active-index */
._indicator_1mfct_25 {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--tabs));
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(calc(var(--active-index, 0) * 100%));
  transition: transform 0.42s var(--ease);
  cursor: grab;
}

._footer_1mfct_7:active ._indicator_1mfct_25 {
  cursor: grabbing;
}

._indicator_1mfct_25[data-hidden="true"] {
  opacity: 0;
}

._tab_1mfct_40 {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-user-drag: none;
}

/* Обе иконки лежат в одной ячейке грида — отсюда кроссфейд */
._icon_1mfct_146 {
  grid-area: 1 / 1;
  width: 24px;
  height: 24px;
  pointer-events: none;
  transition: opacity 0.26s ease, transform 0.42s var(--ease);
}

._icon_1mfct_146[data-hidden="true"] {
  opacity: 0;
}

._tab_1mfct_40.active ._icon_1mfct_146 {
  transform: scale(1.06);
}

._tab_1mfct_40:active ._icon_1mfct_146 {
  transform: scale(0.88);
  transition-duration: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  ._indicator_1mfct_25,
  ._icon_1mfct_146 {
    transition-duration: 0.01ms;
  }
}

/* Экран загрузки */

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 56px;
  background: #0d0d10;
  /* Страховка: если JS не отработал, экран всё равно уйдёт сам */
  animation: splash-failsafe 0.4s linear 6s forwards;
}

.splash.is-done {
  animation: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s 0.45s;
}

.splash__logo svg {
  width: 104px;
  height: auto;
  display: block;
  /* Появление: подъезжает снизу и проявляется */
  animation: splash-enter 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Коробка едва заметно дышит — экран не выглядит застывшим */
.splash__box {
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-breathe 2.6s ease-in-out 0.6s infinite;
}

/* Каждая искорка мерцает в свой черёд, задержки заданы в разметке */
.splash__spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-twinkle 2.4s ease-in-out infinite;
}

.splash__spinner {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  animation: splash-spin 0.9s linear infinite;
}

@keyframes splash-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}

@keyframes splash-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

@keyframes splash-twinkle {
  0%, 70%, 100% { opacity: 0.35; transform: scale(0.72) rotate(0deg); }
  18%           { opacity: 1;    transform: scale(1.18) rotate(18deg); }
  34%           { opacity: 0.9;  transform: scale(1)    rotate(0deg); }
}

@keyframes splash-spin {
  to { transform: rotate(360deg); }
}

@keyframes splash-failsafe {
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .splash__logo svg,
  .splash__box,
  .splash__spark {
    animation: none;
  }
}

/* Карточка подарка */

/* Спрайт с градиентами ленты: нужен в DOM, но не должен занимать места */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Холст для снятия цвета с подарка. Нулевого размера он быть не может —
   lottie нарисовал бы в нём пустоту, поэтому уводим его за край экрана */
.tint-probe {
  position: fixed;
  left: -200px;
  top: 0;
  width: 72px;
  height: 72px;
  opacity: 0;
  pointer-events: none;
}

/* Отбор и порядок витрины — две кнопки под каруселью */
.filters {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding: 0 16px;
}

.filter {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 99em;
  /* Жидкое стекло, плотный вариант: подложка не просвечивает, а кромку
     держат те же четыре внутренние тени, что и у остальных стеклянных
     поверхностей */
  background: linear-gradient(180deg, #1e1e1e, #191919);
  -webkit-backdrop-filter: blur(28px) saturate(0.6);
  backdrop-filter: blur(28px) saturate(0.6);
  box-shadow: var(--glass-edge);
  color: #f5f5f7;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease;
}

.filter:active {
  transform: scale(0.96);
}

/* Волосок между подписью и значком */
.filter__line {
  flex: none;
  width: 1px;
  height: 19px;
  margin: 0 5px;
  background: #363639;
}

/* Размеры у значков разные — каждый в своих пропорциях */
.filter__icon {
  flex: none;
  display: block;
}

.filter__icon--gift {
  width: 14px;
  height: 16px;
}

.filter__icon--sort {
  width: 18px;
  height: 11px;
}

.gifts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 16px;
  /* Отбивка от строки отбора */
  margin-top: 14px;
}

/* Когда отбор ничего не оставил */
.gifts__none {
  grid-column: 1 / -1;
  padding: 28px 0;
  text-align: center;
  color: var(--hint);
  font-size: 15px;
}

/* Карточка — стекло, а не серая плита. Три слоя дают весь объём:
   мягкая подсветка под подарком, наклонный градиент корпуса и блик по
   верхней кромке. Ободок и падающая тень живут в box-shadow. */
.gift {
  /* Масштаб ленты наследуется: в профиле карточки мельче, и лента с ними */
  --ribbon-scale: 1;
  /* Скругление вынесено в переменную: в профиле карточки мельче */
  --gift-radius: 20px;
  position: relative;
  /* Пропорции образца (180 x 200); ширину задаёт сетка, две штуки в ряд */
  aspect-ratio: 180 / 200;
  padding: 12px;
  border-radius: var(--gift-radius);
  /* Подложку даёт .tint-face: тон у неё от самого подарка. Здесь только
     глушим светлоту — рядом стоит соседняя карточка со своим цветом */
  --tint-glow: 44%;
  --tint-top: 22%;
  --tint-bottom: 11%;
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow:
    /* Световой кант сверху и приглушённый по остальным краям — ободок стекла */
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 1px 0 0 rgba(255, 255, 255, 0.07),
    inset -1px 0 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    /* Преломление у нижней кромки: свет собирается в толще стекла */
    inset 0 -22px 26px -24px rgba(255, 255, 255, 0.3),
    0 14px 26px -16px rgba(0, 0, 0, 0.8),
    0 3px 8px -5px rgba(0, 0, 0, 0.6);
}

/* Блик: свет падает из верхнего левого угла и гаснет к середине карточки */
.gift::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    152deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.05) 17%,
    rgba(255, 255, 255, 0) 41%
  );
  pointer-events: none;
}

/* Отсвет от подарка на дне карточки — из-за него стекло кажется толстым */
.gift::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 46%;
  border-radius: inherit;
  background: radial-gradient(58% 100% at 50% 100%, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

/* Доли взяты из образца: арт 120 на карточке 180 x 200, отступ сверху 28.
   Позиционируем абсолютно — тогда проценты считаются от всей карточки,
   а не от области внутри padding, и пропорции держатся на любой ширине. */
.gift__art {
  position: absolute;
  z-index: 1;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 66.67%;
  aspect-ratio: 1;
}

.gift__art canvas,
.gift__art svg,
.gift__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Лента в углу.
   Центр ленты сперва совмещаем с углом карточки (отрицательные margin),
   затем отодвигаем внутрь по диагонали на --ribbon-inset и поворачиваем. */
/* Оба торца ленты срезаны в path ровно под 45°, поэтому после поворота
   они становятся горизонталью и вертикалью и ложатся впритык к краям
   карточки. Смещения посчитаны из середин этих торцов — при них скруглённые
   углы остаются целыми и обрезка не нужна. */
.gift__badge {
  --ribbon-fill: url(#ribbon-default);

  position: absolute;
  z-index: 2;
  top: calc(15.49px * var(--ribbon-scale));
  right: calc(-20.68px * var(--ribbon-scale));
  width: calc(98px * var(--ribbon-scale));
  height: calc(26px * var(--ribbon-scale));
  transform: rotate(45deg);

  display: grid;
  place-items: center;
  font-size: calc(11px * var(--ribbon-scale));
  font-weight: 600;
  line-height: 1;
  color: #fff;
  pointer-events: none;
}

.gift__badge[data-kind="premium"] { --ribbon-fill: url(#ribbon-premium); }
.gift__badge[data-kind="sold"]    { --ribbon-fill: url(#ribbon-sold); }
.gift__badge[data-kind="time"]    { --ribbon-fill: url(#ribbon-time); }

/* Редкость: зелёная, фиолетовая, жёлтая. Без обводок — только заливка */
.gift__badge[data-kind="rare"]   { --ribbon-fill: url(#ribbon-rare); }
.gift__badge[data-kind="epic"]   { --ribbon-fill: url(#ribbon-epic); }
.gift__badge[data-kind="legend"] { --ribbon-fill: url(#ribbon-legend); }
.gift__badge[data-kind="blood"]  { --ribbon-fill: url(#ribbon-blood); }

.gift__ribbon {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  fill: var(--ribbon-fill);
}

.gift__label {
  grid-area: 1 / 1;
  /* Текст идёт поверх ленты */
  z-index: 1;
}

/* Плашка цены */
.gift__price {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(170deg, #51442c 0%, var(--gold) 52%, #3a301f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 150, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 3px 8px -4px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

.gift__star {
  width: 16px;
  height: 16px;
  display: block;
  -webkit-user-drag: none;
}

.gift__amount {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  /* Золото под стать звезде; color — запасной вариант, если clip не поддержан */
  color: #fdd21a;
  background-image: linear-gradient(135deg, #fdd21a, #e47b03);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Карточка подарка крупным планом */

.sheet[hidden] {
  display: none;
}

.sheet {
  position: fixed;
  inset: 0;
  /* Выше плавающей навигации */
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.32s ease;
}

.sheet.is-open .sheet__backdrop {
  opacity: 1;
}

.sheet__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--secondary-bg);
  border-radius: 24px 24px 0 0;
  padding-bottom: max(16px, var(--safe-area-bottom));
  /* Закрыта — уведена за нижний край; выезд и возврат идут одной кривой */
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.sheet.is-open .sheet__panel {
  transform: translateY(0);
}

/* Во время перетаскивания позицию задаёт палец, анимация мешает */
.sheet.is-dragging .sheet__panel {
  transition: none;
}

.sheet__head {
  position: relative;
  flex: none;
  height: 30px;
  padding: 10px 12px 0;
  /* Шапка — всегда ручка для перетаскивания, прокрутке её не отдаём */
  touch-action: none;
}

/* Ручка — подсказка, что лист можно утянуть вниз */
.sheet__grabber {
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.sheet__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Вертикаль отдаём прокрутке содержимого, всё прочее — нам */
  touch-action: pan-y;
  /* Когда прокручивать нечего, вертикаль тоже наша — класс ставит app.js */
  overscroll-behavior: contain;
  padding: 6px 16px 0;
  scrollbar-width: none;
}

.sheet__scroll.is-static {
  touch-action: none;
}

.sheet__scroll::-webkit-scrollbar {
  display: none;
}

.sheet__stage {
  position: relative;
  /* Подарок — тоже ручка: тянуть лист удобнее всего прямо за него */
  touch-action: none;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  /* Вырываемся из боковых отступов прокрутки — подложка идёт от края до края */
  margin: 0 -16px;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}

/* Узор поверх подложки — тот же, что на купленном подарке */
.sheet__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("gifts/pattern.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.3;
  pointer-events: none;
}

.sheet__art {
  position: relative;
  z-index: 1;
  width: 42%;
  aspect-ratio: 1;
}

.sheet__art canvas,
.sheet__art svg,
.sheet__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sheet__title {
  margin: 18px 0 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.01em;
}

.sheet__note {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--hint);
}

/* Таблица характеристик: две колонки, разлинованные рамками */
.sheet__specs {
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: minmax(92px, max-content) 1fr;
  border: 1px solid var(--line);
  border-radius: 14px;
  /* Линии строк упёрлись бы в скругление — лишнее срезаем */
  overflow: hidden;
}

.sheet__specs dt,
.sheet__specs dd {
  margin: 0;
  padding: 14px 16px;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  border-top: 1px solid var(--line);
}

.sheet__specs dt {
  color: var(--hint);
  border-right: 1px solid var(--line);
}

/* Верхняя линия первой строки — это рамка самой таблицы */
.sheet__specs > :nth-child(1),
.sheet__specs > :nth-child(2) {
  border-top: 0;
}

.sheet__value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-weight: 600;
}

/* Наличие: приписка стоит в одну строку с «выпущено», а не уезжает вниз.
   Строке разрешаем сжиматься, иначе она распёрла бы колонку таблицы. */
.sheet__value.sheet__value--row {
  flex-wrap: nowrap;
  min-width: 0;
  gap: 7px;
  /* Строка плотнее обычной: иначе «2 000/2 000 выпущено» и приписка вдвоём
     не влезают в колонку */
  font-size: 14px;
}

.sheet__value--row > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Приписка не сжимается — сокращается соседний текст, а не она */
.sheet__value--row .sheet__pill {
  flex: none;
  padding: 2px 7px;
  font-size: 12px;
}

/* Heavy шире прежнего начертания, и «198/200 выпущено» рвалось посередине.
   Фразу держим целой, а приписка при нехватке места уходит на строку ниже. */
.sheet__value > span {
  white-space: nowrap;
}

/* Приписка у значения — как проценты редкости в образце */
.sheet__pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(62, 136, 247, 0.18);
  color: #6ea8fb;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.sheet__pill[data-scarce="true"] {
  background: rgba(246, 179, 41, 0.16);
  color: #f6b329;
}

/* Остаток виден глазом, а не только числом */
.sheet__gauge {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.sheet__gauge-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  /* Ширину ставит app.js; заполняется уже после открытия листа */
  width: 0;
  /* При одной штуке из тысячи полоска схлопнулась бы в невидимую линию */
  min-width: 6px;
  transition: width 0.6s 0.15s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}

/* Остатка нет совсем — и полоски нет */
.sheet__gauge-fill[data-empty="true"] {
  min-width: 0;
}

/* Подарок на исходе — подсветка становится тревожной */
.sheet__gauge[data-scarce="true"] .sheet__gauge-fill {
  background: #f6b329;
}

.sheet__price {
  gap: 5px;
}

/* В листе звезда белая, поэтому и сумма белая — золото рядом с ней спорило */
.sheet__amount {
  font-weight: 600;
}

.sheet__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 0;
}

/* «Поделиться» рядом со счётчиком: стекло из .glass, внутри одна стрелка */
.sheet__share {
  flex: none;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 99em;
  display: grid;
  place-items: center;
  color: #f5f5f7;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.2s ease;
}

.sheet__share:active {
  transform: scale(0.92);
  background-color: rgba(255, 255, 255, 0.12);
}

.sheet__share svg {
  width: 24px;
  height: 24px;
}

/* Счётчик штук — высотой вровень с кнопкой покупки */
/* Фон и ободок приходят из .glass — класс висит на элементе в разметке */
.sheet__qty {
  flex: none;
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 2px;
  border-radius: 99em;
}

.sheet__qty-btn {
  width: 38px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #fff;
  font-family: inherit;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.12s ease;
}

.sheet__qty-btn:active:not(:disabled) {
  transform: scale(0.88);
}

/* Больше, чем есть в наличии, не набрать */
.sheet__qty-btn:disabled {
  opacity: 0.28;
  cursor: default;
}

.sheet__qty-value {
  min-width: 22px;
  text-align: center;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.sheet__buy {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.2s ease;
}

.sheet__buy:active {
  transform: scale(0.98);
  filter: brightness(0.92);
}

/* Пока открывается счёт, второй раз нажать нельзя */
.sheet__buy:disabled {
  opacity: 0.6;
  pointer-events: none;
}

.sheet__buy-star {
  width: 20px;
  height: 20px;
  display: block;
}

/* Лист выбора отбора и порядка.
   Материал тот же, что у капсулы навигации и плашек: стекло из .glass на
   самом листе, кромка из --glass-edge на карточках со строками и на
   кнопке отказа. Ничего своего здесь не заведено. */

/* Лист выбора стоит карточкой с отбивкой от краёв: он короткий, и во всю
   ширину экрана смотрелся бы тяжелее, чем выбор из трёх строк */
.sheet--pick {
  --pick-gap: max(12px, var(--safe-area-bottom));
}

.sheet--pick .sheet__panel {
  width: min(520px, calc(100% - 24px));
  margin-bottom: var(--pick-gap);
  padding-bottom: 14px;
  border-radius: 28px;
  /* Закрыт — уведён вниз целиком, вместе с этой отбивкой */
  transform: translateY(calc(100% + var(--pick-gap)));
}

.pick__top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 16px 10px;
  /* Шапка листа — ручка, как и полоска над ней */
  touch-action: none;
}

.pick__title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
}

.pick__icon {
  width: 15px;
  height: 17px;
  flex: none;
  fill: currentColor;
  opacity: 0.75;
}

/* У значка порядка пропорции другие: линии шире, чем подарок, и выше ему
   не нужно */
.pick__icon--sort {
  width: 18px;
  height: 11px;
}

.pick__close {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f5f5f7;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.2s ease;
}

.pick__close:active {
  transform: scale(0.92);
  background-color: rgba(255, 255, 255, 0.12);
}

.pick__close svg {
  width: 17px;
  height: 17px;
}

.pick__scroll {
  padding-bottom: 4px;
}

/* Строки лежат в общей стеклянной карточке */
.pick__card {
  display: grid;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: var(--glass-edge);
  overflow: hidden;
}

.pick__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 16px;
  border: 0;
  background: none;
  color: #f5f5f7;
  font-family: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Разделитель отбит слева — под названиями, а не через всю карточку */
.pick__row + .pick__row::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}

.pick__row:active {
  background-color: rgba(255, 255, 255, 0.07);
}

.pick__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Переключатель — кольцо, которое заполняется точкой */
.pick__mark {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1.6px rgba(255, 255, 255, 0.26);
  transition: box-shadow 0.2s ease;
}

.pick__row.is-on .pick__mark {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.pick__mark::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.26s var(--ease);
}

.pick__row.is-on .pick__mark::after {
  transform: scale(1);
}

.pick__btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.2s ease;
}

.pick__btn:active {
  transform: scale(0.97);
}

.pick__btn--off {
  color: #f5f5f7;
}

/* Главная кнопка шире — на неё и нажимают чаще */
.pick__btn--on {
  flex-grow: 1.4;
  background: var(--accent);
  color: #fff;
}

.pick__btn--on:active {
  filter: brightness(0.92);
}

@media (prefers-reduced-motion: reduce) {
  .pick__mark,
  .pick__mark::after {
    transition-duration: 0.01ms;
  }
}

/* Карточка на витрине откликается на нажатие */
.gift {
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.22s ease;
}

.gift:active {
  transform: scale(0.97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    inset -1px 0 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -22px 26px -24px rgba(255, 255, 255, 0.2),
    0 6px 14px -10px rgba(0, 0, 0, 0.75);
}

@media (prefers-reduced-motion: reduce) {
  .sheet__backdrop,
  .sheet__panel,
  .sheet__gauge-fill {
    transition-duration: 0.01ms;
  }
}

/* Стеклянная поверхность: полупрозрачная подложка, размытие под ней и четыре
   внутренние тени по краям — светлее сверху, глуше снизу. Отсюда ободок,
   из-за которого поверхность читается как стекло, а не как серый прямоугольник. */
.glass {
  /* Запасной цвет для браузеров без color-mix */
  background-color: rgba(30, 30, 30, 0.5);
  background-color: color-mix(in srgb, #1e1e1e 50%, transparent);
  -webkit-backdrop-filter: blur(13px) saturate(1.4);
  backdrop-filter: blur(13px) saturate(1.4);
  box-shadow: var(--glass-edge);
}

/* Профиль */

.stage[data-section="profile"] .pane[data-pane="profile"] {
  display: block;
}

/* Выбор языка.

   Кружок с флагом стоит в углу поверх профиля, а не в потоке: иначе он
   сдвинул бы вниз аватар и всё под ним. Список выезжает из-под него. */
.lang {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 16px;
}

.lang__btn {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.14s ease;
}

/* Подложка под стеклом: без неё кружок выцветает. Ниже стекла, отсюда
   отрицательный z-index — тем же приёмом сделаны кнопки у навигации */
.lang__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0.33;
  background: linear-gradient(180deg, #1e1e1e, #191919);
  pointer-events: none;
}

.lang__btn:active {
  transform: scale(0.92);
}

.lang__flag {
  font-size: 23px;
  line-height: 1;
  /* Эмодзи-флаг рисуется шрифтом системы, а не нашим */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.lang__menu[hidden] {
  display: none;
}

.lang__menu {
  position: absolute;
  top: 54px;
  left: 0;
  min-width: 208px;
  padding: 6px;
  border-radius: 22px;
  display: grid;
  /* Жидкое стекло, плотный вариант — тот же, что у кнопок отбора: сквозь
     прозрачное просвечивал бы аватар, и список читался бы хуже */
  background: linear-gradient(180deg, #1e1e1e, #191919);
  -webkit-backdrop-filter: blur(28px) saturate(0.6);
  backdrop-filter: blur(28px) saturate(0.6);
  box-shadow: var(--glass-edge), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
  /* Раскрывается из того угла, под которым стоит кнопка */
  transform-origin: 12px -12px;
  opacity: 0;
  transform: scale(0.9) translateY(-6px);
  transition: opacity 0.2s ease, transform 0.26s var(--ease);
}

.lang__menu.is-on {
  opacity: 1;
  transform: none;
}

.lang__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: #f5f5f7;
  font-family: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.lang__row:active {
  background-color: rgba(255, 255, 255, 0.08);
}

.lang__row .lang__flag {
  font-size: 21px;
}

.lang__name {
  flex: 1 1 auto;
  min-width: 0;
}

/* Галочка у выбранного языка */
.lang__tick {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent);
  opacity: 0;
}

.lang__tick svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lang__row[aria-selected="true"] .lang__tick {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lang__menu {
    transition-duration: 0.01ms;
  }
}

.prf__card {
  display: grid;
  justify-items: center;
  padding: 4px 16px 0;
}

.prf__avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  /* Фоллбэк, когда Telegram не отдал фотографию */
  background: linear-gradient(160deg, #8fe06a, #58c24a);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-size: 44px;
  color: rgba(0, 0, 0, 0.35);
}

.prf__title {
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.prf__name {
  font-size: 19px;
  line-height: 1.2;
}

.prf__meta {
  margin: 7px 0 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  color: var(--hint);
}

.prf__dot {
  opacity: 0.55;
}

.prf__copy {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--hint);
  cursor: pointer;
  /* Ни рамки, ни подсветки: это просто глиф, который копирует по нажатию */
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, transform 0.12s ease;
}

.prf__copy:active {
  transform: scale(0.86);
}

/* Вход в админку — только у тех, кто в ней числится */
.prf__admin[hidden] {
  display: none;
}

.prf__admin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 8px 15px 8px 12px;
  border-radius: 99em;
  color: #f5f5f7;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.12s ease;
}

.prf__admin:active {
  transform: scale(0.94);
}

.prf__admin svg {
  width: 17px;
  height: 17px;
}

/* Переключатель «Подарки / NFT» */
.prf-tabs {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 52px;
  margin: 26px 16px 0;
  padding: 4px;
  border-radius: 99em;
}

/* Капсула едет за --prf-index */
.prf-tabs__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 2);
  border-radius: 99em;
  background: rgba(255, 255, 255, 0.09);
  transform: translateX(calc(var(--prf-index, 0) * 100%));
  transition: transform 0.42s var(--ease);
}

.prf-tabs__tab {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 99em;
  background: none;
  color: var(--hint);
  font-family: inherit;
  font-size: 17px;
  cursor: pointer;
  transition: color 0.26s ease;
}

.prf-tabs__tab.is-active {
  color: #f5f5f7;
}

/* Значок залитый, а не контурный: цвет берёт у подписи и гаснет вместе с
   ней на неактивной вкладке. И мельче прежнего куба — сплошная фигура при
   том же размере выглядит тяжелее контурной */
.prf-tabs__tab svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.prf__total {
  margin: 26px 0 0;
  padding: 0 20px;
  font-size: 19px;
}

.prf__list {
  margin-top: 16px;
}

/* Разделов два, а сетка одна — переиспользуем витринную */
.prf__list .gifts {
  margin-top: 0;
}

.prf__empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 54px 24px 24px;
  text-align: center;
  color: var(--hint);
}

.prf__empty-art {
  width: 92px;
  aspect-ratio: 1;
}

.prf__empty-art canvas,
.prf__empty-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.prf__empty b {
  font-size: 21px;
  font-weight: inherit;
  color: #f5f5f7;
}

/* Текст и кнопка стоят одной строкой, как на образце */
.prf__empty p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -4px 0 0;
}

.prf__market {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 0;
  border-radius: 99em;
  color: #f5f5f7;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.prf__market:active {
  transform: scale(0.94);
}

.prf__market svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* Экран после покупки.

   Занимает весь экран: подарок с поздравлением посередине, кнопка в профиль
   внизу. Поверх всего один раз пролетает конфетти. */

.won[hidden] {
  display: none;
}

.won {
  position: fixed;
  inset: 0;
  /* Выше листов, ниже уведомления */
  z-index: 250;
  display: grid;
  grid-template-rows: 1fr auto;
  background: #0d0d10;
  padding:
    calc(var(--safe-area-top) + var(--content-top) + 24px) 16px
    calc(max(20px, var(--safe-area-bottom)) + 20px);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.won.is-on {
  opacity: 1;
  transform: none;
}

/* Конфетти летит поверх всего экрана и ничего не перехватывает */
.won__confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.won__confetti canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.won__body {
  position: relative;
  z-index: 2;
  align-self: center;
  display: grid;
  justify-items: center;
  text-align: center;
}

/* Подарок ровно того же размера, что и собачка в образце */
.won__art {
  width: 112px;
  aspect-ratio: 1;
}

.won__art canvas,
.won__art svg,
.won__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.won__title {
  margin-top: 26px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.won__note {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--hint);
}

/* Кнопка — то же жидкое стекло, что у остальных: материал из .glass,
   здесь только форма и подложка под ним */
.won__go {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: 99em;
  color: #f5f5f7;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.2s ease;
}

/* Без подложки кнопка выцветает на тёмном: стекло ниже, отсюда и z-index */
.won__go::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0.33;
  background: linear-gradient(180deg, #1e1e1e, #191919);
  pointer-events: none;
}

.won__go:active {
  transform: scale(0.98);
  background-color: rgba(255, 255, 255, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .won {
    transition-duration: 0.01ms;
  }
}

/* Всплывающее уведомление */

.toast[hidden] {
  display: none;
}

.toast {
  position: fixed;
  top: calc(var(--safe-area-top) + var(--content-top) + 12px);
  left: 50%;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  padding: 11px 18px;
  border-radius: 99em;
  font-size: 15px;
  white-space: nowrap;
  /* Перехватывать нажатия не должно — оно только сообщает */
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -14px);
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast__icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: #4cd964;
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition-duration: 0.01ms;
  }
}

/* Шапка с балансами */

.hdr {
  /* Шапка едет вместе со страницей: она часть содержимого, а не накладка */
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
  /* Ничего в шапке не нажимается — не перехватываем касания у содержимого */
  pointer-events: none;
}

/* Название раздела и кнопка рядом с ним */
.hdr__name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* «!» у названия: открывает рассказ про стейкинг. В остальных разделах её
   нет — рассказывать про них нечего */
.hdr__info {
  display: none;
  width: 22px;
  height: 22px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: var(--glass-edge);
  color: #f5f5f7;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  /* Шапка касаний не перехватывает, а эта кнопка должна их получать */
  pointer-events: auto;
  transition: transform 0.12s ease, background-color 0.2s ease;
}

.stage[data-section="staking"] .hdr__info {
  display: grid;
  place-items: center;
}

.hdr__info:active {
  transform: scale(0.88);
  background-color: rgba(255, 255, 255, 0.2);
}

/* Название раздела стоит на одном месте во всех разделах — меняется
   только текст, поэтому шапка не дёргается при переходах */
.hdr__section {
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
}

.hdr__balances {
  display: flex;
  align-items: center;
  /* Балансы заметно врозь: вплотную они читались как одно число */
  gap: 26px;
}

.hdr__balance {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  line-height: 1;
}

.hdr__icon {
  display: block;
  -webkit-user-drag: none;
}

/* Глифы разной плотности: у купона внутри рисунка есть поля, у звезды их
   нет. Поэтому размеры разные, а на глаз значки выходят одинаковыми. */
.hdr__icon--coupon {
  width: 21px;
  height: 21px;
}

.hdr__icon--star {
  width: 17px;
  height: 17px;
}

/* Витрина в профиле: три в ряд, значит всё внутри мельче */

.prf__list .gifts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.prf__list .gift {
  --ribbon-scale: 0.66;
  --gift-radius: 14px;
  padding: 8px;
}

/* Цены у купленного подарка нет — подарок встаёт по центру карточки */
.prf__list .gift__art {
  top: 50%;
  transform: translate(-50%, -50%);
  width: 74%;
}

/* Карточка купленного подарка */

.own-card {
  position: relative;
  /* Вырываемся из боковых отступов прокрутки — подложка идёт от края до края */
  margin: 0 -16px;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  /* Высоту задаёт содержимое, а не aspect-ratio: от выведенной им высоты
     проценты у детей разрешаются ненадёжно — подарок то не влезал, то
     растягивался на всю ширину и выдавливал кнопки. */
  display: grid;
  gap: 14px;
  padding: 20px 16px 16px;
  /* Карточка — ручка для перетаскивания листа */
  touch-action: none;
}

.own-card__pattern {
  position: absolute;
  inset: 0;
  background-image: url("gifts/pattern.png");
  /* Узор ложится один раз на всю подложку: замощение давало вторую копию */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.3;
  pointer-events: none;
}

.own-card__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.26);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.12s ease;
}

.own-card__close:active {
  transform: scale(0.9);
  background: rgba(0, 0, 0, 0.4);
}

.own-card__close svg {
  width: 18px;
  height: 18px;
}

.own-card__art {
  justify-self: center;
  /* Доля ширины подложки — она определена всегда; края удерживают размер
     в разумных пределах и на узком, и на широком экране */
  width: clamp(130px, 45%, 180px);
  aspect-ratio: 1;
}

.own-card__art canvas,
.own-card__art svg,
.own-card__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.own-card__acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.own-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 58px;
  padding: 0 10px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.own-act:active:not(:disabled) {
  transform: scale(0.96);
}

/* Улучшение появится позже — кнопка на месте, но пока не работает */
.own-act:disabled {
  opacity: 0.42;
  cursor: default;
}

.own-act svg {
  width: 18px;
  height: 18px;
}

.own-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.own-title h3 {
  font-size: 24px;
  font-weight: inherit;
  line-height: 1.2;
}

.own-title__tools {
  display: flex;
  gap: 10px;
}

.own-tool {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.2s ease;
}

.own-tool:active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.12);
}

.own-tool svg {
  width: 21px;
  height: 21px;
}

/* Ручка перетаскивания ложится поверх подложки: иначе между верхом листа
   и цветной шапкой оставалась бы тёмная полоса, которой на образце нет */
/* У карточки товара и у листа стейкинга шапка тоже ложится поверх
   подложки: та доходит до самого верха листа, и полоска-ручка лежит
   прямо на ней */
.sheet--buy .sheet__head,
.sheet--stake .sheet__head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 22px;
  padding-top: 8px;
}

.sheet--buy .sheet__grabber,
.sheet--stake .sheet__grabber {
  background: rgba(255, 255, 255, 0.4);
}

.sheet--buy .sheet__scroll,
.sheet--stake .sheet__scroll {
  padding-top: 0;
}

.sheet--own .sheet__head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 22px;
  padding-top: 8px;
}

.sheet--own .sheet__grabber {
  background: rgba(255, 255, 255, 0.4);
}

.sheet--own .sheet__scroll {
  padding-top: 0;
}

.sheet--own .sheet__specs {
  margin-top: 16px;
}

.own-dismiss {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 99em;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.2s ease;
}

.own-dismiss:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.12);
}

/* Стейкинг.

   Раздел пока макет: ничего не ставится и не считается, поэтому в итоге
   нули, а сверху стоит пометка «Скоро». */

.stage[data-section="staking"] .pane[data-pane="staking"] {
  display: block;
}

.stk {
  padding: 0 16px;
}

/* Итог: тёмная плита с подсветкой сверху — от неё раздел начинается */
.stk__hero {
  position: relative;
  overflow: hidden;
  padding: 18px 20px 16px;
  border-radius: 26px;
  background: linear-gradient(180deg, #1a1a20 0%, #121216 100%);
  box-shadow: var(--glass-edge);
}

/* Свет из-за верхнего края: голубое свечение по центру, плита кажется
   подсвеченной изнутри. Размытие сверх градиента сглаживает границу, за
   которой свет сходит на нет */
.stk__glow {
  position: absolute;
  top: -60%;
  left: 50%;
  width: 124%;
  height: 124%;
  translate: -50%;
  background: radial-gradient(46% 46% at 50% 58%, rgba(96, 196, 255, 0.58) 0%, rgba(96, 196, 255, 0) 72%);
  filter: blur(14px);
  pointer-events: none;
}

.stk__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: var(--glass-edge);
  font-size: 12px;
  color: var(--hint);
}

.stk__cap {
  position: relative;
  font-size: 14px;
  color: var(--hint);
}

.stk__sum {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stk__star {
  width: 28px;
  height: 28px;
  display: block;
}

.stk__star--small {
  width: 15px;
  height: 15px;
}

/* Два счётчика — своими плитками внутри плиты: так они читаются парой, а
   не продолжением крупной суммы над ними */
.stk__split {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.stk__stat {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: var(--glass-edge);
  font-size: 13px;
  color: var(--hint);
}

.stk__stat b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
}

/* Вывод и реинвест — равные между собой и обе тише белой кнопки раздела */
.stk__acts {
  position: relative;
  display: grid;
  /* Слова разной длины: «Реинвестировать» вдвое длиннее «Вывода», и поровну
     поделённая строка обрезала бы его многоточием */
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 8px;
  margin-top: 8px;
}

.stk__act {
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: var(--glass-edge);
  color: #f5f5f7;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.2s ease;
}

.stk__act span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stk__act svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.stk__act:active {
  transform: scale(0.97);
  background-color: rgba(255, 255, 255, 0.13);
}

.stk__title {
  margin: 24px 0 12px;
  font-size: 17px;
  font-weight: 600;
}

/* Ставки по редкостям: полоса, которую можно пролистать вбок */
.stk__rates {
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.stk__rates::-webkit-scrollbar {
  display: none;
}

.stk__rate {
  flex: none;
  display: grid;
  gap: 5px;
  /* Скругление в полный рост: плашка-капсула, как кнопки отбора */
  padding: 11px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: var(--glass-edge);
}

.stk__rate b {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.stk__rate span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--hint);
  white-space: nowrap;
}

/* Точка редкости — тем же градиентом, что и лента на карточке */
.stk__dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 3px;
  background-image: linear-gradient(135deg, #364b5c, #172d42);
}

.stk__dot[data-kind="rare"]   { background-image: linear-gradient(135deg, #3fae6a, #1b5c37); }
.stk__dot[data-kind="epic"]   { background-image: linear-gradient(135deg, #a97bf0, #5a3bb0); }
.stk__dot[data-kind="legend"] { background-image: linear-gradient(135deg, #f9c81f, #c8820a); }

/* Главное действие раздела — белая кнопка: на тёмном она читается как
   единственное, что здесь нажимают */
.stk__add {
  width: 100%;
  min-height: 56px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #0d0d10;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 26px -14px rgba(255, 255, 255, 0.5);
  transition: transform 0.12s ease, filter 0.2s ease;
}

.stk__add:active {
  transform: scale(0.98);
  filter: brightness(0.92);
}

.stk__add svg {
  width: 17px;
  height: 19px;
  fill: currentColor;
}

/* Ставить нечего */
.stk__none {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 26px 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: var(--glass-edge);
  text-align: center;
}

.stk__none b {
  font-size: 16px;
  font-weight: 600;
}

.stk__none p {
  max-width: 260px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--hint);
}

.stk__none button {
  margin-top: 6px;
  min-height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Три шага: номер в кружке и строка рядом */
.stk__how {
  display: grid;
  gap: 14px;
  padding: 0;
  list-style: none;
}

.stk__how li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--hint);
}

.stk__how i {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(62, 136, 247, 0.16);
  color: var(--accent);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

/* Выбор подарка: та же витрина, что в профиле, — три в ряд */
.picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding-bottom: 12px;
}

.picks .gift {
  --ribbon-scale: 0.66;
  --gift-radius: 14px;
  padding: 8px;
}

/* Цены на выбранном подарке нет — он встаёт по центру карточки */
.picks .gift__art {
  top: 50%;
  transform: translate(-50%, -50%);
  width: 74%;
}

/* Сколько штук лежит у человека — уголком на карточке */
.picks__many {
  position: absolute;
  z-index: 3;
  left: 7px;
  bottom: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: var(--glass-edge);
  font-size: 12px;
  font-weight: 600;
}

/* Окну выбора нужен потолок: подарков бывает много. Мало — окно само
   станет ниже */
.sheet--picks .sheet__panel {
  max-height: min(560px, 82dvh);
}

.picks .stk__none {
  grid-column: 1 / -1;
}

/* Срок в листе: три отрезка, один выбран */
.stk__label {
  margin: 20px 0 10px;
  font-size: 14px;
  color: var(--hint);
}

.stk__terms {
  display: flex;
  gap: 8px;
}

.stk__term {
  flex: 1 1 0;
  min-height: 46px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: var(--glass-edge);
  color: #f5f5f7;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.stk__term.is-on {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* Задания */

.stage[data-section="gifts"] .pane[data-pane="gifts"] {
  display: block;
}

.tasks {
  padding: 0 16px;
}

/* Блок из образца: тёмная плита с крупным скруглением */
.tasks__block {
  margin-bottom: 15px;
  padding: 14px 18px 7px;
  border-radius: 29px;
  background: #171717;
}

.tasks__head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 0 2px 4px;
}

.tasks__head h4 {
  font-size: 21px;
  font-weight: inherit;
}

.task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

/* Иконка задания в серой плитке */
.task__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #242424;
  display: grid;
  place-items: center;
  color: #6f6f6f;
}

.task__avatar svg {
  width: 18px;
  height: 21px;
}

.task__info {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 7px;
  justify-items: start;
}

.task__name {
  font-size: 15px;
  font-weight: inherit;
  line-height: 1.2;
  /* Длинное название не должно распирать строку */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Награда — купоны, тем же глифом, что в шапке */
.task__reward {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px 2px 7px;
  border-radius: 999px;
  background: #a3e04c;
  color: #0e0e0e;
  font-size: 15px;
  line-height: 1.2;
}

.task__reward svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* Счётчик выполнения: пока задание не закрыто, нажимать нечего */
.task__count {
  flex: none;
  min-width: 52px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #212121;
  color: #f5f5f7;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Задание закрыто — счётчик подхватывает цвет награды */
.task__count[data-done="true"] {
  background: rgba(163, 224, 76, 0.16);
  color: #a3e04c;
  box-shadow: none;
}

.tasks__empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--hint);
}