/* mainLoading.css Shared, reusable loading overlay for all games. Mounted by mainLoading.js as an overlay on (survives ScratchUI body injection). */ :root{ --ml-bg: rgba(8, 8, 10, 0.88); --ml-panel: rgba(20, 18, 24, 0.58); --ml-border: rgba(255,255,255,0.12); --ml-text: rgba(255,255,255,0.92); --ml-muted: rgba(255,255,255,0.72); --ml-accent: rgba(246, 211, 107, 0.92); --ml-accent2: rgba(255, 239, 176, 0.92); --ml-shadow: 0 26px 75px rgba(0,0,0,0.55); --ml-radius: 18px; } .ml-overlay{ position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 18px; color: var(--ml-text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--ml-bg); pointer-events: all; } .ml-overlay[aria-hidden="true"]{ pointer-events: none; } .ml-veil{ position: absolute; inset: 0; pointer-events: none; opacity: 0.72; background: radial-gradient(1200px 700px at 15% 20%, rgba(255, 80, 200, 0.20), rgba(255,255,255,0) 60%), radial-gradient(1100px 650px at 85% 18%, rgba(90, 230, 255, 0.18), rgba(255,255,255,0) 58%), radial-gradient(1000px 650px at 65% 85%, rgba(255, 240, 120, 0.16), rgba(255,255,255,0) 60%), radial-gradient(1100px 700px at 20% 86%, rgba(120, 255, 200, 0.14), rgba(255,255,255,0) 62%); filter: blur(1.2px) saturate(1.4); transform: translate3d(0,0,0); animation: mlFloat 10s ease-in-out infinite; } @keyframes mlFloat{ 0%,100%{ transform: translate3d(-1.4%, -1.0%, 0) scale(1.02); opacity: 0.66; } 50%{ transform: translate3d(1.2%, 1.0%, 0) scale(1.06); opacity: 0.84; } } .ml-panel{ position: relative; z-index: 1; width: min(520px, 92vw); border-radius: var(--ml-radius); border: 1px solid var(--ml-border); background: var(--ml-panel); box-shadow: var(--ml-shadow); backdrop-filter: blur(16px); padding: 18px 18px 16px; } .ml-brand{ display: grid; gap: 10px; place-items: center; text-align: center; padding: 10px 6px 6px; } .ml-logo{ width: auto; height: 52px; filter: drop-shadow(0 14px 22px rgba(0,0,0,0.45)); transform-origin: 50% 80%; animation: mlLogoBob 2.9s ease-in-out infinite; user-select: none; -webkit-user-drag: none; } @keyframes mlLogoBob{ 0%, 100%{ transform: translate3d(0, 0, 0) rotate(-0.35deg) scale(1); } 50%{ transform: translate3d(0, -4px, 0) rotate(0.35deg) scale(1.01); } } .ml-title{ font-weight: 900; letter-spacing: 0.02em; font-size: 18px; } .ml-subtitle{ font-weight: 650; font-size: 13px; color: var(--ml-muted); } .ml-progress{ margin-top: 12px; display: grid; gap: 10px; } .ml-bar{ height: 10px; border-radius: 999px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.10); overflow: hidden; } .ml-fill{ height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--ml-accent), var(--ml-accent2)); box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset; transition: width 220ms ease; } .ml-row{ display: flex; justify-content: space-between; align-items: center; gap: 12px; } .ml-hint{ font-size: 12px; color: var(--ml-muted); } .ml-pct{ font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: rgba(255,255,255,0.86); } .ml-overlay.is-done{ pointer-events: none; animation: mlFadeOut 260ms ease forwards; } @keyframes mlFadeOut{ to{ opacity: 0; transform: translate3d(0, -4px, 0); } } @media (prefers-reduced-motion: reduce){ .ml-veil{ animation: none; } .ml-logo{ animation: none; } .ml-fill{ transition: none; } .ml-overlay.is-done{ animation: none; opacity: 0; } }