/* ruleta.css — Ruleta de premios (overlay + caja + escenario del SVG).
 *
 * REGLAS DE ESTE ARCHIVO
 *  - Todo el CSS está SCOPEADO con el prefijo `.ruleta-`: no toca ninguna clase existente del sitio
 *    (public/index.html + public/app.js) ni depende de que la ruleta esté en el HTML: el overlay lo
 *    inyecta `public/ruleta.js` en <body>. `index.html` sólo necesita
 *    <link rel="stylesheet" href="ruleta.css"> y <script src="ruleta.js" defer>.
 *  - Reusa la paleta del sitio cuando está (`--gold`, `--bg`) y cae a los mismos valores si no.
 *  - PROHIBIDO el scroll horizontal: `overflow-x: hidden` en el overlay y el ancho de la rueda
 *    acotado por `max-width` (nunca por un `width` fijo), así que en ningún ancho desborda.
 *
 * RESPONSIVE (breakpoints y por qué)
 *  El tamaño de la rueda sale de UNA variable, `--ruleta-marco`, redefinida por breakpoint con
 *  unidades relativas (vw / vh / clamp), y el `<svg>` ocupa el 100% de su caja con `aspect-ratio:1/1`.
 *  El ancho además va como `max-width`, de modo que la caja del modal (que se achica con la
 *  pantalla) siempre manda: la rueda nunca es más ancha que su contenedor.
 *
 *    · base (mobile, ~360-479px) ......... min(84vw, 340px)  → a 375px: 315px (entra con aire)
 *    · ≥480px (móvil grande) ............. min(80vw, 400px)
 *    · ≥768px (tablet) ................... min(56vw, 440px)  → a 768px: 430px
 *    · ≥1280px (escritorio) .............. clamp(360px, 32vw, 500px) → a 1440px: 460px
 *    · ≥1920px (escritorio grande) ....... clamp(420px, 26vw, 560px) → a 1920px: 500px
 *    · pantalla baja en apaisado .......... min(48vh, 300px) (que la rueda no empuje los botones
 *                                            fuera de la pantalla: manda el ALTO, no el ancho)
 *  El tope de 500-560px es a propósito: una rueda enorme con números chicos se lee peor que una
 *  contenida, y la caja nunca pasa de 560px de ancho.
 */

.ruleta-overlay {
  /* Paleta: la del sitio si existe, si no los mismos valores que public/index.html. */
  --ruleta-dorado: var(--gold, #d4af37);
  --ruleta-dorado-claro: #f3dd8f;
  --ruleta-dorado-osc: #8a6a12;
  --ruleta-violeta: #3a1259;
  --ruleta-violeta-osc: #1c0a33;
  --ruleta-texto: var(--text, #e8d5c4);

  position: fixed;
  inset: 0;
  z-index: 2147483000; /* por encima de los modales del sitio (que usan z-index menores) */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  /* Nada de scroll horizontal, pase lo que pase. */
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 26%, rgba(74, 26, 74, 0.55), rgba(6, 2, 16, 0.92) 72%),
    rgba(6, 2, 16, 0.86);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--ruleta-texto);
}

.ruleta-overlay.ruleta-visible {
  display: flex;
}

.ruleta-caja {
  /* La rueda nunca es más ancha que la caja: `max-width` (no `width`) + `max-width` en el marco. */
  --ruleta-marco: min(84vw, 340px);

  position: relative;
  width: min(94vw, 560px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 18px 16px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(74, 26, 74, 0.55), rgba(13, 6, 24, 0.96) 60%),
    var(--bg, #0d0618);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(212, 175, 55, 0.06);
  text-align: center;
}

/* ------------------------------ Textos y botones ------------------------------ */

.ruleta-titulo {
  margin: 4px 0 6px;
  font-size: clamp(1.15rem, 4.4vw, 1.6rem);
  line-height: 1.2;
  color: var(--ruleta-dorado);
  letter-spacing: 0.02em;
}

.ruleta-sub {
  margin: 0 auto 12px;
  max-width: 34ch;
  font-size: clamp(0.88rem, 3.2vw, 1rem);
  opacity: 0.85;
}

.ruleta-marco {
  width: 100%;
  max-width: var(--ruleta-marco);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.ruleta-marco svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible; /* la aguja sobresale un poco del borde: no la recortamos */
}

.ruleta-resultado {
  margin: 12px auto 0;
  max-width: 40ch;
  min-height: 1px;
}

.ruleta-resultado[hidden] {
  display: none;
}

.ruleta-premio {
  margin: 0 0 4px;
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  color: var(--ruleta-dorado-claro);
}

.ruleta-saldo {
  margin: 0;
  font-size: clamp(0.86rem, 3vw, 0.98rem);
  opacity: 0.85;
}

.ruleta-error {
  margin: 0 auto;
  max-width: 34ch;
  font-size: clamp(0.9rem, 3.2vw, 1rem);
  color: #f0b8b8;
}

.ruleta-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.ruleta-btn {
  flex: 1 1 auto;
  min-width: 132px;
  min-height: 46px; /* objetivo táctil cómodo en celular */
  padding: 12px 20px;
  border: 2px solid var(--ruleta-dorado);
  border-radius: 30px;
  background: linear-gradient(135deg, var(--ruleta-dorado), var(--accent, #c49a6c));
  color: #1a0b2e;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.ruleta-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.45);
}

.ruleta-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.ruleta-btn-sec {
  background: transparent;
  color: var(--ruleta-dorado);
}

.ruleta-cerrar {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ruleta-dorado);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.ruleta-cerrar:hover {
  background: rgba(212, 175, 55, 0.14);
}

/* Por accesibilidad: nada de animaciones si el sistema pide reducirlas (la rueda igual informa el
 * premio: el giro lo corta el JS, esto sólo apaga el parpadeo del brillo). */
@media (prefers-reduced-motion: reduce) {
  .ruleta-btn {
    transition: none;
  }
}

/* --------------------------------- Breakpoints --------------------------------- */

@media (min-width: 480px) {
  .ruleta-caja {
    --ruleta-marco: min(80vw, 400px);
    padding: 20px 20px 18px;
  }
}

@media (min-width: 768px) {
  .ruleta-caja {
    --ruleta-marco: min(56vw, 440px);
    padding: 22px 24px 20px;
  }
}

@media (min-width: 1280px) {
  .ruleta-caja {
    --ruleta-marco: clamp(360px, 32vw, 500px);
  }
}

@media (min-width: 1920px) {
  .ruleta-caja {
    --ruleta-marco: clamp(420px, 26vw, 560px);
  }
}

/* Pantalla baja y apaisada (celular acostado, netbook 1024x600): manda el ALTO. */
@media (orientation: landscape) and (max-height: 620px) {
  .ruleta-caja {
    --ruleta-marco: min(48vh, 300px);
    padding: 12px 18px;
  }
  .ruleta-titulo {
    font-size: 1.1rem;
  }
  .ruleta-sub {
    margin-bottom: 6px;
  }
}