/* Imported from pet-game-master/src/styles.css; loading-screen visuals only. */
.loading-screen {
  font-family: GameHeavy, Grobold, "Cooper Black", "Arial Black", Impact, sans-serif;
  --bottom-label-outline:
    -1px -1px 0 #050306,
    0 -1px 0 #050306,
    1px -1px 0 #050306,
    -1px 0 0 #050306,
    1px 0 0 #050306,
    -1px 1px 0 #050306,
    0 1px 0 #050306,
    1px 1px 0 #050306,
    0 2px 0 #050306,
    0 3px 0 rgba(5, 3, 6, 0.48);
}

.loading-screen {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 24%, rgba(97, 239, 190, 0.48), transparent 30%),
    radial-gradient(circle at 82% 34%, rgba(89, 184, 255, 0.54), transparent 32%),
    linear-gradient(155deg, #69d4bc 0%, #b7f5dc 34%, #b8e9fb 68%, #71b9e9 100%);
  opacity: 1;
  pointer-events: auto;
  transition: opacity 180ms ease;
}

.loading-screen::before,
.loading-screen::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.loading-screen::before {
  inset: -8%;
  background:
    radial-gradient(circle at 17% 31%, rgba(125, 255, 196, 0.34) 0 8%, transparent 27%),
    radial-gradient(circle at 76% 27%, rgba(83, 177, 244, 0.3) 0 9%, transparent 29%),
    radial-gradient(circle at 66% 49%, rgba(196, 255, 225, 0.3) 0 5%, transparent 22%);
  opacity: 0.55;
  animation: loading-screen-glow 5.6s ease-in-out infinite alternate;
  will-change: opacity;
}

.loading-screen::after {
  inset: 0;
  width: 54%;
  background: linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, 0.16) 48%, transparent 78%);
  transform: translateX(-120%) skewX(-8deg);
  animation: loading-screen-sheen 8.5s linear infinite;
  will-change: transform;
}

.loading-screen-art {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  position: relative;
  z-index: 1;
  width: calc(100vw - 32px);
  height: calc(100dvh - 44px);
  margin-top: 0;
  padding: 5px;
  overflow: hidden;
  border: 3px solid #123747;
  border-radius: 19px;
  background: linear-gradient(90deg, #22bfa4 0 19%, #64eac7 19% 38%, #adefd8 38% 58%, #49b9ec 58% 79%, #4c76d6 79% 100%);
  box-shadow:
    0 8px 0 rgba(12, 49, 64, 0.34),
    0 0 34px rgba(69, 226, 169, 0.42),
    0 0 56px rgba(66, 173, 243, 0.28);
}

.loading-screen-art::before,
.loading-screen-art::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.loading-screen-art::before {
  inset: 5px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 77% 25%, rgba(109, 239, 189, 0.28), transparent 25%),
    radial-gradient(circle at 61% 22%, rgba(94, 191, 255, 0.24), transparent 24%),
    radial-gradient(ellipse at 40% 55%, rgba(186, 255, 216, 0.2), transparent 28%);
  opacity: 0.34;
  animation: loading-art-light-pulse 4.8s ease-in-out infinite alternate;
  will-change: opacity;
}

.loading-screen-art::after {
  top: 5px;
  bottom: 5px;
  left: -34%;
  width: 28%;
  border-radius: 12px;
  background: linear-gradient(105deg, transparent 10%, rgba(255, 255, 255, 0.18) 48%, transparent 88%);
  transform: skewX(-12deg);
  animation: loading-art-light-sweep 8.8s ease-in-out infinite;
  will-change: transform;
}

.loading-screen-image {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  /* Match the original game's responsive artwork: fill the frame as it resizes. */
  object-fit: fill;
  object-position: center;
  image-rendering: auto;
  border: 3px solid rgba(18, 55, 71, 0.86);
  border-radius: 12px;
}

.loading-progress {
  position: fixed;
  right: max(48px, env(safe-area-inset-right, 0px));
  bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 8px);
  left: max(48px, env(safe-area-inset-left, 0px));
  z-index: 1001;
  display: block;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  transform: translateY(-8px);
}

.loading-progress-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 18px 0;
  color: #fff;
  font-size: clamp(22px, 2.7vw, 36px);
  font-weight: 1000;
  line-height: 1;
  pointer-events: none;
  -webkit-text-stroke: 0.55px #050306;
  paint-order: stroke fill;
  text-shadow: var(--bottom-label-outline);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.loading-progress-copy > strong {
  transform: translateY(-2px);
}

.loading-progress-bar {
  position: relative;
  height: 54px;
}

.loading-progress-fill-layer {
  position: absolute;
  inset: 3px;
  z-index: 2;
  overflow: hidden;
  border-radius: 9px;
}

.loading-progress-track {
  position: absolute;
  inset: 0;
  z-index: 1;
  isolation: isolate;
  border: 4px solid rgba(8, 7, 10, 0.86);
  border-radius: 14px;
  background: transparent;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), -5px 0 18px #39ff1470, 5px 0 18px #ff19cf70;
}

.loading-progress-track::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 10px;
  background: rgba(22, 14, 25, 0.72);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18);
}

.loading-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #ffffff55, transparent 48%, #00000018),
    linear-gradient(90deg, #39ff14 0%, #70ff38 38%, #e3ff65 55%, #ff58da 75%, #ff14bd 100%);
  box-shadow: inset 0 2px 4px #ffffff80, inset 0 -2px 6px #ff14bd55;
  transform: translateZ(0) scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.loading-progress-fill.is-complete {
  transform: translateZ(0) scaleX(1);
}

/* Render the entire percentage together, including during loading. */
#loadingPercent {
  font-family: inherit;
  font-weight: 1000;
  font-variant-numeric: normal;
  font-kerning: normal;
  letter-spacing: 0;
  white-space: nowrap;
  -webkit-text-stroke: .65px #050306;
  paint-order: stroke fill;
  text-shadow: 0 1px 1px #050306;
}

body:not(.is-loading) .loading-screen {
  opacity: 0;
  pointer-events: none;
}

body.loading-complete .loading-screen {
  display: none;
}

@keyframes loading-screen-glow {
  from {
    opacity: 0.42;
  }
  to {
    opacity: 0.72;
  }
}

@keyframes loading-screen-sheen {
  0%, 22% {
    transform: translateX(-120%) skewX(-8deg);
  }
  58%, 100% {
    transform: translateX(235%) skewX(-8deg);
  }
}

@keyframes loading-art-light-pulse {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 0.46;
  }
}

@keyframes loading-art-light-sweep {
  0%, 22% {
    transform: translateX(0) skewX(-12deg);
  }
  70%, 100% {
    transform: translateX(490%) skewX(-12deg);
  }
}

@media (prefers-reduced-motion: reduce) {
.loading-screen-art::before,
.loading-screen-art::after,
.loading-screen::before,
.loading-screen::after {
    animation: none;
  }

.loading-screen-art::after,
.loading-screen::after {
    display: none;
  }
}

:where(html.has-touch-controls) .loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding:
      calc(env(safe-area-inset-top, 0px) + 14px)
      max(12px, env(safe-area-inset-right, 0px))
      calc(env(safe-area-inset-bottom, 0px) + 14px)
      max(12px, env(safe-area-inset-left, 0px));
    background: linear-gradient(180deg, #9deecf 0%, #a7d9fa 54%, #8bdfc0 100%);
  }

:where(html.has-touch-controls) .loading-screen-art {
    width: min(100%, 840px, calc((100dvh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 1586 / 992));
    height: auto;
    aspect-ratio: 1586 / 992;
    max-height: calc(100dvh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    flex: 0 1 auto;
    margin-top: 0;
    padding: 3px;
    border-width: 2px;
    border-radius: 13px;
    box-shadow:
      0 6px 0 rgba(12, 49, 64, 0.3),
      0 0 24px rgba(69, 226, 169, 0.34),
      0 0 38px rgba(66, 173, 243, 0.24);
  }

:where(html.has-touch-controls) .loading-screen-art::after {
    opacity: 0.12;
    animation-duration: 10.5s;
  }

:where(html.has-touch-controls) .loading-screen-image {
    border-width: 2px;
    border-radius: 9px;
  }

:where(html.has-touch-controls) .loading-progress {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(380px, calc(100vw - 48px));
    max-width: none;
    margin: 2px auto 0;
    flex: 0 0 auto;
  }

:where(html.has-touch-controls) .loading-progress::before {
    content: none;
    display: none;
  }

:where(html.has-touch-controls) .loading-progress-bar {
    height: 48px;
  }

:where(html.has-touch-controls) .loading-progress-copy {
    padding: 0 15px;
    font-size: clamp(20px, 5.4vw, 27px);
    line-height: 1;
  }

@media (orientation: landscape) {
:where(html.has-touch-controls) .loading-screen {
    gap: 6px;
    padding:
      calc(env(safe-area-inset-top, 0px) + 10px)
      max(12px, env(safe-area-inset-right, 0px))
      calc(env(safe-area-inset-bottom, 0px) + 10px)
      max(12px, env(safe-area-inset-left, 0px));
  }

:where(html.has-touch-controls) .loading-screen-art {
    max-height: calc(100dvh - 54px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin-top: 0;
  }

:where(html.has-touch-controls) .loading-progress {
    width: min(520px, calc(100vw - 80px));
    margin-top: 0;
  }

:where(html.has-touch-controls) .loading-progress::before {
    content: none;
    display: none;
  }

:where(html.has-touch-controls) .loading-progress-bar {
    height: 42px;
  }

:where(html.has-touch-controls) .loading-progress-copy {
    padding: 0 14px;
    font-size: clamp(16px, 3vw, 20px);
  }
}

@media (orientation: portrait) and (max-width: 520px) {
:where(html.has-touch-controls) .loading-screen-art {
    padding: 2px;
    border-radius: 11px;
  }

:where(html.has-touch-controls) .loading-screen-image {
    border-width: 2px;
    border-radius: 7px;
  }

:where(html.has-touch-controls) .loading-progress {
    bottom: 7px;
    width: calc(100% - 48px);
  }

:where(html.has-touch-controls) .loading-progress-bar {
    height: 36px;
  }

:where(html.has-touch-controls) .loading-progress-copy {
    gap: 10px;
    padding: 0 11px;
    font-size: clamp(14px, 4.4vw, 18px);
  }
}

body.is-loading:not(.warming-interface) > :not(#loadingScreen) { visibility: hidden; }
/* A barely translucent cover prevents the browser from deferring HUD paint. */
body.is-loading.warming-interface .loading-screen { opacity: .999; }
body.is-loading.warming-interface > :not(#loadingScreen) { pointer-events: none; }

/* Pending menus show a small activity ring instead of incomplete content. */
button[aria-busy="true"] { position: relative; }
button[aria-busy="true"]::after,
.character-preview-shell[aria-busy="true"]::after,
.album-model-preview[aria-busy="true"]::after {
  content: ''; position: absolute; width: 22px; height: 22px;
  left: calc(50% - 11px); top: calc(50% - 11px); z-index: 5;
  border: 3px solid #ffffff80; border-top-color: white; border-radius: 50%;
  animation: menu-loading-ring .7s linear infinite; pointer-events: none;
}
.character-preview-shell[aria-busy="true"] canvas { visibility: hidden; }
@keyframes menu-loading-ring { to { transform: rotate(360deg); } }