/* mx-cards v2.3 — эффект карточек игр и слотов «как у Mazero»: на главной (.new-games .game-item — режимы, слоты,
   избранное, новинки) и в каталоге /slots (.game_list .game_).
   Обложка размывается под прозрачным «стеклом» (без затемнения), по центру — название и провайдер, ниже — круглая синяя
   кнопка play. На телефоне игра открывается с первого нажатия, эффект виден, пока палец на карточке (:active) и во время
   перехода (.mx-open ставит mx-cards.js). На компьютере — наведение. Подписи на карточках главной вставляет mx-cards.js
   (.mx-cap__t / .mx-cap__p). Текст всегда белый — и в тёмной, и в светлой теме сайта.
   v2.2: фон эффекта прозрачный (backdrop-filter; где его нет — размывается сама обложка), переход с первого нажатия.
   v2.3: текст без тени. */

/* ==================== главная: .new-games .game-item ==================== */
html body .new-games .game-item {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  border-radius: 14px;
  transition: transform .16s ease !important;
  transform: translateZ(0);
}
html body .new-games .game-item img {
  filter: none !important;
  box-shadow: none !important;
  transition: filter .3s ease !important;
}
/* «стекло»: прозрачный слой над обложкой — размывает её, не затемняя */
html body .new-games .game-item::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 14px;
  background: transparent;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 3;
}
/* подпись: название + провайдер */
html body .new-games .game-item .mx-cap {
  position: absolute;
  left: 8px; right: 8px; top: 13%;
  z-index: 5;
  text-align: center;
  font-family: inherit;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .3s ease;
  pointer-events: none;
}
html body .new-games .game-item .mx-cap .mx-cap__t {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .new-games .game-item .mx-cap .mx-cap__p {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* кнопка play: синий круг, белый треугольник, пружинное появление */
html body .new-games .game-item .play-overlay {
  position: absolute !important;
  top: 60% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  opacity: 0 !important;
  transition: opacity .2s ease !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
html body .new-games .game-item .play-overlay i {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  padding-left: 5px;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 18%, #7fb2ff 0%, #3b82f6 46%, #1f56d6 100%) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-shadow: none !important;
  box-shadow: 0 12px 28px -8px rgba(37, 99, 235, .75), 0 2px 6px rgba(0, 0, 0, .35), inset 0 -3px 6px rgba(0, 0, 0, .18), inset 0 2px 3px rgba(255, 255, 255, .3) !important;
  transform: scale(.6);
  opacity: 0;
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease !important;
}
html body .new-games .game-item .play-overlay i::after { /* пульсирующее кольцо */
  content: "";
  position: absolute;
  top: -7px; right: -7px; bottom: -7px; left: -7px;
  border-radius: 50%;
  border: 2px solid rgba(96, 165, 250, .8);
  opacity: 0;
  pointer-events: none;
}
/* нажатие: карточка чуть «вдавливается» */
html body .new-games .game-item:active { transform: scale(.97) !important; }

/* --- открыто: во время перехода в игру (.mx-open ставит mx-cards.js) --- */
html body .new-games .game-item.mx-open::before {
  opacity: 1;
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  backdrop-filter: blur(7px) saturate(1.15);
}
html body .new-games .game-item.mx-open .mx-cap { opacity: 1; transform: none; }
html body .new-games .game-item.mx-open .play-overlay { opacity: 1 !important; }
html body .new-games .game-item.mx-open .play-overlay i { transform: scale(1); opacity: 1; }
html body .new-games .game-item.mx-open .play-overlay i::after { animation: mxCardPulse 1.6s ease-out .15s infinite; }
html body .new-games .game-item.mx-open .hot-badge,
html body .new-games .game-item.mx-open .new-badge,
html body .new-games .game-item.mx-open .gift-badge,
html body .new-games .game-item.mx-open .rtp-badge,
html body .new-games .game-item.mx-open .mx-badge { opacity: 0 !important; transition: opacity .2s ease !important; }

/* --- наведение мышью и фокус с клавиатуры (устройства с курсором) --- */
@media (hover: hover) and (pointer: fine) {
  html body .new-games .game-item:hover::before,
  html body .new-games .game-item:focus-visible::before {
    opacity: 1;
    -webkit-backdrop-filter: blur(7px) saturate(1.15);
    backdrop-filter: blur(7px) saturate(1.15);
  }
  html body .new-games .game-item:hover .mx-cap,
  html body .new-games .game-item:focus-visible .mx-cap { opacity: 1; transform: none; }
  html body .new-games .game-item:hover .play-overlay,
  html body .new-games .game-item:focus-visible .play-overlay { opacity: 1 !important; }
  html body .new-games .game-item:hover .play-overlay i,
  html body .new-games .game-item:focus-visible .play-overlay i { transform: scale(1); opacity: 1; }
  html body .new-games .game-item:hover .play-overlay i::after,
  html body .new-games .game-item:focus-visible .play-overlay i::after { animation: mxCardPulse 1.6s ease-out .15s infinite; }
  html body .new-games .game-item:hover .hot-badge,
  html body .new-games .game-item:hover .new-badge,
  html body .new-games .game-item:hover .gift-badge,
  html body .new-games .game-item:hover .rtp-badge,
  html body .new-games .game-item:hover .mx-badge,
  html body .new-games .game-item:focus-visible .hot-badge,
  html body .new-games .game-item:focus-visible .new-badge,
  html body .new-games .game-item:focus-visible .gift-badge,
  html body .new-games .game-item:focus-visible .rtp-badge,
  html body .new-games .game-item:focus-visible .mx-badge { opacity: 0 !important; transition: opacity .2s ease !important; }
}

/* --- касание (телефон): эффект, пока палец на карточке; игра открывается с первого нажатия --- */
@media (hover: none) {
  html body .new-games .game-item:active::before {
    opacity: 1;
    -webkit-backdrop-filter: blur(7px) saturate(1.15);
    backdrop-filter: blur(7px) saturate(1.15);
  }
  html body .new-games .game-item:active .mx-cap { opacity: 1; transform: none; }
  html body .new-games .game-item:active .play-overlay { opacity: 1 !important; }
  html body .new-games .game-item:active .play-overlay i { transform: scale(1); opacity: 1; }
  html body .new-games .game-item:active .hot-badge,
  html body .new-games .game-item:active .new-badge,
  html body .new-games .game-item:active .gift-badge,
  html body .new-games .game-item:active .rtp-badge,
  html body .new-games .game-item:active .mx-badge { opacity: 0 !important; transition: opacity .2s ease !important; }
}

@keyframes mxCardPulse {
  0%   { transform: scale(.85); opacity: .9; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* размеры на телефонах */
@media (max-width: 768px) {
  html body .new-games .game-item .play-overlay i { width: 50px; height: 50px; font-size: 19px !important; }
  html body .new-games .game-item .mx-cap .mx-cap__t { font-size: 14px; }
  html body .new-games .game-item .mx-cap .mx-cap__p { font-size: 11px; }
}
@media (max-width: 400px) {
  html body .new-games .game-item .play-overlay i { width: 44px; height: 44px; font-size: 17px !important; padding-left: 4px; }
  html body .new-games .game-item .mx-cap { left: 6px; right: 6px; top: 12%; }
  html body .new-games .game-item .mx-cap .mx-cap__t { font-size: 13px; }
  html body .new-games .game-item .mx-cap .mx-cap__p { font-size: 10.5px; }
}

/* ==================== каталог /slots: .game_list .game_ (оверлей .info: .title, .go, [a > .title2 DEMO], .title3) ==================== */
html body .game_list .game_ {
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transition: transform .16s ease !important;
}
html body .game_list .game_:hover { transform: none !important; }
html body .game_list .game_:active { transform: scale(.97) !important; }
html body .game_list .game_ .game_image img {
  filter: none !important;
  transition: filter .3s ease !important;
}
/* оверлей: колонка по центру, прозрачный (без затемнения сайта) */
html body .game_list .game_ .info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 13% 8px 10px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .25s ease !important;
  z-index: 5 !important;
  pointer-events: none;
}
html body .game_list .game_ .info:before,
html body .game_list .game_ .info::before { content: none !important; display: none !important; background: transparent !important; }
html body .game_list .game_ .info .title {
  display: block !important;
  position: relative;
  z-index: 1;
  order: 1;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -.1px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body .game_list .game_ .info .title3 {
  display: block !important;
  position: relative;
  z-index: 1;
  order: 2;
  max-width: 100% !important;
  margin: 3px 0 0 !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* кнопка play: синий круг с белым треугольником и пульсирующим кольцом */
html body .game_list .game_ .info .go {
  position: absolute !important;
  top: 60% !important;
  left: 50% !important;
  order: 3;
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(120% 120% at 30% 18%, #7fb2ff 0%, #3b82f6 46%, #1f56d6 100%) !important;
  box-shadow: 0 12px 28px -8px rgba(37, 99, 235, .75), 0 2px 6px rgba(0, 0, 0, .35), inset 0 -3px 6px rgba(0, 0, 0, .18), inset 0 2px 3px rgba(255, 255, 255, .3) !important;
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease !important;
  pointer-events: none !important;
  z-index: 1;
}
html body .game_list .game_ .info .go::before { /* треугольник */
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-38%, -50%);
  background: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
}
html body .game_list .game_ .info .go::after { /* пульсирующее кольцо */
  content: "";
  position: absolute;
  top: -7px; right: -7px; bottom: -7px; left: -7px;
  border-radius: 50%;
  border: 2px solid rgba(96, 165, 250, .8);
  opacity: 0;
  pointer-events: none;
}
/* обёртка ссылки DEMO (router-link) — не занимает места в колонке */
html body .game_list .game_ .info > a {
  order: 4;
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* DEMO: капсула внизу карточки */
html body .game_list .game_ .info .title2 {
  position: absolute !important;
  left: 50% !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 4px 11px !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  border-radius: 999px !important;
  background: rgba(10, 14, 24, .45) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
  z-index: 8 !important;
}
html body .game_list .game_ .info .title2:hover { background: #2563eb !important; border-color: transparent !important; }

/* --- открыто: во время перехода в игру (.mx-open) --- */
html body .game_list .game_.mx-open .info {
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  backdrop-filter: blur(7px) saturate(1.15);
}
html body .game_list .game_.mx-open .info .go { transform: translate(-50%, -50%) scale(1); opacity: 1; }
html body .game_list .game_.mx-open .info .go::after { animation: mxCardPulse 1.6s ease-out .15s infinite; }

/* --- наведение мышью и фокус с клавиатуры (DEMO кликается) --- */
@media (hover: hover) and (pointer: fine) {
  html body .game_list .game_:hover .info,
  html body .game_list .game_:focus-within .info {
    opacity: 1 !important;
    pointer-events: auto !important;
    -webkit-backdrop-filter: blur(7px) saturate(1.15);
    backdrop-filter: blur(7px) saturate(1.15);
  }
  html body .game_list .game_:hover .info .go,
  html body .game_list .game_:focus-within .info .go { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  html body .game_list .game_:hover .info .go::after,
  html body .game_list .game_:focus-within .info .go::after { animation: mxCardPulse 1.6s ease-out .15s infinite; }
}

/* --- касание: эффект, пока палец на карточке; нажатие всегда ведёт в игру (DEMO на телефоне не перехватывает) --- */
@media (hover: none) {
  html body .game_list .game_ .info,
  html body .game_list .game_ .info * { pointer-events: none !important; }
  html body .game_list .game_ .info .title2 { display: none !important; }   /* DEMO на телефоне не показываем: нажатие ведёт в игру */
  html body .game_list .game_:active .info {
    opacity: 1 !important;
    -webkit-backdrop-filter: blur(7px) saturate(1.15);
    backdrop-filter: blur(7px) saturate(1.15);
  }
  html body .game_list .game_:active .info .go { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@media (max-width: 768px) {
  html body .game_list .game_ .info .go { width: 50px !important; height: 50px !important; }
  html body .game_list .game_ .info .go::before { border-width: 9px 0 9px 15px; }
  html body .game_list .game_ .info .title { font-size: 14px !important; }
  html body .game_list .game_ .info .title3 { font-size: 11px !important; }
}
@media (max-width: 400px) {
  html body .game_list .game_ .info { padding: 12% 6px 8px !important; }
  html body .game_list .game_ .info .go { width: 44px !important; height: 44px !important; }
  html body .game_list .game_ .info .go::before { border-width: 8px 0 8px 13px; }
  html body .game_list .game_ .info .title { font-size: 13px !important; }
  html body .game_list .game_ .info .title3 { font-size: 10.5px !important; }
}

/* ==================== нет backdrop-filter (старые браузеры): размываем саму обложку ==================== */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html body .new-games .game-item.mx-open img,
  html body .game_list .game_.mx-open .game_image img { filter: blur(7px) saturate(1.15) !important; }
  html body .new-games .game-item.mx-open img { -webkit-clip-path: inset(0 round 14px); clip-path: inset(0 round 14px); }
  @media (hover: hover) and (pointer: fine) {
    html body .new-games .game-item:hover img,
    html body .new-games .game-item:focus-visible img,
    html body .game_list .game_:hover .game_image img,
    html body .game_list .game_:focus-within .game_image img { filter: blur(7px) saturate(1.15) !important; }
    html body .new-games .game-item:hover img,
    html body .new-games .game-item:focus-visible img { -webkit-clip-path: inset(0 round 14px); clip-path: inset(0 round 14px); }
  }
  @media (hover: none) {
    html body .new-games .game-item:active img,
    html body .game_list .game_:active .game_image img { filter: blur(7px) saturate(1.15) !important; }
    html body .new-games .game-item:active img { -webkit-clip-path: inset(0 round 14px); clip-path: inset(0 round 14px); }
  }
}

/* уважение к «уменьшению движения» */
@media (prefers-reduced-motion: reduce) {
  html body .new-games .game-item,
  html body .new-games .game-item img,
  html body .new-games .game-item::before,
  html body .new-games .game-item .mx-cap,
  html body .new-games .game-item .play-overlay,
  html body .new-games .game-item .play-overlay i,
  html body .game_list .game_,
  html body .game_list .game_ .game_image img,
  html body .game_list .game_ .info,
  html body .game_list .game_ .info .go { transition: none !important; }
  html body .new-games .game-item:active,
  html body .game_list .game_:active { transform: none !important; }
  html body .new-games .game-item .play-overlay i::after,
  html body .game_list .game_ .info .go::after { animation: none !important; }
}

/* ==================== текст на карточке — всегда белый, без тени (светлая тема сайта его не перекрашивает) ==================== */
html body .new-games .game-item .mx-cap .mx-cap__t,
html body.light-theme .new-games .game-item .mx-cap .mx-cap__t,
html body.light-theme.light-theme.light-theme .new-games a.game-item span.mx-cap span.mx-cap__t {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}
html body .new-games .game-item .mx-cap .mx-cap__p,
html body.light-theme .new-games .game-item .mx-cap .mx-cap__p,
html body.light-theme.light-theme.light-theme .new-games a.game-item span.mx-cap span.mx-cap__p {
  color: rgba(255, 255, 255, .92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .92) !important;
  text-shadow: none !important;
}
html body .game_list .game_ .info .title,
html body.light-theme.light-theme.light-theme .game_list div.game_ div.info div.title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}
html body .game_list .game_ .info .title3,
html body.light-theme.light-theme.light-theme .game_list div.game_ div.info div.title3 {
  color: rgba(255, 255, 255, .92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .92) !important;
  text-shadow: none !important;
}
html body .new-games .game-item .play-overlay i,
html body .new-games .game-item .play-overlay i::before,
html body.light-theme.light-theme.light-theme .new-games a.game-item div.play-overlay i,
html body.light-theme.light-theme.light-theme .new-games a.game-item div.play-overlay i::before {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .game_list .game_ .info .title2,
html body.light-theme.light-theme.light-theme .game_list div.game_ div.info div.title2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}