.splash-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: var(--z-splash);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.5dvh, 28px);
  padding: max(20px, env(safe-area-inset-top)) var(--mobile-shell-gutter) max(24px, env(safe-area-inset-bottom));
  background-color: var(--scene-ground);
  background-image: var(--scene-background);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  overflow: hidden;
  transition: opacity 500ms ease;
}

.splash__brand-logo.brand-logo {
  width: min(calc(100vw - clamp(32px, 6vw, 96px)), 52rem);
  max-width: 52rem;
}

.splash__brand-logo .brand-logo__tiles {
  width: 100%;
}

.splash__brand-logo .brand-logo__tile {
  aspect-ratio: 1;
  font-size: clamp(1.35rem, min(4.4vw, 5.9dvh), 3.45rem);
}

.splash-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.splash__title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 900;
  color: #172033;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(255,255,255,.45);
  margin-bottom: var(--space-sm);
}

.splash__subtitle {
  max-width: min(86vw, 28rem);
  color: rgba(23, 32, 51, .78);
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.splash__loader {
  position: relative;
  width: clamp(84px, 18vw, 132px);
  height: clamp(8px, 1.4dvh, 12px);
  margin-top: clamp(12px, 2.8dvh, 26px);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.56), inset 0 -2px 0 rgba(36, 51, 70, .08);
}

.splash__loader-bar {
  position: absolute;
  inset: 2px;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1B9BD7, #2DC6A1);
  box-shadow: 0 2px 8px rgba(27, 155, 215, .22);
  animation: splashLoaderBar 1200ms ease-in-out infinite;
}

@keyframes splashLoaderBar {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(132%); }
}

@media (max-width: 390px), (max-height: 700px) {
  .splash-screen {
    gap: 8px;
    padding-inline: 12px;
  }

  .splash__brand-logo.brand-logo {
    width: min(calc(100vw - 24px), 30rem);
  }

  .splash__brand-logo .brand-logo__tile {
    font-size: clamp(1.05rem, min(4.6vw, 5dvh), 1.7rem);
  }

  .splash__loader {
    margin-top: clamp(10px, 2.6dvh, 20px);
    width: clamp(78px, 22vw, 116px);
  }
}