#unity-game {
  container-type: inline-size;
}

#loader-transition-black {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  opacity: 0;
  pointer-events: auto;
}

#unity-loading {
  /* Positions and sizes are relative to the 16:9 game frame. */
  --logo-x: 51%;
  --logo-y: 36%;
  --logo-width: 48%;
  --logo-shine-duration: 1.5s;
  --logo-glow-opacity: 0.65;
  --logo-glow-color: #ff25db;
  --title-blick-one-x: 49.2%;
  --title-blick-one-y: 13.2%;
  --title-blick-one-width: 15%;
  --title-blick-two-x: 92.81%;
  --title-blick-two-y: 23%;
  --title-blick-two-width: 15%;
  --star-l-x: 22.6%;
  --star-l-y: 37%;
  --star-l-width: 10%;
  --star-r-x: 80.2%;
  --star-r-y: 36.6%;
  --star-r-width: 10%;
  --flying-star-x: 32%;
  --flying-star-y: 28%;
  --flying-star-width: 9%;
  --flying-star-path-width: 18%;
  --flying-star-path-height: 12%;
  --flying-star-spawn-interval: 9s;
  --flying-star-initial-delay: 1.5s;
  --flying-star-speed: 270;
  --flying-star-point-speed: 80;
  --flying-star-scale-min: 0.6;
  --flying-star-scale-max: 0.8;
  --flying-star-trail-length: 970;
  --flying-star-particle-spacing: 5;
  --flying-brilliant-x: 68%;
  --flying-brilliant-y: 28%;
  --flying-brilliant-width: 9%;
  --flying-brilliant-path-width: 18%;
  --flying-brilliant-path-height: 12%;
  --flying-brilliant-spawn-interval: 9s;
  --flying-brilliant-initial-delay: 2.5s;
  --flying-brilliant-speed: 270;
  --flying-brilliant-point-speed: 90;
  --flying-brilliant-scale-min: 0.7;
  --flying-brilliant-scale-max: 0.9;
  --flying-brilliant-trail-length: 970;
  --flying-brilliant-particle-spacing: 4;
  --sky-rombus-max-count: 4;
  --sky-rombus-lifetime: 3s;
  --sky-rombus-fade-duration: 1s;
  --sky-rombus-width: 2.5%;
  --sky-rombus-scale-min: 1.1;
  --sky-rombus-scale-max: 1.4;
  --sky-blik-scale-min: 0.4;
  --sky-blik-scale-max: 1;
  --sky-blik-opacity-min: 0.6;
  --sky-blik-opacity-max: 1;
  --sky-blik-width: 4.5%;
  --sky-blik-duration: 3s;
  --sky-blik-one-x: 15%;
  --sky-blik-one-y: 7%;
  --sky-blik-one-width: var(--sky-blik-width);
  --sky-blik-one-initial-delay: 1s;
  --sky-blik-one-loop-interval: 2s;
  --sky-blik-two-x: 46%;
  --sky-blik-two-y: 12%;
  --sky-blik-two-width: var(--sky-blik-width);
  --sky-blik-two-initial-delay: 2s;
  --sky-blik-two-loop-interval: 3s;
  --sky-blik-three-x: 88%;
  --sky-blik-three-y: 6%;
  --sky-blik-three-width: var(--sky-blik-width);
  --sky-blik-three-initial-delay: 3s;
  --sky-blik-three-loop-interval: 2.5s;
  --loader-bg-x: 51%;
  --loader-bg-y: 78%;
  --loader-bg-width: 60%;
  --loader-line-x: 51%;
  --loader-line-y: 77.25%;
  --loader-line-width: 56%;
		    --loader-line-scale-x: 1.005;
  --loader-progress: 0%;
  --loader-blick-width: 15%;
  --loader-blick-y: 10%;
  --loader-blick-offset-x: -3%;
  --loader-blick-scale: 0;
  --loading-text-x: 51%;
  --loading-text-y: 67.5%;
  --loading-text-size: 2.2cqw;
  --loading-rule-x: 51%;
  --loading-rule-y: 64%;
  --loading-rule-width: 28%;
  --loading-backdrop-y: 68.5%;
  --loading-backdrop-width: 34%;
  --loading-backdrop-height: 17%;
  --percent-text-x: 51%;
  --percent-text-y: 87%;
  --percent-text-size: 3cqw;
  --percent-backdrop-y: 87%;
  --percent-backdrop-width: 16%;
  --percent-backdrop-height: 12%;
  /* Sampled from the reference at (174, 42) and (174, 67). */
  --loader-text-top-color: #f3f4f8;
  --loader-text-bottom-color: #b1f6f8;
  --loader-text-outline-color: #10145b;
  --loader-text-outline-width: 0.035em;
  --spotlight-x: 92%;
  --spotlight-y: 51.7%;
  --spotlight-width: 18%;
  --spotlight-height: 65%;
  --spotlight-opacity: 1;
  --neon-left-x: 12%;
  --neon-right-x: 85%;
  --neon-glow-y: 88%;
  --neon-left-width: 15%;
  --neon-right-width: 13%;
  --neon-glow-height: 8%;
  --left-tower-windows-x: 4%;
  --left-tower-windows-width: 2%;
  --left-tower-floor-upper-y: 46.5%;
  --left-tower-floor-lower-y: 50.2%;
  --right-tower-windows-x: 91.7%;
  --right-tower-windows-width: 1.1%;
  --right-tower-floor-upper-y: 61.25%;
  --right-tower-floor-lower-y: 67.1%;
  --left-tower-window-height: 0.85%;
  --right-tower-window-height: 1.15%;
  z-index: 1;
  background: #08051c url("../assets/images/loader/LoaderSceneBackgroundSmall.webp") center / 100% 100% no-repeat;
}

#loader-background-hd {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease-in-out;
}

#loader-background-hd.visible {
  opacity: 1;
}

.loader-star-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.loader-flying-star {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--flying-star-width);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

#loader-flying-star {
  display: none;
}

.loader-flying-brilliant {
  width: var(--flying-brilliant-width);
}

#loader-flying-brilliant {
  display: none;
}

#loader-sky-rombuses {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.loader-rombus-source {
  display: none;
}

.loader-sky-rombus {
  position: absolute;
  width: var(--sky-rombus-width);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: drop-shadow(0 0 0.12cqw rgb(var(--rombus-glow-rgb) / 65%)) drop-shadow(0 0 0.35cqw rgb(var(--rombus-glow-rgb) / 65%)) drop-shadow(0 0 0.7cqw rgb(var(--rombus-glow-rgb) / 40%));
}

.loader-sky-rombus-blue {
  --rombus-glow-rgb: 52 217 255;
}

.loader-sky-rombus-pink {
  --rombus-glow-rgb: 255 37 219;
}

.loader-sky-blik {
  position: absolute;
  left: var(--blik-x);
  top: var(--blik-y);
  width: var(--blik-width);
  height: auto;
  z-index: -1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(var(--sky-blik-scale-min));
  pointer-events: none;
}

.loader-sky-blik.ready {
  opacity: var(--sky-blik-opacity-min);
}

.loader-sky-blik.pulsing {
  animation: sky-blik-pulse var(--sky-blik-duration) ease-in-out both;
}

#loader-sky-blik-one {
  --blik-x: var(--sky-blik-one-x);
  --blik-y: var(--sky-blik-one-y);
  --blik-width: var(--sky-blik-one-width);
}

#loader-sky-blik-two {
  --blik-x: var(--sky-blik-two-x);
  --blik-y: var(--sky-blik-two-y);
  --blik-width: var(--sky-blik-two-width);
}

#loader-sky-blik-three {
  --blik-x: var(--sky-blik-three-x);
  --blik-y: var(--sky-blik-three-y);
  --blik-width: var(--sky-blik-three-width);
}

@keyframes sky-blik-pulse {
  0%, 100% {
    opacity: var(--sky-blik-opacity-min);
    transform: translate(-50%, -50%) scale(var(--sky-blik-scale-min));
  }
  50% {
    opacity: var(--sky-blik-opacity-max);
    transform: translate(-50%, -50%) scale(var(--sky-blik-scale-max));
  }
}

#loader-title {
  z-index: 4;
  position: absolute;
  left: var(--logo-x);
  top: var(--logo-y);
  width: var(--logo-width);
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.background-neon-glow {
  position: absolute;
  z-index: 0;
  top: var(--neon-glow-y);
  height: var(--neon-glow-height);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgb(255 23 216 / 72%) 0%, rgb(255 23 216 / 42%) 30%, rgb(245 28 225 / 18%) 58%, transparent 100%);
  filter: blur(0.7cqw);
  mix-blend-mode: screen;
  pointer-events: none;
}

#background-neon-glow-left {
  left: var(--neon-left-x);
  width: var(--neon-left-width);
  animation: neon-glow-pulse-left 3.2s ease-in-out -0.8s infinite;
}

#background-neon-glow-right {
  left: var(--neon-right-x);
  width: var(--neon-right-width);
  animation: neon-glow-pulse-right 4.1s ease-in-out -2.3s infinite;
}

#loader-window-lights {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.window-floor-light {
  position: absolute;
  height: var(--left-tower-window-height);
  background: rgba(10, 18, 101, 1);
  filter: drop-shadow(0 0 0.32cqw rgba(10, 18, 101, 1));
  opacity: 0.0;
  transition: opacity 180ms ease-in-out;
}

.window-floor-light.lit {
  opacity: 0.95;
}

#left-tower-upper-floor {
  left: var(--left-tower-windows-x);
  top: var(--left-tower-floor-upper-y);
  width: var(--left-tower-windows-width);
}

#left-tower-lower-floor {
  left: var(--left-tower-windows-x);
  top: var(--left-tower-floor-lower-y);
  width: var(--left-tower-windows-width);
}

#right-tower-upper-floor {
  left: var(--right-tower-windows-x);
  top: var(--right-tower-floor-upper-y);
  width: var(--right-tower-windows-width);
  height: var(--right-tower-window-height);
}

#right-tower-lower-floor {
  left: var(--right-tower-windows-x);
  top: var(--right-tower-floor-lower-y);
  width: var(--right-tower-windows-width);
  height: var(--right-tower-window-height);
}

@keyframes neon-glow-pulse-left {
  0%, 100% { opacity: 0.3; }
  24% { opacity: 0.72; }
  33% { opacity: 0.48; }
  71% { opacity: 0.64; }
  80% { opacity: 0.36; }
}

@keyframes neon-glow-pulse-right {
  0%, 100% { opacity: 0.46; }
  18% { opacity: 0.32; }
  39% { opacity: 0.7; }
  51% { opacity: 0.4; }
  78% { opacity: 0.62; }
}

#loader-searchlights {
  position: absolute;
  z-index: -3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--spotlight-opacity);
}

.searchlight-beam {
  position: absolute;
  left: var(--spotlight-x);
  top: var(--spotlight-y);
  width: calc(var(--spotlight-width) * var(--beam-width-multiplier));
  height: var(--spotlight-height);
  transform-origin: 50% 100%;
  /* Distance from the source controls both color and transparency. */
  background: linear-gradient(to top, #fff 0%, rgb(245 250 255 / 98%) 5%, rgb(195 225 255 / 85%) 15%, rgb(130 180 255 / 50%) 35%, rgb(85 135 255 / 25%) 60%, rgb(65 110 255 / 8%) 85%, rgb(65 110 255 / 0%) 100%);
  /* The angular mask widens the cone without changing its length. */
  --beam-mask: conic-gradient(from calc(0deg - var(--beam-half-angle)) at 50% 100%, transparent 0deg, rgb(0 0 0 / 35%) calc(var(--beam-half-angle) * 0.2), #000 calc(var(--beam-half-angle) * 0.5), #000 calc(var(--beam-half-angle) * 1.5), rgb(0 0 0 / 35%) calc(var(--beam-half-angle) * 1.8), transparent calc(var(--beam-half-angle) * 2));
  -webkit-mask-image: var(--beam-mask);
  mask-image: var(--beam-mask);
  filter: blur(3px);
  animation: searchlight-sweep var(--sweep-duration) ease-in-out infinite alternate;
  animation-delay: var(--sweep-delay);
}

.searchlight-beam:nth-child(1) {
  --beam-half-angle: 17deg;
  --beam-width-multiplier: 3;
  --angle-from: -22deg;
  --angle-to: -4deg;
  --sweep-duration: 6s;
  --sweep-delay: -2s;
}

.searchlight-beam:nth-child(2) {
  --beam-half-angle: 10deg;
  --beam-width-multiplier: 2;
  --angle-from: 8deg;
  --angle-to: 27deg;
  --sweep-duration: 8s;
  --sweep-delay: -5s;
}

.searchlight-beam:nth-child(3) {
  --beam-half-angle: 7deg;
  --beam-width-multiplier: 1;
  --angle-from: 31deg;
  --angle-to: 49deg;
  --sweep-duration: 7s;
  --sweep-delay: -1s;
}

#searchlight-source {
  position: absolute;
  left: var(--spotlight-x);
  top: var(--spotlight-y);
  width: 1.8%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, #fff 0%, rgb(190 225 255 / 85%) 15%, rgb(90 160 255 / 35%) 40%, transparent 70%);
}

@keyframes searchlight-sweep {
  from {
    transform: translate(-50%, -100%) rotate(var(--angle-from));
  }
  to {
    transform: translate(-50%, -100%) rotate(var(--angle-to));
  }
}

#loader-title-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

#loader-title-logo-hd {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
}

#loader-title-logo-hd.visible {
  opacity: 1;
}

#loader-title-glow {
  position: absolute;
  inset: 0;
  opacity: var(--logo-glow-opacity);
  animation: logo-neon-pulse 3.7s ease-in-out infinite;
}

#loader-title-glow img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 2px var(--logo-glow-color)) drop-shadow(0 0 6px var(--logo-glow-color)) drop-shadow(0 0 14px rgb(255 37 219 / 60%));
}

@keyframes logo-neon-pulse {
  0%, 100% { opacity: var(--logo-glow-opacity); }
  19% { opacity: calc(var(--logo-glow-opacity) * 0.84); }
  27% { opacity: calc(var(--logo-glow-opacity) * 0.99); }
  43% { opacity: calc(var(--logo-glow-opacity) * 0.78); }
  49% { opacity: calc(var(--logo-glow-opacity) * 0.96); }
  71% { opacity: calc(var(--logo-glow-opacity) * 0.81); }
  83% { opacity: calc(var(--logo-glow-opacity) * 0.98); }
}

#loader-title-shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  background: linear-gradient(105deg, transparent 45.1%, rgb(255 255 255 / 25%) 47.9%, rgb(255 255 255 / 70%) 49.65%, rgb(255 255 255 / 70%) 50.35%, rgb(255 255 255 / 25%) 52.1%, transparent 54.9%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-mask: url("../assets/images/loader/LuckySpinsTitleLogo.webp") center / 100% 100% no-repeat;
  mask: url("../assets/images/loader/LuckySpinsTitleLogo.webp") center / 100% 100% no-repeat;
}

.title-blick {
  position: absolute;
  z-index: 3;
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#loader-title-blick-one {
  left: var(--title-blick-one-x);
  top: var(--title-blick-one-y);
  width: var(--title-blick-one-width);
  animation: title-blick-one-opacity 6s ease-in-out 2s infinite both;
}

#loader-title-blick-two {
  left: var(--title-blick-two-x);
  top: var(--title-blick-two-y);
  width: var(--title-blick-two-width);
  animation: title-blick-two-opacity 7.5s ease-in-out 0.2s infinite both;
}

@keyframes title-blick-one-opacity {
  0%, 100% { opacity: 0; }
  25%, 75% { opacity: 1; }
}

@keyframes title-blick-two-opacity {
  0%, 100% { opacity: 0; }
  22.2222%, 66.6667% { opacity: 1; }
}

#loader-title.shine-active #loader-title-shine {
  animation: logo-shine var(--logo-shine-duration) linear both;
}

@keyframes logo-shine {
  from {
    opacity: 1;
    background-position: 100% 0;
  }
  to {
    opacity: 1;
    background-position: 0% 0;
  }
}

.loader-star {
  position: absolute;
  z-index: -2;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}

#unity-loading.stars-on .loader-star {
  opacity: 1;
}

#loader-star-l {
  left: var(--star-l-x);
  top: var(--star-l-y);
  width: var(--star-l-width);
}

#loader-star-r {
  left: var(--star-r-x);
  top: var(--star-r-y);
  width: var(--star-r-width);
}

.loader-bar-layer {
  position: absolute;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#loader-bar-bg {
  z-index: 1;
  left: var(--loader-bg-x);
  top: var(--loader-bg-y);
  width: var(--loader-bg-width);
}

#loader-bar-fill {
  position: absolute;
  z-index: 1;
  left: var(--loader-line-x);
  top: var(--loader-line-y);
  width: var(--loader-line-width);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#loader-bar-line {
  display: block;
  width: 100%;
  height: auto;
  transform: scaleX(var(--loader-line-scale-x));
  clip-path: inset(0 calc(100% - var(--loader-progress)) 0 0 round 0 999px 999px 0);
}

#loader-bar-blick {
  position: absolute;
  /* Follow the revealed edge, including the line's horizontal scale. */
  left: calc(50% + (var(--loader-progress) - 50%) * var(--loader-line-scale-x) + var(--loader-blick-offset-x));
  top: var(--loader-blick-y);
  width: var(--loader-blick-width);
  height: auto;
  opacity: var(--loader-blick-scale);
  transform: translate(-50%, -50%) scale(var(--loader-blick-scale));
  opacity: 0.85;
}

.loader-text {
  position: absolute;
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

#unity-loading:not(.font-ready) .loader-text {
  visibility: hidden;
}

#loader-text-effects {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#loading-text-backdrop {
  position: absolute;
  left: var(--loading-text-x);
  top: var(--loading-backdrop-y);
  width: var(--loading-backdrop-width);
  height: var(--loading-backdrop-height);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgb(1 7 48 / 88%) 0%, rgb(1 7 48 / 72%) 42%, rgb(1 7 48 / 38%) 66%, transparent 100%);
}

#loading-text-rule {
  position: absolute;
  left: var(--loading-rule-x);
  top: var(--loading-rule-y);
  width: var(--loading-rule-width);
  height: 0.34%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgb(38 132 255 / 35%) 22%, #1db1fb 43%, #d7f8ff 50%, #1db1fb 57%, rgb(38 132 255 / 35%) 78%, transparent);
}

#percent-text-backdrop {
  position: absolute;
  left: var(--percent-text-x);
  top: var(--percent-backdrop-y);
  width: var(--percent-backdrop-width);
  height: var(--percent-backdrop-height);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, transparent 0%, rgb(1 6 43 / 62%) 20%, rgb(1 6 43 / 35%) 48%, transparent 78%), linear-gradient(to bottom, transparent 0%, rgb(1 6 43 / 22%) 20%, rgb(1 6 43 / 62%) 55%, rgb(1 6 43 / 35%) 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

.loader-text-gradient {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: var(--loader-text-bottom-color);
  background: linear-gradient(to bottom, var(--loader-text-top-color) 15%, var(--loader-text-bottom-color) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.loader-text-outline {
  position: relative;
  display: inline-block;
}

.loader-text-outline::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  color: var(--loader-text-outline-color);
  -webkit-text-fill-color: var(--loader-text-outline-color);
  -webkit-text-stroke: calc(var(--loader-text-outline-width) * 2) var(--loader-text-outline-color);
}

#loader-loading-text {
  left: var(--loading-text-x);
  top: var(--loading-text-y);
  font-size: var(--loading-text-size);
  letter-spacing: 0.04em;
  display: flex;
  align-items: baseline;
}

#loader-loading-dots {
  display: inline-block;
  width: 1.1em;
  letter-spacing: 0;
  text-align: left;
}

#loader-loading-text.ready #loader-loading-dots {
  display: none;
}

#loader-percent-text {
  left: var(--percent-text-x);
  top: var(--percent-text-y);
  font-size: var(--percent-text-size);
  font-variant-numeric: tabular-nums;
}
#loader-play-button {
  position: absolute;
  z-index: 3;
  left: var(--play-button-x, 50%);
  top: var(--play-button-y, 76%);
  width: var(--play-button-width, 35%);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 140ms ease-in-out;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
#loader-play-button.pressed { transform: translate(-50%, -50%) scale(1.025); }
#loader-play-button img { display: block; width: 100%; height: auto; }
#loader-play-button[hidden] { display: none; }
#loader-play-button:focus-visible { outline: 2px solid #c4faff; outline-offset: 4px; border-radius: 999px; }
#unity-loading .loader-progress-ui { opacity: 0; }
#unity-loading[data-play-state="waiting"] .loader-progress-ui,
#unity-loading[data-play-state="starting"] .loader-progress-ui { visibility: hidden; }
#unity-loading[data-play-state="loading"] .loader-progress-ui { opacity: 1; }