/* Часть переехавшего 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); }
/* footer-support-link — единственная <button> среди .consent-link (остальные —
   <a>, у которых и так нет браузерного оформления кнопки по умолчанию). */
.footer-support-link { background: none; border: none; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

html, body {
  margin: 0;
  padding: 0;
  /* 2026-08-18: светящийся "космический" фон страницы (искры/лучи/сияния) убран
     по просьбе владельца — обычный плоский --bg, как было изначально. Свечение
     осталось только на самих карточках (.home-big-card), это не трогали. */
  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;
}
/* 2026-08-17: логотип переведён на прозрачный PNG (просьба владельца, по референсу —
   раньше был непрозрачный чёрный фон у самой картинки, из-за object-fit:cover +
   border-radius получалась заметная квадратная плашка вместо "парящей" иконки).
   object-fit:contain вместо cover — раньше не имело значения (картинка была уже
   квадратной с полями), но так безопаснее для прозрачной версии, чтобы не обрезать
   звёздочку/контроллер по краям. border-radius/object-fit:cover больше не нужны. */
#logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  flex-shrink: 0;
}
#header h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  /* 2026-08-17: плоский --gradient (по факту один тон) заменён на настоящий
     многоступенчатый градиент — по референсу буквы должны выглядеть металлически-
     объёмными (светлее сверху-слева, темнее/бронзовее снизу-справа), не плоским
     золотым цветом. */
  background: linear-gradient(155deg, #F5D9A8 0%, #E8B86D 35%, #D4A45C 65%, #B08A52 100%);
  -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; }

/* Десктопная шапка/hero (см. desktop.css) — скрыты по умолчанию (мобильный вид),
   desktop.css включает их обратно только внутри @media (min-width:1024px).
   Без этого правила они показывались бы и на мобильном тоже — там ни одно из
   этих правил не задаёт display:none само по себе. */
.header-nav, .header-actions, .home-hero, .home-trust { display: none; }
.psplus-desktop-cta { display: none; }

/* 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;
}

/* Кнопка "назад" для сайта вне Telegram (kls-store.ru) — замена tg.BackButton,
   там это был единственный способ навигации назад между экранами. В отличие от
   .sticky-header это НЕ завязано на скролл (иначе на самом верху экрана и на
   gameDetail/catalog, где sticky-header скрыт всегда, назад вернуться было бы
   нечем) — отдельный persistent элемент, виден на любом экране, кроме home
   (см. showScreen в app.js, то же условие, что раньше было у tg.BackButton).
   display:none по умолчанию — в Telegram (tg существует) остаётся скрытым
   навсегда, там своя нативная кнопка. */
.web-back-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  z-index: 70;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  font: 600 24px/1 "Inter", sans-serif;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 0 2px;
}
.web-back-btn.is-visible { display: flex; }

/* Вход по email+паролю — только сайт вне Telegram (см. resolve_identity в
   server.py и checkWebAuth в app.js), вкладка "Профиль". В Telegram эти блоки
   всегда display:none, там личность известна бесплатно из initData. */
.web-account-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.web-account-bar span { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-logout-btn {
  flex: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--r-sm, 12px);
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
}
.web-auth-gate { margin-bottom: var(--s4); }
.web-auth-tabs { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.web-auth-tab {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--r-sm, 12px);
  padding: 10px;
  font: 600 14px/1 "Inter", sans-serif;
  cursor: pointer;
}
.web-auth-tab.active { color: var(--accent-text, var(--text)); border-color: var(--accent); background: var(--accent-soft, rgba(232,184,109,0.10)); }
.web-auth-form { display: flex; flex-direction: column; gap: var(--s3); }
.web-auth-submit { height: 48px; border: none; border-radius: var(--r-sm, 12px); font-weight: 700; cursor: pointer; }
.web-forgot-link {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--hint);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.web-auth-error { color: var(--danger); font-size: 14px; margin: 0; min-height: 1em; }
.web-auth-hint { color: var(--text-muted); font-size: 14px; margin: 0; }


.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;
}