/* Asset-free first-paint layer for the Wild West boot sequence. */
.wildLoader {
  --brass: #f2b94f;
  --pale-gold: #ffe7a1;
  --ember: #cf5928;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100vw;
  height: 100dvh;
  min-width: 280px;
  padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow: hidden;
  color: #fff1c7;
  background:
    linear-gradient(180deg, #080402a8, transparent 42%, #080402e8),
    radial-gradient(circle at 50% 38%, #a43b1c45 0 10%, #4c1e0b52 25%, transparent 49%),
    linear-gradient(155deg, #0d0603, #281207 52%, #0b0503);
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms ease, visibility 420ms step-end;
}

.wildLoader.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }

html.game-loading #game.assets-reloading .slotStage .reelFrame::before { background-image: none !important; }

.wildLoader::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .22;
  background:
    repeating-linear-gradient(90deg, transparent 0 13.8%, #ffbd6230 14%, transparent 14.2%),
    repeating-linear-gradient(0deg, #2b1407 0 2px, transparent 2px 62px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0 15%, #000 42%, transparent 92%);
  mask-image: linear-gradient(180deg, transparent 0 15%, #000 42%, transparent 92%);
}

.wildLoader__sun {
  position: absolute;
  top: 28%;
  left: 50%;
  width: min(56vw, 520px);
  aspect-ratio: 2.4;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ef913850, #ba421323 44%, transparent 72%);
  filter: blur(14px);
  transform: translate(-50%, -50%);
  animation: wild-loader-sunset 3s ease-in-out infinite;
}

.wildLoader__panel { position: relative; z-index: 2; width: min(450px, 92vw); text-align: center; }

.wildLoader__kicker {
  margin: 0 0 7px;
  color: #d99243;
  font: 800 clamp(9px, 1.5vw, 11px)/1.2 Georgia, serif;
  letter-spacing: .42em;
  text-indent: .42em;
  text-shadow: 0 2px 0 #2a0e05, 0 0 12px #d66528a8;
}

.wildLoader__title { margin: 0; text-transform: uppercase; }
.wildLoader__title span,
.wildLoader__title b { display: block; }
.wildLoader__title span {
  color: #ffd978;
  font: 950 clamp(36px, 9vw, 62px)/.9 Georgia, 'Times New Roman', serif;
  letter-spacing: .035em;
  -webkit-text-stroke: 1px #8d3c17;
  text-shadow: 0 2px 0 #57200b, 0 5px 0 #231006, 0 0 18px #da6d2b96;
}
.wildLoader__title b {
  margin-top: 7px;
  color: #b97632;
  font: 850 clamp(12px, 3vw, 18px)/1 Georgia, serif;
  letter-spacing: .46em;
  text-indent: .46em;
  text-shadow: 0 1px 0 #2a0f06;
}

.wildLoader__emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(150px, 34vw, 202px);
  aspect-ratio: 1;
  margin: clamp(23px, 4vh, 38px) auto clamp(18px, 3vh, 28px);
}

.wildLoader__rope {
  position: absolute;
  inset: 1%;
  border: 6px dashed #b96d2f;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #3a190b, 0 0 0 2px #57260f, 0 0 21px #d666294f;
  animation: wild-loader-spin 9s linear infinite;
}

.wildLoader__emblem::before,
.wildLoader__emblem::after {
  content: '';
  position: absolute;
  inset: 13%;
  border-radius: 50%;
}
.wildLoader__emblem::before {
  border: 2px solid #d89942;
  background: radial-gradient(circle, #6a2e13 0 49%, #2a1007 51% 58%, #a75c25 60% 63%, transparent 65%);
  box-shadow: inset 0 0 22px #160703, 0 0 18px #c9632c75;
}
.wildLoader__emblem::after {
  inset: 21%;
  border: 1px solid #ffe1988a;
  box-shadow: inset 0 0 13px #f2a54345;
  animation: wild-loader-pulse 2.4s ease-in-out infinite;
}

.wildLoader__badge {
  position: relative;
  z-index: 2;
  width: 58%;
  aspect-ratio: 1;
  background: linear-gradient(145deg, #fff0a6 0 8%, #e5a43e 22%, #8f4019 54%, #f4bd50 76%, #6d2b10 100%);
  clip-path: polygon(50% 0, 61% 30%, 90% 12%, 71% 41%, 100% 50%, 70% 59%, 89% 88%, 60% 70%, 50% 100%, 40% 70%, 11% 88%, 30% 59%, 0 50%, 29% 41%, 10% 12%, 39% 30%);
  filter: drop-shadow(0 3px 2px #210b04) drop-shadow(0 0 12px #ec963a9c);
  animation: wild-loader-badge 2.4s ease-in-out infinite;
}
.wildLoader__badge i {
  position: absolute;
  inset: 25%;
  background: #4e210e;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 3px #ffd776);
}

.wildLoader__glint {
  position: absolute;
  z-index: 3;
  top: 20%;
  right: 22%;
  width: 22%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fff9d8, transparent);
  filter: drop-shadow(0 0 5px #ffcc67);
  transform: rotate(-35deg);
  animation: wild-loader-glint 2.1s ease-in-out infinite;
}

.wildLoader__status {
  min-height: 1.4em;
  margin: 0 0 13px;
  color: #f8ddb0;
  font: 800 clamp(12px, 2.5vw, 15px)/1.4 Georgia, serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #321106, 0 0 10px #d46a2c7d;
}

.wildLoader__progress {
  position: relative;
  width: min(330px, 80vw);
  height: 10px;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid #72401e;
  border-radius: 3px;
  background: #100704;
  box-shadow: inset 0 0 7px #000, 0 0 0 1px #251006, 0 0 11px #c25b272d;
}
.wildLoader__progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #8c3517, #e48635 52%, #ffe185);
  box-shadow: 0 0 8px #ec9e45;
  transition: width 180ms ease;
}
.wildLoader__progress span::after {
  content: '';
  display: block;
  width: 45%;
  height: 100%;
  margin-left: auto;
  background: linear-gradient(90deg, transparent, #fff4c9b5);
  animation: wild-loader-bar 1.3s ease-in-out infinite;
}
.wildLoader__percent {
  display: block;
  margin-top: 10px;
  color: #b98955;
  font: 700 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .14em;
}

.wildLoader__error[hidden], .wildLoader.is-error .wildLoader__loading { display: none; }
.wildLoader__error p {
  margin: 0 0 7px;
  color: #ffd47b;
  font: 900 16px/1.3 Georgia, serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #4c1909, 0 0 12px #db6d2d;
}
.wildLoader__error small { display: block; color: #d8bb91; line-height: 1.45; }
.wildLoader__error button {
  min-width: 162px;
  min-height: 46px;
  margin-top: 18px;
  padding: 0 20px;
  border: 2px solid #dc9c43;
  border-radius: 5px;
  color: #fff0c5;
  background: linear-gradient(#743717, #3a180a);
  box-shadow: inset 0 0 0 2px #1b0a04, inset 0 1px 0 #ffe6a85e, 0 7px 16px #0008;
  font: 900 12px/1 Georgia, serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
}
.wildLoader__error button:focus-visible { outline: 3px solid #fff0b5; outline-offset: 4px; }

.wildLoader__dust i {
  position: absolute;
  left: -5%;
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #f2bb71;
  box-shadow: 0 0 7px #e17c35;
  opacity: 0;
  animation: wild-loader-dust var(--duration) linear var(--delay) infinite;
}
.wildLoader__dust i:nth-child(1){--y:20%;--size:3px;--duration:8s;--delay:-2s}.wildLoader__dust i:nth-child(2){--y:31%;--size:2px;--duration:11s;--delay:-8s}.wildLoader__dust i:nth-child(3){--y:44%;--size:4px;--duration:9s;--delay:-4s}.wildLoader__dust i:nth-child(4){--y:57%;--size:2px;--duration:7s;--delay:-1s}.wildLoader__dust i:nth-child(5){--y:68%;--size:3px;--duration:10s;--delay:-7s}.wildLoader__dust i:nth-child(6){--y:76%;--size:4px;--duration:12s;--delay:-5s}.wildLoader__dust i:nth-child(7){--y:86%;--size:2px;--duration:8.5s;--delay:-3s}.wildLoader__dust i:nth-child(8){--y:38%;--size:3px;--duration:11s;--delay:-9s}

@keyframes wild-loader-spin { to { transform: rotate(1turn); } }
@keyframes wild-loader-sunset { 50% { opacity: .7; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes wild-loader-pulse { 50% { opacity: .55; transform: scale(.94); } }
@keyframes wild-loader-badge { 50% { filter: drop-shadow(0 3px 2px #210b04) drop-shadow(0 0 20px #f1a13bc2); transform: scale(1.035); } }
@keyframes wild-loader-glint { 0%, 68%, 100% { opacity: 0; } 73% { opacity: 1; transform: rotate(-35deg) scaleX(1.45); } 82% { opacity: .25; } }
@keyframes wild-loader-bar { 0%, 100% { opacity: .12; transform: translateX(-70%); } 50% { opacity: .9; transform: translateX(0); } }
@keyframes wild-loader-dust { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 13% { opacity: .55; } 82% { opacity: .25; } 100% { opacity: 0; transform: translate3d(110vw, -45px, 0); } }

@media (max-height: 620px) {
  .wildLoader__emblem { width: 126px; margin: 13px auto; }
  .wildLoader__title span { font-size: 34px; }
  .wildLoader__title b { margin-top: 4px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .wildLoader *, .wildLoader *::before, .wildLoader *::after { animation: none !important; }
  .wildLoader__progress span { transition: none; }
  .wildLoader__dust { display: none; }
}