/* Casino — Iconos de categorías Pro V2
   Reemplaza V1. No agrega cuadros ni nodos visuales extra. */

.casino-cat-v2 {
  --cat-gold: #e6bd55;
  --cat-green: #39d879;
  --cat-text: #cbd5e6;
  --cat-muted: #93a4bd;
  position: relative !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  color: var(--cat-text) !important;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease !important;
}

/* Oculta únicamente el icono original directo del mismo botón/enlace. */
.casino-cat-v2 > svg,
.casino-cat-v2 > i,
.casino-cat-v2 > [class*="icon" i]:not(.casino-cat-v2-label),
.casino-cat-v2 > [class*="fa-" i] {
  display: none !important;
}

.casino-cat-v2::before {
  content: "" !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 22px !important;
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

.casino-cat-v2[data-casino-cat-key="all"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='6' height='6' rx='1.2'/%3E%3Crect x='15' y='3' width='6' height='6' rx='1.2'/%3E%3Crect x='3' y='15' width='6' height='6' rx='1.2'/%3E%3Crect x='15' y='15' width='6' height='6' rx='1.2'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='6' height='6' rx='1.2'/%3E%3Crect x='15' y='3' width='6' height='6' rx='1.2'/%3E%3Crect x='3' y='15' width='6' height='6' rx='1.2'/%3E%3Crect x='15' y='15' width='6' height='6' rx='1.2'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.casino-cat-v2[data-casino-cat-key="slots"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='16' height='16' rx='2.5'/%3E%3Crect x='6.5' y='7' width='10' height='7' rx='1.2'/%3E%3Cpath d='M8 17h7M20 8h1.5v6H20M9 9.2h1.5M12 9.2h1.5M9 12h1.5M12 12h1.5'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='16' height='16' rx='2.5'/%3E%3Crect x='6.5' y='7' width='10' height='7' rx='1.2'/%3E%3Cpath d='M8 17h7M20 8h1.5v6H20M9 9.2h1.5M12 9.2h1.5M9 12h1.5M12 12h1.5'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.casino-cat-v2[data-casino-cat-key="cards"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='10' height='15' rx='2' transform='rotate(-7 9 12.5)'/%3E%3Crect x='10' y='4' width='10' height='15' rx='2' transform='rotate(7 15 11.5)'/%3E%3Cpath d='M15 8.2l1.5 1.8L18 8.2M16.5 10v3'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='10' height='15' rx='2' transform='rotate(-7 9 12.5)'/%3E%3Crect x='10' y='4' width='10' height='15' rx='2' transform='rotate(7 15 11.5)'/%3E%3Cpath d='M15 8.2l1.5 1.8L18 8.2M16.5 10v3'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.casino-cat-v2[data-casino-cat-key="live"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='3'/%3E%3Cpath d='M7.5 19c.4-3 2-4.5 4.5-4.5S16.1 16 16.5 19M5.3 6.5a7.2 7.2 0 0 0 0 5M18.7 6.5a7.2 7.2 0 0 1 0 5M2.8 4a10.8 10.8 0 0 0 0 10M21.2 4a10.8 10.8 0 0 1 0 10'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='3'/%3E%3Cpath d='M7.5 19c.4-3 2-4.5 4.5-4.5S16.1 16 16.5 19M5.3 6.5a7.2 7.2 0 0 0 0 5M18.7 6.5a7.2 7.2 0 0 1 0 5M2.8 4a10.8 10.8 0 0 0 0 10M21.2 4a10.8 10.8 0 0 1 0 10'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.casino-cat-v2[data-casino-cat-key="popular"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12.1 22c-4.4 0-7.4-3.3-7.4-8 0-3.8 1.5-7.5 4.2-10.9.9 2 1.4 4 1.2 5.8 1.8-1.1 3.1-3.2 3.8-6.1 3.5 3.5 5.4 6.8 5.4 10.9 0 5-3 8.3-7.2 8.3Zm-.1-2.4c1.7 0 2.9-1.2 2.9-3 0-1.6-.9-2.8-2.3-4.1-.3 1.1-.9 2-1.8 2.5 0-1.1-.4-2.1-1.1-3.1-.4 1.5-.7 3-.7 4.6 0 1.9 1.2 3.1 3 3.1Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12.1 22c-4.4 0-7.4-3.3-7.4-8 0-3.8 1.5-7.5 4.2-10.9.9 2 1.4 4 1.2 5.8 1.8-1.1 3.1-3.2 3.8-6.1 3.5 3.5 5.4 6.8 5.4 10.9 0 5-3 8.3-7.2 8.3Zm-.1-2.4c1.7 0 2.9-1.2 2.9-3 0-1.6-.9-2.8-2.3-4.1-.3 1.1-.9 2-1.8 2.5 0-1.1-.4-2.1-1.1-3.1-.4 1.5-.7 3-.7 4.6 0 1.9 1.2 3.1 3 3.1Z'/%3E%3C/svg%3E") !important;
}
.casino-cat-v2[data-casino-cat-key="roulette"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M18.4 5.6l-4.2 4.2M9.8 14.2l-4.2 4.2'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M18.4 5.6l-4.2 4.2M9.8 14.2l-4.2 4.2'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Barra lateral: icono lineal, sin caja vacía. */
.casino-cat-v2--sidebar {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  min-height: 46px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}
.casino-cat-v2--sidebar::before {
  width: 21px !important;
  height: 21px !important;
  color: var(--cat-muted) !important;
}
.casino-cat-v2--sidebar:hover {
  color: #fff !important;
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(230,189,85,.16) !important;
}
.casino-cat-v2--sidebar:hover::before {
  color: var(--cat-gold) !important;
}
.casino-cat-v2--sidebar.casino-cat-v2--active {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(57,216,121,.12), rgba(230,189,85,.04)) !important;
  border-color: rgba(57,216,121,.38) !important;
  box-shadow: inset 3px 0 0 var(--cat-green) !important;
}
.casino-cat-v2--sidebar.casino-cat-v2--active::before {
  color: var(--cat-gold) !important;
}

/* Franja horizontal: todos los ítems con icono, sin cuadros vacíos. */
.casino-cat-v2--main {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 92px !important;
  min-height: 76px !important;
  padding: 8px 14px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  text-align: center !important;
}
.casino-cat-v2--main::before {
  width: 26px !important;
  height: 26px !important;
  color: #9aaac3 !important;
}
.casino-cat-v2--main:hover {
  color: #fff !important;
  background: rgba(255,255,255,.025) !important;
  border-color: rgba(148,163,184,.12) !important;
  transform: translateY(-1px) !important;
}
.casino-cat-v2--main:hover::before {
  color: var(--cat-gold) !important;
}
.casino-cat-v2--main.casino-cat-v2--active {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(57,216,121,.10), rgba(9,18,34,.08)) !important;
  border-color: rgba(57,216,121,.34) !important;
  box-shadow: inset 0 -2px 0 var(--cat-green) !important;
}
.casino-cat-v2--main.casino-cat-v2--active::before {
  color: var(--cat-gold) !important;
}

.casino-cat-v2-strip {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(148,163,184,.22) transparent !important;
}

@media (max-width: 760px) {
  .casino-cat-v2-strip {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scroll-snap-type: x proximity !important;
    padding-bottom: 6px !important;
  }
  .casino-cat-v2--main {
    flex: 0 0 86px !important;
    min-width: 86px !important;
    scroll-snap-align: start !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .casino-cat-v2 { transition: none !important; }
}