/* ---------- loading screen: a floating island under a moving sky (js/ui/loading.js) */
#loading {
  --ld-deep: #1a3a80; --ld-mid: #2a6ad0;
  position: fixed; inset: 0; z-index: 60; overflow: hidden; /* over the touch controls (z 40) */ display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 250, 220, 0.95) 0, rgba(255, 244, 200, 0.55) 7%, rgba(255, 240, 200, 0) 26%),
    linear-gradient(180deg, #4fb6ec 0%, #7fd0f4 38%, #bdeafb 72%, #fff2cf 100%);
  color: #fff; transition: opacity 0.55s ease, visibility 0s linear 0s;
}
/* fade out instead of a hard cut; the title scene is ready behind it */
#loading.hidden { display: grid !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.55s ease, visibility 0s linear 0.55s; }

/* distant cloud bank and drifting clouds */
#loading .ld-bank { position: absolute; left: -10%; right: -10%; bottom: -6vh; height: 30vh;
  background:
    radial-gradient(ellipse 18% 60% at 8% 70%, #fff 60%, transparent 62%), radial-gradient(ellipse 16% 55% at 26% 78%, #fff 60%, transparent 62%),
    radial-gradient(ellipse 20% 62% at 46% 74%, #fff 60%, transparent 62%), radial-gradient(ellipse 17% 58% at 66% 80%, #fff 60%, transparent 62%),
    radial-gradient(ellipse 19% 60% at 86% 72%, #fff 60%, transparent 62%), linear-gradient(transparent 70%, #fff 70%);
  opacity: 0.92; filter: drop-shadow(0 -6px 12px rgba(120, 180, 220, 0.35)); }
#loading .ld-cloud { position: absolute; width: 150px; height: 46px; border-radius: 46px; background: #fff; opacity: 0.9; animation: ld-drift linear infinite;
  box-shadow: 30px -22px 0 6px #fff, 76px -14px 0 0 #fff, inset 0 -8px 0 rgba(170, 215, 240, 0.45); }
#loading .ld-cloud.c1 { top: 9%; left: 8%; animation-duration: 46s; animation-delay: -12s; }
#loading .ld-cloud.c2 { top: 24%; left: 70%; animation-duration: 64s; animation-delay: -40s; transform: scale(0.7); opacity: 0.75; }
#loading .ld-cloud.c3 { top: 38%; left: 40%; animation-duration: 54s; animation-delay: -26s; transform: scale(0.85); opacity: 0.8; }
@keyframes ld-drift { from { left: -220px; } to { left: calc(100% + 60px); } }

/* sparkles */
#loading .ld-spark { position: absolute; width: 10px; height: 10px; background: #fff; opacity: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: ld-twinkle 3.2s ease-in-out infinite; }
#loading .ld-spark.s1 { left: 22%; top: 26%; } #loading .ld-spark.s2 { left: 76%; top: 20%; animation-delay: -1.1s; }
#loading .ld-spark.s3 { left: 68%; top: 58%; animation-delay: -2s; width: 7px; height: 7px; } #loading .ld-spark.s4 { left: 30%; top: 64%; animation-delay: -0.5s; width: 8px; height: 8px; }
@keyframes ld-twinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0); } 50% { opacity: 0.95; transform: scale(1) rotate(45deg); } }

/* the island, the logo, the bar */
#loading .ld-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.6vh, 14px); width: min(560px, 100%); text-align: center; }
#loading .ld-island { width: min(300px, 62vw, 34vh); height: auto; overflow: visible; animation: ld-bob 4.6s ease-in-out infinite; filter: drop-shadow(0 18px 18px rgba(30, 80, 140, 0.28)); }
#loading .ld-egg-art { transform-box: fill-box; transform-origin: 50% 90%; animation: ld-wobble 2.8s ease-in-out infinite; }
#loading .ld-fall { animation: ld-fall 0.9s linear infinite; }
@keyframes ld-bob { 50% { transform: translateY(-10px); } }
@keyframes ld-wobble { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-7deg); } 80% { transform: rotate(6deg); } 90% { transform: rotate(-3deg); } }
@keyframes ld-fall { to { stroke-dashoffset: -16; } }
#loading .ld-logo { font-size: clamp(40px, min(9vw, 9vh), 84px); font-weight: 700; letter-spacing: 3px; line-height: 0.95; color: #fff;
  -webkit-text-stroke: 3px var(--ld-deep); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ld-mid), 0 8px 0 var(--ld-deep), 0 12px 20px rgba(0, 0, 0, 0.25); }
#loading .ld-logo .egg { display: inline-block; width: 0.62em; height: 0.8em; margin: 0 0.02em; vertical-align: -0.05em; position: relative; -webkit-text-stroke: 0;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; background: radial-gradient(circle at 35% 30%, #fff, #f3eee8 60%, #d8d0d0); box-shadow: 0 5px 0 var(--ld-mid), 0 8px 0 var(--ld-deep); }
#loading .ld-logo .egg::before, #loading .ld-logo .egg::after { content: ''; position: absolute; border-radius: 50%; background: #ff8fb8; }
#loading .ld-logo .egg::before { width: 22%; height: 16%; left: 22%; top: 28%; } #loading .ld-logo .egg::after { width: 18%; height: 14%; right: 22%; top: 52%; }
#loading .ld-sub { margin-top: -2px; font-size: clamp(14px, 2.2vh, 20px); font-weight: 600; letter-spacing: 2px; text-shadow: 0 2px 0 rgba(20, 40, 90, 0.55); }

#loading .ld-bar { position: relative; width: min(420px, 80vw); height: 20px; margin-top: clamp(6px, 2vh, 18px); border-radius: 12px;
  background: rgba(18, 56, 128, 0.42); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ld-deep), 0 8px 16px rgba(20, 50, 110, 0.3), inset 0 3px 6px rgba(20, 60, 120, 0.25); }
#loading .ld-fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0.02); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.28) 0 10px, rgba(255, 255, 255, 0) 10px 20px), linear-gradient(#ffe98a, #ffc23a 60%, #f39a24);
  background-size: 28px 28px, 100% 100%; animation: ld-stripes 0.8s linear infinite; box-shadow: inset 0 -3px 0 rgba(170, 90, 10, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.6); }
@keyframes ld-stripes { to { background-position: 28px 0, 0 0; } }
#loading .ld-marker { position: absolute; top: 50%; width: 22px; height: 28px; margin: -16px 0 0 -11px; transition: left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; background: radial-gradient(circle at 35% 30%, #fff, #f1ebe4 60%, #d6cdcb); box-shadow: 0 3px 0 var(--ld-mid), 0 5px 0 var(--ld-deep); }
#loading .ld-marker::before { content: ''; position: absolute; width: 26%; height: 18%; left: 22%; top: 30%; border-radius: 50%; background: #ff8fb8; }
#loading .ld-msg { min-height: 1.3em; margin-top: 6px; font-size: clamp(18px, 2.8vh, 24px); font-weight: 600; text-shadow: 0 3px 0 var(--ld-mid); }
#loading .ld-msg .dots::after { content: ''; animation: dots 1s steps(4) infinite; }
#loading .ld-tip { max-width: min(440px, 88vw); min-height: 2.6em; padding: 8px 16px; border-radius: 14px; font-size: clamp(13px, 1.9vh, 16px); line-height: 1.35; color: #fff;
  background: rgba(26, 58, 128, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28), 0 6px 14px rgba(20, 50, 110, 0.18); text-shadow: 0 1px 0 rgba(10, 30, 70, 0.5); opacity: 0; }
#loading .ld-tip:empty { visibility: hidden; }
#loading .ld-tip.in { animation: ld-tipin 0.5s ease forwards; }
@keyframes ld-tipin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#loading .ld-retry { display: none; margin-top: 6px; }
#loading.error .ld-retry { display: inline-block; }
#loading.error .ld-bar, #loading.error .ld-tip, #loading.error .ld-msg .dots { display: none; }
#loading.error .ld-msg { color: #fff; text-shadow: 0 3px 0 #a02040; }

/* landscape phones: island beside the text */
@media (max-height: 500px) and (orientation: landscape) {
  #loading .ld-stage { flex-direction: row; flex-wrap: wrap; justify-content: center; width: min(760px, 100%); column-gap: 24px; }
  #loading .ld-island { width: min(220px, 48vh); }
}
#loading .ld-col { display: contents; }
@media (max-height: 500px) and (orientation: landscape) { #loading .ld-col { display: flex; flex-direction: column; align-items: center; gap: 6px; } }

@media (prefers-reduced-motion: reduce) {
  #loading *, #loading *::before, #loading *::after { animation: none !important; transition: none !important; }
  #loading .ld-tip { opacity: 1; }
}