/* ══════════════════════════════════════════════════════════════════
   COP · EL CARRUSEL DE PREMIOS — la ruleta horizontal  (08/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«necesito que la ruleta de Mega Spin tenga el mismo diseño
   que la ruleta de la Ruleta Diaria, con los diferentes multiplicadores
   que ya tiene fijos, pero mostrando la UI de la ruleta horizontal en
   carrusel igual que la diaria nueva»*.

   ⚠⚠ ESTABA ESCRITO ADENTRO DE `ruleta.html` Y SE MUDÓ ACÁ. «El mismo
   diseño» tiene una sola lectura sostenible: el mismo archivo. Copiado a
   Mega Spin, la primera corrección que Franco pida a la ruleta diaria
   aparecería en una sola de las dos —que es literalmente la historia de
   las cuatro tarjetas de historial de agosto—.
   ⚠ LOS NOMBRES DE CLASE SON LOS QUE YA TENÍA `ruleta.html` (`.rl-stage`,
   `.rl-track`, `.rl-prize`, `.rl-punta`): renombrarlos a `.cop-*` habría
   sido más prolijo y habría obligado a revisar entera una pantalla que
   hoy anda. Se muda tal cual y no se mueve un pixel.

   LAS PIEZAS:
     .rl-stage   la ventana, con los bordes desvanecidos
       .rl-track la pista que se corre
         .rl-prize  cada carta (la del medio lleva `.centro`)
     .rl-punta   el triángulo que apunta a la carta del medio
   ══════════════════════════════════════════════════════════════════ */

/* ── LA ZONA DE LAS CARTAS ─────────────────────────────────────────
   ⚠ LOS BORDES SE DESVANECEN con una máscara y no con dos degradados
   encima: pintados encima, tapan también el triángulo y el botón
   cuando la pantalla es baja. */
.rl-stage{
  flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  box-sizing:border-box;padding-block:18px;   /* el aire donde respira la luz de la carta del medio */
  margin-inline:calc(-1 * var(--aire-contenido,16px));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
/* ⚠ SU PROPIO `[hidden]`: el componente declara `display`, que empata
   con `[hidden]{display:none}` y gana por orden de carga. */
.rl-stage[hidden]{display:none}
/* ⚠⚠ `align-self:stretch` NO ES DECORACIÓN: es lo que le da a la pista
   un alto DEFINIDO, y sin alto definido en el padre el `max-height:100%`
   de la carta no se aplica —un porcentaje contra un alto automático el
   navegador lo ignora—. Sin esto, en una ventana baja la carta se pasa
   de largo y se ve cortada arriba y abajo: apareció en Mega Spin, donde
   el carrusel vive en una franja de 300 px en el medio de la sala. */
.rl-track{display:flex;align-items:center;align-self:stretch;gap:var(--gap-lg, 1rem);
  will-change:transform}

/* ── LA CARTA ──────────────────────────────────────────────────────
   ⚠ EL TAMAÑO SALE DEL ALTO Y DEL ANCHO A LA VEZ: `min(62vw, …)` con
   un techo en función del alto disponible, para que en un teléfono
   bajo la carta se achique en vez de comerse el botón.
   ⚠ LA PROPORCIÓN ES 62/100, más alta y angosta que la de antes. */
.rl-prize{
  --pz-c:#2a2f3d;
  /* ⚠⚠ `border-box` ESCRITO EN EL COMPONENTE Y NO HEREDADO DEL RESET DE
     LA PÁGINA (10/09/2026). Faltaba, y el componente venía andando de
     prestado: `ruleta.html` trae un `*{box-sizing:border-box}` global,
     así que ahí la carta medía bien y el agujero no se veía. En
     `spin.html`, que no trae ese reset, la carta se dibujaba con la caja
     de CONTENIDO: los 2 px de borde y el relleno se SUMABAN al ancho y
     al alto pedidos —178 pedidos, 201 dibujados— y la carta se salía de
     su ventana por arriba y por abajo. Es literalmente lo que Franco
     describió: *«se la ve medio recortada arriba y abajo»*.
     ⚠ ES LA REGLA DEL SISTEMA, no un parche de hoy: un componente no
     puede depender de que la página que lo use traiga un reset. */
  box-sizing:border-box;
  flex:0 0 min(62vw, 250px);width:min(62vw, 250px);
  max-height:100%;
  aspect-ratio:62/100;
  border-radius:var(--r-card, 14px);position:relative;overflow:hidden;
  /* ⚠ EL COLOR DEL PREMIO SE VE: la carta es del color de lo que da, con
     la parte de abajo más oscura. La primera versión iba de un tono
     apagado a casi negro y las seis cartas se veían iguales — el color
     no llegaba a significar nada. */
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(168deg, var(--pz-1,#1a1f2c) 0%, var(--pz-0,#05070c) 88%);
  border:2px solid rgba(255,255,255,.10);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap-md, .7rem);
  /* ⚠ LAS DE AL LADO SE APAGAN Y SE ACHICAN, no se esconden: es lo que
     dice que la rueda sigue para los dos lados. */
  opacity:.5;transform:scale(.88);
  transition:opacity .35s ease, transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* ⚠ LA DEL MEDIO ES LA ÚNICA A PLENO. La marca el JS al frenar la pista:
   en CSS no hay forma de saber cuál quedó bajo el triángulo. */
.rl-prize.centro{
  opacity:1;transform:none;
  border-color:var(--pz-c,#5fc4ff);
  /* ⚑ 15/10/2026 (Franco: «la luz que lo ilumina corta con el borde de abajo
     de la imagen»): la luz bajaba 18 px y se abría 44; el escenario corta en
     su borde (overflow) y quedaba un corte RECTO. Ahora es un halo parejo
     alrededor, que entra en el aire que deja el escenario (padding-block). */
  box-shadow:0 0 0 1px rgba(255,255,255,.06),
             0 0 22px -6px var(--pz-glow,rgba(95,196,255,.75));
}

/* la marca chiquita arriba a la izquierda y abajo a la derecha: dice de
   qué juego es la carta sin ocupar el centro */
.rl-prize .pz-marca{
  position:absolute;display:flex;align-items:center;
  opacity:.9;pointer-events:none;
}
.rl-prize .pz-marca img{height:15px;width:auto;display:block}
.rl-prize .pz-marca--a{top:.7rem;left:.7rem}
.rl-prize .pz-marca--b{bottom:.7rem;right:.7rem;opacity:.55}

/* el dibujo y el número del premio */
.rl-prize .pz-ico{line-height:1;filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
.rl-prize .pz-ico .cop-ico{--cop-ico:clamp(46px,15vw,68px)}
.rl-prize .pz-img{
  width:52%;aspect-ratio:1/1.6;border-radius:var(--r-card, 14px);background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.12) 0 4px, transparent 4px 10px),
    linear-gradient(160deg,var(--pz-2,#5fc4ff),var(--pz-1,#2068ff));
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 10px 26px -8px var(--pz-glow,rgba(95,196,255,.5));
}
/* ⚠ EL NÚMERO ES EL PROTAGONISTA, como el «$10» de la referencia: es la
   excepción de números de display de la regla tipográfica. */
.rl-prize .pz-label{
  font-family:'Anton',sans-serif;font-weight:400;
  font-size:clamp(2rem,10vw,3.1rem);line-height:1;
  letter-spacing:1px;color:#fff;
  text-shadow:0 4px 18px rgba(0,0,0,.5);
}

/* ── COLORES POR TIPO ──────────────────────────────────────────────
   Los cuatro primeros son el vocabulario de `cop-ruleta.js` (la ruleta
   diaria). Los `mult-*` los agregó Mega Spin el 08/09: el premio ahí no
   es una moneda ni un sobre sino un multiplicador, y su color tiene que
   subir con el número — un ×100 del mismo gris que un ×2 no dice que sea
   el premio gordo. */
.rl-prize[data-type="gems"] {--pz-c:var(--ok, #22c55e);--pz-glow:rgba(34,197,94,.55);
  --pz-1:#1c7a45;--pz-0:#06170e;--pz-2:#4ade80}
.rl-prize[data-type="coins"]{--pz-c:var(--gold, #ffc233);--pz-glow:rgba(255,194,51,.55);
  --pz-1:#a97c12;--pz-0:#1d1503;--pz-2:#ffd97a}
.rl-prize[data-type="card"] {--pz-c:#5fc4ff;--pz-glow:rgba(95,196,255,.55);
  --pz-1:#1663c9;--pz-0:#04101f;--pz-2:#5fc4ff}
.rl-prize[data-type="pack"] {--pz-c:var(--purple, #9d2bff);--pz-glow:rgba(157,43,255,.55);
  --pz-1:#6f22c4;--pz-0:#120725;--pz-2:#c89bff}
/* ⚠⚠ ACÁ VIVÍAN LOS CUATRO ESCALONES DEL MULTIPLICADOR —`mult-1` a
   `mult-4`, gris → celeste → dorado → violeta, del 08/09— Y SE FUERON
   (Franco, 10/09/2026: *«es importante que todas las tarjetas de la
   ruleta tengan el mismo color celeste»*).

   La razón se ve girando y no quieto: las seis cartas pasan una tras
   otra bajo el triángulo, y con el color cambiando durante el giro la
   ruleta parece repartir COSAS distintas en vez de números distintos de
   lo mismo. El escalón de color no se pierde: se mudó a la hoja de
   Recompensas de Mega Spin, que es donde las seis se ven JUNTAS y
   QUIETAS —ahí el color informa en vez de confundir—.
   ⚠ SE BORRAN, NO SE DEJAN «POR LAS DUDAS»: cuatro reglas que ya nadie
   pide son cuatro que el próximo lector tiene que descartar.
   ⚠ EL CELESTE ES EL DE LA MARCA (`--primary`, 12,149,235), no un tono
   elegido acá: es el acento de Mega Spin y de casi toda la app desde el
   03/09. */
.rl-prize[data-type="mult-spin"]{--pz-c:var(--primary, #0c95eb);--pz-glow:rgba(12,149,235,.55);
  --pz-1:#12507f;--pz-0:#040d16;--pz-2:#5fc4ff}

/* ── EL TRIÁNGULO ──────────────────────────────────────────────────
   ⚠ APUNTA A LA CARTA Y VA DEBAJO. Reemplazó a la línea blanca
   vertical, que cortaba la carta al medio. */
.rl-punta{
  flex:0 0 auto;display:flex;justify-content:center;
  padding:.7rem 0 .2rem;color:rgba(255,255,255,.55);
}
.rl-punta[hidden]{display:none}
.rl-punta svg{width:20px;height:14px;display:block}