/* =====================================================================
   RULETA DIARIA (ruleta.php). js/ruleta.js fija --segmentos en la rueda,
   --i en cada premio y crea las bombillas del aro; sin JavaScript los
   premios se ven como una lista. Los colores salen de --acento, así que
   los temas de temporada también tiñen la rueda.
   Estados en .ruleta__marco: .girando (mientras gira) y .premio (al parar).
   ===================================================================== */

/* overflow-x: clip: el halo y el confeti no abren scroll horizontal en móvil. */
.ruleta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; overflow-x: clip; padding-block: 24px; }
@media (min-width: 900px) {
    .ruleta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
}

.ruleta__texto h1 {
    margin-block: 4px 12px;
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.03em;
    padding-bottom: .1em; /* que el degradado no corte los descendentes (g, y) */
    background: linear-gradient(100deg, var(--texto) 30%, var(--acento) 75%, color-mix(in srgb, var(--acento) 55%, #fff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Botón de girar: degradado del acento y un latido de luz mientras se puede girar. */
.ruleta__girar {
    margin-top: 12px;
    padding: 16px 44px;
    background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 55%, #fff));
    border-color: transparent;
    border-radius: 999px;
    color: #0b0b12;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--acento) 70%, transparent);
    transition: transform var(--transicion), filter var(--transicion), opacity var(--transicion);
}
.ruleta__girar:not(:disabled) { animation: ruleta-latido 2.2s ease-in-out infinite; }
.ruleta__girar:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 55%, #fff));
    border-color: transparent;
    color: #0b0b12;
    filter: brightness(1.1);
    transform: translateY(-2px);
}
.ruleta__girar:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.ruleta__girar:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

@keyframes ruleta-latido {
    0%, 100% { box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--acento) 70%, transparent), 0 0 0 0 color-mix(in srgb, var(--acento) 45%, transparent); }
    50%      { box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--acento) 70%, transparent), 0 0 0 12px transparent; }
}

.ruleta__estado { min-height: 1.6em; margin: 18px 0; color: var(--texto-suave); }
.ruleta__estado--premio {
    color: var(--texto);
    font-size: 1.25rem;
    font-weight: 700;
    text-shadow: 0 0 24px color-mix(in srgb, var(--acento) 60%, transparent);
    animation: ruleta-aparecer .5s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes ruleta-aparecer { from { opacity: 0; transform: translateY(8px) scale(.96); } }

/* Enlace a Recompensas: dónde se gastan los puntos que da la ruleta. */
.ruleta__canjear { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--borde); }
.ruleta__canjear p { margin: 0 0 12px; }

/* ----- Marco: aro cromado con un anillo de neón; el halo va detrás ----- */
.ruleta__marco {
    --rueda: 7%; /* grosor del aro: donde empieza la rueda */
    position: relative;
    isolation: isolate;
    width: min(100%, 460px);
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 62%, rgba(0, 0, 0, .55) 70%),
        conic-gradient(from 210deg, #2b2b36, #8a8a99, #26262f, #5d5d6b, #1c1c24, #9b9bab, #2b2b36);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .08),
        0 40px 80px -20px rgba(0, 0, 0, .8),
        0 0 70px color-mix(in srgb, var(--acento) 35%, transparent);
}

/* Halo de luz detrás de la rueda; late más fuerte al girar y al ganar. */
.ruleta__marco::before {
    content: "";
    position: absolute;
    inset: -22%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--acento) 40%, transparent) 0, transparent 65%);
    opacity: .55;
    animation: ruleta-halo 4s ease-in-out infinite;
    transition: opacity .6s ease;
}
.ruleta__marco.girando::before,
.ruleta__marco.premio::before { opacity: 1; }
@keyframes ruleta-halo { 50% { transform: scale(1.06); } }

/* Anillo de neón entre el aro y la rueda. */
.ruleta__marco::after {
    content: "";
    position: absolute;
    inset: calc(var(--rueda) - 1.2%);
    z-index: 1;
    border: 2px solid color-mix(in srgb, var(--acento) 80%, #fff);
    border-radius: 50%;
    box-shadow:
        0 0 12px color-mix(in srgb, var(--acento) 80%, transparent),
        inset 0 0 12px color-mix(in srgb, var(--acento) 60%, transparent);
    pointer-events: none;
}

/* ----- Bombillas del aro (las crea js/ruleta.js con --i y --n) ----- */
.ruleta__luces { position: absolute; inset: 0; z-index: 2; pointer-events: none; --ritmo: 1.6s; }
.ruleta__marco.girando .ruleta__luces { --ritmo: .32s; }
.ruleta__marco.premio .ruleta__luces { --ritmo: .2s; }

.ruleta__luces span {
    position: absolute;
    inset: 0;
    transform: rotate(calc(var(--i) * 360deg / var(--n, 24)));
}
.ruleta__luces span::before {
    content: "";
    position: absolute;
    top: 1.6%;
    left: 50%;
    width: 3.4%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff 0 25%, #ffe6a6 55%, color-mix(in srgb, var(--acento) 60%, #ffb648) 100%);
    box-shadow: 0 0 10px 2px rgba(255, 214, 140, .75);
    transform: translateX(-50%);
    animation: ruleta-luz var(--ritmo) steps(1, end) infinite;
}
/* Una de cada dos va a contratiempo: parecen correr alrededor del aro. */
.ruleta__luces span:nth-child(even)::before { animation-delay: calc(var(--ritmo) / -2); }
/* Al ganar parpadean todas a la vez. */
.ruleta__marco.premio .ruleta__luces span::before { animation-delay: 0s; }

@keyframes ruleta-luz {
    0%  { opacity: 1; }
    50% { opacity: .22; }
}

/* ----- Rueda ----- */
.ruleta__rueda {
    --gajo: calc(360deg / var(--segmentos, 8));
    position: absolute;
    inset: var(--rueda);
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--fondo-elevado);
    transition: transform 5s cubic-bezier(.12, .8, .18, 1);
}

/* Gajos en SVG (los dibuja js/ruleta.js): bordes suavizados, a diferencia de
   los cortes duros de un conic-gradient, que se ven dentados. */
.ruleta__lienzo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ruleta__gajo { shape-rendering: geometricPrecision; }
.ruleta__gajo--a { fill: url(#ruleta-gajo-a); }
.ruleta__gajo--b { fill: url(#ruleta-gajo-b); }
.ruleta__gajo--c { fill: url(#ruleta-gajo-c); } /* el último, si hay un número impar */
.ruleta__tono-a0 { stop-color: color-mix(in srgb, var(--acento) 40%, #120a24); }
.ruleta__tono-a1 { stop-color: color-mix(in srgb, var(--acento) 88%, #fff); }
.ruleta__tono-b0 { stop-color: #0b0a12; }
.ruleta__tono-b1 { stop-color: color-mix(in srgb, var(--acento) 30%, #16141f); }
.ruleta__tono-c0 { stop-color: color-mix(in srgb, var(--acento) 25%, #120a24); }
.ruleta__tono-c1 { stop-color: color-mix(in srgb, var(--acento) 60%, #3a2a5c); }
/* Bisel: un filo claro por dentro de cada gajo. */
.ruleta__bisel { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.4; }
.ruleta__separador { stroke: rgba(255, 255, 255, .7); stroke-width: .6; stroke-linecap: round; }
.ruleta__separador-sombra { stroke: rgba(0, 0, 0, .45); stroke-width: 1.6; }
.ruleta__anillo { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: .6; }
.ruleta__clavo { fill: url(#ruleta-clavo); stroke: rgba(0, 0, 0, .5); stroke-width: .35; }
.ruleta__clavo-0 { stop-color: #fff; }
.ruleta__clavo-1 { stop-color: #9a9aab; }
.ruleta__clavo-2 { stop-color: #3a3a46; }

/* Foco del gajo ganador. */
.ruleta__foco { fill: #fff; opacity: 0; transition: opacity .3s ease; }
.ruleta__foco.ganador { opacity: .28; animation: ruleta-foco .5s ease-in-out 4 alternate; }
@keyframes ruleta-foco { from { opacity: .08; } to { opacity: .34; } }

/* Cada premio ocupa la rueda entera, girado hasta su gajo; el texto va del borde al centro. */
.ruleta__rueda li {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    transform: rotate(calc(var(--i, 0) * var(--gajo)));
}
.ruleta__rueda span {
    position: relative;
    max-height: 35%;
    margin-top: 4.5%;
    overflow: hidden;
    writing-mode: vertical-rl;
    color: #fff;
    font-size: clamp(.68rem, 2.3vw, .82rem);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ruleta__rueda li.ganador span {
    color: #fff;
    text-shadow: 0 0 6px #fff, 0 0 18px var(--acento), 0 0 32px var(--acento);
}

/* Brillo fijo encima de la rueda: la luz no gira con ella. */
.ruleta__brillo {
    position: absolute;
    inset: var(--rueda);
    z-index: 1;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 70% 45% at 35% 18%, rgba(255, 255, 255, .22), transparent 70%),
        radial-gradient(circle, transparent 60%, rgba(0, 0, 0, .35) 100%);
    pointer-events: none;
}

/* Buje central cromado con una joya del acento. */
.ruleta__buje {
    position: absolute;
    inset: 41.5%;
    z-index: 2;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--acento) 60%, #fff) 0 16%, var(--acento) 26%, color-mix(in srgb, var(--acento) 40%, #000) 38%, transparent 39%),
        conic-gradient(from 30deg, #3a3a46, #b7b7c6, #2a2a33, #8d8d9c, #3a3a46);
    box-shadow:
        0 0 0 3px #15151c,
        0 0 0 5px color-mix(in srgb, var(--acento) 70%, transparent),
        0 8px 24px rgba(0, 0, 0, .7),
        0 0 30px color-mix(in srgb, var(--acento) 45%, transparent);
}

/* ----- Puntero: aguja que tropieza con cada clic de la rueda ----- */
.ruleta__puntero {
    position: absolute;
    top: -5%;
    left: 50%;
    z-index: 3;
    width: 12%;
    height: auto;
    transform: translateX(-50%);
    transform-origin: 50% 30%;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)) drop-shadow(0 0 10px color-mix(in srgb, var(--acento) 60%, transparent));
}
.ruleta__puntero-claro { stop-color: color-mix(in srgb, var(--acento) 45%, #fff); }
.ruleta__puntero-oscuro { stop-color: color-mix(in srgb, var(--acento) 75%, #000); }
.ruleta__puntero-remache { fill: #f4f4f8; stroke: rgba(0, 0, 0, .35); stroke-width: 2; }
.ruleta__puntero.tic { animation: ruleta-tic .14s ease-out; }
@keyframes ruleta-tic {
    40% { transform: translateX(-50%) rotate(-16deg); }
}

/* ----- Confeti al ganar (piezas creadas por js/ruleta.js con --x, --y, --r, --c) ----- */
.ruleta__confeti { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ruleta__confeti span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 15px;
    border-radius: 2px;
    background: var(--c);
    opacity: 0;
    animation: ruleta-confeti 1.6s cubic-bezier(.15, .7, .3, 1) forwards;
    animation-delay: var(--d, 0s);
}
@keyframes ruleta-confeti {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(.3) rotate(0); }
    65%  { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(var(--r)); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 90px)) scale(.9) rotate(calc(var(--r) * 1.6)); }
}

/* ----- Sin JavaScript (sin --segmentos) los premios se muestran como lista ----- */
.ruleta__rueda:not([style]) { position: static; background: none; overflow: visible; }
.ruleta__rueda:not([style]) li { position: static; transform: none; }
.ruleta__rueda:not([style]) span { writing-mode: horizontal-tb; color: var(--texto-suave); text-transform: none; text-shadow: none; }
.ruleta__marco:has(.ruleta__rueda:not([style])) { aspect-ratio: auto; background: none; box-shadow: none; border-radius: 0; }
.ruleta__marco:has(.ruleta__rueda:not([style]))::before,
.ruleta__marco:has(.ruleta__rueda:not([style]))::after,
.ruleta__marco:has(.ruleta__rueda:not([style])) > :not(.ruleta__rueda) { display: none; }