/* =========================================================
   BERRY RUST — оформление магазина GameStores
   Тема: ягода. Ночной фон + неон малина → фиолет (как баннер).
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Russo+One&family=Roboto:wght@400;500;700&display=swap');

:root {
  --bb-night: #0c0810;      /* фон */
  --bb-plum: #160f1c;       /* панели */
  --bb-plum-2: #21162a;     /* панели светлее */
  --bb-orange: #ff7a00;
  --bb-berry: #ff1f5a;      /* главный акцент */
  --bb-pink: #ff5c93;
  --bb-magenta: #d4007f;
  --bb-violet: #8a2cff;
  --bb-mist: #c9bfd0;       /* второстепенный текст */
  --bb-line: rgba(255, 31, 90, .2);
  --bb-glow: rgba(255, 31, 90, .45);
  --bb-grad: linear-gradient(100deg, var(--bb-orange) 0%, var(--bb-berry) 40%, var(--bb-magenta) 70%, var(--bb-violet) 100%);
  --bb-grad-btn: linear-gradient(135deg, var(--bb-berry) 0%, var(--bb-magenta) 55%, var(--bb-violet) 100%);
  --bb-radius-l: 18px;
  --bb-radius-m: 12px;
  --bb-radius-s: 8px;

  /* переопределяем переменные GameStores */
  --accent-color-800: var(--bb-berry);
  --accent-color-900: #d9144a;
  --bg-color-700: var(--bb-plum-2);
  --bg-color-800: var(--bb-night);
  --bg-color-900: var(--bb-plum);
  --font-color-800: #efe8f2;
  --font-color-900: var(--bb-mist);
  --promocode-bg-color: rgba(12, 8, 16, .96);
  --monitoring-joining-color: var(--bb-berry);
  --monitoring-queue-color: var(--bb-violet);
}

body {
  background-color: var(--bb-night) !important;
  color: #efe8f2;
  font-family: 'Roboto', system-ui, sans-serif;
}

::selection { background: var(--bb-berry); color: #fff; }

/* скроллбар */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bb-night); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--bb-berry), var(--bb-violet));
  border-radius: 10px;
  border: 2px solid var(--bb-night);
}

/* фон: темнее и с ягодным оттенком, чтобы товары читались */
.BGImage-module__img { filter: brightness(.45) saturate(1.15) hue-rotate(-12deg); }

/* ---------- баннер ---------- */
.Banner-module__img {
  border-radius: var(--bb-radius-l);
  box-shadow: 0 0 0 1px var(--bb-line), 0 18px 50px rgba(0, 0, 0, .55), 0 0 60px rgba(255, 31, 90, .18);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s;
}
.Banner-module__img:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 31, 90, .4), 0 22px 60px rgba(0, 0, 0, .6), 0 0 80px rgba(255, 31, 90, .3);
}

/* ---------- шапка ---------- */
.Header-module__wrapper {
  background: linear-gradient(180deg, rgba(33, 22, 42, .9), rgba(16, 10, 22, .92)) !important;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-l) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 92, 147, .1);
  backdrop-filter: blur(12px);
}
/* логотип: переливающийся градиент */
.Header-module__logo {
  font-family: 'Russo One', sans-serif !important;
  font-size: 22px !important;
  letter-spacing: .5px;
  background: linear-gradient(90deg, var(--bb-orange), var(--bb-berry), var(--bb-magenta), var(--bb-violet), var(--bb-berry), var(--bb-orange));
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 0 10px rgba(255, 31, 90, .45));
  animation: bb-shimmer 6s linear infinite;
}
.HeaderNav-module__link,
.SupportLink-module__link {
  position: relative;
  color: #efe8f2 !important;
  transition: color .2s;
}
.HeaderNav-module__link::after,
.SupportLink-module__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--bb-grad);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.HeaderNav-module__link:hover,
.SupportLink-module__link:hover { color: var(--bb-pink) !important; }
.HeaderNav-module__link:hover::after,
.SupportLink-module__link:hover::after { transform: scaleX(1); }

.PlayerMenu-module__loginLink {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--bb-grad-btn);
  background-size: 200% 100%;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(255, 92, 147, .45), 0 6px 18px var(--bb-glow);
  transition: transform .15s, box-shadow .2s, background-position .4s;
}
.PlayerMenu-module__loginLink:hover {
  transform: translateY(-1px);
  background-position: 100% 0;
  box-shadow: 0 0 0 1px rgba(255, 92, 147, .7), 0 8px 26px rgba(255, 31, 90, .6);
}

/* ---------- блоки (мониторинг, магазин) ---------- */
.Widgets-module__widgetWrapper,
.Shop-module__wrapper,
.ModalLayout-module__modal {
  background: linear-gradient(180deg, rgba(30, 20, 38, .94), rgba(14, 9, 19, .96)) !important;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-l) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.boxHeader {
  background: transparent !important;
  border-bottom: 1px solid var(--bb-line);
  font-family: 'Russo One', sans-serif !important;
  font-weight: 400 !important;
  color: #fff !important;
  letter-spacing: .3px;
}
.Shop-module__header { font-size: 30px !important; padding: 18px 0 !important; }
.Shop-module__header::after {
  content: '';
  display: block;
  width: 84px; height: 3px;
  margin: 10px auto 0;
  border-radius: 3px;
  background: var(--bb-grad);
  background-size: 200% 100%;
  box-shadow: 0 0 12px var(--bb-glow);
  animation: bb-shimmer 4s linear infinite;
}
.boxBody, .boxFooter { background: transparent !important; }

/* мониторинг */
.MonitoringServer-module__name { font-family: 'Russo One', sans-serif; color: #fff; }
.MonitoringServer-module__progressBarWrapper {
  background: rgba(255, 255, 255, .06) !important;
  border-radius: 99px !important;
  overflow: hidden;
}
.MonitoringServer-module__progressBar {
  background: var(--bb-grad) !important;
  background-size: 200% 100% !important;
  box-shadow: 0 0 12px var(--bb-glow);
  animation: bb-shimmer 3s linear infinite;
}

/* ---------- кнопки ---------- */
.Button-module__btn {
  position: relative;
  overflow: hidden;
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.Button-module__accent {
  background: var(--bb-grad-btn) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(255, 31, 90, .35);
}
/* блик пробегает по кнопке */
.Button-module__accent::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  animation: bb-glint 3.2s ease-in-out infinite;
  pointer-events: none;
}
.Button-module__accent:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 10px 26px rgba(255, 31, 90, .55);
}
.Button-module__gray {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  color: #efe8f2 !important;
}
.Button-module__gray:hover { border-color: var(--bb-berry) !important; }
.Button-module__btn:focus-visible,
.Categories-module__category:focus-visible,
.Product-module__wrapper:focus-visible {
  outline: 2px solid var(--bb-pink) !important;
  outline-offset: 3px;
}
/* волна от клика (элемент создаёт JS) */
.bb-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: scale(0);
  animation: bb-ripple .6s ease-out forwards;
  pointer-events: none;
}

/* ---------- категории ---------- */
.Categories-module__categories { gap: 8px !important; }
.Categories-module__category {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  color: #ddd3e3 !important;
  border-radius: 999px !important;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.Categories-module__category:hover {
  border-color: var(--bb-berry) !important;
  color: var(--bb-pink) !important;
  transform: translateY(-1px);
}
.Categories-module__active {
  background: var(--bb-grad-btn) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 4px 16px var(--bb-glow);
}

/* поиск */
.Search-module__wrapper {
  background: rgba(0, 0, 0, .35) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 999px !important;
  transition: border-color .2s, box-shadow .2s;
}
.Search-module__wrapper:focus-within {
  border-color: var(--bb-berry) !important;
  box-shadow: 0 0 0 3px rgba(255, 31, 90, .18);
}
.Search-module__input { color: #fff !important; }
/* в шаблоне иконка поиска и лоадер жёстко жёлтые — перекрашиваем */
.Search-module__iconWrapper {
  background: var(--bb-grad-btn) !important;
  color: #fff !important;
  border-radius: 999px 0 0 999px !important;
}
.Loader-module__loader { border-top-color: var(--bb-berry) !important; }

/* ---------- карточки товаров ---------- */
.Products-module__wrapper { gap: 14px !important; }

.Product-module__wrapper {
  --mx: 50%;
  --my: 50%;
  --heat: 0;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(170px circle at var(--mx) var(--my), rgba(255, 31, 90, calc(.18 * var(--heat))), transparent 70%),
    linear-gradient(180deg, #22172b, #120c18) !important;
  border-radius: var(--bb-radius-m) !important;
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 20px rgba(0, 0, 0, .4);
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
  overflow: hidden;
}
/* неоновая кромка идёт за курсором */
.Product-module__wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(230px circle at var(--mx) var(--my), var(--bb-pink), var(--bb-berry) 30%, var(--bb-violet) 60%, transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: var(--heat);
  transition: opacity .3s;
  pointer-events: none;
  z-index: 2;
}
.Product-module__wrapper:hover {
  --heat: 1;
  border-color: transparent;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .6), 0 0 30px rgba(255, 31, 90, .22);
}
.Product-module__img {
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5));
}
.Product-module__wrapper:hover .Product-module__img {
  transform: scale(1.08) translateY(-2px);
  filter: drop-shadow(0 10px 18px rgba(255, 31, 90, .35));
}
.Product-module__name {
  color: #fff !important;
  font-weight: 600;
  text-align: center;
  background: linear-gradient(180deg, rgba(12, 8, 16, 0), rgba(12, 8, 16, .95) 45%) !important;
  padding-top: 18px !important;
}
.Product-module__price {
  top: 8px !important;
  left: 8px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(12, 8, 16, .82) !important;
  border: 1px solid rgba(255, 92, 147, .35);
  backdrop-filter: blur(4px);
  font-family: 'Russo One', sans-serif !important;
  font-size: 13px;
  color: #fff !important;
  text-shadow: 0 0 10px rgba(255, 31, 90, .6);
  z-index: 3;
}
.Product-module__oldPrice {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: var(--bb-mist) !important;
  opacity: .7;
  margin-right: 6px !important;
}
.Product-module__oldPrice::after { background-color: var(--bb-berry) !important; }
/* бейдж скидки: градиент как на баннере + пульс */
.Product-module__discount {
  top: 8px !important;
  right: 8px !important;
  padding: 4px 9px !important;
  background: var(--bb-grad) !important;
  background-size: 200% 100% !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(255, 31, 90, .5);
  z-index: 3;
  animation: bb-shimmer 3s linear infinite, bb-pulse 2.2s ease-in-out infinite;
}
.Product-module__count {
  background: rgba(0, 0, 0, .6) !important;
  color: var(--bb-pink) !important;
  border-radius: 999px !important;
}

/* ---------- окно товара ---------- */
.ModalLayout-module__wrapper { backdrop-filter: blur(6px); background: rgba(6, 3, 9, .72) !important; }
.ModalLayout-module__modal { animation: bb-pop-in .28s cubic-bezier(.2, .8, .2, 1); }
.ProductModal-module__header { font-size: 22px !important; color: #fff !important; text-shadow: 0 0 14px rgba(255, 31, 90, .5); }
.productModalImg { filter: drop-shadow(0 12px 24px rgba(255, 31, 90, .3)); }
.productModalDescription {
  color: #e2d9e7;
  line-height: 1.6;
  background: rgba(0, 0, 0, .3) !important;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--bb-radius-m) !important;
  padding: 14px 16px !important;
}
.productModalDescription strong { color: var(--bb-pink); }
.TotalSum-module__inputWrapper,
.CountSelector-module__inputWrapper,
.Selector-module__dropDownCurrentItem {
  background: rgba(0, 0, 0, .35) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: var(--bb-radius-s) !important;
}
.TotalSum-module__input,
.CountSelector-module__input { color: #fff !important; }
.CountSelector-module__changeCountBtn { background: transparent !important; color: var(--bb-pink) !important; }
.TotalSum-module__currency {
  background: var(--bb-grad-btn) !important;
  color: #fff !important;
  font-weight: 700;
}
.productModalGiveText { color: var(--bb-mist); }

/* ---------- подвал и cookie ---------- */
.ShopFooter-module__text { color: var(--bb-mist) !important; }
.ShopFooter-module__link { color: var(--bb-pink) !important; }
.ShopFooter-module__link:hover { color: #fff !important; }
.Cookie-module__wrapper {
  background: rgba(16, 10, 22, .96) !important;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-m) !important;
}

/* ---------- частицы (canvas из JS) ---------- */
#bb-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
#root { position: relative; z-index: 1; }

/* появление карточек при прокрутке (класс ставит JS) */
.bb-reveal { opacity: 0; translate: 0 14px; transition: opacity .5s ease, translate .5s cubic-bezier(.2, .8, .2, 1); }
.bb-reveal.bb-in { opacity: 1; translate: 0 0; }

/* ---------- анимации ---------- */
@keyframes bb-shimmer { to { background-position: 300% 0; } }
@keyframes bb-glint { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes bb-pulse { 0%, 100% { box-shadow: 0 4px 12px rgba(255, 31, 90, .45); } 50% { box-shadow: 0 4px 20px rgba(255, 31, 90, .85); } }
@keyframes bb-ripple { to { transform: scale(2.6); opacity: 0; } }
@keyframes bb-pop-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- мобильные ---------- */
@media (max-width: 700px) {
  .Shop-module__header { font-size: 24px !important; }
  .Product-module__wrapper,
  .Product-module__wrapper:hover { transform: none; }
  .Products-module__wrapper { gap: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  #bb-particles { display: none; }
  .bb-reveal { opacity: 1; translate: none; }
}