/* ZOKU loading screen: night sky, the island dimmed behind, the pixel logo, a tagline pill and a pixel bar.
   Everything here is static HTML/CSS so it shows before any script or big texture arrives. */
#loading {
  --ld-night: #0e1826; --ld-deep: #142538; --ld-cream: #fcecc4; --ld-ink: #34201e;
  --ld-grass: #79c257; --ld-grass-hi: #aade6e; --ld-grass-dk: #4f7a33;
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; text-align: center; color: var(--ld-cream);
  font: 12px/1.2 "Silkscreen", "Sprout", monospace;
  background: radial-gradient(ellipse at 50% 45%, var(--ld-deep) 0%, var(--ld-night) 70%);
  transition: opacity .6s ease, visibility 0s linear .6s;
}
#loading.ld-out { opacity: 0; visibility: hidden; pointer-events: none; }

/* Two layers of tiny square stars that twinkle out of step. */
.ld-sky, .ld-sky i { position: absolute; inset: 0; }
.ld-sky i {
  background-image:
    linear-gradient(#fff6d8, #fff6d8), linear-gradient(#fff6d8, #fff6d8), linear-gradient(#cfe6ff, #cfe6ff),
    linear-gradient(#fff6d8, #fff6d8), linear-gradient(#fff6d8, #fff6d8),
    linear-gradient(#fff6d8, #fff6d8), linear-gradient(#fff6d8, #fff6d8), linear-gradient(#cfe6ff, #cfe6ff), linear-gradient(#fff6d8, #fff6d8), linear-gradient(#fff6d8, #fff6d8);
  background-size: 2px 2px;
  background-repeat: no-repeat;
  background-position: 7% 12%, 23% 78%, 41% 8%, 88% 22%, 64% 91%, 3% 60%, 57% 15%, 80% 85%, 97% 4%, 31% 96%;
  animation: ld-twinkle 3.2s steps(2, jump-none) infinite alternate;
}
.ld-sky i + i {
  background-position: 15% 42%, 33% 30%, 72% 6%, 94% 64%, 52% 70%, 10% 90%, 46% 3%, 84% 45%, 25% 5%, 70% 97%;
  background-size: 3px 3px;
  animation-delay: -1.6s; animation-duration: 4.1s;
}
@keyframes ld-twinkle { from { opacity: .25; } to { opacity: 1; } }

/* The island, big and soft, fading into the sky at its edges. */
.ld-island {
  position: absolute; left: 50%; top: 50%;
  width: max(112vw, 125vh); aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  animation: ld-drift 40s ease-in-out infinite alternate;
  will-change: transform;
}
.ld-island img {
  display: block; width: 100%; height: 100%;
  filter: blur(2px) brightness(.5) saturate(.85);
}
.ld-island::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(14, 24, 38, .15) 0%, rgba(14, 24, 38, .7) 75%); }
@keyframes ld-drift {
  from { transform: translate(-51.5%, -49%) scale(1); }
  to { transform: translate(-48.5%, -51%) scale(1.04); }
}

.ld-main { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; }

/* The logo is 113x48 art pixels; always scaled by a whole number so its pixels stay square. */
.ld-logo { display: block; width: 226px; height: 96px; image-rendering: pixelated; animation: ld-bob 3.6s ease-in-out infinite; }
@media (min-width: 360px) { .ld-logo { width: 339px; height: 144px; } }
@media (min-width: 720px) and (min-height: 560px) { .ld-logo { width: 452px; height: 192px; } }
@media (min-width: 1100px) and (min-height: 760px) { .ld-logo { width: 565px; height: 240px; } }
@keyframes ld-bob { 50% { transform: translateY(-4px); } }

.ld-tag {
  margin: 0; padding: 5px 12px 6px; border-radius: 999px;
  background: rgba(14, 24, 38, .72); border: 2px solid rgba(252, 236, 196, .35);
  font: 12px/1 "Silkscreen", "Sprout", monospace; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 420px) { .ld-tag span { display: none; } }
@media (min-width: 720px) and (min-height: 560px) { .ld-tag { font-size: 14px; } }

/* Pixel progress bar: dark frame, cream inset, grass fill with a light top line. */
.load-bar {
  position: relative; width: min(280px, 76vw); height: 16px; margin-top: 6px; padding: 4px;
  background: var(--ld-ink);
  box-shadow: 0 -2px 0 0 var(--ld-ink), 0 2px 0 0 var(--ld-ink), -2px 0 0 0 var(--ld-ink), 2px 0 0 0 var(--ld-ink),
    inset 0 0 0 2px var(--ld-cream), 0 6px 0 0 rgba(0, 0, 0, .35);
}
.load-bar i {
  display: block; height: 100%; width: 3%;
  background: var(--ld-grass);
  box-shadow: inset 0 2px 0 0 var(--ld-grass-hi), inset 0 -2px 0 0 var(--ld-grass-dk);
  transition: width .25s linear;
}
.ld-status { margin: 0; min-height: 1.2em; font-size: 12px; color: rgba(252, 236, 196, .85); }
.ld-credit {
  position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); margin: 0;
  font: 10px/1 "Silkscreen", "Sprout", monospace; color: rgba(252, 236, 196, .5);
}

@media (prefers-reduced-motion: reduce) {
  .ld-island, .ld-logo, .ld-sky i { animation: none; }
  .load-bar i { transition: none; }
  #loading { transition-duration: .2s, 0s; transition-delay: 0s, .2s; }
}