/* Bloquear scroll del body cuando el modal está abierto */
body.modal-open {
  overflow: hidden;
  height: 100vh;
}

/* Ajuste modal centrado */
#modalRuleta.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,0,0,0.5) !important;
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  z-index: 9999 !important;
}

/* Caja del modal */
.modal-content.ruleta-modal {
  width: 90%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 25px 20px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  animation: fadeIn 0.3s ease;
  max-height: 90vh;     /* límite de alto visible */
  overflow-y: auto;     /* scroll si se pasa del viewport */
  position: relative;
  border: none !important;   /* 🚀 fuerza a quitar bordes raros */
}

/* Botón de cerrar (X) */
.modal-content.ruleta-modal .close {
  position: absolute;
  top: -5px;               /* 🔹 Subimos la X un poco más */
  right: -5px;             /* 🔹 También la movemos un poco a la esquina */
  font-size: 32px;          /* 🔹 Más grande y visible */
  font-weight: bold;
  color: #000;
  cursor: pointer;
  background: #fff;         /* 🔹 Fondo blanco para contraste con modal */
  border: 2px solid #ffffff;   /* 🔹 Borde negro */
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease; /* 🔹 Transición suave */
  z-index: 10;              /* 🔹 Encima del contenido */
}

/* Efecto al pasar el cursor */
.modal-content.ruleta-modal .close:hover {
 /* background: #f7575f;      color over */
  color: #0A1626;           /* 🔹 Azul oscuro */
  transform: scale(1.1);    /* 🔹 Efecto de crecimiento */
  border-color: #ffffff;
}

/* Animación suave */
@keyframes fadeIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Contenedor interno */
.ruleta-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Flecha */
.ruleta-flecha {
  position: relative;
  width: 34px;
  height: 37px;
  background: #00b2ff;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* curva de gota */
  margin-bottom: -25px; /* se pega más a la ruleta */
  z-index: 10;
}

/* Triángulo en la parte inferior de la gota */
.ruleta-flecha::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #00b2ff; /* color azul */
}

/* Canvas de la ruleta */
#ruleta {
  border-radius: 50%;
  border: 1px solid #000;   /* ✅ borde negro grueso */
  margin: 20px 0;
  max-width: 100%;
  height: auto;
  background: #000;          /* 🔹 fondo negro para contraste */
}

/* Texto de sectores */
.ruleta-sector-text {
  font-size: 22px !important;  /* 🔹 más grande */
  font-weight: bold;
  fill: #fff;
  text-transform: uppercase;
}

/* Botón central azul */
.ruleta-centro {
  width: 40px;   /* 🔹 más pequeño */
  height: 40px;
  background: #00b2ff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  pointer-events: none;
}

/* Botón GIRAR */
.ruleta-btn {
  background: #8BC34A;
  border: none;
  color: #000000;
  padding: 5px 60px;   /* más padding */
  font-size: 18px;      /* más grande */
  font-weight: 700;     /* más bold */
  border-radius: 20px;
  cursor: pointer;
  margin: 8px 0 5px 0;
  transition: background 0.3s ease;
}

.ruleta-btn:hover {
  background: #689F38;
}

/* Texto de descripción */
.ruleta-texto {
  margin-top: 5px;
  text-align: center;
  font-family: Arial, sans-serif;
}

.ruleta-texto h3,
.ruleta-texto h3 b, 
.ruleta-texto h3 strong
 {
  font-family: 'Archivo Black', sans-serif !important; /* fuente similar a diseño */
  font-size: 40px;          /* más grande */
  margin: 5px 0;
  font-weight: 900;         /* más bold */
  text-transform: uppercase;
  color: #000;
  text-shadow: 
     -2px -2px 0 #fff,  
      2px -2px 0 #fff,
     -2px  2px 0 #fff,
      2px  2px 0 #fff;   /* outline blanco como en el diseño */
}

.ruleta-texto p {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  color: #444;
}

/* Resultado */
.ruleta-resultado {
  margin-top: 15px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  min-height: 30px;       /* 🔹 asegura espacio fijo */
  line-height: 1.4;
  display: block;         /* siempre visible, aunque vacío */
  visibility: hidden;     /* 🔹 oculto visualmente pero mantiene espacio */
}

.ruleta-resultado.ganador,
.ruleta-resultado.perdedor {
  visibility: visible;    /* 🔹 muestra el texto cuando hay resultado */
  color: #000;            /* usamos estilo de .ruleta-texto p */
  background: none;       /* quitamos cajas */
  border: none;
  padding: 0;
}

/* 🧊 Contenedor Glassmorphism — Efecto de vidrio borroso intenso */
.ruleta-wrapper {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  transition: all 0.5s ease;
}

/* ✨ Cuando la participación ha finalizado */
.ruleta-wrapper.glass-finished {
  background: rgba(255, 255, 255, 0.12);          /* leve niebla */
  backdrop-filter: blur(45px) saturate(200%);     /* más borroso y saturado */
  -webkit-backdrop-filter: blur(45px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.25);    /* borde sutil de vidrio */
  /*box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);        halo difuso exterior */
  opacity: 0.95;
}

/* 🌫️ Brillo superior y sombra inferior para simular profundidad */
.ruleta-wrapper.glass-finished::before {
  content: "";
  position: absolute;
  inset: 0;
  /*background: linear-gradient(145deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(0, 0, 0, 0.15) 100%);*/
  pointer-events: none;
}

/* Desactiva interacciones cuando está bloqueada */
.ruleta-wrapper.glass-finished canvas {
  pointer-events: none;
  filter: blur(1px) brightness(0.9); /* leve suavizado interno */
}

/* Botón principal de abrir modal */
#openRuletaBtn {
  color: #DBF227;
  background: #0a1626;
  border: 0;
  padding: 5px 100px;
  margin-left: 31px;
  margin-bottom: 10px;
  font-size: 18px;
}

#openRuletaBtn:hover {
  background: #112240;
}


/* 📱 Ajustes para mobile */
/* 📱 Para pantallas menores a 768px */
@media (max-width: 768px) {
  #modalRuleta.modal {
    align-items: flex-start !important;  /* que no quede centrado verticalmente */
    padding-top: 80px !important;        /* deja espacio desde arriba */
    padding-bottom: 40px !important;     /* deja espacio desde abajo */
  }
}

/* 📱 Para pantallas menores a 480px */
@media (max-width: 480px) {
  #modalRuleta.modal {
    padding-top: 100px !important;       /* todavía más separación arriba */
    padding-bottom: 60px !important;     /* separación inferior extra */
  }
}

@media (max-width: 480px) {
  .modal {
    align-items: flex-start;      /* 🔹 arranca desde arriba */
    padding: 20px 0;              /* 🔹 espacio arriba y abajo */
  }

  .modal-content.ruleta-modal {
    width: 95%;
    margin: auto;
    border-radius: 16px;
    padding: 20px 15px;
    max-height: 85vh;             /* 🔹 ocupa casi toda la pantalla */
    overflow-y: auto;             /* 🔹 scroll si es necesario */
    display: flex;
    flex-direction: column;
    justify-content: center;      /* 🔹 centra el contenido */
  }

  #ruleta {
    width: 240px;  /* 🔹 ajusta tamaño de la ruleta */
    height: 240px;
  }

  .ruleta-btn {
    font-size: 16px;
    padding: 10px 40px; /* 🔹 más delgado en mobile */
  }

  .ruleta-texto h3 {
    font-size: 22px;  /* 🔹 más compacto */
    margin: 10px 0;
  }

  .ruleta-texto p {
    font-size: 14px;
  }

  .ruleta-resultado {
    font-size: 16px;
    margin-top: 12px;
    min-height: 28px; /* 🔹 mantiene espacio */
  }
}