/* Часть переехавшего style.css — разнесено на 4 файла 2026-08-02 (шаг 2 v2-промпта). Порядок подключения в index.html: tokens -> base -> components -> screens (тот же порядок, что был в едином файле, каскад не меняется). */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Ссылки без своего класса (на поддержку в экранах "код получен"/"выдадим
   вручную" и т.п.) раньше не имели стиля вообще и рендерились браузерным
   синим по умолчанию — просьба владельца 2026-08-05, "не очень красивый
   цвет, поменяй на золотистый который есть на странице". */
a { color: var(--accent); }
.consent-link { color: var(--accent); }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  /* Inter — просьба владельца 2026-08-02, грузится через Google Fonts (см. index.html
     head). Остальное — оригинальный fallback-список на случай, если шрифт не загрузился. */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100%;
}
/* body — flex-колонка на всю высоту вьюпорта: на КОРОТКИХ экранах (мало карточек,
   контент не заполняет экран) #app-footer раньше повисал сразу под контентом, а
   дальше до нижнего меню оставалась пустая чернота — жалоба владельца 2026-08-04,
   "вставь в это пустое место политику". #screens растягивается (flex:1) и забирает
   всё свободное место, прижимая футер к низу; на ДЛИННЫХ экранах (контента больше
   вьюпорта) это никак не мешает обычному скроллу — flex-item просто раздвигается. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
#screens { flex: 1 0 auto; }

/* Без этого на широком Telegram Desktop (окно в полный экран, не мобильный узкий
   вьюпорт) двухколоночные сетки (карточки игр/номиналов) растягиваются во весь
   экран и превращаются в огромные обложки — реально увидено на скриншоте 2026-07-30. */
/* width:100% ОБЯЗАТЕЛЕН здесь, не только max-width — иначе на flex-колонке body
   (см. ниже, добавлено 2026-08-05 для прилипающего футера) margin:auto на кросс-оси
   отменяет align-items:stretch по спеке флексбокса, и #screens сжимается по
   содержимому вместо того, чтобы тянуться на всю ширину — баг, из-за которого разные
   карточки/кнопки казались уже, чем должны быть (жалоба владельца 2026-08-05, кнопки
   регионов оказались значительно у́же нижнего меню). */
#screens, #app-footer, #header {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
/* ПК/веб-версия Telegram — просьба владельца 2026-08-06, пошире, телефон не трогаем
   (класс tg-desktop ставится в app.js по tg.platform). .grid ниже (screens.css)
   сделан responsive (auto-fill), поэтому на такой ширине карточки не растягиваются в
   гигантские, а просто добавляется больше колонок. */
html.tg-desktop #screens, html.tg-desktop #app-footer, html.tg-desktop #header {
  max-width: 720px;
}
/* position:relative нужен, чтобы старый экран мог лечь position:absolute поверх
   при синхронном fade-out во время перехода (см. .screen.nav-exiting в screens.css
   и showScreen() в app.js — шаг 3 v2-промпта, доводка 2026-08-02). */
#screens { position: relative; }

/* Шапка с логотипом вернулась вместо фото-баннера на главной (просьба владельца
   2026-08-05, "верни логотип в шапку, как было") — та же вёрстка/стили, что были
   до баннера (см. style.css.before_hero_v2_20260802_123613). */
/* Увеличена и отцентрована на всех клиентах (просьба владельца 2026-08-06, "по
   центру, увеличь если нужно") — flex:1-растягивание пробовали, но это просто
   прижимает лого+текст к левому краю (карточки ниже растянуты сами по себе своей
   вёрсткой, у шапки же нет отдельных "левого/правого" элементов, чтобы тянуться
   по-другому). Вместо этого центрируем блок целиком и делаем крупнее, чтобы не
   выглядел маленьким островком на широком экране. */
#header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: calc(18px + env(safe-area-inset-top, 0px) + var(--tg-header-overlay, 64px)) 16px 6px;
}
#logo {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
}
#header h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#header p {
  margin: 2px 0 0;
  color: var(--hint);
  font-size: 16px;
}
#header > div { flex: 0 1 auto; min-width: 0; }

/* Sticky-шапка со сжатым заголовком (спека 4.2, шаг 3 v2-промпта) — скрыта до
   скролла >8px, дальше показывает заголовок текущего экрана (см. app.js). */
.sticky-header {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--tg-header-overlay, 64px));
  left: 0; right: 0;
  z-index: 60;
  height: 52px;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 var(--s4);
  background: rgba(10,10,10,0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  font: 600 16px/1 "Inter", sans-serif;
  color: var(--text);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.sticky-header.is-visible { opacity: 1; transform: translateY(0); }
#sticky-header-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .sticky-header { transition-duration: 0.01ms; }
}
/* ПК/веб — position:fixed, вне потока #screens, поэтому max-width сюда не
   наследуется от правила выше и нужен отдельно (просьба владельца 2026-08-06). */
html.tg-desktop .sticky-header {
  max-width: 720px;
}


.order-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 10px;
  text-align: left;
  animation: tileIn 0.3s ease backwards;
}
.order-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.order-label { font-size: 13.5px; font-weight: 700; }
.order-status { font-size: 12px; color: var(--hint); white-space: nowrap; }
.order-meta { font-size: 12px; color: var(--hint); margin-top: 4px; }
.order-code { margin-top: 10px; font-size: 14px; text-align: center; }
.order-resume {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
}

.screen-title {
  /* Раньше это была мелкая приглушённая плашка (13px) — по ТЗ 2026-08-02 заголовки
     экранов должны быть крупными (22-24px, semibold), подняли размер и цвет. */
  font-size: 23px;
  font-weight: 600;
  color: var(--text);
  margin: 4px 2px 16px;
}