/* Componente compartido: carrusel visual de minijuegos de MyStake.
   La segunda secuencia solo sostiene el loop y queda fuera del árbol accesible. */
.mystake-ar__carousel{
  --mystake-carousel-green:var(--ms-green,#31e690);
  position:relative;
  display:grid;
  gap:.75rem;
}
.mystake-ar__carousel-viewport{
  overflow:hidden;
  padding:.15rem 0;
  border-radius:16px;
  outline:none;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.mystake-ar__carousel-viewport:focus-visible{
  box-shadow:0 0 0 2px var(--mystake-carousel-green);
}
.mystake-ar__carousel-track{
  display:flex;
  width:max-content;
  gap:.7rem;
  animation:mystake-ar-minigame-loop 92s linear infinite;
  will-change:transform;
}
.mystake-ar__carousel-sequence{
  display:flex;
  flex:0 0 auto;
  gap:.7rem;
  margin:0;
  padding:0;
  list-style:none;
}
.mystake-ar__carousel-card{
  flex:0 0 142px;
  overflow:hidden;
  border:1px solid rgba(201,255,226,.14);
  border-radius:14px;
  background:#0d1717;
  box-shadow:0 10px 20px rgba(0,0,0,.2);
}
.mystake-ar__carousel-card figure{margin:0}
.mystake-ar__carousel-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:256/300;
  object-fit:cover;
  background:linear-gradient(145deg,#f7f7f7,#6f5cff);
}
.mystake-ar__carousel-card figcaption{
  overflow:hidden;
  padding:.52rem .58rem .6rem;
  color:#eafff2;
  font-size:.73rem;
  font-weight:800;
  letter-spacing:.01em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mystake-ar__carousel-toggle{
  justify-self:start;
  min-height:36px;
  padding:.46rem .7rem;
  border:1px solid rgba(201,255,226,.25);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#d9ede4;
  font:inherit;
  font-size:.74rem;
  font-weight:800;
  cursor:pointer;
}
.mystake-ar__carousel-toggle:hover,.mystake-ar__carousel-toggle:focus-visible{
  border-color:var(--mystake-carousel-green);
  color:#fff;
  outline:none;
}
.mystake-ar__carousel:hover .mystake-ar__carousel-track,
.mystake-ar__carousel:focus-within .mystake-ar__carousel-track,
.mystake-ar__carousel.is-paused .mystake-ar__carousel-track{animation-play-state:paused}
@keyframes mystake-ar-minigame-loop{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - .35rem))}
}
@media (max-width:720px){
  .mystake-ar__carousel-card{flex-basis:118px}
  .mystake-ar__carousel-card figcaption{font-size:.69rem}
  .mystake-ar__carousel-track,.mystake-ar__carousel-sequence{gap:.55rem}
}
@media (prefers-reduced-motion:reduce){
  .mystake-ar__carousel-track{animation:none!important}
  .mystake-ar__carousel-viewport{overflow-x:auto;mask-image:none}
  .mystake-ar__carousel-sequence[aria-hidden="true"]{display:none}
  .mystake-ar__carousel-toggle{display:none}
}