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

@keyframes tileIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.tile-icon-img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.tile-icon-svg { width: 36px; height: 36px; display: inline-flex; }
.tile-icon-svg svg { width: 100%; height: 100%; }

/* Главная — секции со строками-карточками (референс TIM PLAY), заменили сетку плиток */
.home-sections { display: flex; flex-direction: column; }
.home-section { margin-bottom: var(--s7); }
.home-section:last-child { margin-bottom: 0; }
/* Overline (спека шаг 4 v2-промпта): 11/14/700/+0.10em/uppercase */
.home-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 17px/22px "Inter", sans-serif;
  color: var(--text);
  margin: 0 2px 10px;
}
.home-section-bar { width: 3px; height: 14px; border-radius: 2px; background: var(--gradient); flex: none; }
.home-row-list { display: flex; flex-direction: column; gap: 8px; }
/* Строка категории — приведена к спеке шаг 4 v2-промпта (2026-08-02): мин. высота
   64px, радиус --r-md, квадратная (не круглая) подложка иконки 36px с --r-sm.
   Цветной тинт подложки — сохранили, это уже одобренная деталь (референс TIM PLAY),
   спека просит только форму/размер, не просит убирать цвет. */
.home-row-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-height: 64px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  animation: tileIn 0.3s ease backwards;
}
.home-row-item:active { background: var(--bg-card-hover); transform: scale(0.98); border-color: var(--border-accent); }
.home-row-icon-wrap {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Официальные PNG-иконки сервисов (Steam/PSN/Nintendo/Battle.net/Xbox) — без
   альфа-канала (белый прямоугольный фон), квадратная подложка показывала белые
   уголки по краям. Круглая маска на самой картинке полностью их обрезает —
   баг с "белой зоной" у Steam, поймано по скриншоту владельца 2026-08-02. */
.home-row-icon-wrap .tile-icon-img { width: 30px; height: 30px; border-radius: 50%; }
.home-row-icon-wrap .tile-icon-plain { width: 24px; height: 24px; }
.home-row-icon-wrap .tile-icon-svg { width: 22px; height: 22px; }
/* Цветные подложки под иконкой строки (референс TIM PLAY 2026-08-02) */
/* Раньше тут была радуга (розовый/синий/зелёный) — по ТЗ 2026-08-02 "без кислотных
   цветов", все подложки теперь оттенки золота/нейтрального серого разной яркости. */
.home-row-icon-pink { background: radial-gradient(circle at 35% 30%, rgba(232,184,109,0.4), rgba(232,184,109,0.14)); }
.home-row-icon-blue { background: radial-gradient(circle at 35% 30%, rgba(156,156,156,0.35), rgba(156,156,156,0.12)); }
.home-row-icon-mid { background: radial-gradient(circle at 35% 30%, rgba(176,138,82,0.45), rgba(176,138,82,0.16)); }
.home-row-icon-green { background: radial-gradient(circle at 35% 30%, rgba(212,164,92,0.4), rgba(212,164,92,0.14)); }
.home-row-body { flex: 1; min-width: 0; }
.home-row-title { font: 600 15px/20px "Inter", sans-serif; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Единственная промо-метка в приложении (KLS37, спека шаг 4) — мягкая, не сплошная
   заливка, в отличие от .badge-orange (там солидная золотая заливка для скидок). */
.row-promo-badge {
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
}
.home-row-subtitle {
  font: 500 13px/17px "Inter", sans-serif;
  color: var(--text-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-row-item .row-chevron { flex: none; width: 20px; height: 20px; color: var(--text-3); }

/* Пилюля региона в шапке PS Plus/Игр — заменяет вкладку "Регион" в нижней навигации
   (просьба владельца 2026-08-02: регион влияет только на эти 2 раздела, отдельной
   вкладки не заслуживает). Открывает тот же экран #screen-region. */
.region-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-full);
  padding: 6px 12px 6px 8px;
  font-size: 12.5px;
  font-weight: 700;
  margin: -8px 0 14px;
  cursor: pointer;
}
.region-pill img.flag-icon { width: 16px; height: 12px; }

/* "До краёв" (margin: 0 -16px) было костылём, компенсировавшим настоящий баг —
   #screens не растягивался на всю ширину (см. base.css, комментарий у #screens).
   Раз баг починен, обычный отступ .screen уже даёт ту же ширину, что и у строк
   категорий на главной — отдельный костыль тут больше не нужен и только уводил
   ширину в другую сторону (жалоба владельца 2026-08-05, "ширина всё ещё не та",
   сравнение с главной страницей). */
.region-list { display: flex; flex-direction: column; gap: 8px; }

/* Мини-развилка "Игры и подписки" (спека 5.2, шаг 4 v2-промпта) — крупные карточки,
   не список строк. */
.ps-hub-card {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  min-height: 110px;
  padding: var(--s5) var(--s5) var(--s5) var(--s5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ps-hub-card:active { background-color: var(--bg-card-hover); border-color: var(--border-accent); transform: scale(0.99); }
/* Фоновая картинка карточки — отдельный <img>, а не CSS background-image, так
   надёжнее (был баг 2026-08-04: background-image через inline style почему-то не
   отрисовывался у владельца, хотя картинка грузилась 200 и JS/CSS были верные —
   переключение на обычный <img> с absolute-позиционированием решило). */
.ps-hub-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
}
/* Фон чистым CSS (градиенты + фигуры), без картинки-файла вообще — просьба
   владельца 2026-08-04, чтобы исключить саму возможность проблемы с загрузкой
   картинки (см. комментарий выше) и проверить, отрисуется ли хоть что-нибудь. */
.ps-hub-card--cssbg {
  background:
    radial-gradient(ellipse 240px 160px at 96% 50%, rgba(232,184,109,0.4), transparent 72%),
    linear-gradient(115deg, transparent 52%, rgba(176,138,82,0.22) 72%, rgba(232,184,109,0.4) 100%),
    var(--bg-card);
}
.ps-hub-card-shape { position: absolute; z-index: 0; pointer-events: none; }
.ps-hub-card-shape--sq {
  width: 32px; height: 32px; right: 24px; top: 16px;
  border: 2px solid rgba(232,184,109,0.6);
  border-radius: 6px;
  transform: rotate(18deg);
}
.ps-hub-card-shape--circ {
  width: 28px; height: 28px; right: 66px; bottom: 14px;
  border: 2px solid rgba(232,184,109,0.5);
  border-radius: 50%;
}
.ps-hub-card-shape--tri {
  right: 88px; top: 26px;
  width: 0; height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 24px solid rgba(232,184,109,0.45);
}
.ps-hub-card-title, .ps-hub-card-subtitle, .ps-hub-card-chevron { position: relative; z-index: 1; }
.ps-hub-card-title { font: 600 17px/22px "Inter", sans-serif; color: var(--text); padding-right: 28px; }
.ps-hub-card-subtitle { font: 400 13px/1.4 "Inter", sans-serif; color: var(--text-3); margin-top: 4px; padding-right: 28px; }
.ps-hub-card-chevron { position: absolute; top: var(--s5); right: var(--s5); }

/* Главная — 3 крупные кнопки-раздела (PlayStation/Steam/Другие сервисы) вместо
   плоского списка строк (просьба владельца 2026-08-05). Переиспользует карточку
   .ps-hub-card один в один (тот же размер/визуальный язык, что и "Игры и
   подписки" / пункты внутри разделов) — свой размер тут не нужен, только фон-
   картинка через .ps-hub-card-bg (см. renderCategoryGrid/HOME_SECTIONS.bg). */
.home-big-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.home-big-card-title { font: 700 19px/24px "Inter", sans-serif; color: var(--text); padding-right: 76px; }
.home-big-card .ps-hub-card-subtitle { padding-right: 76px; }
.region-item {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.15s ease;
}
.region-item:active { background: var(--bg-card-hover); transform: scale(0.97); border-color: rgba(255,255,255,0.18); }
.region-item .region-arrow { transition: transform 0.15s ease; }
.region-item:active .region-arrow { transform: translateX(3px); }
.region-arrow { color: var(--hint); }
.region-item-label { display: inline-flex; align-items: center; gap: 8px; }
/* Крупные строки региона (спека 5.3, шаг 4 v2-промпта) — экран глобального
   региона PS Plus/Игр, с подписью валюты под названием страны. */
.region-item--lg { min-height: 68px; }
.region-item--active { border-color: var(--border-accent); }
.region-item--active .region-arrow { color: var(--accent); font-weight: 800; }
.region-item-text { display: flex; flex-direction: column; gap: 2px; }
.region-item-country { font: 600 15px/20px "Inter", sans-serif; }
.region-item-currency { font: 400 13px/1.3 "Inter", sans-serif; color: var(--text-3); font-weight: 400; }
.flag-icon { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.1); }
.preset-btn .flag-icon { margin-right: 5px; vertical-align: -1px; }

/* #app-footer — общий для ВСЕХ экранов элемент (лежит один раз, сразу после
   #screens, не внутри каждого .screen) и у него УЖЕ свой отступ под нижнюю навигацию
   (см. #app-footer ниже в этом файле). Раньше .screen ЕЩЁ добавлял полный нав-отступ
   поверх этого — на любом экране, долистанном до футера, зазор между последней
   карточкой и "Пользовательское соглашение" удваивался (жалоба владельца 2026-08-04,
   видно и на главной, и на "Игры и подписки", и т.д. — баг общий, не только у
   главной). Тут нужен только обычный отступ между секциями. */
/* Отступ под плавающую шапку Telegram (--tg-header-overlay) снова на #header
   (просьба владельца 2026-08-05, "верни логотип в шапку, как было") — .screen
   опять просто safe-area, без лишнего 64px запаса, который был нужен, только
   пока #header отсутствовал. */
.screen {
  display: none;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 0;
}
/* Пока показан sticky-cta-bar (PS Plus, карточка игры) — экрану нужен ещё отступ под него. */
.screen.has-sticky-cta { padding-bottom: calc(56px + 64px + var(--s4) + env(safe-area-inset-bottom, 0px)); }
/* Skeleton-заглушки на время первой загрузки (ТЗ 2026-08-02, п.5) */
.skeleton-row {
  height: 68px;
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border: 1px solid var(--border);
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Единый паттерн переходов (спека шаг 3 v2-промпта, 2026-08-02): вперёд — снизу,
   назад — зеркально сверху, между вкладками — только прозрачность, без сдвига.
   Направление задаёт JS (см. showScreen() в app.js) через класс на .screen.active.
   Старый экран теперь тоже анимируется — синхронно угасает (.nav-exiting), пока
   держится в DOM с position:absolute поверх контейнера (см. #screens в base.css),
   чтобы не вставать в поток и не сталкивать новый экран вниз. showScreen() снимает
   с него класс "active" уже ПОСЛЕ завершения угасания. */
.screen.active { display: block; }
.screen.active.nav-forward { animation: screenInForward var(--t-base) var(--ease-out); }
.screen.active.nav-back { animation: screenInBack var(--t-base) var(--ease-out); }
.screen.active.nav-tab { animation: screenInTab var(--t-base) var(--ease-out); }
.screen.nav-exiting {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  pointer-events: none;
  animation: screenOutFade var(--t-fast) var(--ease) forwards;
}
@keyframes screenInForward {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes screenInBack {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes screenInTab {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes screenOutFade {
  from { opacity: 1; }
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .screen.active.nav-forward, .screen.active.nav-back, .screen.active.nav-tab {
    animation: screenInTab 1ms linear;
  }
  .screen.nav-exiting { animation: screenOutFade 1ms linear forwards; }
}

/* auto-fill вместо repeat(2, 1fr) — просьба владельца 2026-08-06, "экран пошире на
   ПК/веб". На телефонной ширине (480px, см. base.css) minmax(150px,1fr) всё равно
   укладывается ровно в 2 колонки — поведение не изменилось. На широком ПК-контейнере
   (720px, класс tg-desktop) колонок само становится больше — карточки не растягиваются
   в гигантские, а просто плотнее заполняют место. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--hint);
  font-size: 13.5px;
  padding: 24px 12px;
}
/* Богатое пустое состояние (спека 4.5/5.6, шаг 6 v2-промпта) — иконка+заголовок+
   текст+кнопка, вместо одной строки. Используется в Избранном. */
.empty-state-rich {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--s8) var(--s4);
  gap: var(--s2);
}
.empty-state-rich-icon { width: 40px; height: 40px; color: var(--text-3); margin-bottom: var(--s2); }
.empty-state-rich-title { font: 600 17px/22px "Inter", sans-serif; color: var(--text); }
.empty-state-rich-body { font: 400 15px/21px "Inter", sans-serif; color: var(--text-2); max-width: 260px; }
.empty-state-rich .kls-btn--primary { margin-top: var(--s4); width: auto; padding: 0 var(--s6); }
.favorites-subtitle { font: 500 13px/17px "Inter", sans-serif; color: var(--text-3); margin: -12px 2px 12px; }

.card {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.15s ease;
  animation: tileIn 0.3s ease backwards;
}
.card:active { background: var(--bg-card-hover); transform: scale(0.95); border-color: rgba(255,255,255,0.18); }

/* Кнопка "+ в корзину" на карточке номинала — не мешает обычной покупке "в один
   клик" (тап по остальной части карточки = купить сразу, как раньше). Позиция —
   правый нижний угол (спека 5.7, шаг 5 v2-промпта, было в правом верхнем). Если
   товар уже в корзине — вместо "+" показывает текущее количество (--counter). */
.card-add-cart-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--accent-gradient);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  cursor: pointer;
  font: 700 13px/1 "Inter", sans-serif;
  font-variant-numeric: tabular-nums;
}
.card-add-cart-btn:active { transform: scale(0.9); }
.card-add-cart-btn svg { width: 100%; height: 100%; }
.card-add-cart-btn--counter { box-shadow: var(--accent-glow); }

/* Значок корзины в нижней навигации + бейдж-счётчик */
.cart-tab-icon-wrap { position: relative; display: inline-flex; }
/* Бейдж корзины — спека шаг 3 v2-промпта: круг мин. 16×16, обводка в цвет фона
   нижней навигации отделяет его от иконки, появление scale(0.6 → 1). */
.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 2px solid #0A0A0A;
  animation: kls-badge-pop var(--t-fast) var(--ease-out);
}
@keyframes kls-badge-pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Тост "Добавлено в корзину" и т.п. теперь на компоненте .kls-toast (components.css,
   шаг 2 v2-промпта) — свой .cart-toast больше не нужен, см. showCartToast() в app.js. */

/* Строка количества в корзине — сам степпер теперь общий компонент .kls-stepper
   (components.css, шаг 2), тут только отступ-обёртка. */
.cart-qty-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cart-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
}
.cart-remove-btn svg { width: 11px; height: 11px; }
.cart-remove-btn:active { background: rgba(255,255,255,0.14); color: var(--text); }
.card-disabled {
  cursor: default;
  opacity: 0.45;
  filter: grayscale(0.6);
}
.card-disabled:active { transform: none; }
.price-unavailable { color: var(--hint); font-weight: 600; }
.card .amount { font-size: 16.5px; font-weight: 500; }
.card .price { margin-top: 6px; font-size: 18px; color: var(--accent); font-weight: 600; }

.form-card, .confirm-card, .wait-card, .done-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 4px;
}

.field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hint);
  margin: 16px 0 6px;
}
.field-label:first-child { margin-top: 0; }
.field-label .opt { font-weight: 400; color: var(--hint); opacity: 0.7; }
.field-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,184,109,0.18); }
/* Пустое обязательное поле при попытке оформить заказ (просьба владельца
   2026-08-05, "email и пароль обязательный для ввода") — красная рамка,
   чтобы было видно, что именно не заполнено. */
.field-input--invalid { border-color: #e5484d; }
.field-input--invalid:focus { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,0.18); }
.field-hint { color: var(--hint); font-size: 12px; margin: 6px 2px 0; line-height: 1.4; }
.field-hint-link {
  background: none; border: none; padding: 0; margin: 6px 2px 0;
  color: var(--accent); font-size: 12.5px; font-weight: 700; cursor: pointer;
}
/* "Добавьте ещё игр на X грн для скидки в Y%" — прогрессивная шкала на всю корзину
   (просьба владельца 2026-08-07, поднято повыше — сразу под заголовком, до списка
   позиций, чтобы было заметно перед оформлением). */
.cart-ua-hint { color: var(--accent); font-weight: 600; margin-bottom: 14px; }

/* PS Plus — выбор "на мой аккаунт / нет аккаунта" (просьба владельца 2026-08-02) */
.psplus-account-block { margin: 14px 0; }
/* В корзине (2026-08-03) — визуально "подвешен" под карточкой позиции, а не отдельным
   блоком с собственным отступом сверху/снизу. */
.psplus-account-block--incart {
  margin: -10px 0 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.psplus-login-wrap { margin-top: 10px; }
/* Тумблер "У меня есть PS Plus/EA Play" (просьба владельца 2026-08-06) — та же
   "подвешенная" под карточкой позиции подача, что и у блока данных аккаунта выше. */
.sub-discount-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -10px 0 12px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}
.sub-discount-toggle-row input { accent-color: var(--accent); width: 17px; height: 17px; flex: none; }
.psplus-account-toggle { display: flex; gap: 8px; }
.psplus-account-opt {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.psplus-account-opt.active {
  background: var(--accent-gradient);
  border-color: transparent;
  color: var(--accent-text);
  box-shadow: var(--glow);
}
#confirm-account-login-wrap { margin-top: 10px; }
.psplus-field-gap { margin-top: 8px; }
.psplus-chat-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.psplus-chat-toggle input { accent-color: var(--accent); width: 16px; height: 16px; }

.presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.presets-4 {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 4px;
}
.preset-btn {
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 4px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease;
}
.preset-btn:active { transform: scale(0.94); }
.preset-btn.active {
  background: var(--accent-gradient);
  color: var(--accent-text);
  border-color: transparent;
  box-shadow: var(--glow);
}

.quote-line {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 12px;
  font-size: 14px;
  justify-content: space-between;
  animation: fadeInUp 0.25s ease;
}
.quote-line b { color: var(--accent); }
.quote-price-wrap { display: flex; align-items: center; gap: 6px; }
.quote-promo-badge { font-size: 9.5px; padding: 2px 6px; }

.wait-card, .done-card { text-align: center; padding: 32px 20px; }
.confirm-icon svg { width: 46px; height: 46px; color: var(--accent); }
.confirm-icon-img {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
}
.tile-icon-chip {
  width: 36px; height: 36px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 10px;
  padding: 5px;
}
.confirm-icon-psn {
  width: 68px; height: 52px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 12px;
  padding: 6px 8px;
}
.tile-icon-plain { width: 36px; height: 36px; object-fit: contain; }
.confirm-icon-plain { width: 52px; height: 52px; object-fit: contain; }

/* Экран подтверждения — оформлен как "Корзина" (карточка товара + строка "Итого"),
   по референсу владельца 2026-08-02. */
.cart-item-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 34px 16px 18px;
}
#screen-confirm .cart-item-card { padding: 16px 18px; }
#screen-confirm .cart-remove-btn { display: none; }
/* Заголовок корзины + "Очистить" (спека 5.8, шаг 5 v2-промпта). */
.cart-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 2px 16px; }
.cart-title-row-h2 { margin: 0; }
.cart-clear-btn { color: var(--danger); padding: 0; height: auto; font-size: 13px; }
.cart-item-icon { flex: none; }
/* Обложка игры в корзине (просьба владельца 2026-08-03, "у конкурента есть, у меня
   нет") — прямоугольный бокс-арт вместо круглой generic-иконки, как у остальных
   позиций корзины. */
.cart-item-cover { width: 48px; height: 60px; object-fit: cover; border-radius: 8px; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-label { font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.cart-item-price { flex: none; font-size: 16px; font-weight: 800; color: var(--accent); white-space: nowrap; text-align: right; }
/* Зачёркнутая обычная цена при отмеченном "У меня есть PS Plus/EA Play" (просьба
   владельца 2026-08-06) — та же подача, что у game-detail-original-price. */
.cart-item-price-was {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--hint);
  text-decoration: line-through;
}
.cart-total-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
}
.cart-total-price { font-size: 19px; font-weight: 800; color: var(--accent); }
#screen-confirm { text-align: center; }
#screen-confirm .cart-item-card, #screen-confirm .cart-total-card { text-align: left; }

.sbp-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 7px 14px 7px 10px;
  background: #ffffff;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #171018;
}
.sbp-mark-img {
  width: 16px;
  height: auto;
  display: block;
}
.confirm-hint { color: var(--hint); font-size: 12.5px; margin-top: 16px; line-height: 1.4; }

.spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: var(--accent);
  margin: 0 auto 16px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#wait-text { color: var(--hint); font-size: 14px; }
/* Прогресс ожидания (спека 5.12, шаг 5 v2-промпта) — без этого молчаливое
   бесконечное вращение спиннера было главным источником паники/обращений. */
.wait-progress { color: var(--text-3); font-size: 13px; margin-top: 8px; animation: fadeInUp 0.3s ease; }
.wait-support-card {
  margin-top: 20px;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  text-align: center;
  animation: fadeInUp 0.3s ease;
}
.wait-support-btn { height: auto; padding: 4px; }

.done-icon {
  width: 52px; height: 52px;
  display: inline-flex;
  color: var(--accent);
  animation: doneIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.done-icon svg { width: 100%; height: 100%; }
@keyframes doneIconPop {
  0% { opacity: 0; transform: scale(0.3) rotate(-10deg); }
  60% { opacity: 1; transform: scale(1.15) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}
.done-title { font-size: 18px; font-weight: 700; margin-top: 8px; }
.code-box { animation: fadeInUp 0.4s ease 0.15s backwards; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* "Отрывной купон" (спека 5.13, шаг 5 v2-промпта) — пунктирная граница, моно-шрифт. */
.code-box {
  margin-top: 16px;
  padding: var(--s4);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  font-family: ui-monospace, "SF Mono", Consolas, Menlo, monospace;
  font-size: 17px;
  letter-spacing: 0.06em;
  word-break: break-all;
  color: var(--accent);
}
.done-hint { color: var(--hint); font-size: 12.5px; margin-top: 16px; line-height: 1.5; text-align: left; }
.done-hint > p:first-child { text-align: center; }
/* Кнопка "Скопировать" — рядом/под кодом, меняется на "Скопировано" на 1.6с. */
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: auto;
  padding: 8px 4px;
  font-size: 13px;
}
.copy-btn svg { width: 15px; height: 15px; }
.copy-btn.is-copied { color: var(--success); }
/* Статус-чип позиции мультитоварного заказа на экране "Готово" (спека 5.13). */
.done-item-status {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}
.done-item-status--ok { background: var(--success-soft); color: var(--success); }
.done-item-status--warn { background: var(--warning-soft); color: var(--warning); }

.instr-block {
  margin-top: 18px;
  background: var(--surface-2);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
}
.instr-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.instr-steps { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text); line-height: 1.6; }
.instr-steps li { margin-bottom: 4px; }

/* Нейтральный тёмный стиль (референс TIM PLAY 2026-08-02) вместо жёлтого
   предупреждения — эти блоки чаще объясняют процесс, чем реально пугают. */
.instr-warnings {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.08);
}
.instr-warnings .instr-title { color: var(--text); font-size: 15px; }
.instr-warnings .instr-steps { list-style: none; padding-left: 0; color: var(--hint); }
.instr-warnings .instr-steps li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 10px;
}
.instr-warnings .instr-steps li:last-child { margin-bottom: 0; }
.instr-warnings .instr-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.consent-line {
  color: var(--hint);
  font-size: 11.5px;
  line-height: 1.5;
  margin-top: 14px;
}
.consent-line a { color: var(--accent); text-decoration: none; }
/* Реальный чекбокс согласия (спека 5.9, шаг 5 v2-промпта) — раньше это был просто
   текст, MainButton был активен сразу без явного подтверждения. */
.consent-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.consent-checkbox {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
}

#app-footer {
  text-align: center;
  /* #app-footer — соседний с #screens блок, а не часть скроллящегося .screen (у
     того своя нижняя защита от фиксированного nav — .screen{padding-bottom}), так
     что нижний паддинг тут нужен свой, той же высоты, что и .bottom-tabs — иначе
     ссылки на политику утыкаются в неё и не видны даже при полном скролле вниз
     (жалоба владельца 2026-08-04). */
  padding: 0 16px calc(56px + var(--s4) + env(safe-area-inset-bottom, 0px));
  font-size: 11px;
  color: var(--hint);
}
#app-footer a { color: var(--hint); text-decoration: underline; }
#app-footer .dot { margin: 0 6px; }
.support-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent) !important;
  text-decoration: none !important;
}

/* ---------- Игры (каталог обложек PSprices) ---------- */
.games-wrap { display: flex; flex-direction: column; gap: 22px; }
.games-price-section { display: flex; flex-direction: column; gap: 10px; }
.games-price-section .home-section-title, .games-all-title { margin: 0; }
/* Кликабельный заголовок жанровой подборки (2026-08-03) — ведёт на полный список. */
.genre-section-title--clickable { cursor: pointer; width: 100%; }
.genre-section-title--clickable .region-arrow { margin-left: auto; color: var(--text-3); }
.genre-section-title--clickable:active { opacity: 0.7; }
.grid-games { gap: 12px; }

.game-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s ease, border-color 0.15s ease, opacity var(--t-base) var(--ease);
  animation: tileIn 0.3s ease backwards;
}
.game-card:active { transform: scale(0.96); border-color: rgba(255,255,255,0.18); }
/* Уход карточки из Избранного при снятии сердечка (спека 5.6, шаг 6 v2-промпта). */
.game-card--removing { opacity: 0; transform: scale(0.96); pointer-events: none; }
.game-card-cover-wrap { position: relative; width: 100%; aspect-ratio: 3 / 4; background: var(--surface-2); }
.game-card-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Откат на широкий баннер Steam, когда портретной обложки нет физически (просьба
   владельца 2026-08-07, скрин Modern Warfare 4 — "MW" обрезано контейнером
   3:4/object-fit:cover) — показываем целиком, с чёрными полями, вместо жёсткого
   кропа середины широкого баннера. */
.game-card-cover.is-cover-fallback, .game-hero-img.is-cover-fallback, .home-teaser-cover.is-cover-fallback { object-fit: contain; background: #000; }
/* Бейдж платформы (спека 5.4, шаг 6 v2-промпта) — раньше платформа была только
   текстовым чипом на детальной странице, на карточке в каталоге её не было видно. */
.game-card-platform {
  position: absolute;
  left: 6px; bottom: 6px;
  padding: 3px 6px;
  border-radius: var(--r-xs);
  background: rgba(10,10,10,0.78);
  color: var(--text);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Избранное — сердечко на обложке (реальная фича 2026-08-02) */
.game-fav-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(10,10,20,0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  cursor: pointer;
  z-index: 2;
}
.game-fav-btn svg { width: 14px; height: 14px; }
.game-fav-btn.active { color: var(--pink); }
.game-fav-btn.active svg { fill: currentColor; }
.game-fav-btn-detail { top: 12px; right: 12px; width: 34px; height: 34px; }
.game-fav-btn-detail svg { width: 18px; height: 18px; }
.game-card-name {
  padding: 8px 10px 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.game-card-price-row { display: flex; align-items: center; gap: 6px; padding: 4px 10px 0; flex-wrap: wrap; }
.game-card-price { font-size: 13.5px; font-weight: 800; color: var(--accent); }
.game-card-original-price { font-size: 11px; font-weight: 600; color: var(--text-3); text-decoration: line-through; }
.game-card-discount {
  /* Бейджи скидок — золотые (ТЗ 2026-08-02, было оранжевое). */
  background: var(--orange);
  color: var(--accent-text);
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.game-card-orig {
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--hint);
  text-decoration: line-through;
}
.game-card-lang {
  padding: 3px 10px 10px;
  font-size: 10.5px;
  color: var(--hint);
}

/* ---------- Детальная карточка игры ---------- */
.game-detail-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 4px;
}
/* Обложка — отдельно, вертикальная 3:4 (владелец 2026-08-02: в общей галерее 16:9
   бокс-арт обрезался некрасиво). Ниже, отдельно, лента скриншотов+трейлера —
   тоже скролл-снап со счётчиком "N / M" (спека 5.5, шаг 6 v2-промпта), просто
   больше не смешана с обложкой. */
/* Просьба владельца 2026-08-06: "сделай обложки меньше, но не обрезай, а просто
   уменьши в 1.5 раза" — раньше пробовал через max-height (кадрировало по бокам
   object-fit:cover, не понравилось). Теперь ширина контейнера уменьшена до 100%/1.5,
   aspect-ratio тот же 3/4 — картинка целиком масштабируется вниз в обоих измерениях
   без обрезки, просто мельче и по центру. */
.game-hero { position: relative; width: 66.67%; margin: 0 auto; aspect-ratio: 3 / 4; background: var(--surface-2); }
.game-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Steam-подарки — свои пропорции обложки под каждую игру (просьба владельца
   2026-08-07, "размер подстраивался под размер картинки"), в отличие от PS-игр
   (те всегда стабильно портретные боксарты у Sony, фиксированный 3:4 там ок).
   height:auto без object-fit — контейнер сам принимает форму картинки, обрезки
   вообще нет ни при портретной обложке, ни при откате на широкий баннер. */
#screen-steam-gift-detail .game-hero { width: 100%; aspect-ratio: unset; height: auto; }
#screen-steam-gift-detail .game-hero-img { height: auto; object-fit: unset; }
.game-hero-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(23,31,44,0) 55%, var(--surface) 100%);
  pointer-events: none;
}
.game-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 14px;
}
.game-gallery-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.game-gallery-track::-webkit-scrollbar { display: none; }
.game-gallery-slide {
  position: relative;
  flex: none;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  background: var(--surface-2);
}
.game-gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-gallery-slide video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.game-gallery-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(10,10,10,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.game-gallery-play svg { width: 24px; height: 24px; margin-left: 3px; }
.game-gallery-counter {
  position: absolute;
  right: 8px; bottom: 8px;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: rgba(10,10,10,0.7);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
/* Стрелки листания скриншотов (просьба владельца 2026-08-06) — та же визуальная
   логика, что у .addons-arrow, но своя позиция: там строка карточек с полями по
   бокам, тут галерея во всю ширину без полей, стрелки поверх картинки по центру
   высоты, не top:40px. */
.game-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(10,10,10,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 19px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.game-gallery-arrow--prev { left: 8px; }
.game-gallery-arrow--next { right: 8px; }
.game-detail-body { padding: 4px 20px 20px; }
.game-detail-title { font-size: 19px; font-weight: 800; line-height: 1.25; margin-bottom: 8px; }
.game-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.game-badge {
  background: var(--surface-2);
  color: var(--hint);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}
.game-badge .flag-icon { margin-right: 5px; }
.game-detail-price-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.game-detail-price { font-size: 26px; font-weight: 800; color: var(--accent); }
.game-detail-price-row .game-card-discount { font-size: 13px; padding: 4px 10px; }
.game-detail-original-price { font-size: 14px; font-weight: 600; color: var(--hint); text-decoration: line-through; margin-bottom: 2px; }
.game-detail-discount-source { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
/* Доп. скидка для подписчиков PS Plus/EA Play (просьба владельца 2026-08-06) —
   лёгкий апсейл заодно, у нас же и сама подписка продаётся. */
.game-detail-sub-discount {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(212,165,85,0.12);
  border: 1px solid rgba(212,165,85,0.35);
  border-radius: 8px;
  padding: 4px 10px;
  margin-bottom: 10px;
}
/* Таймер до выхода — только для игр-предзаказов, release_date в будущем (просьба
   владельца 2026-08-06). Стиль как у .game-detail-sub-discount, но отдельным блоком
   (across-fullwidth, не inline) — тут текста больше и он меняется каждую секунду. */
.game-detail-release-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  /* Нейтральный серый, не золотой — просьба владельца 2026-08-07, отличать от
     денежных плашек (скидка/подписка) рядом, это просто информация о дате. */
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.game-detail-rating { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.game-detail-rating-count { font-size: 12px; font-weight: 600; color: var(--hint); }
.rating-star-icon { display: inline-flex; width: 14px; height: 14px; color: var(--accent); }
.rating-star-icon svg { width: 100%; height: 100%; }

/* Издания (Standard/Deluxe/Ultimate) — заглушка-переключатель без реальных отдельных
   цен (просьба владельца 2026-08-02): каждое издание в каталоге уже своя карточка
   со своей ценой, настоящих цен "внутри одной игры" у нас нет. */
.game-detail-editions { margin-bottom: 14px; }

/* "Что входит" — список содержимого выбранного издания, как на самой странице
   товара PS Store (просьба владельца 2026-08-05). Данные — edition.features из
   того же GraphQL-ответа Sony, что уже используется для цены/переключателя. */
.game-detail-features { margin-bottom: 14px; }
.game-detail-features-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.game-detail-features-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.4;
}
.game-detail-features-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
/* Вертикальный список изданий с ценой и % скидки у каждого (просьба владельца
   2026-08-05) — раньше были горизонтальные чипы с одним только названием,
   без цены, что не показывало разницу в стоимости между изданиями. */
.edition-toggle { display: flex; flex-direction: column; gap: 8px; }
.edition-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.edition-opt.active { background: var(--accent-gradient); border-color: transparent; color: var(--accent-text); }
.edition-opt-label {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}
.edition-opt-prices { display: flex; align-items: baseline; gap: 7px; flex-shrink: 0; white-space: nowrap; }
.edition-opt-price { font-size: 14px; font-weight: 800; }
.edition-opt-original { font-size: 11.5px; color: var(--hint); text-decoration: line-through; }
.edition-opt:not(.active) .edition-opt-original { color: var(--hint); }
.edition-opt.active .edition-opt-original { color: rgba(20,17,10,0.6); }
.edition-opt-discount {
  font-size: 10.5px;
  font-weight: 800;
  background: rgba(255,255,255,0.14);
  border-radius: 6px;
  padding: 2px 5px;
  flex-shrink: 0;
}
.edition-opt.active .edition-opt-discount { background: rgba(20,17,10,0.16); }

.game-detail-description {
  font-size: 13px;
  line-height: 1.55;
  color: var(--hint);
  white-space: pre-line;
  margin-bottom: 16px;
}

/* Дополнения (DLC) — горизонтальная лента карточек со стрелками пролистывания
   (просьба владельца 2026-08-05, референс-скрин). */
.addons-section { margin-bottom: 16px; }
.addons-row-wrap { position: relative; margin-top: 8px; }
.addons-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.addons-row::-webkit-scrollbar { display: none; }
.addon-card {
  position: relative;
  flex: 0 0 132px;
  width: 132px;
  scroll-snap-align: start;
  cursor: pointer;
}
.addon-card-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}
.addon-card-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.addon-card-add {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #14110a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.addon-card-name {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.addon-card-price-row { margin-top: 2px; display: flex; align-items: baseline; gap: 6px; }
.addon-card-price { font-size: 13px; font-weight: 800; }
.addon-card-original { font-size: 10.5px; color: var(--hint); text-decoration: line-through; }
.addons-arrow {
  position: absolute;
  top: 40px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(20,18,14,0.85);
  color: var(--text);
  font-size: 17px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.addons-arrow--prev { left: -6px; }
.addons-arrow--next { right: -6px; }
/* Те же стрелки переиспользованы для подборок игр (Лучшие игры/Новинки/жанры,
   просьба владельца 2026-08-05) — там карточки выше (118px, соотношение 3:4),
   центрируем стрелку по обложке, а не по всей карточке с текстом под ней. */
.games-price-section .addons-arrow { top: 78px; }
/* Просьба владельца 2026-08-06 — стрелки везде, где раньше был только свайп; тут те
   же карточки 118px/3:4, что и в подборках выше, поэтому та же позиция стрелки. */
.home-teaser .addons-arrow { top: 78px; }

/* ---------- Живой поиск Sony (Chihiro, бета) ---------- */
.beta-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gradient);
  color: var(--accent-text);
  vertical-align: middle;
  margin-left: 6px;
}
/* Поле-заглушка "Поиск" над баннером акции (просьба владельца 2026-08-05: убрать
   плашку "бета", перенести выше баннера, сделать обычным полем с лупой). */
.games-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--hint);
  cursor: pointer;
  margin-bottom: 14px;
}
.games-search-field:active { transform: scale(0.98); }
.games-search-field .tab-icon { width: 18px; height: 18px; flex-shrink: 0; }
#screen-chihiro-search .field-hint { margin-bottom: 12px; }
#chihiro-search-input { margin-bottom: 16px; }

/* ---------- PS Plus: чипы тарифов + сегментед срока + "Что входит" ----------
   Доп. промпт 2026-08-03 — заменяет прежние крупные кликабельные карточки тарифов
   (тап по карточке = сразу оплата). Теперь выбор тарифа отделён от оплаты: чипы
   выбирают тариф, ниже раскрывается состав, MainButton внизу — платит. */
.grid-psplus { display: flex; flex-direction: column; gap: 14px; }
.psplus-sticky {
  position: sticky;
  top: 52px;
  z-index: 10;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin: 0 -16px;
  padding: 10px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.psplus-sticky::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-bottom: 1px solid var(--border);
}
/* Обёртка чипов + стрелки прокрутки (владелец 2026-08-03: в Telegram Desktop нет
   свайпа вообще, ряд был физически нечем пролистать без стрелок). */
.psplus-chips-wrap { display: flex; align-items: center; gap: 4px; }
.psplus-chips-scroll {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.psplus-chips-scroll svg { width: 14px; height: 14px; }
.psplus-chips-scroll--left svg { transform: rotate(180deg); }
.psplus-chips-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 2px;
  /* Затухание у правого края — визуальная подсказка, что ряд скроллится и там
     есть ещё чипы (например EA Play), не только то, что видно сразу (владелец
     2026-08-03: подумал, что EA Play вообще пропал, а он просто был за краем). */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
}
.psplus-chips-row::-webkit-scrollbar { display: none; }
.psplus-chip {
  position: relative;
  flex: none;
  flex-shrink: 0;
  scroll-snap-align: start;
  /* Увеличено по просьбе владельца 2026-08-04 ("увеличить плашки с выбором
     подписки и срока") — было min-width 88px/height 56px, мелко на телефоне. */
  min-width: 108px;
  height: 68px;
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.psplus-chip-name { position: relative; z-index: 1; font: 700 15px/1.15 "Inter", sans-serif; white-space: nowrap; }
.psplus-chip-price { position: relative; z-index: 1; font: 600 12.5px/1 "Inter", sans-serif; font-variant-numeric: tabular-nums; opacity: 0.75; }
.psplus-chip.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--glow); }

/* ПК/веб — просьба владельца 2026-08-06, "выбор вида подписки на всю ширину". На
   телефоне чипы скроллятся горизонтально (min-width 108px, их 4 штуки не влезают в
   480px), но на широком десктопном контейнере (720px) все 4 и так помещаются —
   вместо мёртвого места справа растягиваем чипы поровну на всю строку и прячем
   стрелки скролла, которым больше нечего скроллить. */
html.tg-desktop .psplus-chips-row {
  overflow-x: visible;
  flex: 1 1 0;
  /* -webkit-mask-image выше (затухание края для скролл-подсказки на телефоне) тут
     больше не нужна и без width:100% нет смысла — без сброса маска обрезала бы
     последний чип призрачным градиентом, хотя скроллить уже нечего. */
  -webkit-mask-image: none;
  mask-image: none;
}
html.tg-desktop .psplus-chip {
  flex: 1 1 0;
  min-width: 0;
  height: 92px;
  align-items: center;
  text-align: center;
}
/* Просьба владельца 2026-08-06: крупнее только название тарифа, цену ("от 1240 ₽")
   не трогать — оставить как есть. */
html.tg-desktop .psplus-chip-name {
  font-size: 19px;
}
html.tg-desktop .psplus-chips-scroll {
  display: none;
}

/* Фирменный фон-текстура по тарифу (владелец 2026-08-03: "раньше был красивый фон,
   верни его") — те же градиенты, что были у прежних крупных карточек тарифов,
   просто теперь на компактном чипе. */
.psplus-chip--essential {
  /* Essential/Основной — бело-серебристый, два блика для ощущения объёма */
  background:
    radial-gradient(circle at 12% 95%, rgba(230,180,60,0.5), transparent 40%),
    radial-gradient(circle at 90% 5%, rgba(255,255,255,0.8), transparent 40%),
    linear-gradient(135deg, #f4f6f9, #d7dbe2 60%, #b9bfc9);
}
.psplus-chip--essential .psplus-chip-name,
.psplus-chip--essential .psplus-chip-price { color: #171018; }
.psplus-chip--extra {
  /* Extra/Экстра — тёплый янтарный с более светлым бликом сверху-слева */
  background:
    radial-gradient(circle at 15% 10%, rgba(255,225,150,0.65), transparent 45%),
    linear-gradient(150deg, #ffc94d, #f2a20b 55%, #d67e00);
}
.psplus-chip--extra .psplus-chip-name,
.psplus-chip--extra .psplus-chip-price { color: #171018; }
.psplus-chip--deluxe {
  /* Deluxe/Люкс — чёрный с золотым свечением в углу + лёгкий блик сверху */
  background:
    radial-gradient(circle at 88% 88%, rgba(230,180,60,0.55), transparent 50%),
    radial-gradient(circle at 15% 8%, rgba(255,255,255,0.06), transparent 40%),
    linear-gradient(135deg, #0d0d0d, #1a1712);
}
.psplus-chip--deluxe .psplus-chip-name,
.psplus-chip--deluxe .psplus-chip-price { color: #e6c14e; }
.psplus-chip--eaplay {
  /* EA Play — реальные бренд-цвета EA: тёмно-синий фон + коралловое свечение */
  background:
    radial-gradient(circle at 50% 125%, rgba(255,90,110,0.6), transparent 55%),
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.08), transparent 40%),
    linear-gradient(180deg, #12123a, #17153f);
}
.psplus-chip--eaplay .psplus-chip-name,
.psplus-chip--eaplay .psplus-chip-price { color: #ff4d5e; }

.psplus-tabs { display: flex; gap: 6px; }
.psplus-tab {
  flex: 1;
  border: none;
  background: var(--surface-2);
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  /* Увеличено по просьбе владельца 2026-08-04 ("увеличить плашки с выбором
     подписки и срока") — было padding 8px 4px, мелко на телефоне. */
  padding: 12px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.psplus-tab span:first-child { font-size: 14px; font-weight: 600; }
.psplus-tab-price { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.psplus-tab.active { background: var(--accent-soft); color: var(--accent); }
.psplus-tab.active .psplus-tab-price { color: var(--accent); }

/* "Что входит" — .kls-card с рядами .kls-feature, разделители между строками,
   без рамки на каждую строку (спека §3 доп. промпта). */
.psplus-features-card { padding: var(--s2) var(--s4); }
.psplus-features-title { padding: var(--s3) 0; margin: 0; }
.kls-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4) 0;
  border-top: 1px solid var(--border);
  overflow: hidden;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), height var(--t-base) var(--ease), padding var(--t-base) var(--ease), margin var(--t-base) var(--ease);
}
.kls-feature:first-child { border-top: none; }
.kls-feature__icon {
  flex: none;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kls-feature__icon svg { width: 20px; height: 20px; }
.kls-feature__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kls-feature__title { font: 600 15px/20px "Inter", sans-serif; color: var(--text); }
.kls-feature__text { font: 400 13px/17px "Inter", sans-serif; color: var(--text-2); }
/* Строки-эксклюзив тарифа — акцентная иконка отвечает "за что доплата" (§3). */
.kls-feature--exclusive .kls-feature__icon { background: var(--accent-soft); color: var(--accent); }
.kls-feature--leaving { opacity: 0; transform: translateY(-4px); }
.kls-feature--entering { opacity: 0; transform: translateY(4px); }
.psplus-features-fading { transition: opacity 160ms ease; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .kls-feature, .psplus-features-fading { transition-duration: 0.01ms !important; }
}

/* ---------- Steam: заголовок, доверительные бейджи, FAQ ---------- */
.steam-header { text-align: center; padding: 8px 12px 18px; }
.steam-header-icon { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }
.steam-header-title { font-size: 18px; font-weight: 800; }
.steam-header-sub { font-size: 12px; color: var(--hint); margin-top: 3px; }

.faq-block { margin-top: 22px; }
.faq-item {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  padding: 14px 16px;
  cursor: pointer;
}
.faq-toggle { color: var(--accent); font-size: 16px; font-weight: 700; transition: transform 0.2s ease; flex-shrink: 0; margin-left: 10px; }
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
  font-size: 12.5px;
  color: var(--hint);
  line-height: 1.55;
  padding: 0 16px;
}
.faq-item.open .faq-answer { max-height: 340px; padding: 0 16px 16px; }
.faq-answer a { color: var(--accent); text-decoration: none; }

/* ---------- Главная: горизонтальная подборка "Игры со скидкой" (реальные данные) ---------- */
.home-teaser { margin-top: 20px; }
.home-teaser-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.inline-icon { width: 16px; height: 16px; display: inline-flex; color: var(--pink); flex: none; }
.inline-icon svg { width: 100%; height: 100%; }
.home-teaser-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.home-teaser-row::-webkit-scrollbar { display: none; }
.home-teaser-card {
  flex: 0 0 auto;
  width: 118px;
  cursor: pointer;
}
.home-teaser-cover-wrap {
  width: 118px;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}
.home-teaser-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-teaser-name {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-teaser-price-row { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.home-teaser-price-row .game-card-price { font-size: 12px; }
.home-teaser-price-row .game-card-discount { font-size: 9.5px; padding: 1px 5px; }

/* Баннер-подложка под официальную иконку Steam (2026-08-02) — CSS-градиент, БЕЗ
   AI-рисунка логотипа: используем присланный владельцем настоящий icon_steam.png,
   только оформляем красивее (см. переписку про товарные знаки). */
.steam-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 16px;
  background:
    radial-gradient(circle at 50% 30%, rgba(232,184,109,0.22), transparent 60%),
    linear-gradient(160deg, #1a1a1a, #0f0f0f 70%);
}
.steam-hero-decor {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(circle at 50% 35%, black 0%, transparent 65%);
  mask-image: radial-gradient(circle at 50% 35%, black 0%, transparent 65%);
  opacity: 0.8;
  pointer-events: none;
}
.steam-hero .steam-header { position: relative; z-index: 1; padding: 26px 12px 24px; }

/* ---------- Уточнения по референсам: крупная иконка со свечением, ---------- */
/* быстрые кнопки суммы, отдельная карточка "К оплате", детали тарифов PS Plus */
.steam-header-icon-wrap {
  width: 84px; height: 84px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  box-shadow: 0 0 0 6px rgba(232,184,109,0.08), 0 8px 24px rgba(232,184,109,0.18);
}
.steam-header-icon { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0; }

.steam-amount-presets { grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; }
.steam-amount-presets .preset-btn { padding: 9px 2px; font-size: 12px; }

.steam-summary-card {
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(232,184,109,0.35);
  border-radius: var(--radius);
  font-size: 14px;
  align-items: center;
  animation: fadeInUp 0.25s ease;
  box-shadow: var(--glow);
}
.steam-summary-card b { color: var(--accent); font-size: 19px; }

/* ---------- Нижняя панель вкладок (структурное отличие от référence — там своя ---------- */
/* модель навигации, у нас теперь тоже персистентные вкладки поверх Back/MainButton) */
/* Нижняя навигация — приведена к спеке шаг 3 v2-промпта (2026-08-02): высота
   56px+safe-area, иконка 22px, тап-зона ≥48px, точка-индикатор над активной. */
.bottom-tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  z-index: 50;
}

/* Кнопка выбора тарифа PS Plus (2026-08-03) — сидит СРАЗУ НАД нижним меню, как
   обычный элемент страницы (не нативный tg.MainButton, см. setPsPlusCta() в JS). */
.sticky-cta-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  max-width: 480px;
  margin: 0 auto;
  padding: 10px 16px;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  z-index: 45;
}
/* ПК/веб — оба выше position:fixed, вне потока #screens, max-width нужен отдельно
   (просьба владельца 2026-08-06, "нижнее меню тоже шире"). */
html.tg-desktop .bottom-tabs, html.tg-desktop .sticky-cta-bar {
  max-width: 720px;
}

.tab-btn {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  background: none;
  border: none;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 1px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
  position: relative;
}
.tab-btn span:last-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
.tab-btn:active { transform: scale(0.96); }
.tab-icon { width: 22px; height: 22px; display: inline-flex; }
.tab-icon svg { width: 100%; height: 100%; }
.tab-btn.active { color: var(--accent); }
.tab-btn.active::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Карусель топ-скидок на главной ---------- */
/* Баннер на главной — по просьбе владельца 2026-08-02 УБРАЛИ фото с человеком
   (было сгенерировано через Higgsfield/FLUX.2), заменили на графический
   градиент-фон с фирменными глифами DualSense — тот же приём, что и на
   карточках PS Plus, для визуальной связности. */
.brand-hero {
  position: relative;
  margin-bottom: 18px;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}
.brand-hero-graphic {
  background:
    radial-gradient(circle at 85% 15%, rgba(232,184,109,0.28), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(176,138,82,0.28), transparent 55%),
    linear-gradient(135deg, #1a1a1a, #131313 60%, #0d0d0d);
}
.brand-hero-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.brand-hero-decor span {
  position: absolute;
  font-weight: 700;
  opacity: 0.14;
  color: #fff;
  line-height: 1;
}
.brand-hero-decor span:nth-child(1) { top: 14%; right: 14%; font-size: 46px; transform: rotate(-12deg); }
.brand-hero-decor span:nth-child(2) { top: 55%; right: 30%; font-size: 30px; transform: rotate(10deg); }
.brand-hero-decor span:nth-child(3) { top: 20%; right: 42%; font-size: 34px; transform: rotate(6deg); }
.brand-hero-decor span:nth-child(4) { bottom: 12%; right: 8%; font-size: 26px; transform: rotate(-8deg); }
.brand-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 18px;
  background: linear-gradient(to top, rgba(10,12,20,0.88), rgba(10,12,20,0.15) 55%, rgba(10,12,20,0) 100%);
}
.brand-hero-overlay-flat { background: none; justify-content: center; padding: 16px 20px; }
.brand-hero-title { font-size: 21px; font-weight: 800; color: #fff; position: relative; z-index: 1; }
.brand-hero-sub { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.82); margin-top: 3px; position: relative; z-index: 1; }

/* Баннер текущей распродажи PS Store (просьба владельца 2026-08-05) — настоящая
   картинка с самого store.playstation.com вместо карусели отдельных игр, см.
   renderSaleBanner()/current_sale_catalog_loop. Картинки Sony под этот баннер обычно
   квадратные/близкие к квадрату (проверено вживую — "Летняя распродажа" 1:1). */
.sale-banner {
  position: relative;
  margin-bottom: 18px;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--surface-2);
}
.sale-banner img { width: 100%; height: auto; display: block; }
/* ПК/веб — картинка Sony квадратная (см. коммент выше), растянутая на весь
   720px-контейнер она становится непропорционально высокой и занимает пол-экрана
   (жалоба владельца 2026-08-06, "баннер можно сделать поменьше"). Ограничиваем
   ширину самого баннера, не всего контейнера — соседние элементы (поиск, фильтры)
   остаются на полную ширину. */
html.tg-desktop .sale-banner {
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

/* Таймер до конца акции, поверх баннера — просьба владельца 2026-08-05: дата
   окончания у самого баннера акции Sony не отдаёт, но у отдельных игр из подборки
   есть price.endTime, берём по большинству среди выборки (см. _discover_sale_end_time
   в server.py); если ни у одной не нашлось — таймер просто не показываем. */
.sale-banner-timer {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(212,165,85,0.4);
  font: 700 13px/1.3 "Inter", sans-serif;
  color: var(--accent);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Фильтр платформы + сортировка на экранах "вся подборка" (жанр/распродажа) —
   просьба владельца 2026-08-05. */
.catalog-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.filter-chip-row { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.filter-chip {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--hint);
  border-radius: 100px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.filter-chip--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #14110a;
}
.filter-sort-select {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 100px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  outline: none;
}