/* ---- NUEVA CABECERA ---- */
.nueva-cabecera {
    position: sticky; /* si quieres que quede fija arriba al hacer scroll */
    top: 0;
    z-index: 50;
    padding: 12px 16px 20px;
    background: radial-gradient(circle at top, #3b29ff 0, #080822 55%, #020111 100%);
}

/* slider de proveedores */
.nueva-cabecera__providers {
    margin-bottom: 12px;
}

.providers-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.providers-scroll::-webkit-scrollbar {
    display: none;
}

.provider-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10, 13, 40, 0.9);
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.provider-pill__img {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    object-fit: cover;
}
.provider-pill__icon {
    font-size: 13px;
}
.provider-pill.is-active {
    background: linear-gradient(90deg, #a347e0 10%, #d860e5 90%);
    box-shadow: 0 0 18px rgba(204, 0, 255, 0.65);
}




.section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 32px !important; /* ajusta a gusto */
  margin-bottom: 18px !important;
  background: transparent !important;
}

.section-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
}

.see-more-button {
  margin-left: auto !important;
}


    
/* ====== BLOQUES APOCALIPSIS (FALOPA) ====== */

.apoc-games-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin:24px 0 12px 0;
}
.apoc-games-header__icon{
    height:30px;
    width:auto;
}
.apoc-games-header__title{
    font-size:1.25rem;
    font-weight:700;
}
.apoc-games__more{
    margin-left:auto;
    background: linear-gradient(90deg, #a347e0 10%, #d860e5 90%);
    color:#ffe34b;
    border:none;
    padding:6px 18px;
    border-radius:14px;
    cursor:pointer;
    font-weight:600;
    font-size:.95rem;
}

/* Grid general */
.apoc-games-list__wrap{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

/* Cada juego */
.apoc-game-item-wrap{
    float:none !important;
}

/* Ocultos por defecto */
.apoc-game-item--hidden{
    display:none !important;
}

/* DESKTOP: 7 por fila */
@media (min-width: 901px){
    .apoc-game-item-wrap{
        width: calc(100% / 8 - 14px);
    }
}

/* MÓVIL: 3 por fila (2 filas = 6 juegos iniciales) */
@media (max-width: 900px){
    .apoc-game-item-wrap{
        width: calc((100% - 32px) / 3);
    }
}
/* =========================================
   UTILIDADES ANGULAR (ORIGINALES)
========================================= */
@charset "UTF-8";
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak,
.ng-hide:not(.ng-hide-animate) {
    display: none !important;
}
ng\:form {
    display: block;
}
.ng-animate-shim {
    visibility: hidden;
}
.ng-anchor {
    position: absolute;
}

/* =========================================
   POPUP VERIFICACIÓN DE EDAD
========================================= */
#age-verification-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(18, 6, 32, 0.88);
  backdrop-filter: blur(2px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}
.age-verification-popup {
  background: linear-gradient(135deg, #1b0037 60%, #23054b 100%);
  border-radius: 24px;
  box-shadow: 0 0 32px 8px #c730f5a0, 0 2px 16px 4px #00000088;
  padding: 56px 36px 28px 36px;
  min-width: 340px;
  max-width: 96vw;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.age-verification-dog {
  width: 130px;
  height: auto;
  margin-top: -105px;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 32px #c730f5cc);
  user-select: none;
  pointer-events: none;
}
.age-verification-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.age-verification-title {
  color: #fff;
  font-size: 1.35rem;
  font-weight: bold;
  margin: 16px 0 10px 0;
  letter-spacing: .5px;
  text-shadow: 0 2px 10px #c730f5bb;
}
.age-verification-question {
  color: #d3f9fd;
  font-size: 1.07rem;
  margin-bottom: 24px;
  text-align: center;
  font-weight: 400;
}
.age-verification-question .age-highlight {
  color: #ffe34b;
  font-weight: bold;
  text-shadow: 0 2px 10px #ffd90099;
}
.age-verification-buttons {
  display: flex;
  gap: 18px;
}
.age-verification-buttons button {
  padding: 11px 36px;
  border-radius: 22px;
  border: none;
  outline: none;
  background: linear-gradient(90deg, #c730f5 20%, #8930ff 80%);
  color: #fff;
  font-size: 1.05rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.17s, filter 0.15s;
  box-shadow: 0 0 8px #c730f5cc;
  text-shadow: 0 2px 10px #8930ff66;
}
.age-verification-buttons button#age-no {
  background: #292141;
  color: #e0d7f7;
  box-shadow: 0 0 4px #8930ff44;
  border: 2px solid #382062;
}
.age-verification-buttons button:hover {
  filter: brightness(1.15) drop-shadow(0 0 6px #c730f588);
}
@media (max-width: 520px) {
  .age-verification-popup {
    padding: 30px 8vw 18px 8vw;
    min-width: 0;
  }
  .age-verification-dog {
    width: 95px;
    margin-top: -65px;
  }
  .age-verification-title {
    font-size: 1.1rem;
  }
  .age-verification-buttons button {
    padding: 10px 18px;
    font-size: 1rem;
  }
}

/* =========================================
   BANNER "SEMANA DE LOS CAMPEONES" (MOBILE)
========================================= */
.champions-banner-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #37236d 60%, #2a1457 100%);
  border-radius: 20px;
  padding: 8px 20px 8px 16px;
  margin: 18px 0 8px 0;
  box-shadow: 0 2px 12px #240d5d33;
  font-family: inherit;
  font-weight: bold;
  font-size: 1.15rem;
  letter-spacing: .2px;
  color: #fff;
  overflow: hidden;
  min-height: 52px;
  border: 2px solid #7030ea66;
}
.champions-banner-mobile__icon {
  width: 36px;
  height: 36px;
  margin-right: 9px;
  filter: drop-shadow(0 2px 7px #8659e955);
}
.champions-banner-mobile__text {
  flex: 1;
  text-align: center;
  font-style: italic;
  font-weight: bold;
  font-size: 1.65rem;
  text-shadow: 0 1px 8px #0006;
  white-space: nowrap;
  margin-left: 0;
}
.champions-banner-mobile__trophy {
  width: 66px;
  height: 66px;
  margin-left: 11px;
  filter: drop-shadow(0 1px 6px #fff9);
}
@media (min-width: 768px) {
  .champions-banner-mobile {
    display: none !important;
  }
}

/* =========================================
   SLIDER DE VIDEOS
========================================= */
.hero-slider {
  width: 100%;
  aspect-ratio: 1154/356;
  background: #21033a;
  border-radius: 24px;
  box-shadow: 0 0 32px 8px #c730f5a0, 0 2px 16px 4px #00000088;
  border: 3px solid rgba(69, 12, 116, 0.20);
  overflow: hidden;
  min-height: 180px;
  position: relative;
  display: flex;
  align-items: stretch;
}
.hero-slider-track {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(.4,1,.3,1);
}
.hero-slider-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #18022b;
}
.hero-slider-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: inherit;
  display: block;
  background: #18022b;
  pointer-events: none;
  max-width: none;
  max-height: none;
}
@media (max-width: 768px) {
  .hero-slider {
    aspect-ratio: 1154/356;
    min-height: 120px;
  }
}

/* =========================================
   TARJETAS MOBILE (SLOTS / CASINO)
========================================= */
@media (min-width: 801px) {
  .mobile-cards-section {
    display: none;
  }
}
@media (max-width: 800px) {
  .mobile-cards-section {
    display: flex;
    gap: 14px;
    margin: 22px 0 8px 0;
    justify-content: center;
    padding: 0 8px;
  }
  .mobile-card {
    background: linear-gradient(135deg, #230a38 85%, #6a37c2 120%);
    border-radius: 18px;
    border: 2px solid #6336d1;
    box-shadow: 0 4px 16px 0 #00000036;
    overflow: visible;
    position: relative;
    min-width: 148px;
    flex: 0 0 48%;
    padding: 16px 12px 18px 16px;
    display: flex;
    align-items: flex-end;
  }
  .mobile-card-content {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
    min-height: 78px;
  }
  .mobile-card-title {
    color: #fff;
    font-weight: 700;
    font-size: 2.35rem;
    line-height: 1.1em;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 8px #3e008799;
  }
  .mobile-card-desc {
    color: #ecd6ff;
    font-size: 0.97rem;
    font-weight: 400;
    line-height: 1.12em;
    text-shadow: 0 1px 4px #15012b66;
  }
  .mobile-card-icon {
    width: 82px;
    height: auto;
    position: absolute;
    right: -25px;
    bottom: 28px;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 3px 14px #0007);
    animation: casino-bounce 2.8s ease-in-out infinite alternate;
    will-change: transform;
  }
  .mobile-card:nth-child(2) .mobile-card-icon {
    animation: casino-bounce-2 3.2s ease-in-out infinite alternate;
  }
}
@keyframes casino-bounce {
  0%   { transform: translateY(0px) rotate(-5deg) scale(1);}
  35%  { transform: translateY(-5px) rotate(-2deg) scale(1.06);}
  65%  { transform: translateY(3px) rotate(2deg) scale(1.02);}
  100% { transform: translateY(0px) rotate(0deg) scale(1);}
}
@keyframes casino-bounce-2 {
  0%   { transform: translateY(0px) rotate(4deg) scale(1);}
  33%  { transform: translateY(-8px) rotate(2deg) scale(1.08);}
  66%  { transform: translateY(5px) rotate(-1deg) scale(1.03);}
  100% { transform: translateY(0px) rotate(0deg) scale(1);}
}

/* =========================================
   TARJETAS DESKTOP (JETX / CRASH / ETC)
========================================= */
@media (max-width: 800px) {
  .desktop-cards-section {
    display: none !important;
  }
}
.desktop-cards-section {
  display: flex;
  gap: 22px;
  margin: 30px 0 0 0;
  justify-content: center;
  align-items: stretch;
  padding: 0 22px;
}
.desktop-card {
  position: relative;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  border-radius: 18px;
  border: 2px solid #6336d1;
  box-shadow: 0 4px 16px 0 #00000036;
  min-width: 310px;
  width: 24vw;
  max-width: 330px;
  aspect-ratio: 2.5/1;
  overflow: visible;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  transition: box-shadow 0.2s;
}
.desktop-card:hover {
  box-shadow: 0 0 32px 8px #c730f5a0, 0 2px 16px 4px #00000099;
  z-index: 2;
}
.desktop-card-icon {
  position: absolute;
  left: 32px;
  bottom: 12px;
  width: 160px;
  height: auto;
  filter: drop-shadow(0 3px 18px #0007);
  z-index: 3;
  pointer-events: none;
  transition: transform 0.3s;
}
.desktop-card:hover .desktop-card-icon {
  transform: scale(1.07) rotate(-7deg);
}
.desktop-card-btn {
  background: linear-gradient(90deg,#d352ff 0,#884aff 100%);
  color: #fff;
  font-weight: bold;
  font-size: 1.15rem;
  border: none;
  border-radius: 32px;
  padding: 8px 32px;
  margin: 0 26px 22px 0;
  box-shadow: 0 2px 10px #0003;
  cursor: pointer;
  z-index: 4;
  transition: background 0.2s;
}
.desktop-card-btn:hover {
  background: linear-gradient(90deg,#a547db 0,#5229ac 100%);
}

/* =========================================
   MENÚ PROVEEDORES MOBILE (NUEVO)
========================================= */

/* Contenedor de la lista de proveedores */
.providers__panel-list {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  overflow-x: auto;
  list-style: none;
}

/* Cada item */
.providers__item {
  flex: 0 0 auto;
}

/* El "botón" de proveedor: icono + texto al lado */
.providers__link {
  display: inline-flex !important;
  flex-direction: row !important;      /* nombre al lado del logo */
  align-items: center;
  justify-content: center;
  gap: 6px;

  min-width: 64px;
  padding: 8px 10px;
  border-radius: 16px;
  background: #21033f;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

/* Icono */
.providers__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.providers__icon-img {
  display: block;
  max-width: 32px;
  max-height: 32px;
}

/* Texto */
.providers__name {
  display: inline-block !important;   /* para que no ocupe toda la línea */
  white-space: nowrap;
}

/* Hover */
.providers__link:hover {
  background: linear-gradient(135deg, #8430f2, #a15bd4);
  box-shadow: 0 0 12px #c730f566;
  transform: translateY(-1px);
}

.providers-mobile {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  overflow-x: auto;
  background: #21033a36;
  padding: 8px 0 4px 0;
  box-shadow: 0 2px 16px 4px #00000020;
  position: sticky;
  top: 0;
  z-index: 21;
}
.providers-mobile__list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 8px;
  margin: 0;
  list-style: none;
}
.providers-mobile__item {
  flex: 0 0 auto;
  position: relative;
}
.providers-mobile__link,
.providers-mobile__all {
  display: flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  color: #fff;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
}
.providers-mobile__link:hover,
.providers-mobile__all:hover {
  background: #350059;
}
.providers-mobile__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 7px;
  background: #1b00371f;
}
.providers-mobile__dropdown {
  position: absolute;
  left: 0;
  top: 110%;
  background: #1b0037;
  padding: 8px;
  border-radius: 12px;
  z-index: 120;
  min-width: 180px;
  box-shadow: 0 2px 12px #0006;
  display: none;
}
.providers-mobile__dropdown.show {
  display: block;
}
.providers-mobile__dropdown li {
  margin-bottom: 4px;
}
.providers-mobile__dropdown li:last-child {
  margin-bottom: 0;
}
.providers-mobile__name {
  font-size: 13px;
  letter-spacing: .1px;
  white-space: nowrap;
}

/* Botón "Todos" con corona */
.providers-mobile__all--crown {
  background: linear-gradient(90deg, #c730f5 30%, #8930ff 100%);
  color: #fff;
  font-weight: bold;
  box-shadow: 0 2px 8px #c730f540;
  border: none;
  position: relative;
  transition: background 0.2s, filter 0.18s;
}
.providers-mobile__all--crown:hover {
  filter: brightness(1.15) drop-shadow(0 0 8px #c730f5bb);
}
.crown-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 3px;
  color: #ffe34b;
  font-size: 17px;
  filter: drop-shadow(0 2px 4px #ffd90088);
  line-height: 1;
}

@media (min-width: 768px) {
  .providers-mobile {
    display: none !important;
  }
}

/* =========================================
   MENÚ PROVEEDORES DESKTOP (ORIGINAL)
========================================= */
.providers {
  display: none;
}
@media (min-width: 768px) {
  .providers {
    display: flex !important;
  }
}


/* =========================================
   TÍTULOS DE SECCIÓN / CONTENEDORES
   (para slots, jokers, live, poker, crash)
========================================= */

.section-title i,
.section-title svg {
  font-size: 1.4rem;
}
.section-header .btn-ver-mas{
  flex: 0 0 auto;
  margin-left: 12px; /* opcional */
  white-space: nowrap;
}

/* Contenedor genérico de botones de proveedores */

/* === SLIDER HORIZONTAL DE PROVEEDORES (UNO SOLO PARA TODO) === */

.provider-buttons-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.provider-buttons-wrapper::-webkit-scrollbar {
    display: none;
}

/* Contenedor interno de botones */
.provider-buttons {
    display: flex;
    gap: 8px;
}

/* Botón de proveedor: logo redondo + texto al lado */
.provider-button {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: row !important;  /* forzar logo izq, texto der */
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    color: #ffffff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease;
}


/* Logo dentro del botón */
.provider-button img {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

/* Texto del proveedor */
.provider-button span {
    display: inline-block;
}

/* Estado activo (similar a los pills de "Todos") */
.provider-button.is-active {
    background: linear-gradient(90deg, #ff43ff, #ff6b9f);
    box-shadow: 0 0 18px rgba(255, 0, 170, 0.65);
    border-color: transparent;
}

/* Hover general */
.provider-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(255, 0, 170, 0.35);
}

/* Responsive: botones un poco más chicos en móvil */

/* =========================================
   BLOQUES APOCALIPSIS / GRID DE JUEGOS
========================================= */


/* =========================================
   GRID DE JUEGOS GENERALES (games-container-*)
========================================= */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}
@media (max-width: 768px) {
  .games-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card base */
.game-item {
  position: relative;
}
.game-item__block {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #230a38 85%, #6a37c2 120%);
  border: 2px solid #6336d1;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}
.game-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease-out, filter 0.25s ease-out;
}

/* Aspect ratio 1:1 asegurado en los bloques apoc y list */
.apoc-game-item-wrap .game-item__block,
.games-grid .game-item__block {
    aspect-ratio: 1 / 1;
}

/* Hover efecto mini-zoom */
.game-item__block:hover .game-item__img {
  transform: scale(1.05);
  filter: brightness(1.05);
}

/* Botón "JUGAR" overlay */
.game-button {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #ffb347 0%, #ff6b6b 100%);
  color: #1a0731;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 18px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 2px 8px #0008;
}
.game-item__block:hover .game-button {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* Título debajo de la card */
.game-item__panel {
  margin-top: 0px;
}
.game-item__panel-title {
  font-size: 11px;
  font-weight: 500;
  color: #e9e4ff;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botón "Ver Más" general */
.see-more-wrap {
  text-align: center;
}
.see-more-button {
  margin: 14px auto 0;
  display: inline-block;
  padding: 8px 22px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
    background: linear-gradient(90deg, #a347e0 10%, #d860e5 90%);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 1px 6px #0004;
  transition: filter 0.18s, transform 0.1s;
}
.see-more-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* =========================================
   MENÚ FLOTANTE MÓVIL (BOTTOM NAV)
========================================= */
.floating-menu-wow {
  background: linear-gradient(90deg, #2e0946ff 10%, #3a024eff 90%);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 9999;
}
.floating-menu-wow .menu-btn {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 8px 0;
  position: relative;
  z-index: 1;
  min-width: 0;
}
.floating-menu-wow .menu-btn .menu-icon-img {
  width: 34px;
  height: 34px;
  margin-bottom: 2px;
  filter: drop-shadow(0 0 6px #a480ff) drop-shadow(0 0 10px #ec74ff40);
  animation: glowViolet 1.3s infinite alternate;
  transition: filter 0.2s;
}
@keyframes glowViolet {
  from { filter: drop-shadow(0 0 4px #a480ff) drop-shadow(0 0 7px #c858ff33);}
  to   { filter: drop-shadow(0 0 16px #ff8fff) drop-shadow(0 0 24px #fff2);}
}
.floating-menu-wow .menu-btn span {
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 2px 10px #23034d88;
  letter-spacing: 0.01em;
  margin-top: 2px;
}

/* Logo central flotante */
.floating-menu-wow .menu-logo-central {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 10;
  top: -28px;
  flex: 0 0 74px;
  height: 74px;
  background: none !important;
  padding: 0;
}
.floating-menu-wow .menu-logo-central img {
  width: 66px;
  height: 99px;
  object-fit: cover;
  display: block;
  margin-bottom: -25px;
  filter: drop-shadow(0 0 10px #ac54ff) drop-shadow(0 0 24px #fff4);
  animation: glowVioletLogo 1.5s infinite alternate;
}
@keyframes glowVioletLogo {
  from { filter: drop-shadow(0 0 10px #ac54ff) drop-shadow(0 0 20px #fff2);}
  to   { filter: drop-shadow(0 0 32px #e285ff) drop-shadow(0 0 38px #fff8);}
}
@media (min-width: 800px) {
  .floating-menu-wow {
    display: none;
  }
}

/* =========================================
   FOOTER
========================================= */
.footer-section {
    background-color: black;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    padding: 95px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.footer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.footer-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.footer-block {
    flex: 1;
    text-align: center;
    padding: 10px;
}
.footer-logo {
    width: 100px;
    margin-bottom: 10px;
}
.footer-logo-degraded {
    width: 250px;
    margin-bottom: 10px;
}
.footer-copyright {
    font-size: 0.9rem;
    margin-bottom: 20px;
}
.footer-language-button {
    background-color: #00f0ff;
    color: #000;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
}
.footer-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.footer-links {
    list-style: none;
    padding: 0;
}
.footer-links li {
    margin-bottom: 5px;
}
.footer-links a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}
.footer-links a:hover {
    color: #00f0ff;
}
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
    }
    .footer-block {
        display: none;
    }
    .footer-block:first-child {
        display: block;
    }
    .footer-logo {
        width: 180px;
    }
    .footer-language-button {
        padding: 8px 16px;
    }
}



    /* ======================== SECCIONES GENERALES ======================== */
    /* ======================== ESTILOS DE LOS TÍTULOS ======================== */
.section-title {
    font-size: 22px;
    font-weight: 700;
    text-align: left;
    margin-top: 15px;
    color: #fff;
    position: relative; /* 🔑 necesario para ubicar ::after */
    display: inline-block; /* solo ocupa lo del texto */
    padding-left: 20px; 
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* 🔥 Subrayado eléctrico */
.section-title::after {
    content: "";
    position: absolute;
    left: 20px; /* mismo padding que el texto */
    bottom: -8px; /* separación debajo del texto */
    width: calc(100% - 20px); /* ancho igual al texto visible */
    height: 3px;
    background: linear-gradient(90deg, #a347e0 10%, #d860e5 90%);
    box-shadow: 0 0 10px #a347e0;
    border-radius: 2px;
}

/* ✨ Animación de brillo */
@keyframes glow {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

/* ======================== ICONOS PARA CADA SECCIÓN ======================== */
.section-title i {
    font-size: 32px;
    color: #ffffffff;
}

/* ======================== RESPONSIVE ======================== */
@media (max-width: 768px) {
    .section-title {
        font-size: 18px;
        padding-left: 15px; /* ajusta también en móvil */
    }

    .section-title i {
        font-size: 16px;
    }

    .section-title::before,
    .section-title::after {
        width: 30px;
    }
}

        /* ======================== CUADRÍCULA DE JUEGOS ======================== */



        /* ======================== TARJETAS DE JUEGOS ======================== */
        /* Skeleton Loader */
        .skeleton-loader {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 14px;
            width: 100%;
        }
        @media (max-width: 768px) {
            .skeleton-loader {
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
            }
        }
        .skeleton-card {
            aspect-ratio: 1 / 1;
            background: linear-gradient(135deg, #230a38 85%, #6a37c2 120%);
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            border: 2px solid #6336d1;
            box-shadow: 0 4px 8px rgba(0,0,0,0.4);
        }
        .skeleton-card::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.02) 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
        }
        @keyframes skeleton-loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .game-item {
            border-radius: 0;
            overflow: visible;
            text-align: center;
            padding: 0;
            position: relative;
            background: transparent;
            box-shadow: none;
            border: none;
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        
        .game-item:hover {
            transform: translateY(-6px);
            z-index: 5;
        }

.game-item img {
  width: 100%;        /* solo ancho */
  aspect-ratio: 1 / 1; /* mantiene cuadrado */
  object-fit: cover;   /* recorta para llenar */
  display: block;
  transition: transform 0.5s ease, filter 0.3s ease;
}

.game-item:hover img {
    transform: scale(1.1);
    filter: brightness(1.1);
}

        .game-item__panel {
            position: relative;
            width: 100%;
            background: transparent;
            padding: 6px 2px 0 2px;
            pointer-events: none;
        }
        .game-item__panel-title {
            font-size: 12px;
            color: #ecd6ff;
            text-shadow: none;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 500;
            text-align: center;
        }

        /* ======================== BOTÓN "JUGAR" ======================== */

    .game-button {
        opacity: 0; /* 🔥 Hace que el botón sea invisible */
        pointer-events: auto; /* ✅ Permite que siga funcionando */
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .game-item:hover .game-button {
        opacity: 1;
        transform: translateX(-50%) translateY(-10px);
    }

        /* Efecto al pasar el cursor */
        .game-button:hover {
            transform: translateX(-50%) scale(1.1);
            box-shadow: 0 0 15px rgba(218, 65, 103, 0.8);
        }

        /* ======================== RESPONSIVE ======================== */
        @media (max-width: 768px) {
            .game-button {
                font-size: 12px; /* Tamaño más pequeño en móviles */
                padding: 6px 12px;
            }
        }

        /* ======================== BOTÓN "VER MÁS" ======================== */
/* Botón "Ver más" estilo Acceder */
.see-more-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 22px;
  min-width:160px;
  border-radius: 12px;             /* pill */
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(135deg, #a347e0 0%, #7c2ae8 100%);
  color:#fff;
  font-weight:700;
  letter-spacing:.3px;
  text-transform:none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 20px rgba(179, 14, 255, 0.35);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.see-more-button:hover{
  transform:translateY(-2px);
  filter: brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 12px 26px rgba(218,65,103,.45);
}

.see-more-button:active{
  transform:translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 6px 16px rgba(218,65,103,.32);
}

.see-more-button:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 transparent;
}

        /* ======================== ESTILOS ESPECÍFICOS PARA CADA SECCIÓN ======================== */
        #slots-section{
        text-align:center;
        margin-top:1px;
        padding:20px 0;
        border-radius:15px;

        /* mismo fondo que en el header */
    background: radial-gradient(ellipse at 70% 50%, #2e0856 0%, #23003a 70%, #15011f 100%);

  background-repeat: no-repeat;
        background-repeat:no-repeat;
        background-size:cover; /* opcional; podés quitarlo si querés */
        }

    #live-casino-section {
    text-align:center;
    margin-top:1px;
    padding:20px 0;
    border-radius:15px;

    /* mismo fondo que en el header */
    background: radial-gradient(ellipse at 70% 50%, #2e0856 0%, #23003a 70%, #15011f 100%);

  background-repeat: no-repeat;
    background-repeat:no-repeat;
    background-size:cover; /* opcional; podés quitarlo si querés */
    }

    #crash-section {
    text-align:center;
    margin-top:1px;
    padding:20px 0;
    border-radius:15px;

    /* mismo fondo que en el header */
    background: radial-gradient(ellipse at 70% 50%, #2e0856 0%, #23003a 70%, #15011f 100%);

  background-repeat: no-repeat;
    background-repeat:no-repeat;
    background-size:cover; /* opcional; podés quitarlo si querés */
    }

    #jokers-section {
    text-align:center;
    margin-top:1px;
    padding:20px 0;
    border-radius:15px;

    /* mismo fondo que en el header */
    background: radial-gradient(ellipse at 70% 50%, #2e0856 0%, #23003a 70%, #15011f 100%);

  background-repeat: no-repeat;
    background-repeat:no-repeat;
    background-size:cover; /* opcional; podés quitarlo si querés */
    }

    #sports-section {
    text-align:center;
    margin-top:1px;
    padding:20px 0;
    border-radius:15px;

    /* mismo fondo que en el header */
    background: radial-gradient(ellipse at 70% 50%, #2e0856 0%, #23003a 70%, #15011f 100%);

  background-repeat: no-repeat;
    background-repeat:no-repeat;
    background-size:cover; /* opcional; podés quitarlo si querés */
    }

    #poker-section {
    text-align:center;
    margin-top:1px;
    padding:20px 0;
    border-radius:15px;

    /* mismo fondo que en el header */
    background: radial-gradient(ellipse at 70% 50%, #2e0856 0%, #23003a 70%, #15011f 100%);

  background-repeat: no-repeat;
    background-repeat:no-repeat;
    background-size:cover; /* opcional; podés quitarlo si querés */
    }

        @media (max-width: 768px) {
            .games-grid {
                grid-template-columns: repeat(3, 1fr); /* 🔥 Fuerza 3 columnas en tablets */
                gap: 10px; /* Espacio entre juegos */
            }
        }

        .games-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 14px;
            width: 100%;
        }
            /* ✅ Ajustar imágenes para que ocupen el ancho completo */
            .game-item img {
                width: 100%; /* Ocupar el 100% del contenedor */
                height: auto;
                object-fit: cover;
            }

            /* ✅ Hacer que el botón "JUGAR" se posicione mejor en móviles */
            .game-button {
                font-size: 14px; /* Mantener el tamaño */
                padding: 10px 16px;
                bottom: 20px; /* Ajustar la posición */
            }

            /* ✅ Ajustar el margen de la sección */
            #slots-section, 
            #live-casino-section,
            #crash-section,
            #bingo-section,
            #sports-section,
            #roulette-section {
                padding: 10px 0; /* Menos espacio en móviles */
            }

        .scroll-button {
            display: none; /* 🔥 Ocultar botones de desplazamiento en móviles */
        }
    }
.wsp-fab{
  position:fixed; right:20px; bottom:20px;
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0a2a6b 0%, #da4167 55%, #77112aff 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 0 0 2px rgba(218,65,103,.15);
  z-index:9999; transition:transform .2s ease, box-shadow .2s ease;
}
.wsp-fab:hover{ transform:scale(1.08); box-shadow:0 12px 28px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.2); }

.wsp-ico{ width:56%; height:56%; fill:#ffffff; }

@media (max-width:768px){
  .wsp-fab{ width:52px; height:52px; right:14px; bottom:72px; }
  .wsp-ico{ width:58%; height:58%; }
}

    /* ✅ Asegurar que se vea bien en móviles */
    @media (max-width: 768px) {
        .whatsapp-button {
            width: 50px;  /* Tamaño más pequeño en móviles */
            height: 50px;
            bottom: 45px; /* Menos distancia desde abajo */
            right: 15px;  /* Menos distancia desde la derecha */
        }
    }
        /* 🔥 1. Eliminar el desplazamiento lateral */
    html, body {
        width: 100%;
        overflow-x: hidden !important;  /* 🚨 Bloquea el desplazamiento horizontal */
        box-sizing: border-box;
    }

    /* 🔥 2. Ajustar los contenedores principales */
    .carcass__body, .main-content, .contain {  
  background: transparent;
  background-repeat: no-repeat;
  background-size: cover;       /* opcional */
  max-width: 1900px;
  margin: 0 auto;
 
        max-width: 100% !important;
        overflow-x: hidden !important;
    }


    /* 🔥 4. Evitar que el .whatsapp-button cause problemas */
    .whatsapp-button {
        max-width: 60px;
        max-height: 60px;
        right: 2px !important;
        bottom: 80px !important;
    }

    /* 🔥 5. Asegurar que los elementos flex no se expandan más de lo debido */
    .games-list__wrap, .games-grid {
        max-width: 100%;
        flex-wrap: wrap;
    }

    /* 🔥 6. Evitar que algún padding o margin cause problemas */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }




    /* === Sport Banner ======================================================= */
.sport-banner {
    width: 92%;
    margin: 0 auto;          /* centra el bloque si hay padding global */
}

/* El enlace envuelve toda la imagen (así la imagen también es clickeable) */
.sport-banner__link {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(132, 48, 242, 0.3);
    transition: transform 0.3s ease-in-out,
                box-shadow 0.3s ease-in-out;
}

/* Efecto hover (zoom + glow) */
.sport-banner__link:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(132, 48, 242, 0.8);
}

/* Imagen a ancho completo, mantiene proporción */
.sport-banner__img {
    width: 100%;
    height: 300;
    display: block;
    object-fit: cover;   /* recorta si hace falta para llenar */
}

/* Botón centrado abajo */
.sport-banner__btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #8430f2, #a15bd4);
    color: #fff;
    padding: 12px 26px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(56, 11, 161, 0.3);
    pointer-events: none;   /* el clic va al <a>, no al <span> */
}

/* Opcional: agrandá el botón al pasar el mouse */
.sport-banner__link:hover .sport-banner__btn {
    transform: translateX(-50%) scale(1.05);
}
    /* Ocultar los botones de paginación y el texto de información */
    .prev-button,
    .next-button,
    [id^="pagination-info"] {
        display: inline-block !important; /* Oculta los elementos sin posibilidad de sobrescribir */
    }
    /* Estilos personalizados para los botones de paginación */
    .prev-button, .next-button {
        background: linear-gradient(90deg, #8b48ff, #5433ff); /* Degradado violeta */
        color: white; /* Texto blanco */
        font-weight: bold;
        padding: 10px 20px;
        border-radius: 20px; /* Bordes redondeados */
        text-decoration: none; /* Evita el subrayado del enlace */
        border: none;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        display: inline-block; /* Asegura que se comporten como botones */
        margin: 5px;
    }

    /* Efecto hover */
    .prev-button:hover, .next-button:hover {
        background: linear-gradient(90deg, #5433ff, #8b48ff); /* Invertimos el gradiente */
        box-shadow: 0px 0px 10px rgba(139, 72, 255, 0.7); /* Sombra luminosa */
    }

    /* Efecto para cuando están desactivados */
    .prev-button.disabled, .next-button.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Asegurar la alineación correcta */
    .pagination-container {
        display: flex;
        justify-content: center; /* Centrar los botones */
        align-items: center;
        margin-top: 15px;
    }
    @media (max-width: 768px) {
        /* Asegura que el overlay sea visible */
        .game-item {
            position: relative; /* IMPORTANTE */
        }

    .game-item__overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0); /* 🔥 Transparente por defecto */
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0; /* 🔥 Invisible por defecto */
        transition: opacity 0.3s ease-in-out, background 0.3s ease-in-out;
    }

    /* ✅ Cuando pasás el mouse en PC */
    .game-item:hover .game-item__overlay {
        opacity: 1;
        background: rgba(0, 0, 0, 0.5); /* 🔥 Oscurece solo en hover */
    }

    /* ✅ Para móviles: Cuando se toca */
    @media (max-width: 768px) {
        .game-item:active .game-item__overlay {
            opacity: 1;
            background: rgba(0, 0, 0, 0.5);
        }
    }

        .game-item__actions {
            display: flex !important;
            justify-content: center;
            align-items: center;
        }

        .game-button {
            display: block !important;
            font-size: 14px;
            padding: 8px 12px;
            background: linear-gradient(135deg, #8430f2, #a15bd4);
            color: white;
            border-radius: 5px;
            
        }
    }
    /* Efecto de luz violeta desplazándose sobre la barra */

    /* Animación de la luz desplazándose horizontalmente */
    @keyframes movingLight {
        0% {
            left: -100%;
        }
        100% {
            left: 100%;
        }
    }

    /* Contenedor del logo */
    .central-logo {
        position: fixed; /* Fija el logo */
        bottom: 25px; /* Más abajo para superponerse ligeramente a la barra */
        left: 50%;
        transform: translateX(-50%);
        z-index: 10000; /* Encima de la barra */
    }

    /* Imagen del logo con efecto de iluminación */
    .central-logo img {
        width: 80px; /* Ajusta el tamaño del logo */
        height: auto;
        filter: drop-shadow(0 0 10px rgba(132, 48, 242, 0.8)); /* Iluminación violeta */
        animation: glowEffect 2s infinite alternate; /* Efecto de brillo */
        transition: transform 0.3s ease;
    }

    /* Efecto de brillo pulsante */
    @keyframes glowEffect {
        0% {
            filter: drop-shadow(0 0 10px rgba(132, 48, 242, 0.6));
        }
        100% {
            filter: drop-shadow(0 0 20px rgba(132, 48, 242, 1));
        }
    }

    /* Efecto hover opcional */
    .central-logo img:hover {
        transform: scale(1.1);
    }


/* Contenedor del hero */
.hero-video{
  position:relative;
  width:100%;
  overflow:hidden;
}

/* El video rellena el contenedor y se centra */
.hero-video__el{
  position:absolute;
  inset:0;               /* top/right/bottom/left = 0 */
  width:100%;
  height:100%;
  object-fit:cover;      /* sin deformar, recorta */
  object-position:center center; /* centra el recorte */
  display:block;
}

/* Desktop: 75% de la pantalla */
@media (min-width:1024px){
  .hero-video{ height:75vh; }
}

/* Móvil: ajustá a gusto (ej. 80vh o 100vh) */
@media (max-width:1023px){
  .hero-video{ height:40vh; } /* cambia a 70/80/90vh si querés */
}

    /* Habilitar desplazamiento horizontal para las listas de juegos */
    .games-list__wrap {
        display: flex; /* Coloca los elementos en línea */
        overflow-x: auto; /* Habilita el desplazamiento horizontal */
        scroll-behavior: smooth; /* Desplazamiento suave */
        gap: 10px; /* Espaciado entre juegos */
        padding: 10px; /* Espacio interno */
    }

    /* Ocultar barras de desplazamiento en algunos navegadores para un diseño limpio */
    .games-list__wrap::-webkit-scrollbar {
        display: none;
    }
    .games-list__wrap {
        -ms-overflow-style: none; /* Para IE y Edge */
        scrollbar-width: none; /* Para Firefox */
    }

    /* Estilo de los juegos individuales dentro de la lista */
    .games-list__wrap > div {
        min-width: 150px; /* Ancho mínimo de cada juego */
        height: auto; /* Ajuste automático */
        background: rgba(255, 255, 255, 0.1); /* Fondo semitransparente */
        border: 2px solid rgba(132, 48, 242, 0.8); /* Borde decorativo */
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease;
        flex-shrink: 0; /* Evita que los juegos se redimensionen */
    }

    /* Efecto hover */
    .games-list__wrap > div:hover {
        transform: scale(1.05);
    }

    /* Botones de desplazamiento */
    .scroll-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(132, 48, 242, 0.8);
        color: #fff;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .scroll-left {
        left: -20px; /* Ajusta según el diseño */
    }
    .scroll-right {
        right: -20px; /* Ajusta según el diseño */
    }

    .scroll-button:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    }

    @media (max-width: 768px) {
        .games-list__wrap > div {
            min-width: 120px; /* Reduce el ancho en móviles */
        }
        .scroll-button {
            width: 30px;
            height: 30px;
        }
    }
        /* Sección principal con estilo de cuadrícula */
    /* Sección principal con estilo de cuadrícula */
    .dual-image-section {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales */
        gap: 15px; /* Espacio entre los contenedores */
        padding: 20px;
    }

    /* Contenedor individual de cada imagen */
    .image-container {
        position: relative;
        overflow: visible; /* Permite que el PNG sobresalga */
        border-radius: 10px; /* Bordes redondeados */
        box-shadow: 0 4px 15px rgba(132, 48, 242, 0.3); /* Efecto de sombra inicial */
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }

    /* Efecto de zoom al pasar el cursor */
    .image-container:hover {
        transform: scale(1.05); /* Efecto zoom */
        box-shadow: 0 0 20px rgba(132, 48, 242, 0.8); /* Efecto de resplandor */
    }

    /* Imagen principal */
    .zoom-image {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        border-radius: 10px;
    }

    /* PNG superpuesto */
    .overlay-image {
        position: absolute;
        top: 10%; /* Ajusta para que sobresalga del contenedor */
        left: 30%;
        transform: translateX(-50%);
        pointer-events: none; /* Permite que el cursor pase a través */
        z-index: 2;
    }

    .overlay-png {
        width: 75%; /* PNG más grande que el contenedor */
        transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
        filter: drop-shadow(0 0 10px rgba(132, 48, 242, 0.6)); /* Efecto luminoso inicial */
    }

    /* Movimiento y brillo del PNG al pasar el cursor */
    .image-container:hover .overlay-png {
        transform: translateY(-20px); /* Movimiento hacia arriba */
        filter: drop-shadow(0 0 20px rgba(132, 48, 242, 0.8)); /* Más brillo */
    }

    /* Botón dentro del contenedor */
    .image-button {
        position: absolute;
        bottom: 0px;
        left: 80%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #8430f2, #a15bd4); /* Degradado moderno */
        color: white;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 30px; /* Botón redondeado */
        box-shadow: 0 4px 10px rgba(56, 11, 161, 0.3);
        z-index: 3;
        transition: all 0.3s ease;
    }

    /* Efecto del botón al pasar el cursor */
    .image-button:hover {
        background: linear-gradient(135deg, #6e1cd8, #8430f2);
        transform: translateX(-50%) scale(1.1);
        box-shadow: 0 0 15px rgba(132, 48, 242, 0.8);
    }

    /* Diseño responsivo para móviles */
    @media (max-width: 768px) {
        .dual-image-section {
            grid-template-columns: repeat(2, 1fr); /* 2 columnas en móviles */
            gap: 10px;
            padding: 10px;
        }

        .overlay-png {
            width: 120%;
            top: -10%; /* Ajuste del PNG en móviles */
            animation: floatOverlay 3s infinite alternate ease-in-out; /* Animación automática */
        }


        .image-button {
            font-size: 12px; /* Botón más pequeño */
            padding: 6px 12px;
        }
    }

    /* Animación automática del PNG en móviles */
    @keyframes floatOverlay {
        0% {
            transform: translateY(0);
            filter: drop-shadow(0 0 10px rgba(132, 48, 242, 0.6));
        }
        100% {
            transform: translateY(-10px); /* Movimiento hacia arriba */
            filter: drop-shadow(0 0 15px rgba(132, 48, 242, 0.8));
        }
    }

    /* Contenedor principal */
    .games-section-container {
        margin-bottom: 20px;
        padding: 10px;
    }

    /* Cabecera de las secciones */
    .header-section {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(132, 48, 242, 0.8);
        box-shadow: 0 0 10px rgba(132, 48, 242, 0.6);
        border-radius: 10px;
        position: relative;
        overflow: hidden;
    }

    .header-section__divider {
        position: relative;
        width: 100%;
        height: 2px;
        background-color: rgba(132, 48, 242, 0.8);
        box-shadow: 0 0 10px rgba(132, 48, 242, 0.6);
    }

    .header-section__label {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(45deg, #8430f2, #c77df7);
        color: white;
        font-weight: bold;
        font-size: 12px;
        border-radius: 25px;
        text-transform: uppercase;
        box-shadow: 0 0 15px rgba(132, 48, 242, 0.6);
        animation: buttonGlow 3s infinite alternate;
        text-align: center;
    }

    @keyframes buttonGlow {
        0% {
            box-shadow: 0 0 15px rgba(132, 48, 242, 0.6);
        }
        100% {
            box-shadow: 0 0 20px rgba(132, 48, 242, 1);
        }
    }

    /* Contenedor de juegos */
    .custom-games-wrap {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 10px;
        position: relative;
    }

    .custom-games-wrap::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: -1;
    }

    /* Tarjeta de juego */
    .custom-game-item {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        transition: transform 0.3s ease;
        background: #222;
    }

    .custom-game-item:hover {
        transform: scale(1.05);
    }

    .custom-game-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .special-games-section {
        padding: 20px 0;
        background-color: #000;
        /* Fondo negro */
    }

    .special-games-wrap {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        /* 5 juegos por fila */
        grid-gap: 10px;
        /* Espacio entre los elementos */
        width: 100%;
    }

    .special-game-item {
        position: relative;
        overflow: hidden;
    }

    .special-game-item a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .special-game-item-img {
        width: 100%;
        height: auto;
        object-fit: cover;
        /* Asegura que la imagen cubra completamente el contenedor */
    }

    .special-game-item__panel {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.7);
        /* Fondo semi-transparente */
        color: #fff;
        /* Color del texto */
        text-align: center;
        padding: 10px;
    }

    .special-game-item__title {
        margin: 0;
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
    }

    /* Ajustes para pantallas peque09as (celulares) */
    @media (max-width: 768px) {
        .special-games-wrap {
            grid-template-columns: 1fr;
            /* Cambia a una columna en pantallas peque09as */
        }

        .special-game-item__panel {
            padding: 8px;
            /* Ajusta el padding en pantallas peque09as */
        }

        .special-game-item__title {
            font-size: 0.875rem;
            /* Reduce el tama09o del texto en pantallas peque09as */
        }
    }
                .dual-image-section {
        display: flex;
        width: 100%;
        justify-content: space-between;
        gap: 10px;
        margin-top: 20px;
        /* Separacin del bloque anterior */
    }

    .image-container:hover {
        border-color: #00f0ff;
        /* Color del borde luminoso */
    }

    .zoom-image {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease;
    }

    .image-container:hover .zoom-image {
        transform: scale(1.1);
        /* Efecto de zoom */
    }

    .image-button {
        position: absolute;
        bottom: 0px;
        padding: 10px 20px;
        background-color: #00f0ff;
        /* Color del botn */
        color: #000;
        text-transform: uppercase;
        font-weight: bold;
        border-radius: 5px;
        transition: background-color 0.3s ease, color 0.3s ease;
        text-align: center;
        text-decoration: none;
    }

    .left-button {
        left: 80px;
    }

    .right-button {
        right: -20px;
    }

    .image-button:hover {
        background-color: #00bbcc;
        /* Cambio de color al pasar el cursor */
        color: #fff;
    }

    /* Ajustes para pantallas peque09as (celulares) */
    @media (max-width: 768px) {
        .dual-image-section {
            flex-direction: column;
            /* Cambia la disposicin a una columna */
            gap: 20px;
            /* Aumenta el espacio entre las imgenes */
        }

        .image-container {
            width: 100%;
            /* Las imgenes ocupan el 100% del ancho */
        }

        .image-button {
            padding: 8px 16px;
            /* Botones ms peque09os en pantallas peque09as */
            font-size: 0.875rem;
            /* Disminuye el tama09o del texto del botn */
        }
    }

/* Fondo estilo imagen */
background:
  /* leve brillo desde arriba */
  linear-gradient(0deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%),
  /* gradiente principal */
  radial-gradient(140% 100% at 50% 0,
    #051733ff 0%,
    #0d1520ff 32%,
    #020913ff 58%,
    #071a2e 100%);
background-repeat: no-repeat;
background-size: cover;

   

    /* Efecto de superposición para mejor contraste */
    .footer-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Superposición negra translúcida */
        z-index: -1; /* Envía la superposición detrás del contenido */
    }

    .footer-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .footer-block {
        flex: 1;
        text-align: center;
        padding: 10px;
    }

    .footer-logo {
        width: 100px;
        /* Tama09o del logo */
        margin-bottom: 10px;
    }

    .footer-logo-degraded {
        width: 250px;
        /* Tama09o del logo degradado */
        margin-bottom: 10px;
    }

    .footer-copyright {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .footer-language-button {
        background: linear-gradient(90deg, rgb(149, 16, 79) 0%, rgb(145, 6, 62) 10%, rgb(185, 10, 103) 25%, rgb(239, 43, 200) 50%, rgb(185, 10, 103) 75%, rgb(145, 6, 62) 90%, rgb(149, 16, 79) 100%);
        color: #ffffffff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
        font-weight: bold;
        text-transform: uppercase;
    }

    .footer-title {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .footer-links {
        list-style: none;
        padding: 0;
    }

    .footer-links li {
        margin-bottom: 5px;
    }

    .footer-links a {
        color: #fff;
        text-decoration: none;
        transition: color 0.3s;
    }

    .footer-links a:hover {
        color: #00f0ff;
    }

    @media (max-width: 768px) {
        .footer-container {
            flex-direction: column;
            align-items: center;
        }

        .footer-block {
            display: none;
        }

        .footer-block:first-child {
            display: block;
        }

        .footer-logo {
            width: 80px;
        }

        .footer-language-button {
            padding: 8px 16px;
        }
    }
    .category-list-container {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    /* Lista de categorías con desplazamiento horizontal */
    .category-list {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        white-space: nowrap;
        gap: 10px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
    }

    /* Ocultar scrollbar en navegadores web */
    .category-list::-webkit-scrollbar {
        display: none;
    }

    .section-list-container {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    /* Lista de categorías con desplazamiento horizontal */
    .section-list {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        white-space: nowrap;
        gap: 10px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
    }

    /* Ocultar scrollbar en navegadores web */
    .section-list::-webkit-scrollbar {
        display: none;
    }

    /* Botones de navegación */
    .category-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.2);
        border: none;
        font-size: 24px;
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .section-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.2);
        border: none;
        font-size: 24px;
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Posicionamiento de los botones */
    .category-btn.left {
        left: 10px;
    }

    .category-btn.right {
        right: 10px;
    }

    /* Efecto hover */
    .category-btn:hover {
        background: rgba(255, 255, 255, 0.4);
    }

    /* Botones de categorías */
    .category-item {
        flex-shrink: 0;
        padding: 8px 15px;
        background: linear-gradient(90deg, #8b48ff, #5433ff);
        border-radius: 20px;
        color: white;
        font-weight: bold;
        font-size: 12px;
        text-transform: uppercase;
        text-decoration: none;
        transition: all 0.3s ease;
        cursor: pointer;
        box-shadow: 0 0 5px rgba(139, 72, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.3);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-width: 110px;
    }

    /* Efecto hover */
    .category-item:hover {
        background: linear-gradient(90deg, #5433ff, #8b48ff);
        box-shadow: 0px 0px 10px rgba(139, 72, 255, 0.9);
        transform: scale(1.05);
    }

    .section-item {
        flex-shrink: 0;
        padding: 8px 15px;
        background: linear-gradient(90deg, #8b48ff, #5433ff);
        border-radius: 20px;
        color: white;
        font-weight: bold;
        font-size: 12px;
        text-transform: uppercase;
        text-decoration: none;
        transition: all 0.3s ease;
        cursor: pointer;
        box-shadow: 0 0 5px rgba(139, 72, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.3);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-width: 110px;
    }

    /* Efecto hover */
    .section-item:hover {
        background: linear-gradient(90deg, #5433ff, #8b48ff);
        box-shadow: 0px 0px 10px rgba(139, 72, 255, 0.9);
        transform: scale(1.05);
    }
    /* Ajustes para móviles */
    @media (max-width: 768px) {
        .category-list {
            gap: 3px;
        }

        .category-item {
            font-size: 10px;
            padding: 6px 12px;
            min-width: 100px;
        }
        .section-list {
            gap: 3px;
        }

        .section-item {
            font-size: 10px;
            padding: 6px 12px;
            min-width: 100px;
        }
    }
        .jungle-games-section {
    background: #1b1b1b;
    padding: 20px;
    border-radius: 8px;
    }

    .jungle-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

    .jungle-game-card {
        background: #222;
        padding: 10px;
        border-radius: 5px;
        text-align: center;
        color: white;
    }

    .jungle-game-img {
        max-width: 100px;
        border-radius: 5px;
    }

    .jungle-game-title {
        font-size: 14px;
        margin-top: 5px;
    }

    .jungle-btn {
        background: #ff6600;
        color: white;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        border-radius: 5px;
    }

    .jungle-btn:hover {
        background: #ff4500;
    }


        .game-search-wrapper {
            position: relative;
            max-width: 480px;
            margin: 18px auto 16px auto;
            padding: 0 10px;
            z-index: 50;
        }

        .game-search-box {
            display: flex;
            align-items: center;
            background: rgba(20, 7, 38, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 999px;
            padding: 4px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            transition: all 0.3s ease;
        }
        .game-search-box:focus-within {
            border-color: #a347e0;
            box-shadow: 0 0 20px rgba(163, 71, 224, 0.4);
        }

        .game-search-input {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            color: #fff;
            padding: 10px 14px;
            font-size: 14px;
        }

        .game-search-input::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        .game-search-button {
            border: none;
            background: linear-gradient(135deg, #a347e0 0%, #d860e5 100%);
            border-radius: 999px;
            padding: 9px 18px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 700;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: .04em;
            box-shadow: 0 6px 16px rgba(195, 0, 255, 0.55);
            transition: filter .15s ease, transform .1s ease;
            white-space: nowrap;
        }

        .game-search-button:hover {
            filter: brightness(1.08);
            transform: translateY(-1px);
        }

        .game-search-results {
            display: none;
            position: absolute;
            top: 110%;
            left: 10px;
            right: 10px;
            background: linear-gradient(90deg, #000000 10%, #68456e85 90%);            border-radius: 12px;
            max-height: 350px;
            overflow-y: auto;
            box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65);
            padding: 6px 0;
        }

        .game-search-result-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 12px;
            cursor: pointer;
            transition: background 0.15s ease;
        }

        .game-search-result-item:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .game-search-result-item img {
            width: 90px;
            height: 90px;
            object-fit: cover;
            border-radius: 6px;
        }

        .game-search-result-item .game-name {
            color: #fff;
            font-size: 13px;
            line-height: 1.3;
        }

        .game-search-empty {
            padding: 8px 12px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 13px;
        }

        @media (max-width: 768px) {
            .game-search-wrapper {
                max-width: 100%;
            }

            .game-search-button {
                padding: 8px 14px;
                font-size: 12px;
            }
        }

        .flex-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Título a la izq, botón a la der */
  gap: 20px;
  width: 100%;
}

.section-title {
  margin: 0;
  padding-left: 0; /* Si quieres que el ícono esté pegado */
}


    

.section-header{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
}

.section-title{
  flex:1 1 auto !important;   /* ← CLAVE */
  display:flex !important;
  align-items:center !important;
}

.see-more-button{
  flex:0 0 auto !important;
  margin-left:0 !important;
}


/* ===== RELACIÓN DE ASPECTO 1:1 PARA LAS CARÁTULAS ===== */
.apoc-game-item-wrap .game-item__block {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;         /* Mantiene cuadrado 1:1 */
    overflow: hidden;
    border-radius: 8px;          /* opcional */

}

.apoc-game-item-wrap .game-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* Cubre el cuadro sin deformar */
    object-position: center center;
    display: block;
}
/* Localiza y reemplaza este bloque en tu CSS */
/* Fuerza al contenedor a repartir el espacio */
.section-header {
    display: flex !important;
    flex-direction: row !important; /* Asegura que título y botón estén en la misma línea */
    align-items: center !important;
    justify-content: space-between !important; /* Envía el botón al extremo derecho */
    width: 100% !important;
    padding: 10px 15px !important;
    box-sizing: border-box !important;
}

/* Asegura que el título no empuje demasiado */
.section-title {
    flex: 0 1 auto !important;
    margin: 0 !important;
}

/* Estilo específico para mover el botón a la derecha */
.section-header .see-more-button {
    margin-left: auto !important; /* Empuja hacia la derecha */
    margin-right: 0 !important;
    position: relative !important; /* Evita que flote sobre otros elementos */
    top: 0 !important;
    transform: none !important; /* Quita posibles centrados previos */
}



.floating-menu-wow {
  position: fixed; 
  left: 0; right: 0; bottom: 0;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 9999;
  background: rgba(20, 5, 40, 0.9);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 5px; /* Safe area */
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}

.floating-menu-wow .menu-btn {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 8px 0;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.floating-menu-wow .menu-btn .menu-icon-img {
  width: 34px;
  height: 34px;
  margin-bottom: 2px;
  filter: drop-shadow(0 0 6px #a480ff) drop-shadow(0 0 10px #ec74ff40);
  animation: glowViolet 1.3s infinite alternate;
  transition: filter 0.2s;
}
@keyframes glowViolet {
  from { filter: drop-shadow(0 0 4px #a480ff) drop-shadow(0 0 7px #c858ff33);}
  to   { filter: drop-shadow(0 0 16px #ff8fff) drop-shadow(0 0 24px #fff2);}
}

.floating-menu-wow .menu-btn span {
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 2px 10px #23034d88;
  letter-spacing: 0.01em;
  margin-top: 2px;
}

/* Logo central FLOTANTE */
.floating-menu-wow .menu-logo-central {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 10;
  top: -28px;
  flex: 0 0 74px;
  height: 74px;
  background: none !important;
  padding: 0;
}
.floating-menu-wow .menu-logo-central img {
  width: 66px;
  height: 99px;
  object-fit: cover;
  display: block;
  margin-bottom: -25;
  filter: drop-shadow(0 0 10px #ac54ff) drop-shadow(0 0 24px #fff4);
  animation: glowVioletLogo 1.5s infinite alternate;
}
@keyframes glowVioletLogo {
  from { filter: drop-shadow(0 0 10px #ac54ff) drop-shadow(0 0 20px #fff2);}
  to   { filter: drop-shadow(0 0 32px #e285ff) drop-shadow(0 0 38px #fff8);}
}

/* Solo móviles */
@media (min-width: 800px) {
  .floating-menu-wow { display: none; }
}
    .footer-section {
        background: linear-gradient(to bottom, #120524 0%, #000000 100%);
        background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
        background-position: top; /* Centra la imagen */
        background-repeat: no-repeat; /* Evita que la imagen se repita */
        padding: 60px 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        color: #fff; /* Color del texto blanco */
        position: relative; /* Para posibles efectos adicionales */
        overflow: hidden; /* Asegura que nada se salga del contenedor */
        border-top: 1px solid rgba(255,255,255,0.05);
    }

    /* Efecto de superposición para mejor contraste */
    .footer-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; /* Envía la superposición detrás del contenido */
    }

    .footer-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        flex-wrap: wrap;
        gap: 30px;
    }

    .footer-block {
        flex: 1;
        text-align: center;
        padding: 10px;
        min-width: 200px;
    }

    .footer-logo {
        width: 100px;
        /* Tama09o del logo */
        margin-bottom: 10px;
    }

    .footer-logo-degraded {
        width: 250px;
        /* Tama09o del logo degradado */
        margin-bottom: 10px;
    }

    .footer-copyright {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }

    .footer-language-button {
        background-color: #00f0ff;
        color: #000;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
        font-weight: bold;
        text-transform: uppercase;
    }

    .footer-title {
        font-size: 1.2rem;
        margin-bottom: 10px;
        color: #a347e0;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .footer-links {
        list-style: none;
        padding: 0;
    }

    .footer-links li {
        margin-bottom: 5px;
    }

    .footer-links a {
        color: #fff;
        text-decoration: none;
        transition: color 0.3s;
    }

    .footer-links a:hover {
        color: #00f0ff;
    }

    @media (max-width: 768px) {
        .footer-container {
            flex-direction: column;
            align-items: center;
            padding-bottom: 80px; /* Space for floating menu */
        }

        .footer-block {
            display: block; /* Show all blocks in mobile too, modernized */
            width: 100%;
            margin-bottom: 20px;
        }


        .footer-logo {
            width: 180px;
        }

        .footer-language-button {
            padding: 8px 16px;
        }


/* =========================================
   MOBILE PROVIDERS SHOWCASE (Dynamic)
========================================= */
#mobile-providers-showcase {
    display: none;
    padding: 10px 16px 40px;
    background: transparent;
    margin-top: 20px;
}

.mobile-provider-block {
    background: linear-gradient(145deg, #1e0b36 0%, #2a0e45 100%);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid rgba(163, 71, 224, 0.3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.mobile-provider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-provider-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-provider-logo img {
    height: 32px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.mobile-provider-vermas {
    background: linear-gradient(90deg, #a347e0 10%, #d860e5 90%);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(163, 71, 224, 0.4);
    transition: transform 0.2s, filter 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-provider-vermas:active {
    transform: scale(0.95);
    filter: brightness(0.9);
}

.mobile-provider-games {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.mobile-provider-game {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.mobile-game-img-wrap {
    aspect-ratio: 1/1;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #230a38 85%, #6a37c2 120%);
    border: 2px solid #6336d1;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    position: relative;
}

.mobile-game-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.mobile-game-img-wrap:active img {
    transform: scale(1.05);
}

.mobile-game-name {
    font-size: 10px;
    color: #ecd6ff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    padding: 0 2px;
}

/* =========================================
   MOBILE GAMES FULL LIST (Dynamic)
========================================= */
.mobile-showcase-close {
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 10px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
}

.mobile-games-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-games-back {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-games-title {
    font-size: 16px;
    font-weight: bold;
    color: #ffe34b;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.mobile-games-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}