/* mx-cards v1.4 — эффект наведения/касания карточек игр и слотов на главной (.new-games .game-item) и в каталоге /slots (.game_list .game_):
   вместо размытия — подъём карточки, тонкое жёлтое кольцо строго внутри края картинки, лёгкое затемнение,
   круглая кнопка play с пружинным появлением и пульсирующим кольцом. Снаружи карточки ничего нет:
   ни свечения, ни тени. */

/* запас места в горизонтальной ленте, чтобы увеличенную карточку и тень не обрезало (компенсируем отрицательными полями) */
html body .new-games.v2 > .flex,
html body .new-games > .flex.flex-row {
  padding: 10px 6px 16px !important;
  margin: -10px -6px -16px !important;
}

html body .new-games .game-item {
  -webkit-tap-highlight-color: transparent !important;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1) !important;
  transform: translateZ(0);
  will-change: transform;
  outline: none !important;
}
html body .new-games .game-item img {
  filter: none !important;
  box-shadow: none !important;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: filter .35s ease, outline-color .25s ease !important;
}

/* наведение / фокус с клавиатуры / касание */
html body .new-games .game-item:hover,
html body .new-games .game-item:focus-visible {
  transform: translateY(-3px) scale(1.04) !important;
  z-index: 6 !important;
}
html body .new-games .game-item:hover img,
html body .new-games .game-item:focus-visible img,
html body .new-games .game-item:active img {
  filter: brightness(.84) saturate(1.06) !important;
  outline-color: rgba(255, 220, 60, 1); /* кольцо внутри картинки, повторяет её скругление */
}
/* нажатие: чуть «вдавливается» */
html body .new-games .game-item:active {
  transform: translateY(-1px) scale(1.015) !important;
  transition-duration: .12s !important;
}

/* кнопка play: круг, пружинное появление */
html body .new-games .game-item .play-overlay {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  opacity: 0 !important;
  transition: opacity .22s ease !important;
  pointer-events: none !important;
  z-index: 4 !important;
}
html body .new-games .game-item:hover .play-overlay,
html body .new-games .game-item:focus-visible .play-overlay,
html body .new-games .game-item:active .play-overlay {
  opacity: 1 !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: 54px;
  height: 54px;
  padding-left: 4px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffe66d 0%, #ffc400 100%) !important;
  color: #111827 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-shadow: none !important;
  box-shadow: 0 10px 26px -6px rgba(255, 196, 0, .65), 0 2px 6px rgba(0, 0, 0, .35) !important;
  transform: scale(.55);
  opacity: 0;
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease !important;
}
html body .new-games .game-item:hover .play-overlay i,
html body .new-games .game-item:focus-visible .play-overlay i,
html body .new-games .game-item:active .play-overlay i {
  transform: scale(1);
  opacity: 1;
}
/* пульсирующее кольцо вокруг кнопки */
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(255, 212, 38, .8);
  opacity: 0;
  pointer-events: none;
}
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.5s ease-out .15s infinite;
}
@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: 46px; height: 46px; font-size: 17px !important; }
}
@media (max-width: 480px) {
  html body .new-games .game-item .play-overlay i { width: 40px; height: 40px; font-size: 15px !important; padding-left: 3px; }
  html body .new-games .game-item:hover,
  html body .new-games .game-item:focus-visible { transform: translateY(-2px) scale(1.035) !important; }
}

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

/* ==================== каталог /slots: .game_list .game_ (оверлей .info: название, DEMO, провайдер, кнопка .go) ==================== */
/* карточка: как на главной — подъём, кольцо по внутреннему краю (псевдоэлемент наследует скругление карточки), затемнение */
html body .game_list .game_ {
  -webkit-tap-highlight-color: transparent !important;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1) !important;
  box-shadow: none !important;
  outline: none !important;
}
html body .game_list .game_:hover,
html body .game_list .game_:focus-within {
  transform: translateY(-3px) scale(1.04) !important;
  z-index: 6 !important;
}
html body .game_list .game_:active {
  transform: translateY(-1px) scale(1.015) !important;
  transition-duration: .12s !important;
}
html body .game_list .game_ .game_image img {
  filter: none !important;
  transition: filter .35s ease !important;
}
html body .game_list .game_:hover .game_image img,
html body .game_list .game_:focus-within .game_image img,
html body .game_list .game_:active .game_image img {
  filter: brightness(.84) saturate(1.06) !important;
}
html body .game_list .game_::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(255, 220, 60, 1);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 7;
}
html body .game_list .game_:hover::after,
html body .game_list .game_:focus-within::after,
html body .game_list .game_:active::after { opacity: 1; }

/* оверлей: без подложки и без текста (название и провайдер уже нарисованы на обложке) */
html body .game_list .game_ .info {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  transition: opacity .22s ease !important;
  z-index: 5 !important;
}
html body .game_list .game_ .info:before,
html body .game_list .game_ .info::before { background: transparent !important; content: none !important; display: none !important; }
html body .game_list .game_ .info .title,
html body .game_list .game_ .info .title3 { display: none !important; }
/* кнопка play: жёлтый круг с треугольником и пульсирующим кольцом */
html body .game_list .game_ .info .go {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #ffe66d 0%, #ffc400 100%) !important;
  box-shadow: 0 10px 26px -6px rgba(255, 196, 0, .65), 0 2px 6px rgba(0, 0, 0, .35) !important;
  transform: translate(-50%, -50%) scale(.55);
  opacity: 0;
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease !important;
  pointer-events: none !important;
}
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 #111827;
  transform: translate(-40%, -50%);
  background: none;
}
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(255, 212, 38, .8);
  opacity: 0;
  pointer-events: none;
}
html body .game_list .game_:hover .info .go,
html body .game_list .game_:focus-within .info .go,
html body .game_list .game_:active .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.5s ease-out .15s infinite; }
/* 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, .45) !important;
  border-radius: 999px !important;
  background: rgba(10, 14, 24, .62) !important;
  color: #fff !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: rgba(255, 212, 38, .95) !important; color: #111827 !important; border-color: transparent !important; }
@media (max-width: 768px) {
  html body .game_list .game_ .info .go { width: 46px !important; height: 46px !important; }
  html body .game_list .game_ .info .go::before { border-width: 8px 0 8px 14px; }
}
@media (max-width: 480px) {
  html body .game_list .game_ .info .go { width: 40px !important; height: 40px !important; }
  html body .game_list .game_ .info .go::before { border-width: 7px 0 7px 12px; }
  html body .game_list .game_:hover,
  html body .game_list .game_:focus-within { transform: translateY(-2px) scale(1.035) !important; }
}
@media (prefers-reduced-motion: reduce) {
  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,
  html body .game_list .game_::after { transition: none !important; }
  html body .game_list .game_:hover,
  html body .game_list .game_:focus-within,
  html body .game_list .game_:active { transform: none !important; }
  html body .game_list .game_ .info .go::after { animation: none !important; }
}