/* css/redesign-home.css
   Фаза 1 редизайна (docs/REDESIGN_PLAN.md): визуальный ресскин главной
   страницы (панель "Быстрая покупка" + сетка "Выберите игру") под
   Graphite/Gold, поверх существующей разметки/логики из
   js/core/quickBuy/*.js и js/shared/navigation.js. Только переопределения
   через --rd-* токены (css/redesign-tokens.css) — старые классы
   (quickbuy.css, base.css) не удалены, чтобы не задеть другие экраны,
   которые их пока не редизайнили. */

#homePage .quick-buy-frame,
#homePage #gamesGrid,
#homePage #heroTitle {
  font-family: var(--rd-font-family);
}

/* ===== Панель "Быстрая покупка" =====
   Обводка рамки — .rd-snake/.rd-snake-redwhite (css/redesign-motion.css,
   Фаза 16.3), классы уже на элементе из carousel.js, здесь нечего
   переопределять — .rd-snake-redwhite уже красный/белый, как и требует
   README. */
#homePage .quick-buy-section {
  background: var(--rd-panel-header);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-card);
  padding: var(--rd-space-card) 28px;
}
#homePage .quick-buy-section h3 {
  color: var(--rd-gold);
}
#homePage .quick-buy-section h3 .icon-bolt {
  color: var(--rd-gold);
}
#homePage .quick-buy-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.quick-buy-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.quick-buy-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--rd-gold);
  color: var(--rd-gold);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.quick-buy-help-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: max-content;
  max-width: min(280px, calc(100vw - 48px));
  padding: 10px 12px;
  background: var(--rd-panel);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-sm, 8px);
  color: var(--rd-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.quick-buy-help:hover .quick-buy-help-tooltip,
.quick-buy-help.open .quick-buy-help-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#homePage .quick-game-item .game-name {
  color: var(--rd-text);
}
#homePage .quick-game-item.active img {
  box-shadow: 0 0 0 2px var(--rd-gold);
}
#homePage .quick-games-indicators .dot.active {
  background: var(--rd-gold);
}

/* ===== Сетка "Выберите игру" ===== */
#homePage #heroTitle {
  color: var(--rd-text);
  font-weight: 800;
  letter-spacing: -0.01em;
}
#homePage #gamesGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rd-gap-grid);
}
@media (max-width: 900px) {
  #homePage #gamesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
#homePage .game-card {
  background: var(--rd-panel);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-card);
  transition: transform 0.2s ease;
}
#homePage .game-card:hover {
  transform: translateY(-5px);
  background: var(--rd-panel);
}
/* Та же приподнятость — для scroll-driven .rd-snake-active на тач-сетке
   (Фаза 16.2, js/shared/gameGridSnake.js), где :hover физически недоступен
   и без этого правила тайл в фокусе получал бы только кольцо/glow, но не
   "выныривал" из сетки, как на десктопе. */
#homePage .game-card.rd-snake-active {
  transform: translateY(-5px);
  background: var(--rd-panel);
}
/* Кольцо-"змейка" на hover — утилита .rd-snake/.rd-snake-gold/.rd-snake-hover
   (css/redesign-motion.css), классы навешаны в js/shared/navigation.js.
   Старый conic-gradient-::before (quickBuySnake) для .game-card удалён из
   css/base.css (Фаза 15.1, дедуп от Фазы 1) — отдельного переопределения
   здесь больше не нужно. */
#homePage .game-title {
  font-weight: 700;
}