:root{
  --loader-primary:#7ff7e9;
  --loader-secondary:#328dd8;
  --loader-accent:#f6d77a;
  --loader-deep:#050811;
  --loader-title:#fff6da;
}

html.slot-loading .slotLoading[hidden]{display:grid!important}
html.slot-loading .game{visibility:hidden}
.slotLoading[hidden]{display:none!important}

.slotLoading{
  position:fixed;z-index:10000;inset:0;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;
  min-width:280px;min-height:100vh;min-height:100dvh;padding:clamp(22px,6vw,72px);overflow:hidden;
  color:#f8fffe;text-align:center;isolation:isolate;
  background:
    linear-gradient(180deg,rgba(2,5,13,.22),rgba(2,5,13,.84)),
    radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--loader-primary) 24%,transparent),transparent 35%),
    var(--loader-bg) center / cover no-repeat,
    var(--loader-deep);
  transition:opacity .46s ease,visibility .46s ease;
}
.slotLoading::before{
  content:"";position:absolute;z-index:-1;inset:-18%;pointer-events:none;opacity:.62;
  background:
    repeating-radial-gradient(ellipse at 50% -10%,transparent 0 8%,rgba(255,255,255,.07) 8.5%,transparent 9.2% 14%),
    linear-gradient(108deg,transparent 30%,color-mix(in srgb,var(--loader-primary) 16%,transparent) 44%,transparent 58%);
  mix-blend-mode:screen;transform-origin:50% 0;animation:slotLoadingSweep 8s ease-in-out infinite alternate;
}
.slotLoading::after{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.03),transparent 36%,rgba(0,0,0,.52)),radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.58));
}
.slotLoading.isLeaving{opacity:0;visibility:hidden}

.slotLoadingContent{position:relative;width:100%;max-width:540px;min-width:0;display:grid;justify-items:center}
.slotLoadingEmblem{
  position:relative;width:clamp(136px,25vw,196px);aspect-ratio:1;display:grid;place-items:center;
  margin-bottom:clamp(18px,4vh,34px);filter:drop-shadow(0 16px 28px rgba(0,0,0,.58));
}
.slotLoadingEmblem::before,.slotLoadingEmblem::after,.slotLoadingEmblemRing{content:"";position:absolute;border-radius:50%;pointer-events:none}
.slotLoadingEmblem::before{
  inset:3%;border:1px solid color-mix(in srgb,var(--loader-primary) 76%,white);
  box-shadow:0 0 26px color-mix(in srgb,var(--loader-primary) 38%,transparent),inset 0 0 25px color-mix(in srgb,var(--loader-primary) 20%,transparent);
  animation:slotLoadingPulse 2.4s ease-in-out infinite;
}
.slotLoadingEmblem::after{
  inset:15%;background:radial-gradient(circle,color-mix(in srgb,var(--loader-secondary) 26%,transparent),rgba(3,7,16,.84) 68%,rgba(0,0,0,.92));
  border:1px solid color-mix(in srgb,var(--loader-accent) 74%,white);box-shadow:inset 0 0 30px color-mix(in srgb,var(--loader-primary) 17%,transparent);
}
.slotLoadingEmblemRing{
  inset:-3%;border:2px solid transparent;border-top-color:var(--loader-accent);border-bottom-color:var(--loader-primary);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loader-primary) 16%,transparent);animation:slotLoadingSpin 7s linear infinite;
}
.slotLoadingEmblem img{
  position:relative;z-index:2;width:78%;height:78%;object-fit:contain;user-select:none;
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--loader-primary) 52%,transparent)) brightness(1.06);
  animation:slotLoadingFloat 3s ease-in-out infinite;
}
.slotLoadingKicker{
  margin:0 0 10px;color:var(--loader-primary);font-size:clamp(9px,1.6vw,12px);font-weight:900;
  letter-spacing:.35em;text-indent:.35em;text-shadow:0 0 12px color-mix(in srgb,var(--loader-primary) 65%,transparent);
}
.slotLoadingTitle{
  max-width:100%;margin:0;color:var(--loader-title);font-family:Georgia,"Times New Roman","Noto Serif KR",serif;
  font-size:clamp(29px,7vw,57px);font-weight:800;line-height:1.08;letter-spacing:.045em;text-indent:.045em;overflow-wrap:anywhere;
  text-shadow:0 2px 0 color-mix(in srgb,var(--loader-secondary) 68%,black),0 0 18px color-mix(in srgb,var(--loader-accent) 36%,transparent),0 9px 24px rgba(0,0,0,.74);
}
.slotLoadingSubtitle{
  margin:9px 0 clamp(25px,5vh,42px);color:rgba(241,249,248,.77);font-size:clamp(10px,2vw,14px);font-weight:800;
  letter-spacing:.31em;text-indent:.31em;
}
.slotLoadingProgress{
  position:relative;width:100%;max-width:400px;height:8px;padding:1px;overflow:visible;border:1px solid color-mix(in srgb,var(--loader-primary) 42%,transparent);border-radius:999px;
  background:rgba(0,4,12,.74);box-shadow:inset 0 1px 5px rgba(0,0,0,.92),0 0 20px color-mix(in srgb,var(--loader-primary) 14%,transparent);
}
.slotLoadingProgressFill{
  display:block;width:0;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--loader-secondary),var(--loader-primary) 68%,var(--loader-accent));
  box-shadow:0 0 11px color-mix(in srgb,var(--loader-primary) 70%,transparent);transition:width .16s ease-out;
}
.slotLoadingProgressGlow{
  position:absolute;left:0;top:50%;width:38%;height:24px;opacity:.52;transform:translate(-45%,-50%);
  background:radial-gradient(ellipse,color-mix(in srgb,var(--loader-primary) 34%,transparent),transparent 68%);animation:slotLoadingBar 2.2s ease-in-out infinite;
}
.slotLoadingMeta{
  width:100%;max-width:400px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:11px;
  color:rgba(236,247,246,.76);font-size:11px;font-weight:700;letter-spacing:.07em;
}
.slotLoadingMeta strong{min-width:3.2em;color:var(--loader-accent);font-variant-numeric:tabular-nums;text-align:right}
.slotLoadingAtmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.slotLoadingParticle{
  position:absolute;bottom:-50px;width:13px;height:13px;border:1px solid color-mix(in srgb,var(--loader-primary) 70%,white);border-radius:50%;opacity:0;
  background:radial-gradient(circle at 32% 28%,white 0 7%,color-mix(in srgb,var(--loader-primary) 16%,transparent) 28%,transparent 68%);
  box-shadow:0 0 10px color-mix(in srgb,var(--loader-primary) 32%,transparent);animation:slotLoadingRise 7s linear infinite;
}
.slotLoadingParticle:nth-child(1){left:14%;animation-delay:-1.8s}
.slotLoadingParticle:nth-child(2){left:77%;width:22px;height:22px;animation-delay:-4.7s;animation-duration:8.6s}
.slotLoadingParticle:nth-child(3){left:89%;width:8px;height:8px;animation-delay:-.7s;animation-duration:5.8s}

@keyframes slotLoadingSweep{from{transform:translate3d(-2%,0,0) rotate(-1deg) scale(1)}to{transform:translate3d(2%,2%,0) rotate(1deg) scale(1.04)}}
@keyframes slotLoadingSpin{to{transform:rotate(360deg)}}
@keyframes slotLoadingPulse{50%{opacity:.5;transform:scale(.96)}}
@keyframes slotLoadingFloat{50%{transform:translateY(-5px) scale(1.025)}}
@keyframes slotLoadingBar{50%{left:100%}}
@keyframes slotLoadingRise{0%{opacity:0;transform:translate3d(0,0,0) scale(.5)}14%,72%{opacity:.7}100%{opacity:0;transform:translate3d(25px,-115vh,0) scale(1.2)}}

@media(max-width:480px){
  .slotLoading{padding:22px 18px}
  .slotLoadingKicker{letter-spacing:.22em;text-indent:.22em}
  .slotLoadingTitle{letter-spacing:.015em;text-indent:.015em}
  .slotLoadingSubtitle{letter-spacing:.23em;text-indent:.23em}
}
@media(max-height:540px) and (orientation:landscape){
  .slotLoading{padding:11px 24px}.slotLoadingEmblem{width:104px;margin-bottom:8px}.slotLoadingKicker{margin-bottom:4px}
  .slotLoadingTitle{font-size:30px}.slotLoadingSubtitle{margin:4px 0 14px}
}
@media(prefers-reduced-motion:reduce){
  .slotLoading,.slotLoadingProgressFill{transition-duration:.01ms}
  .slotLoading::before,.slotLoadingEmblem::before,.slotLoadingEmblemRing,.slotLoadingEmblem img,.slotLoadingProgressGlow,.slotLoadingParticle{animation:none}
  .slotLoadingParticle{display:none}
}
