/* ============================================================
   WRD — juegos.css  ·  La ruleta de las 10 y los premios
   ============================================================
   El lenguaje es el de css/tienda.css («Noche y Día»): stickers de
   borde chocolate con sombra dura de color, sellos torcidos, letra
   gorda. Acá NO se define ningún color nuevo: todo sale de los
   tokens --t-* de tienda.css. Lo único propio son las piezas que
   solo existen en los juegos (la rueda, el panel de "esta noche",
   el ticket del premio, la marquesina de ganadores, la barrita de
   votos) y se nombran .jg-*.

   Quién pinta qué: js/juegos.js arma todo el DOM de #juegos, del
   #juegos-badge del hero y de cada [data-voto-slot]. El servidor
   decide lo que vale plata; este archivo solo lo viste.

   Contenido
     1. La sección y su cabecera
     2. La ruleta
     3. El resultado y el confeti
     4. Esta noche y la cuenta regresiva
     5. Mis premios (tickets)
     6. Ganadores (marquesina)
     7. Votos en las tarjetas «Pronto»
     8. El badge del hero
     9. Movimiento quieto
   ============================================================ */


/* ============================================================
   1 · LA SECCIÓN
   ============================================================ */

.juegos {
  --jg-fondo: var(--t-chicle-2);
  position: relative;
  margin-block: 36px;
  padding: 26px 16px 30px;
  color: var(--t-choco);
  background-color: var(--jg-fondo);
  background-image: var(--t-chispitas);
  background-size: 160px 160px;
  border: var(--t-borde);
  border-radius: 26px;
  box-shadow: 6px 6px 0 var(--t-choco);
  overflow: hidden;
  scroll-margin-top: 80px;
}
.juegos[hidden] { display: none; }

.jg-envoltura {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 560px;
  margin: 0 auto;
}

.jg-cabeza { text-align: center; }
.jg-cabeza .t-sello { margin-bottom: 10px; }
.jg-cabeza .t-titulo { font-size: 36px; padding: 6px 20px 8px; }
.jg-bajada { margin-top: 14px; font-size: 17px; }

.jg-como {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.jg-como li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.3;
  background: var(--t-papel);
  border: var(--t-borde-fino);
  border-radius: 14px;
}
.jg-como-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 20px;
  background: var(--t-mango);
  border: var(--t-borde-fino);
  border-radius: 50%;
}
.jg-como-ico--num {
  font-family: var(--t-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--t-choco);
}
.jg-como b { font-family: var(--t-font-display); font-weight: 700; }


.jg-tarjeta {
  position: relative;
  padding: 18px 16px 20px;
  overflow: hidden;
}
.jg-tarjeta-titulo {
  margin: 0 0 4px;
  font-family: var(--t-font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}
.jg-letra-chica {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--t-choco-2);
}

.jg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   2 · LA RULETA
   ============================================================ */

.jg-ruleta { padding-inline: 10px; }

.jg-rueda-marco {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1;
  margin: 26px auto 10px;
}

/* Los rayos de cartel detrás de la rueda. Giran despacito solos:
   la rueda de verdad solo se mueve con la respuesta del servidor. */
.jg-rueda-marco::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: repeating-conic-gradient(from 0deg, var(--t-mango) 0deg 10deg, var(--t-naranja-2) 10deg 20deg);
  border-radius: 50%;
  opacity: 0.55;
  animation: t-gira 60s linear infinite;
}

.jg-rueda-sombra {
  position: absolute;
  inset: 0;
  background: var(--t-choco);
  border-radius: 50%;
  transform: translate(6px, 6px);
}

.jg-rueda {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  will-change: transform;
}

.jg-seg { stroke: var(--t-choco); stroke-width: 3; stroke-linejoin: round; }
.jg-seg--p6    { fill: var(--t-mango); }
.jg-seg--p3    { fill: var(--t-naranja); }
.jg-seg--p1    { fill: var(--t-chicle); }
.jg-seg--nada  { fill: var(--t-papel); }
.jg-seg--nada2 { fill: var(--t-crema-2); }
/* El paquete que ya salió esta noche: apagado, con su sello. */
.jg-seg.jg-seg--agotada { fill: var(--t-crema); }
.jg-seg-agotada .jg-ficha,
.jg-seg-agotada svg { opacity: 0.35; }

.jg-aro { fill: var(--t-choco); }
.jg-ficha { fill: var(--t-papel); stroke: var(--t-choco); stroke-width: 2.5; }
.jg-foco { fill: var(--t-mango); stroke: var(--t-choco); stroke-width: 1.5; }
.jg-foco:nth-of-type(2n) { animation: jg-titila 1.2s steps(1) infinite; }
.jg-foco:nth-of-type(2n+1) { animation: jg-titila 1.2s steps(1) 0.6s infinite; }

.jg-seg-texto {
  font-family: var(--t-font-display);
  font-size: 13px;
  font-weight: 700;
  fill: var(--t-choco);
  letter-spacing: 0.01em;
}
.jg-seg-texto--premio { font-weight: 700; }
.jg-seg-texto--salio {
  font-family: var(--t-font-chicle);
  font-weight: 400;
  fill: var(--t-rojo-boton);
  letter-spacing: 0.03em;
}
.jg-seg-emoji { font-size: 22px; }

.jg-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 24%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  font-family: var(--t-font-chicle);
  font-size: 19px;
  line-height: 1;
  color: var(--t-mango);
  background: var(--t-choco);
  border: 3px solid var(--t-mango);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--t-choco);
  pointer-events: none;
}

.jg-flecha {
  position: absolute;
  top: -22px;
  left: 50%;
  z-index: 2;
  width: 48px;
  height: 58px;
  margin-left: -24px;
  transform-origin: 50% 22%;
  pointer-events: none;
}
.jg-flecha-cuerpo { fill: var(--t-rojo); stroke: var(--t-choco); stroke-width: 3.5; stroke-linejoin: round; }
.jg-flecha-brillo { fill: var(--t-papel); }

.jg-leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--t-choco-2);
}
.jg-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.jg-leyenda-punto {
  width: 14px;
  height: 14px;
  border: var(--t-borde-fino);
  border-radius: 4px;
}
.jg-leyenda-punto--p6   { background: var(--t-mango); }
.jg-leyenda-punto--p3   { background: var(--t-naranja); }
.jg-leyenda-punto--p1   { background: var(--t-chicle); }
.jg-leyenda-punto--nada { background: var(--t-papel); }
.jg-leyenda-salio { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--t-choco-3); }

.jg-accion { margin-top: 14px; }
.jg-girar { font-size: 22px; min-height: 60px; }
.jg-girar.t-latido:active { animation: none; }
.jg-girar.jg-girar--espera,
.jg-girar.jg-girar--espera[disabled] {
  font-size: 18px;
  color: var(--t-choco);
  background: var(--t-crema);
  border-style: dashed;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}

.jg-aviso {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: var(--t-rojo-boton);
}
.jg-aviso:empty { display: none; }


/* ============================================================
   3 · EL RESULTADO Y EL CONFETI
   ============================================================ */

.jg-gano {
  margin-top: 18px;
  padding: 18px 16px 18px;
  text-align: center;
  background: var(--t-mango);
  border: var(--t-borde);
  border-radius: var(--t-r-3);
  box-shadow: var(--t-sombra);
}
.jg-gano--nada { background: var(--t-papel); box-shadow: var(--t-sombra-chicle); }
.jg-gano--giro { background: var(--t-chicle); }

.jg-grito {
  display: inline-block;
  margin: 0;
  font-family: var(--t-font-chicle);
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--t-choco);
  text-shadow: 3px 3px 0 var(--t-papel);
  transform: rotate(-3deg);
}
.jg-gano--nada .jg-grito { font-size: 34px; text-shadow: 3px 3px 0 var(--t-chicle-2); }

.jg-gano-ico { display: grid; place-items: center; margin: 8px auto 4px; font-size: 52px; line-height: 1; }
.jg-gano-ico svg { display: block; }
.jg-gano-rotulo {
  margin: 0 0 8px;
  font-family: var(--t-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-choco-2);
}
.jg-grito--largo { font-size: 30px; }
.jg-gano--nada .jg-grito--largo { font-size: 28px; }
.jg-premio-dibujo { position: relative; display: inline-grid; place-items: center; }
.jg-premio-x {
  position: absolute;
  right: -10px;
  bottom: -2px;
  padding: 1px 8px 3px;
  font-family: var(--t-font-chicle);
  font-size: 20px;
  line-height: 1;
  color: var(--t-choco);
  background: var(--t-papel);
  border: var(--t-borde-fino);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--t-choco);
  transform: rotate(-6deg);
}
.jg-gano-que {
  margin: 6px 0 0;
  font-family: var(--t-font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}
.jg-gano-sub { margin: 6px 0 0; font-size: 16px; line-height: 1.4; color: var(--t-choco-2); }
.jg-gano .t-btn { margin-top: 14px; }

.jg-confeti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
}


/* ============================================================
   4 · ESTA NOCHE Y LA CUENTA REGRESIVA
   ============================================================ */

.jg-noche {
  margin: 12px 0 4px;
  padding: 12px 12px 10px;
  background: var(--t-crema);
  border: var(--t-borde-fino);
  border-radius: 16px;
}
.jg-noche[hidden] { display: none; }
.jg-noche-titulo {
  margin: 0 0 8px;
  font-family: var(--t-font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.jg-noche--cerrada { background: var(--t-mango); }
.jg-noche-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.jg-paq {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 10px;
  background: var(--t-papel);
  border: var(--t-borde-fino);
  border-radius: 12px;
}
.jg-paq-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; }
.jg-paq-ico svg { display: block; }
.jg-paq-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.jg-paq-txt b { font-family: var(--t-font-display); font-size: 16px; font-weight: 700; }
.jg-paq-txt small { font-size: 14px; color: var(--t-verde-boton); font-weight: 700; }
.jg-paq--salio { background: var(--t-crema); }
.jg-paq--salio .jg-paq-ico { opacity: 0.4; }
.jg-paq--salio b { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--t-choco-3); }
.jg-paq--salio small { color: var(--t-rojo-boton); }

.jg-reloj-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  font-family: var(--t-font-display);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.jg-reloj-linea[hidden] { display: none; }
.jg-reloj-sello { font-size: 16px; }


/* ============================================================
   5 · MIS PREMIOS  ·  cada premio es un ticket de verdad
   ============================================================ */

.jg-premios[hidden] { display: none; }
.jg-premios-cabeza { text-align: center; margin-bottom: 16px; }
.jg-premios-cabeza .t-titulo { font-size: 26px; }

.jg-tickets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jg-ticket {
  --jg-talon: 78px;
  position: relative;
  display: grid;
  grid-template-columns: var(--jg-talon) 1fr;
  background: var(--t-papel);
  border: var(--t-borde);
  border-radius: 18px;
  box-shadow: var(--t-sombra-verde);
}
.jg-ticket::before,
.jg-ticket::after {
  content: "";
  position: absolute;
  left: calc(var(--jg-talon) - 11px);
  width: 22px;
  height: 22px;
  background: var(--jg-fondo, var(--t-hueso));
  border: var(--t-borde);
  border-radius: 50%;
}
.jg-ticket::before { top: -13px; }
.jg-ticket::after  { bottom: -13px; }

.jg-ticket-talon {
  display: grid;
  place-items: center;
  font-size: 38px;
  background: var(--t-mango);
  border-right: 3px dashed var(--t-choco);
  border-radius: 15px 0 0 15px;
}
.jg-ticket--domicilio .jg-ticket-talon { background: var(--t-naranja); }
.jg-ticket-talon .jg-premio-x { right: -6px; bottom: -6px; font-size: 17px; }
.jg-ticket-talon svg { display: block; }

.jg-ticket-cuerpo { min-width: 0; padding: 12px 14px 14px 16px; }
.jg-ticket-nombre {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
}
.jg-ticket-vence { margin: 4px 0 0; font-size: 15px; line-height: 1.35; color: var(--t-choco-2); }
.jg-ticket-vence b { color: var(--t-rojo-boton); }
.jg-ticket-usar { margin-top: 10px; min-height: 48px; font-size: 17px; width: 100%; }


/* ============================================================
   6 · GANADORES  ·  la tira que corre
   ============================================================ */

.jg-ganadores {
  color: var(--t-blanco-choco);
  background: var(--t-noche);
  border: var(--t-borde);
  border-radius: 18px;
  box-shadow: var(--t-sombra-naranja);
  overflow: hidden;
}
.jg-ganadores[hidden] { display: none; }
.jg-ganadores-titulo {
  margin: 0;
  padding: 10px 14px 0;
  font-family: var(--t-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-mango);
}
.jg-marquesina-caja { overflow: hidden; padding: 8px 0 12px; }
.jg-marquesina {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: jg-corre var(--jg-dura, 30s) linear infinite;
}
.jg-marquesina-caja:hover .jg-marquesina,
.jg-marquesina-caja:focus-within .jg-marquesina { animation-play-state: paused; }
.jg-ganador {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 18px;
  font-family: var(--t-font-display);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}
.jg-ganador::after { content: "✦"; margin-left: 18px; color: var(--t-naranja); }
.jg-ganador b { color: var(--t-mango); font-weight: 700; }
.jg-ganador small { font-size: 14px; color: var(--t-crema-2); }


/* ============================================================
   7 · VOTOS  ·  «¡Lo quiero!» en cada tarjeta que todavía no llega
   ============================================================ */

.jg-voto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  text-align: left;
}
.jg-voto-btn {
  width: 100%;
  min-height: 48px;
  padding: 6px 10px;
  font-size: 17px;
}
.jg-voto-btn[aria-pressed="true"] { background: var(--t-mango); }
.jg-voto-barra {
  height: 14px;
  background: var(--t-papel);
  border: var(--t-borde-fino);
  border-radius: 999px;
  overflow: hidden;
}
.jg-voto-relleno {
  display: block;
  height: 100%;
  width: 0;
  background: var(--t-chicle);
  border-right: 2px solid var(--t-choco);
  transition: width 500ms var(--t-suave);
}
.jg-voto-relleno--cero { border-right: 0; }
.jg-voto-dato { font-size: 14px; line-height: 1.3; color: var(--t-choco-2); }
.jg-voto-dato b { color: var(--t-choco); }


/* ============================================================
   8 · EL BADGE DEL HERO  ·  «Abre 10 p.m.» · «¡Abierta ahora!» · «Ya salieron»
   ============================================================ */

#juegos-badge:not([hidden]) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-left: 6px;
  padding: 1px 9px 2px;
  font-family: var(--t-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--t-blanco-choco);
  background: var(--t-choco);
  border: var(--t-borde-fino);
  border-radius: 999px;
  white-space: nowrap;
}
#juegos-badge[data-estado="abierta"]:not([hidden]) {
  color: #fff;
  background: var(--t-rojo-boton);
  animation: t-latido 1.6s ease-in-out infinite;
}


/* ============================================================
   9 · MOVIMIENTO
   ============================================================ */

@keyframes jg-titila {
  0%, 100% { fill: var(--t-mango); }
  50%      { fill: var(--t-papel); }
}

@keyframes jg-corre {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .jg-rueda-marco::before,
  .jg-foco,
  #juegos-badge:not([hidden]) { animation: none !important; }
  .jg-voto-relleno { transition: none; }
  .jg-marquesina { animation: none; width: auto; flex-wrap: wrap; row-gap: 6px; }
  .jg-marquesina [aria-hidden="true"] { display: none; }
  .jg-ganador { white-space: normal; }
}