:root {
  --soule-lobby-top: #a2b3ce;
}

html[data-soule-lobby-theme="day"] {
  --soule-lobby-top: #cfd9e9;
}

html[data-soule-lobby-theme="night"] {
  --soule-lobby-top: #464646;
}

.soule-lobby-background > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.soule-lobby-background > .soule-valley-day,
.soule-lobby-background > .soule-valley-night,
html[data-soule-lobby-theme="day"] .soule-lobby-background > .soule-valley-default,
html[data-soule-lobby-theme="night"] .soule-lobby-background > .soule-valley-default { display: none; }
html[data-soule-lobby-theme="day"] .soule-lobby-background > .soule-valley-day { display: block; }
html[data-soule-lobby-theme="night"] .soule-lobby-background > .soule-valley-night { display: block; }

.screen:has(> .soule-lobby-background) {
  background: var(--soule-lobby-top);
}

html[data-soule-lobby-theme="day"] .screen > .ambient,
html[data-soule-lobby-theme="night"] .screen > .ambient {
  background: none;
}

/* The original day valley becomes white below the sky. Keep controls readable
   without tinting the artwork or changing the glass-card geometry. */
html[data-soule-lobby-theme="day"] .screen .glass-card svg,
html[data-soule-lobby-theme="day"] .screen .card-label {
  color: #465a80;
}

html[data-soule-lobby-theme="day"] .screen .footer-note {
  color: #526b93;
}

.soule-boot {
  --soule-scene-top: var(--soule-lobby-top);
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--soule-scene-top);
  color: rgba(255, 255, 255, .97);
}

/* Match the existing Default Home glow; the user's day/night SVGs stay untinted. */
html:not([data-soule-lobby-theme="day"]):not([data-soule-lobby-theme="night"]) .soule-boot::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.20), transparent 28%),
    radial-gradient(circle at 26% 49%, rgba(255,255,255,.055), transparent 27%),
    radial-gradient(circle at 76% 58%, rgba(255,255,255,.05), transparent 28%);
  content: "";
  pointer-events: none;
}

/* SVG slice cropping and the lobby glow vary with the screen aspect ratio.
   Paint the viewport edge explicitly; only this short veil changes the scene. */
.screen > .ambient::after,
.soule-boot::after {
  position: absolute;
  inset: 0 0 auto;
  height: calc(env(safe-area-inset-top) + 150px);
  background: linear-gradient(
    180deg,
    var(--soule-scene-top, var(--soule-lobby-top)) 0,
    var(--soule-scene-top, var(--soule-lobby-top)) calc(env(safe-area-inset-top) + 8px),
    color-mix(in srgb, var(--soule-scene-top, var(--soule-lobby-top)) 90%, transparent) calc(env(safe-area-inset-top) + 36px),
    color-mix(in srgb, var(--soule-scene-top, var(--soule-lobby-top)) 55%, transparent) calc(env(safe-area-inset-top) + 72px),
    color-mix(in srgb, var(--soule-scene-top, var(--soule-lobby-top)) 18%, transparent) calc(env(safe-area-inset-top) + 112px),
    color-mix(in srgb, var(--soule-scene-top, var(--soule-lobby-top)) 0%, transparent) 100%
  );
  content: "";
  pointer-events: none;
}

.soule-boot-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.soule-boot-copy {
  position: absolute;
  z-index: 1;
  top: clamp(150px, 21.5vh, 196px);
  left: 50%;
  width: min(92vw, 520px);
  transform: translateX(-50%);
  text-align: center;
}

.soule-boot-copy strong {
  display: block;
  margin: 0;
  font-family: "My Soul", cursive;
  font-size: clamp(42px, 8vw, 56px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: .01em;
  text-shadow: 0 3px 18px rgba(94, 112, 142, .08);
}

.soule-boot-progress {
  position: absolute;
  z-index: 1;
  top: 47%;
  left: 50%;
  width: min(88vw, 520px);
  transform: translate(-50%, -50%);
  text-align: center;
}

html[data-soule-lobby-theme="day"] .soule-boot-progress {
  color: #465a80;
}

.soule-boot-mark {
  display: block;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin: 0 auto 12px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .55;
  animation: soule-boot-breathe 1.6s ease-in-out infinite alternate;
}

.soule-boot-progress p {
  margin: 0;
  color: inherit;
  font-family: "Afacad", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  opacity: .75;
}

.soule-app-ready {
  width: 100%;
  height: 100%;
  min-height: 0;
  animation: soule-app-ready-in 180ms ease-out both;
}

@keyframes soule-boot-breathe {
  from { opacity: .25; transform: scale(.92); }
  to { opacity: .75; transform: scale(1.06); }
}

@keyframes soule-app-ready-in {
  from { opacity: .9; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .soule-boot-mark { animation: none; transform: none; opacity: .6; }
  .soule-app-ready { animation: none; }
}