:root {
  --winx-preloader-width: clamp(170px, 22vw, 250px);
  --winx-loader-width: var(--winx-preloader-width);
  --winx-loader-ratio: 1037 / 583;
  --winx-preloader-fade-ms: 320ms;
}

.winx-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 46%, rgba(37, 77, 157, .16), transparent 42%),
    linear-gradient(180deg, rgba(8, 13, 31, .98), #050915);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--winx-preloader-fade-ms) ease, visibility var(--winx-preloader-fade-ms) ease;
}

.winx-preloader.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.winx-preloader__stage {
  display: grid;
  place-items: center;
}

/* Locked v36 reel/chamber geometry: sizing alone is controlled by the variable above. */
.winx-loader {
  width: var(--winx-loader-width);
  max-width: 100%;
  background: transparent;
  pointer-events: none;
  user-select: none;
}

.winx-loader__stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--winx-loader-ratio);
  background: transparent;
  isolation: isolate;
  transform-origin: 50% 57%;
}

.winx-slot {
  position: absolute;
  z-index: 6;
  opacity: 0;
  overflow: hidden;
  border-radius: 46px;
  transform-origin: 50% 58%;
  filter: blur(11px);
  will-change: transform, opacity, filter;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.winx-slot--w {
  left: 2.27273%;
  top: 23.37938%;
  width: 41.98565%;
  height: 60.57386%;
}

.winx-slot--i {
  left: 34.09091%;
  top: 22.84803%;
  width: 22.12919%;
  height: 61.10521%;
}

.winx-slot--n {
  left: 48.14593%;
  top: 22.31668%;
  width: 27.21292%;
  height: 62.69926%;
}

.winx-slot--x {
  left: 59.80861%;
  top: 20.19129%;
  width: 39.17464%;
  height: 65.35600%;
}

.winx-slot__strip {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: auto;
  transform: translate3d(0, -88.888889%, 0);
  will-change: transform, filter;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 640px) {
  :root {
    --winx-preloader-width: clamp(150px, 46vw, 180px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .winx-preloader,
  .winx-slot,
  .winx-slot__strip {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}