/* ==================== RESET Y BASE ==================== */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

body, html {
  height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #000000;
  min-height: 100vh;
  color: #f0f0f0;
}

/* ==================== SCROLLBAR PERSONALIZADO ==================== */
/* Scrollbar para WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(20, 20, 30, 0.8);
  border-radius: 10px;
  border: 1px solid rgba(145, 70, 255, 0.2);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #9146FF 0%, #6441A5 100%);
  border-radius: 10px;
  border: 2px solid rgba(20, 20, 30, 0.8);
  box-shadow: 0 0 10px rgba(145, 70, 255, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a855f7 0%, #7c3aed 100%);
  box-shadow: 0 0 15px rgba(145, 70, 255, 0.5);
}

::-webkit-scrollbar-corner {
  background: rgba(20, 20, 30, 0.8);
}

/* Scrollbar para Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #9146FF rgba(20, 20, 30, 0.8);
}

/* ==================== MENÚ RADIAL FLOTANTE ==================== */
.radial-menu-container {
  position: fixed;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.radial-menu-container.visible {
  opacity: 1;
  pointer-events: auto;
}

.radial-trigger {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #1a1a2e, #0f0f1a);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
  box-shadow: 0 5px 30px rgba(145, 70, 255, 0.4),
              0 0 50px rgba(145, 70, 255, 0.15),
              inset 0 0 20px rgba(145, 70, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.radial-trigger:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 40px rgba(145, 70, 255, 0.6),
              0 0 70px rgba(145, 70, 255, 0.25),
              inset 0 0 25px rgba(145, 70, 255, 0.15);
}

.radial-trigger.active {
  box-shadow: 0 5px 30px rgba(255, 100, 100, 0.4),
              0 0 50px rgba(255, 100, 100, 0.15);
}

/* Anillo exterior giratorio */
.radial-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #9146FF;
  border-right-color: rgba(145, 70, 255, 0.5);
  animation: ringRotate 3s linear infinite;
}

.radial-trigger:hover .radial-ring {
  animation: ringRotate 1.5s linear infinite;
}

.radial-trigger.active .radial-ring {
  border-top-color: #ff6b6b;
  border-right-color: rgba(255, 107, 107, 0.5);
  animation: ringRotate 1s linear infinite reverse;
}

/* Anillo interior giratorio (dirección opuesta) */
.radial-ring-inner {
  position: absolute;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: #6441A5;
  border-left-color: rgba(100, 65, 165, 0.4);
  animation: ringRotate 2s linear infinite reverse;
}

.radial-trigger:hover .radial-ring-inner {
  animation: ringRotate 1s linear infinite reverse;
}

.radial-trigger.active .radial-ring-inner {
  border-bottom-color: #ff4757;
  border-left-color: rgba(255, 71, 87, 0.4);
}

/* Núcleo central brillante */
.radial-core {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #c084fc, #9146FF, #6441A5);
  box-shadow: 0 0 15px rgba(145, 70, 255, 0.8),
              0 0 30px rgba(145, 70, 255, 0.4);
  transition: all 0.3s ease;
}

.radial-trigger:hover .radial-core {
  box-shadow: 0 0 20px rgba(145, 70, 255, 1),
              0 0 40px rgba(145, 70, 255, 0.6);
  transform: scale(1.1);
}

.radial-trigger.active .radial-core {
  background: radial-gradient(circle at 40% 40%, #ff8a8a, #ff6b6b, #ff4757);
  box-shadow: 0 0 15px rgba(255, 107, 107, 0.8),
              0 0 30px rgba(255, 107, 107, 0.4);
}

@keyframes ringRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Efecto de pulso */
.radial-trigger::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(145, 70, 255, 0.2);
  animation: pulse 2s ease-in-out infinite;
}

.radial-trigger.active::before {
  background: rgba(255, 107, 107, 0.2);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 0; }
}

/* Menú radial */
.radial-menu {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 65px;
  height: 65px;
  pointer-events: none;
}

.radial-item {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(20, 20, 30, 0.95);
  border: 2px solid rgba(145, 70, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  bottom: 4px;
  left: 4px;
  opacity: 0;
  transform: scale(0);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition-delay: calc(var(--i) * 0.05s);
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.radial-item img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease, filter 0.3s ease;
  pointer-events: none;
}

.radial-item:hover {
  background: linear-gradient(145deg, #9146FF, #6441A5);
  border-color: #9146FF;
  box-shadow: 0 6px 30px rgba(145, 70, 255, 0.6);
}

.radial-item:hover img {
  transform: scale(1.1);
  filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

.radial-item-text {
  position: absolute;
  left: 62px;
  background: rgba(15, 15, 25, 0.95);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  pointer-events: none;
  border: 1px solid rgba(145, 70, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.radial-item:hover .radial-item-text {
  opacity: 1;
  transform: translateX(0);
}

/* Animación de entrar al portal SOLO al hacer clic */
.radial-item.entering-portal {
  animation: enterPortal 0.35s ease-in forwards !important;
}

@keyframes enterPortal {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(0) !important;
  }
}

/* Posiciones del menú radial - distribución en arco hacia la derecha */
.radial-menu.active .radial-item {
  opacity: 1;
  pointer-events: auto;
}

.radial-menu.active .radial-item:nth-child(1) {
  transform: translate(75px, -100px);
}

.radial-menu.active .radial-item:nth-child(2) {
  transform: translate(100px, -40px);
}

.radial-menu.active .radial-item:nth-child(3) {
  transform: translate(100px, 25px);
}

.radial-menu.active .radial-item:nth-child(4) {
  transform: translate(75px, 85px);
}

.radial-menu.active .radial-item:nth-child(5) {
  transform: translate(25px, 120px);
}

.radial-menu.active .radial-item:nth-child(6) {
  transform: translate(-30px, 130px);
}

/* Responsive menú radial */
@media (max-width: 768px) {
  .radial-menu-container {
    left: 20px;
  }
  
  .radial-trigger {
    width: 55px;
    height: 55px;
  }
  
  .radial-core {
    width: 16px;
    height: 16px;
  }
  
  .radial-item {
    width: 45px;
    height: 45px;
  }
  
  .radial-item img {
    width: 22px;
    height: 22px;
  }
  
  .radial-menu.active .radial-item:nth-child(1) {
    transform: translate(60px, -80px);
  }
  
  .radial-menu.active .radial-item:nth-child(2) {
    transform: translate(80px, -30px);
  }
  
  .radial-menu.active .radial-item:nth-child(3) {
    transform: translate(80px, 25px);
  }
  
  .radial-menu.active .radial-item:nth-child(4) {
    transform: translate(60px, 70px);
  }
  
  .radial-menu.active .radial-item:nth-child(5) {
    transform: translate(20px, 95px);
  }
  
  .radial-menu.active .radial-item:nth-child(6) {
    transform: translate(-25px, 100px);
  }
}

/* ==================== BOTONES INFERIORES ==================== */
.bottom-buttons {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.bottom-buttons.visible {
  opacity: 1;
  pointer-events: auto;
}

.bottom-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 20px;
  background: rgba(20, 20, 30, 0.9);
  border: 1px solid rgba(145, 70, 255, 0.3);
  border-radius: 8px;
  text-decoration: none;
  color: #cccccc;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  min-width: 180px;
}

.bottom-btn:hover {
  background: rgba(145, 70, 255, 0.2);
  border-color: rgba(145, 70, 255, 0.6);
  color: #ffffff;
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(145, 70, 255, 0.3);
}

.bottom-btn.logout-btn {
  border-color: rgba(255, 100, 100, 0.3);
}

.bottom-btn.logout-btn:hover {
  background: rgba(255, 100, 100, 0.2);
  border-color: rgba(255, 100, 100, 0.6);
  color: #ff6b6b;
  box-shadow: 0 4px 15px rgba(255, 100, 100, 0.3);
}

@media (max-width: 768px) {
  .bottom-buttons {
    bottom: 15px;
    left: 15px;
  }
  
  .bottom-btn {
    padding: 10px 16px;
    font-size: 12px;
    min-width: 150px;
  }
}

/* ==================== FUENTE PIXEL ART ==================== */
.pixel-font {
  font-family: 'Press Start 2P', cursive;
}

/* ==================== CANVAS WEBGL ==================== */
#galaxyCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: #000000;
}

/* ==================== CONTENEDOR PRINCIPAL ==================== */
.contenido-principal {
  background-color: rgba(220, 220, 220, 0.1);
  padding: 20px;
  border-radius: 8px;
  max-width: 800px;
  margin: 0 auto;
}

/* ==================== MENÚ LATERAL ==================== */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 70px;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  z-index: 1000;
  transition: width 0.3s ease, opacity 1.5s ease;
  opacity: 0;
  pointer-events: none;
}

.sidebar.visible {
  opacity: 1;
  pointer-events: auto;
}

.sidebar:hover {
  width: 250px;
  background: rgba(0, 0, 0, 0.5);
}

.sidebar-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 15px 20px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.sidebar-item.active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-left: 3px solid #4a9eff;
}

.sidebar-icon {
  min-width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: relative;
}

.sidebar-icon img {
  filter: brightness(0) invert(1);
  transition: all 0.3s ease;
}

.sidebar-item:hover .sidebar-icon img {
  filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

.sidebar-item.active .sidebar-icon img {
  filter: brightness(0) saturate(100%) invert(37%) sepia(93%) saturate(2500%) hue-rotate(250deg) brightness(100%) contrast(101%);
}

.sidebar-item.active:hover .sidebar-icon img {
  filter: brightness(0) saturate(100%) invert(37%) sepia(93%) saturate(2500%) hue-rotate(250deg) brightness(110%) contrast(101%) drop-shadow(0 0 8px rgba(145, 70, 255, 0.8));
}

.sidebar-item[data-section="sorteos"]:hover .icon-default {
  display: none;
}

.sidebar-item[data-section="sorteos"]:hover .icon-hover {
  display: block !important;
}

.sidebar-text {
  margin-left: 15px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 15px;
  font-weight: 500;
}

.sidebar:hover .sidebar-text {
  opacity: 1;
}

.sidebar-divider {
  width: 80%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 10px 0;
}

.sidebar-bottom {
  margin-top: auto;
}

.logout-btn {
  color: #ff6b6b !important;
}

.logout-btn:hover {
  background: rgba(255, 107, 107, 0.15) !important;
}

/* ==================== BOTÓN INICIAR (TWITCH) ==================== */
.btn-iniciar {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(145deg, rgba(100, 65, 165, 0.9), rgba(145, 70, 255, 0.95));
  border: 2px solid rgba(145, 70, 255, 0.8);
  border-radius: 8px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  z-index: 1001;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(145, 70, 255, 0.4);
  opacity: 0;
  pointer-events: none;
}

.btn-iniciar.visible {
  opacity: 1;
  pointer-events: auto;
}

.btn-iniciar:hover {
  background: linear-gradient(145deg, rgba(120, 75, 185, 1), rgba(165, 90, 255, 1));
  border-color: rgba(165, 90, 255, 1);
  box-shadow: 0 6px 25px rgba(145, 70, 255, 0.6);
  transform: translateY(-2px);
}

.btn-iniciar img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.btn-iniciar:active {
  transform: translateY(0);
}

/* ==================== AGUJERO NEGRO ==================== */
.blackhole {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle at center, 
    #1a1a1a 0%,
    #000000 30%,
    #2a2a2a 60%,
    #404040 80%,
    #505050 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 
    0 0 60px 30px rgba(80, 80, 80, 0.6),
    inset 0 0 80px rgba(255, 255, 255, 0.1);
  animation: pulsar 12s ease-in-out infinite;
  z-index: 10;
  transition: all 0.8s ease, box-shadow 3s ease;
  border: 2px solid rgba(150, 150, 150, 0.3);
}

.blackhole.pequeno {
  width: 150px;
  height: 150px;
  box-shadow: 
    0 0 30px 15px rgba(80, 80, 80, 0.4),
    inset 0 0 40px rgba(255, 255, 255, 0.08);
  animation: none;
}

.blackhole.oculto {
  opacity: 0;
  box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0);
}

.ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 180px;
  background: linear-gradient(to bottom, 
    transparent, 
    rgba(200, 200, 200, 0.9) 30%, 
    rgba(255, 255, 255, 1) 50%, 
    rgba(200, 200, 200, 0.9) 70%, 
    transparent);
  border-radius: 2px;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(0deg);
  filter: blur(1px);
  opacity: 0.9;
  z-index: 20;
  transition: opacity 0.5s ease;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.ray.oculto {
  opacity: 0;
}

@keyframes pulsar {
  0%, 100% { width: 370px; height: 370px; }
  50%      { width: 410px; height: 410px; }
}

/* ==================== TIENDA BOX ==================== */
.tienda-box {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 60px);
  height: calc(100vh - 40px);
  max-width: 1800px;
  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  opacity: 0;
  transition: opacity 1.5s ease;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 40px 20px 40px;
}

.tienda-box.visible {
  opacity: 1;
}

/* ==================== TÍTULO ARQUEADO - PIXEL ART ==================== */
.titulo-arqueado {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  flex-shrink: 0;
}

.titulo-arqueado svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.titulo-arqueado text {
  fill: #ffffff;
  font-size: clamp(20px, 2.8vw, 38px);
  font-family: 'Press Start 2P', cursive;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-anchor: middle;
  filter: drop-shadow(0 0 20px rgba(145, 70, 255, 0.8))
          drop-shadow(0 0 40px rgba(145, 70, 255, 0.5))
          drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.9));
}

/* ==================== CONTENIDO TIENDA ==================== */
.tienda-content {
  width: 100%;
  height: calc(100% - 80px);
  overflow-y: auto;
  padding: 5px 10px 10px 10px;
  display: none;
}

.tienda-box.visible .tienda-content {
  display: block;
  animation: fadeInContent 1s ease 0.5s both;
}

@keyframes fadeInContent {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== SECCIONES DE CONTENIDO ==================== */
.content-section {
  display: none;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 150px);
}

.content-section.active {
  display: block;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  padding: 20px 0;
  width: 100%;
}

.product-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 30px;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 180px;
}

.product-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.product-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

.product-price {
  color: #4a9eff;
  font-size: 28px;
  font-weight: bold;
}

/* ==================== PÁGINA DE INICIO ==================== */
.inicio-vertical-layout {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow-y: auto;
  padding: 20px;
}

.inicio-description-section {
  background: rgba(20, 20, 20, 0.8);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 20px;
  padding: 35px;
}

.inicio-section-title {
  font-size: 24px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid rgba(145, 70, 255, 0.3);
  padding-bottom: 15px;
  line-height: 1.4;
}

.inicio-description-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.inicio-text {
  font-size: 17px;
  line-height: 1.8;
  color: #cccccc;
}

.inicio-text strong {
  color: #9146FF;
  font-weight: 700;
}

.inicio-text-highlight {
  font-size: 18px;
  line-height: 1.8;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(145, 70, 255, 0.15), rgba(100, 65, 165, 0.15));
  border-left: 4px solid #9146FF;
  padding: 20px;
  border-radius: 12px;
  margin-top: 10px;
}

.inicio-text-highlight strong {
  color: #ffffff;
  font-weight: 700;
}

/* Foto de PGOD */
.inicio-photo-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.inicio-photo {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
}

.inicio-photo:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 60px rgba(145, 70, 255, 0.4);
}

/* Redes Sociales */
.inicio-socials-section {
  background: rgba(20, 20, 20, 0.8);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 20px;
  padding: 35px;
}

.inicio-socials-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
}

.inicio-social-btn {
  background: rgba(30, 30, 30, 0.9);
  border: 2px solid rgba(100, 100, 100, 0.3);
  border-radius: 15px;
  padding: 25px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  min-height: 120px;
  position: relative;
  overflow: hidden;
}

.inicio-social-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--social-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.inicio-social-btn:hover::before {
  opacity: 0.15;
}

.inicio-social-btn:hover {
  border-color: var(--social-color);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.inicio-social-btn img {
  width: 45px;
  height: 45px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.inicio-social-btn:hover img {
  transform: scale(1.1);
}

.inicio-social-btn span {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Colores por red social */
.twitch-btn {
  --social-color: #9146FF;
  --social-gradient: linear-gradient(135deg, #9146FF, #6441A5);
}

.youtube-btn {
  --social-color: #FF0000;
  --social-gradient: linear-gradient(135deg, #FF0000, #CC0000);
}

.instagram-btn {
  --social-color: #E4405F;
  --social-gradient: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.twitter-btn {
  --social-color: #1DA1F2;
  --social-gradient: linear-gradient(135deg, #1DA1F2, #0d8bd9);
}

.tiktok-btn {
  --social-color: #000000;
  --social-gradient: linear-gradient(135deg, #000000, #333333);
}

.discord-btn {
  --social-color: #5865F2;
  --social-gradient: linear-gradient(135deg, #5865F2, #4752C4);
}

.facebook-btn {
  --social-color: #1877F2;
  --social-gradient: linear-gradient(135deg, #1877F2, #0d65d9);
}

/* Video de YouTube */
.inicio-video-section {
  background: rgba(20, 20, 20, 0.8);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 20px;
  padding: 35px;
}

.inicio-video-container {
  width: 100%;
  height: 600px;
  background: rgba(10, 10, 10, 0.9);
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  border: 2px solid rgba(100, 100, 100, 0.3);
  margin-bottom: 20px;
}

.inicio-video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.visit-channel-link {
  display: inline-block;
  background: linear-gradient(135deg, #FF0000, #CC0000);
  color: #ffffff;
  padding: 15px 30px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
}

.visit-channel-link:hover {
  background: linear-gradient(135deg, #ff1a1a, #e60000);
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(255, 0, 0, 0.6);
}

/* ==================== SISTEMA DE NOTICIAS ==================== */
.news-section {
  display: none;
  width: 100%;
  height: 100%;
}

.news-section.active {
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.5s ease;
}

/* Filtros */
.filters-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}

.filter-select {
  background: rgba(60, 60, 60, 0.9);
  border: 1px solid rgba(150, 150, 150, 0.4);
  color: #ffffff;
  padding: 10px 35px 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
  min-width: 200px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

.filter-select:hover {
  background-color: rgba(70, 70, 70, 0.95);
  border-color: rgba(180, 180, 180, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.filter-select:focus {
  background-color: rgba(80, 80, 80, 0.98);
  border-color: rgba(200, 200, 200, 0.7);
  box-shadow: 0 0 15px rgba(150, 150, 150, 0.4);
}

.filter-select option {
  background: #3a3a3a;
  color: #ffffff;
  padding: 12px;
  font-size: 14px;
}

.filter-select option:hover {
  background: #4a4a4a;
}

/* Contenedor de noticias */
.news-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
  padding-right: 10px;
}

/* Tarjeta de noticia */
.news-card {
  background: rgba(30, 30, 30, 0.9);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 12px;
  padding: 30px;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 180px;
}

.news-card:hover {
  background: rgba(40, 40, 40, 0.95);
  border-color: rgba(150, 150, 150, 0.5);
  transform: translateX(5px);
}

.news-card.hidden {
  display: none;
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 15px;
}

.news-title-section {
  flex: 1;
}

.news-title {
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.4;
}

.news-category {
  display: inline-block;
  background: rgba(80, 80, 80, 0.6);
  color: #cccccc;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.news-subtitle {
  font-size: 17px;
  color: #cccccc;
  margin: 12px 0;
  font-weight: 500;
}

.news-description {
  color: #aaaaaa;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.news-footer {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 12px;
  color: #888888;
}

.news-views {
  display: flex;
  align-items: center;
  gap: 5px;
}

.news-author {
  color: #ff6b6b;
  font-weight: 500;
}

.news-date {
  color: #999999;
}

/* Paginación */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  padding: 15px;
}

.pagination-btn {
  background: rgba(60, 60, 60, 0.8);
  border: 1px solid rgba(150, 150, 150, 0.3);
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.pagination-btn:hover:not(:disabled) {
  background: rgba(80, 80, 80, 0.95);
  border-color: rgba(180, 180, 180, 0.5);
  transform: scale(1.1);
}

.pagination-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pagination-info {
  color: #cccccc;
  font-size: 14px;
  font-weight: 500;
}

/* ==================== RANKING ==================== */
.ranking-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 20px;
}

.ranking-header {
  background: rgba(40, 40, 40, 0.9);
  border: 1px solid rgba(150, 150, 150, 0.3);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
}

.ranking-header h2 {
  color: #ffffff;
  font-size: 28px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.4;
}

.ranking-header p {
  color: #aaaaaa;
  font-size: 16px;
}

.ranking-table-container {
  flex: 1;
  background: rgba(30, 30, 30, 0.9);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 500px;
  display: flex;
  flex-direction: column;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
}

.ranking-table thead {
  background: rgba(60, 60, 60, 0.9);
  position: sticky;
  top: 0;
  z-index: 10;
}

.ranking-table th {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 18px 25px;
  text-align: left;
  letter-spacing: 1px;
  border-bottom: 2px solid rgba(150, 150, 150, 0.3);
}

.ranking-table th:first-child {
  text-align: center;
  width: 80px;
}

.ranking-table tbody {
  background: rgba(30, 30, 30, 0.8);
}

.ranking-table tbody tr {
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(80, 80, 80, 0.2);
}

.ranking-table tbody tr:hover {
  background: rgba(50, 50, 50, 0.9);
  transform: scale(1.01);
}

.ranking-table td {
  color: #cccccc;
  font-size: 16px;
  padding: 18px 25px;
}

.rank-cell {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

.rank-1 {
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  font-size: 24px;
}

.rank-2 {
  color: #C0C0C0;
  text-shadow: 0 0 10px rgba(192, 192, 192, 0.5);
  font-size: 22px;
}

.rank-3 {
  color: #CD7F32;
  text-shadow: 0 0 10px rgba(205, 127, 50, 0.5);
  font-size: 20px;
}

.user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
  border: 2px solid rgba(150, 150, 150, 0.3);
}

.user-name {
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
}

.points-cell {
  color: #9146FF;
  font-weight: bold;
  font-size: 16px;
  text-align: right;
}

.level-badge {
  display: inline-block;
  background: rgba(100, 100, 100, 0.6);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* ==================== MARKET ==================== */
.user-profile-card {
  background: rgba(20, 20, 20, 0.8);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.user-profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 250px;
}

.user-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9146FF 0%, #6441A5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: bold;
  color: #ffffff;
  border: 3px solid rgba(145, 70, 255, 0.5);
  box-shadow: 0 4px 15px rgba(145, 70, 255, 0.3);
}

.user-profile-info {
  flex: 1;
}

.user-profile-name {
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 5px;
}

.user-profile-level {
  font-size: 14px;
  color: #aaaaaa;
}

.user-points-display {
  display: flex;
  align-items: center;
  gap: 15px;
  background: rgba(145, 70, 255, 0.1);
  border: 2px solid rgba(145, 70, 255, 0.3);
  border-radius: 15px;
  padding: 20px 30px;
  min-width: 250px;
}

.points-icon {
  font-size: 48px;
  filter: drop-shadow(0 0 10px rgba(145, 70, 255, 0.5));
}

/* Iconos de Pavos de Fortnite */
.pavos-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

.pavos-icon-small {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
}

.pavos-icon-tiny {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 5px;
}

.points-info {
  text-align: left;
}

.points-label {
  font-size: 12px;
  color: #aaaaaa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.points-value {
  font-size: 36px;
  font-weight: bold;
  color: #9146FF;
  line-height: 1;
}

.rewards-section {
  width: 100%;
}

.rewards-title {
  font-size: 24px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 25px;
  text-align: left;
  line-height: 1.4;
}

/* ==================== CARRUSEL DE PREMIOS ==================== */
.rewards-carousel-container {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  position: relative;
}

.carousel-arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(145, 70, 255, 0.2);
  border: 2px solid rgba(145, 70, 255, 0.5);
  color: #ffffff;
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.carousel-arrow:hover {
  background: rgba(145, 70, 255, 0.4);
  border-color: #9146FF;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(145, 70, 255, 0.5);
}

.carousel-arrow:active {
  transform: scale(0.95);
}

.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.rewards-carousel {
  flex: 1;
  overflow: hidden;
  border-radius: 15px;
}

.rewards-track {
  display: flex;
  gap: 20px;
  transition: transform 0.5s ease;
}

/* Tarjeta de premio del carrusel */
.reward-card {
  min-width: 280px;
  max-width: 280px;
  background: rgba(25, 25, 35, 0.95);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 15px;
  padding: 20px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.reward-card:hover {
  background: rgba(40, 40, 50, 0.95);
  border-color: rgba(145, 70, 255, 0.5);
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(145, 70, 255, 0.2);
}

.reward-image {
  width: 100%;
  height: 160px;
  background: linear-gradient(145deg, rgba(50, 50, 60, 0.8), rgba(30, 30, 40, 0.8));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.reward-image img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.reward-card:hover .reward-image img {
  transform: scale(1.1);
}

.reward-image-placeholder {
  font-size: 60px;
  opacity: 0.8;
}

.reward-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reward-name {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  line-height: 1.3;
}

.reward-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #888888;
}

.reward-stock-value {
  color: #4ade80;
  font-weight: 600;
}

.reward-stock-value.low {
  color: #fbbf24;
}

.reward-stock-value.out {
  color: #ef4444;
}

.reward-points {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #9146FF;
}

.reward-points .pavos-icon-tiny {
  width: 24px;
  height: 24px;
}

.reward-button {
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(145deg, #9146FF, #6441A5);
  border: none;
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: auto;
}

.reward-button:hover {
  background: linear-gradient(145deg, #a855f7, #7c3aed);
  transform: scale(1.02);
  box-shadow: 0 5px 20px rgba(145, 70, 255, 0.4);
}

.reward-button:active {
  transform: scale(0.98);
}

.reward-button.insufficient {
  background: rgba(100, 100, 100, 0.3);
  color: #666666;
  cursor: not-allowed;
}

.reward-button.insufficient:hover {
  background: rgba(100, 100, 100, 0.3);
  transform: none;
  box-shadow: none;
}

/* Indicadores del carrusel */
.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.carousel-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(100, 100, 100, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-indicator:hover {
  background: rgba(145, 70, 255, 0.5);
}

.carousel-indicator.active {
  background: #9146FF;
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(145, 70, 255, 0.5);
}

/* Responsive carrusel */
@media (max-width: 768px) {
  .rewards-carousel-container {
    gap: 10px;
  }
  
  .carousel-arrow {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  
  .reward-card {
    min-width: 250px;
    max-width: 250px;
  }
}

/* ==================== GAMBLING - SLOT MACHINE HORIZONTAL ==================== */
.gambling-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 10px;
}

.gambling-header {
  background: rgba(20, 20, 30, 0.9);
  border: 1px solid rgba(145, 70, 255, 0.3);
  border-radius: 15px;
  padding: 25px;
  text-align: center;
}

.gambling-header h2 {
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10px;
}

.gambling-header p {
  color: #aaaaaa;
  font-size: 15px;
}

.gambling-main-new {
  display: flex;
  gap: 25px;
  align-items: stretch;
}

/* Slot Machine Container */
.slot-machine-container {
  flex: 1;
  background: rgba(15, 15, 25, 0.95);
  border: 2px solid rgba(145, 70, 255, 0.4);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  position: relative;
}

/* Selector/Indicador central */
.slot-selector {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slot-selector-arrow {
  font-size: 30px;
  color: #9146FF;
  text-shadow: 0 0 15px rgba(145, 70, 255, 0.8);
  animation: pulse-arrow 1s ease-in-out infinite;
}

@keyframes pulse-arrow {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(5px); opacity: 0.7; }
}

/* Track wrapper con fades */
.slot-track-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 100px;
  margin-top: 40px;
  overflow: hidden;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(100, 100, 100, 0.3);
}

.slot-track-fade {
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.slot-track-fade.left {
  left: 0;
  background: linear-gradient(to right, rgba(15, 15, 25, 1), transparent);
}

.slot-track-fade.right {
  right: 0;
  background: linear-gradient(to left, rgba(15, 15, 25, 1), transparent);
}

/* Track de slots */
.slot-track {
  display: flex;
  gap: 10px;
  padding: 15px;
  transform: translateX(0px);
}

.slot-item {
  min-width: 85px;
  height: 70px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.slot-item.winner {
  transform: scale(1.1);
  box-shadow: 0 0 30px currentColor, 0 0 60px currentColor;
  border-color: #ffffff;
  animation: winner-glow 0.5s ease-in-out infinite alternate;
}

@keyframes winner-glow {
  from { box-shadow: 0 0 20px currentColor; }
  to { box-shadow: 0 0 40px currentColor, 0 0 60px currentColor; }
}

/* Colores de slots */
.slot-item.mult-020 { background: linear-gradient(145deg, #ff4444, #cc0000); }
.slot-item.mult-070 { background: linear-gradient(145deg, #ff8800, #cc6600); }
.slot-item.mult-110 { background: linear-gradient(145deg, #ffcc00, #cc9900); color: #000; }
.slot-item.mult-150 { background: linear-gradient(145deg, #44ff44, #00cc00); color: #000; }
.slot-item.mult-200 { background: linear-gradient(145deg, #4444ff, #0000cc); }
.slot-item.mult-500 { background: linear-gradient(145deg, #ff44ff, #44ffff); animation: jackpot-bg 2s linear infinite; }

@keyframes jackpot-bg {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* Indicador de línea central */
.slot-track-wrapper::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #9146FF;
  transform: translateX(-50%);
  z-index: 6;
  box-shadow: 0 0 15px rgba(145, 70, 255, 0.8);
}

/* Resultado del slot */
.slot-result {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding: 15px 30px;
  background: rgba(30, 30, 40, 0.8);
  border-radius: 10px;
  min-width: 300px;
}

.slot-result.win {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.slot-result.lose {
  color: #f87171;
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.gambling-mascot {
  width: 150px;
  height: 150px;
  object-fit: contain;
  margin-top: 15px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Panel de apuestas nuevo */
.betting-panel-new {
  width: 320px;
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 20px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.balance-display-new {
  text-align: center;
  padding: 15px;
  background: rgba(145, 70, 255, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(145, 70, 255, 0.3);
}

.balance-display-new .balance-label {
  font-size: 12px;
  color: #888888;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.balance-value-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
}

.bet-input-group-new label {
  font-size: 13px;
  color: #aaaaaa;
  margin-bottom: 8px;
  display: block;
}

.bet-input-new {
  width: 100%;
  padding: 14px;
  background: rgba(40, 40, 50, 0.8);
  border: 2px solid rgba(100, 100, 100, 0.3);
  border-radius: 10px;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  outline: none;
  transition: all 0.3s ease;
}

.bet-input-new:focus {
  border-color: #9146FF;
  box-shadow: 0 0 15px rgba(145, 70, 255, 0.3);
}

.bet-quick-buttons-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.bet-quick-btn-new {
  padding: 10px;
  background: rgba(60, 60, 70, 0.8);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bet-quick-btn-new:hover {
  background: rgba(145, 70, 255, 0.3);
  border-color: #9146FF;
}

.bet-quick-btn-new.all {
  background: rgba(145, 70, 255, 0.3);
  border-color: #9146FF;
}

.spin-button-new {
  width: 100%;
  padding: 18px;
  background: linear-gradient(145deg, #9146FF, #6441A5);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.spin-button-new:hover {
  background: linear-gradient(145deg, #a855f7, #7c3aed);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(145, 70, 255, 0.4);
}

.spin-button-new:active {
  transform: translateY(0);
}

.spin-button-new:disabled {
  background: rgba(100, 100, 100, 0.5);
  cursor: not-allowed;
  transform: none;
}

/* Probabilidades compactas */
.probabilities-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.prob-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.prob-mult {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
}

.prob-chance {
  font-size: 11px;
  color: #888888;
}

/* Historial nuevo */
.history-section-new {
  background: rgba(20, 20, 30, 0.9);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 15px;
  padding: 20px;
}

.history-section-new h4 {
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 15px;
}

.history-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.history-item-new {
  min-width: 120px;
  padding: 12px;
  background: rgba(40, 40, 50, 0.8);
  border-radius: 10px;
  text-align: center;
  flex-shrink: 0;
}

.history-bet {
  font-size: 12px;
  color: #888888;
  margin-bottom: 5px;
}

.history-mult {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.history-profit {
  font-size: 14px;
  font-weight: 600;
}

.history-profit.win { color: #4ade80; }
.history-profit.lose { color: #f87171; }

/* Responsive gambling */
@media (max-width: 900px) {
  .gambling-main-new {
    flex-direction: column;
  }
  
  .betting-panel-new {
    width: 100%;
  }
  
  .slot-track-wrapper {
    max-width: 100%;
  }
}

.gambling-header p {
  font-size: 16px;
  color: #aaaaaa;
  line-height: 1.6;
}

/* Estilos viejos de gambling eliminados */

.multiplier-chance {
  font-size: 12px;
  color: #aaaaaa;
}

.mult-high { color: #ff4444; }
.mult-medium { color: #ffaa00; }
.mult-low { color: #44ff44; }
.mult-verylow { color: #4444ff; }
.mult-jackpot { color: #ff44ff; }

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.gambling-icon {
  filter: drop-shadow(0 10px 30px rgba(255, 215, 0, 0.3));
}

.history-section {
  background: rgba(20, 20, 20, 0.8);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 20px;
  padding: 20px;
  max-height: 300px;
  overflow-y: auto;
}

.history-section h4 {
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 15px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: rgba(40, 40, 40, 0.6);
  border-radius: 8px;
  margin-bottom: 8px;
}

.history-mult {
  font-weight: bold;
  font-size: 16px;
}

.history-result {
  font-size: 14px;
  font-weight: 600;
}

/* ==================== SCROLLBARS ==================== */

/* ==================== SOPORTE / TICKETS ==================== */
.soporte-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
  overflow-y: auto;
  padding: 10px;
}

.soporte-header {
  background: rgba(20, 20, 20, 0.8);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
}

.soporte-header h2 {
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10px;
}

.soporte-header p {
  font-size: 16px;
  color: #aaaaaa;
  margin-bottom: 20px;
}

.tickets-limit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(145, 70, 255, 0.1);
  border: 1px solid rgba(145, 70, 255, 0.3);
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  color: #cccccc;
}

.tickets-count {
  font-weight: bold;
  color: #9146FF;
  font-size: 16px;
}

.soporte-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  flex: 1;
}

/* Formulario de ticket */
.ticket-form-section {
  background: rgba(20, 20, 20, 0.8);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 20px;
  padding: 30px;
}

.ticket-form-section h3 {
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 25px;
}

.ticket-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #cccccc;
}

.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(40, 40, 40, 0.9);
  border: 2px solid rgba(100, 100, 100, 0.3);
  border-radius: 10px;
  padding: 14px 16px;
  color: #ffffff;
  font-size: 15px;
  transition: all 0.3s ease;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #9146FF;
  box-shadow: 0 0 15px rgba(145, 70, 255, 0.2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #666666;
}

.form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.form-group select option {
  background: #2a2a2a;
  color: #ffffff;
  padding: 10px;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

.char-count {
  font-size: 12px;
  color: #666666;
  text-align: right;
}

.submit-ticket-btn {
  background: linear-gradient(145deg, #9146FF, #6441A5);
  border: none;
  border-radius: 12px;
  padding: 16px 30px;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.submit-ticket-btn:hover:not(:disabled) {
  background: linear-gradient(145deg, #a055ff, #7551b5);
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(145, 70, 255, 0.4);
}

.submit-ticket-btn:disabled {
  background: rgba(100, 100, 100, 0.3);
  color: #666666;
  cursor: not-allowed;
}

/* Lista de tickets */
.my-tickets-section {
  background: rgba(20, 20, 20, 0.8);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.my-tickets-section h3 {
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 25px;
}

.tickets-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
  max-height: 400px;
}

.no-tickets {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #666666;
}

.no-tickets span {
  font-size: 48px;
  margin-bottom: 15px;
}

.no-tickets p {
  font-size: 16px;
}

/* Tarjeta de ticket */
.ticket-card {
  background: rgba(35, 35, 35, 0.9);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ticket-card:hover {
  background: rgba(45, 45, 45, 0.95);
  border-color: rgba(145, 70, 255, 0.4);
  transform: translateX(5px);
}

.ticket-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-id {
  font-size: 12px;
  color: #888888;
  font-weight: 600;
}

.ticket-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.status-pendiente {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.status-revision {
  background: rgba(33, 150, 243, 0.2);
  color: #2196f3;
  border: 1px solid rgba(33, 150, 243, 0.3);
}

.status-resuelto {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.ticket-subject {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.ticket-preview {
  font-size: 14px;
  color: #888888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-date {
  font-size: 12px;
  color: #666666;
}

/* Modal de ticket */
.ticket-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ticket-modal.active {
  display: flex;
  animation: fadeIn 0.3s ease;
}

.ticket-modal-content {
  background: rgba(25, 25, 25, 0.98);
  border: 1px solid rgba(100, 100, 100, 0.4);
  border-radius: 20px;
  padding: 35px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  color: #888888;
  font-size: 28px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.modal-close:hover {
  color: #ffffff;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.modal-ticket-id {
  font-size: 14px;
  color: #888888;
  font-weight: 600;
}

.modal-ticket-status {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.ticket-modal-content h3 {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10px;
}

.modal-category {
  display: inline-block;
  background: rgba(145, 70, 255, 0.15);
  color: #9146FF;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 25px;
}

.modal-section {
  margin-bottom: 25px;
}

.modal-section h4 {
  font-size: 14px;
  color: #aaaaaa;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.modal-section p {
  font-size: 15px;
  color: #cccccc;
  line-height: 1.7;
  background: rgba(40, 40, 40, 0.6);
  padding: 15px;
  border-radius: 10px;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(100, 100, 100, 0.2);
}

.modal-date {
  font-size: 13px;
  color: #666666;
}

.delete-ticket-btn {
  background: rgba(244, 67, 54, 0.15);
  border: 1px solid rgba(244, 67, 54, 0.3);
  color: #f44336;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.delete-ticket-btn:hover {
  background: rgba(244, 67, 54, 0.25);
  border-color: rgba(244, 67, 54, 0.5);
}

/* Responsive soporte */
@media (max-width: 1024px) {
  .soporte-content {
    grid-template-columns: 1fr;
  }
  
  .tickets-list {
    max-height: 300px;
  }
}

/* ==================== TÉRMINOS Y CONDICIONES ==================== */

/* ==================== MODAL TWITCH ==================== */
.twitch-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(5px);
}

.twitch-modal.active {
  display: flex;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.twitch-modal-content {
  background: linear-gradient(145deg, rgba(25, 25, 35, 0.98), rgba(15, 15, 25, 0.98));
  border: 1px solid rgba(145, 70, 255, 0.4);
  border-radius: 25px;
  padding: 45px;
  max-width: 450px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 25px 80px rgba(145, 70, 255, 0.3),
              0 0 100px rgba(145, 70, 255, 0.1);
  animation: modalSlideIn 0.4s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.twitch-modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  color: #666666;
  font-size: 32px;
  cursor: pointer;
  transition: all 0.3s ease;
  line-height: 1;
}

.twitch-modal-close:hover {
  color: #ffffff;
  transform: rotate(90deg);
}

.twitch-modal-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 25px;
  background: linear-gradient(145deg, rgba(145, 70, 255, 0.2), rgba(100, 65, 165, 0.2));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(145, 70, 255, 0.4);
  animation: pulseIcon 2s ease-in-out infinite;
}

@keyframes pulseIcon {
  0%, 100% { box-shadow: 0 0 20px rgba(145, 70, 255, 0.3); }
  50% { box-shadow: 0 0 40px rgba(145, 70, 255, 0.6); }
}

.twitch-modal-icon img {
  width: 45px;
  height: 45px;
  object-fit: contain;
}

.twitch-modal-content h2 {
  font-size: 26px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 12px;
}

.twitch-modal-content > p {
  font-size: 14px;
  color: #aaaaaa;
  margin-bottom: 30px;
  line-height: 1.5;
}

.twitch-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.twitch-benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(40, 40, 50, 0.5);
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid rgba(100, 100, 100, 0.2);
  transition: all 0.3s ease;
}

.twitch-benefit-item:hover {
  border-color: rgba(145, 70, 255, 0.4);
  background: rgba(50, 45, 60, 0.6);
  transform: translateX(5px);
}

.benefit-icon {
  font-size: 20px;
}

.twitch-benefit-item span:last-child {
  font-size: 14px;
  color: #cccccc;
}

.twitch-connect-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(145deg, #9146FF, #6441A5);
  border: none;
  border-radius: 12px;
  padding: 16px 30px;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.twitch-connect-btn:hover {
  background: linear-gradient(145deg, #a055ff, #7551b5);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(145, 70, 255, 0.4);
}

.twitch-connect-btn:active {
  transform: translateY(-1px);
}

.twitch-connect-btn img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.twitch-modal-note {
  font-size: 12px !important;
  color: #666666 !important;
  margin-bottom: 0 !important;
}

.twitch-modal-note a {
  color: #9146FF;
  text-decoration: none;
  transition: color 0.3s ease;
}

.twitch-modal-note a:hover {
  color: #a055ff;
  text-decoration: underline;
}

/* Responsive Modal Twitch */
@media (max-width: 480px) {
  .twitch-modal-content {
    padding: 30px 25px;
  }
  
  .twitch-modal-content h2 {
    font-size: 22px;
  }
  
  .twitch-modal-icon {
    width: 65px;
    height: 65px;
  }
  
  .twitch-modal-icon img {
    width: 35px;
    height: 35px;
  }
  
  .twitch-benefit-item {
    padding: 10px 14px;
  }
  
  .twitch-benefit-item span:last-child {
    font-size: 13px;
  }
}

.terminos-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
  overflow-y: auto;
  padding: 10px;
}

.terminos-header {
  background: linear-gradient(145deg, rgba(20, 20, 30, 0.95), rgba(30, 20, 40, 0.9));
  border: 1px solid rgba(145, 70, 255, 0.3);
  border-radius: 20px;
  padding: 35px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.terminos-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #9146FF, #6441A5, #9146FF);
}

.terminos-header h2 {
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10px;
  text-shadow: 0 0 20px rgba(145, 70, 255, 0.3);
}

.terminos-header p {
  font-size: 14px;
  color: #888888;
  margin-bottom: 20px;
}

.terminos-badges {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.terminos-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.terminos-badge.iso {
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.4);
  color: #4caf50;
}

.terminos-badge.gdpr {
  background: rgba(33, 150, 243, 0.15);
  border: 1px solid rgba(33, 150, 243, 0.4);
  color: #2196f3;
}

.terminos-badge.secure {
  background: rgba(145, 70, 255, 0.15);
  border: 1px solid rgba(145, 70, 255, 0.4);
  color: #9146FF;
}

.terminos-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.terminos-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.terminos-section {
  background: rgba(20, 20, 25, 0.9);
  border: 1px solid rgba(100, 100, 100, 0.25);
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.terminos-section:hover {
  border-color: rgba(145, 70, 255, 0.4);
  box-shadow: 0 4px 20px rgba(145, 70, 255, 0.1);
}

.terminos-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  background: rgba(30, 30, 35, 0.8);
  transition: all 0.3s ease;
}

.terminos-section-header:hover {
  background: rgba(40, 35, 50, 0.9);
}

.terminos-section-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.terminos-toggle {
  font-size: 12px;
  color: #9146FF;
  transition: transform 0.3s ease;
}

.terminos-section.collapsed .terminos-toggle {
  transform: rotate(-90deg);
}

.terminos-section-body {
  padding: 0 25px 25px 25px;
  color: #cccccc;
  line-height: 1.8;
  font-size: 14px;
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.terminos-section.collapsed .terminos-section-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.terminos-section-body p {
  margin-bottom: 15px;
}

.terminos-section-body p:last-child {
  margin-bottom: 0;
}

.terminos-section-body strong {
  color: #ffffff;
}

.terminos-section-body ul {
  margin: 15px 0;
  padding-left: 25px;
}

.terminos-section-body li {
  margin-bottom: 10px;
  position: relative;
}

.terminos-section-body li::marker {
  color: #9146FF;
}

.terminos-subsection {
  background: rgba(40, 40, 50, 0.5);
  border-left: 3px solid #9146FF;
  padding: 15px 20px;
  margin: 15px 0;
  border-radius: 0 10px 10px 0;
}

.terminos-subsection h4 {
  font-size: 14px;
  font-weight: 600;
  color: #9146FF;
  margin-bottom: 12px;
}

.terminos-subsection ul {
  margin: 10px 0 0 0;
}

.terminos-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 20px 0;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(40, 40, 50, 0.6);
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid rgba(100, 100, 100, 0.2);
  transition: all 0.3s ease;
}

.contact-item:hover {
  border-color: rgba(145, 70, 255, 0.4);
  background: rgba(50, 45, 60, 0.7);
}

.contact-icon {
  font-size: 18px;
}

.terminos-note {
  font-size: 12px !important;
  color: #888888 !important;
  font-style: italic;
  margin-top: 10px !important;
}

.terminos-footer {
  background: rgba(15, 15, 20, 0.95);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 15px;
  padding: 25px;
  text-align: center;
}

.terminos-footer p {
  font-size: 14px;
  color: #aaaaaa;
  margin-bottom: 15px;
  line-height: 1.6;
}

.terminos-version {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  font-size: 12px;
  color: #666666;
}

.terminos-version span:nth-child(2) {
  color: #9146FF;
}

/* Responsive Términos */
@media (max-width: 768px) {
  .terminos-header {
    padding: 25px;
  }
  
  .terminos-header h2 {
    font-size: 24px;
  }
  
  .terminos-badges {
    gap: 10px;
  }
  
  .terminos-badge {
    padding: 6px 12px;
    font-size: 11px;
  }
  
  .terminos-section-header {
    padding: 15px 20px;
  }
  
  .terminos-section-header h3 {
    font-size: 14px;
  }
  
  .terminos-section-body {
    padding: 0 20px 20px 20px;
    font-size: 13px;
  }
  
  .terminos-contact {
    flex-direction: column;
  }
  
  .terminos-version {
    flex-direction: column;
    gap: 5px;
  }
  
  .terminos-version span:nth-child(2) {
    display: none;
  }
}

@media (max-width: 768px) {
  .soporte-header h2 {
    font-size: 24px;
  }
  
  .ticket-form-section,
  .my-tickets-section {
    padding: 20px;
  }
  
  .ticket-form-section h3,
  .my-tickets-section h3 {
    font-size: 18px;
  }
  
  .ticket-modal-content {
    padding: 25px;
  }
  
  .ticket-modal-content h3 {
    font-size: 20px;
  }
  
  .modal-footer {
    flex-direction: column;
    gap: 15px;
  }
}
.tienda-content::-webkit-scrollbar,
.rewards-grid::-webkit-scrollbar {
  width: 8px;
}

.tienda-content::-webkit-scrollbar-track,
.rewards-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.tienda-content::-webkit-scrollbar-thumb,
.rewards-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.tienda-content::-webkit-scrollbar-thumb:hover,
.rewards-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1400px) {
  .inicio-socials-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1200px) {
  .inicio-socials-row {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .inicio-video-container {
    height: 500px;
  }
  
  .inicio-photo {
    max-width: 350px;
  }
  
  .gambling-main {
    grid-template-columns: 1fr;
  }
  
  .betting-panel {
    order: -1;
  }
  
  .roulette-wheel {
    width: 300px;
    height: 300px;
  }
  
  .gambling-icon {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 60px;
  }
  
  .sidebar:hover {
    width: 220px;
  }
  
  .sidebar-item {
    padding: 12px 15px;
  }
  
  .sidebar-icon {
    min-width: 25px;
    height: 25px;
  }
  
  .sidebar-icon img {
    width: 20px !important;
    height: 20px !important;
  }
  
  .sidebar-text {
    font-size: 14px;
    margin-left: 12px;
  }
  
  .tienda-box {
    width: calc(92vw - 60px);
    height: calc(100vh - 35px);
    padding: 0 20px 30px 20px;
    top: 15px;
  }
  
  .titulo-arqueado {
    height: 90px;
    max-width: 600px;
  }
  
  .titulo-arqueado text {
    letter-spacing: 4px;
  }
  
  .blackhole {
    width: 280px;
    height: 280px;
    left: 50%;
  }
  
  .ray {
    height: 130px;
  }
  
  .content-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }
  
  .product-card {
    padding: 15px;
  }
  
  .product-title {
    font-size: 16px;
  }
  
  .product-price {
    font-size: 20px;
  }
  
  .btn-iniciar {
    top: 15px;
    right: 15px;
    padding: 8px 16px;
    font-size: 14px;
  }
  
  .btn-iniciar img {
    width: 20px;
    height: 20px;
  }
  
  .inicio-vertical-layout {
    padding: 10px;
    gap: 20px;
  }
  
  .inicio-description-section,
  .inicio-socials-section,
  .inicio-video-section {
    padding: 25px;
  }
  
  .inicio-section-title {
    font-size: 20px;
  }
  
  .inicio-text {
    font-size: 15px;
  }
  
  .inicio-socials-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .inicio-social-btn {
    padding: 20px 10px;
    min-height: 100px;
  }
  
  .inicio-social-btn img {
    width: 35px;
    height: 35px;
  }
  
  .inicio-social-btn span {
    font-size: 14px;
  }
  
  .inicio-video-container {
    height: 400px;
  }
  
  .inicio-photo {
    max-width: 280px;
  }
  
  .ranking-table th,
  .ranking-table td {
    padding: 10px 12px;
    font-size: 12px;
  }
  
  .user-avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  .rank-cell {
    font-size: 16px;
  }
  
  .rank-1 { font-size: 20px; }
  .rank-2 { font-size: 18px; }
  .rank-3 { font-size: 17px; }
  
  .user-profile-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  
  .user-profile-header {
    width: 100%;
  }
  
  .user-points-display {
    width: 100%;
    justify-content: center;
  }
  
  .rewards-grid {
    grid-template-columns: 1fr;
  }
  
  .user-profile-name {
    font-size: 24px;
  }
  
  .points-value {
    font-size: 28px;
  }
  
  .roulette-wheel {
    width: 250px;
    height: 250px;
  }
  
  .roulette-center {
    width: 80px;
    height: 80px;
    font-size: 24px;
  }
  
  .gambling-header h2 {
    font-size: 24px;
  }
  
  .balance-value {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .sidebar {
    width: 50px;
    padding: 15px 0;
  }
  
  .sidebar:hover {
    width: 180px;
  }
  
  .sidebar-item {
    padding: 10px 12px;
  }
  
  .sidebar-icon {
    min-width: 22px;
    height: 22px;
  }
  
  .sidebar-icon img {
    width: 18px !important;
    height: 18px !important;
  }
  
  .sidebar-text {
    font-size: 13px;
    margin-left: 10px;
  }
  
  .tienda-box {
    width: calc(90vw - 50px);
    height: calc(100vh - 30px);
    padding: 0 15px 20px 15px;
    top: 10px;
  }
  
  .titulo-arqueado {
    height: 70px;
    max-width: 400px;
  }
  
  .titulo-arqueado text {
    letter-spacing: 2px;
  }
  
  .blackhole {
    width: 200px;
    height: 200px;
    left: 50%;
  }
  
  .ray {
    height: 90px;
  }
  
  .content-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .product-card {
    padding: 12px;
  }
  
  .product-title {
    font-size: 15px;
  }
  
  .product-price {
    font-size: 18px;
  }
  
  .btn-iniciar {
    top: 10px;
    right: 10px;
    padding: 6px 12px;
    font-size: 12px;
    gap: 6px;
  }
  
  .btn-iniciar img {
    width: 18px;
    height: 18px;
  }
  
  .inicio-socials-row {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .inicio-video-container {
    height: 300px;
  }
  
  .inicio-photo {
    max-width: 250px;
  }
}

@media (max-width: 480px) and (max-height: 500px) {
  .sidebar {
    width: 45px;
  }
  
  .sidebar:hover {
    width: 160px;
  }
  
  .tienda-box {
    width: calc(88vw - 45px);
    height: calc(100vh - 25px);
    padding: 0 10px 15px 10px;
    top: 5px;
  }
  
  .titulo-arqueado {
    height: 60px;
  }
  
  .blackhole {
    width: 150px;
    height: 150px;
    left: 50%;
  }
  
  .ray {
    height: 70px;
  }
}

@media (min-width: 1920px) {
  .tienda-box {
    max-width: 1600px;
    max-height: 1000px;
  }
  
  .titulo-arqueado {
    max-width: 1000px;
    height: 180px;
  }
  
  .content-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}