:root {
  --app-width: 100vw;
  --app-height: 100dvh;
  --preload-bg: #000000;
  --preload-accent-a: #6262c5;
  --preload-accent-b: #4acbce;
  --preload-track-bg: #040505;
  --preload-track-border: #29292d;
  --preload-logo-width: clamp(72px, min(40vw, 20vh), 220px);
  --preload-game-y: 18%;
  --preload-studio-y: 43%;
  --preload-partner-y: 67%;
  --preload-bar-y: 88%;
}

html,
body {
  touch-action: none;
  overscroll-behavior: none;
}

#PreloaderRoot {
  position: fixed;
  inset: 0;
  width: var(--app-width, 100vw);
  height: var(--app-height, 100dvh);
  z-index: 9999;
  overflow: hidden;
  isolation: isolate;
  background: var(--preload-bg);
  transition: opacity 320ms ease, visibility 320ms ease;
  pointer-events: none;
}

#PreloaderRoot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--preload-bg-image-url, none);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 280ms ease;
}

#PreloaderRoot.preloader-bg-ready::before {
  opacity: 1;
}

#PreloaderRoot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.55);
}

#PreloaderRoot.preloader-hidden {
  opacity: 0;
  visibility: hidden;
}

.preloader-content {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.preloader-logo {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--preload-logo-width);
  max-width: calc(100% - 24px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.preloader-logo-game   { top: var(--preload-game-y); }
.preloader-logo-studio { top: var(--preload-studio-y); }
.preloader-logo-partner { top: var(--preload-partner-y); }

.preloader-progress-wrap {
  position: absolute;
  left: 50%;
  top: var(--preload-bar-y);
  transform: translate(-50%, -50%);
  width: min(256px, calc(100% - 40px));
}

.preloader-progress-track {
  box-sizing: border-box;
  width: 100%;
  height: 24px;
  border-radius: 999px;
  border: 2px solid var(--preload-track-border);
  background: var(--preload-track-bg);
  display: flex;
  align-items: center;
  padding: 4px 5px;
}

.preloader-progress-fill {
  width: 0%;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--preload-accent-a) 0%, var(--preload-accent-b) 100%);
}

.preloader-progress-glow {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: min(90%, 230px);
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(98, 98, 197, 0.85) 0%, rgba(74, 203, 206, 0.85) 100%);
  filter: blur(14px);
  opacity: 0.9;
}

@media (min-aspect-ratio: 2/1) {
  :root {
    --preload-logo-width: clamp(64px, min(30vw, 16vh), 180px);
    --preload-game-y: 15%;
    --preload-studio-y: 39%;
    --preload-partner-y: 62%;
    --preload-bar-y: 84%;
  }

  .preloader-progress-wrap { width: min(220px, calc(100% - 24px)); }
  .preloader-progress-track { height: 20px; padding: 3px 4px; }
  .preloader-progress-fill { height: 10px; }
}

@media (max-height: 520px) {
  :root {
    --preload-logo-width: clamp(62px, min(34vw, 16vh), 156px);
    --preload-game-y: 16%;
    --preload-studio-y: 40%;
    --preload-partner-y: 63%;
    --preload-bar-y: 84%;
  }
}

@media (max-height: 420px) {
  :root {
    --preload-logo-width: clamp(56px, min(32vw, 14vh), 140px);
    --preload-game-y: 14%;
    --preload-studio-y: 37%;
    --preload-partner-y: 59%;
    --preload-bar-y: 82%;
  }

  .preloader-progress-wrap { width: min(196px, calc(100% - 22px)); }
}