:root { --splash-bg: #B15D0A; --bar-height: 12px; --bar-vertical-offset: 70vh; --bar-fill: #3DCBFF; --bar-border: #FFCD06; } html,body{height:100%;margin:0;font-family:'Montserrat-Bold', 'Montserrat', Inter, Roboto, Arial, Helvetica, sans-serif} #splashOverlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--splash-bg); color:#fff; z-index:99999; transition: opacity .45s ease, transform .45s ease; -webkit-tap-highlight-color: transparent; } #splashOverlay.hide{ opacity:0; transform: translateY(-8px); pointer-events:none;} .splashInner{ text-align:center; width:100%; padding:20px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center;} .splashImage{ position:fixed; top:0; left:0; width:100vw; height:100vh; background-size:cover; background-position:center center; background-repeat:no-repeat; } #loadingWrapper { width:100%; display:flex; justify-content:center; margin-top: var(--bar-vertical-offset); } #loadingBar{ position:relative; width:var(--bar-width); max-width:940px; height:var(--bar-height); margin:8px auto; background:transparent; border:2px solid var(--bar-border); border-radius:999px; overflow:hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.35);} #loadingBar .fill { background: var(--bar-fill); height:100%; } /* #loadingBar .text{ position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:#fff; opacity:0.95; padding:0 8px;} */ /* Orientation-specific images via data-orientation on */ html[data-orientation="portrait"] .splashImage{ background-image: url('splash/SPLASH_PORTRAIT.jpg'); } html[data-orientation="landscape"] .splashImage{ background-image: url('splash/SPLASH_LANDSCAPE.jpg'); } html[data-orientation="portrait"] { --bar-width: 60%; } html[data-orientation="landscape"] { --bar-width: 20%; } /* small screens adjustments */ @media (max-width:420px){ :root{ --bar-width:86%; } } /* hide GameDiv while overlay present to avoid flicker */ #GameDiv{ visibility:visible; } /* optional fade-out animation end cleanup */ #splashOverlay.hidden{ display:none !important; }