:root { color-scheme: dark; --game-stable-vh: 100svh; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #090a08; font-family: var(--font-game); }
body { position: fixed; inset: 0; isolation: isolate; --scene-viewport-width:.5625; --scene-viewport-height:1.7777778; --scene-backdrop-blur:20px; }
/* Loading is also a world-facing scene: preserve the same top-anchored sharp
   9:16 surface and fill only the spare viewport with an undimmed blur. */
body::before { position:absolute; inset:0; z-index:0; content:''; background:url('media/startmsg.jpg') center/cover; filter:blur(var(--scene-backdrop-blur)); transform:scale(1.04); pointer-events:none; }
.loading-screen { z-index:1; top:0; left:50%; width:min(100vw,calc(var(--game-stable-vh,100svh) * var(--scene-viewport-width))); height:min(var(--game-stable-vh,100svh),calc(100vw * var(--scene-viewport-height))); display:grid; place-items:end center; padding:28px 24px calc(36px + env(safe-area-inset-bottom)); color:#eee5c5; background:linear-gradient(180deg,rgba(5,7,5,.26),rgba(5,7,5,.92)),url('media/startmsg.jpg') center/contain no-repeat; position:absolute; overflow:hidden; transform:translateX(-50%); box-shadow:0 0 60px rgba(0,0,0,.7); }
.noise { position: absolute; inset: 0; opacity: .13; pointer-events: none; background-image: repeating-radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1px 4px); mix-blend-mode: overlay; }
.loading-card { width: min(100%, 410px); position: relative; text-shadow: 0 1px 8px #000; }
.eyebrow { margin: 0 0 10px; color: #c9b36c; font-size: 11px; letter-spacing: .2em; }
h1 { margin: 0 0 18px; font-family: var(--font-game); font-size: clamp(32px, 9vw, 46px); font-weight: 500; line-height: .98; }
.status { min-height: 2.8em; margin: 0 0 16px; color: #d6d1c0; font-size: 15px; line-height: 1.4; }
.progress-track { height: 5px; overflow: hidden; background: rgba(238,229,197,.23); border-radius: 99px; }
.progress-value { height: 100%; width: 0; background: #d3b25e; box-shadow: 0 0 12px #d3b25e; transition: width .18s ease; }
.progress-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; color: #bdb7a4; font-size: 12px; letter-spacing: .03em; }
.retry { min-height:44px; margin-top:22px; padding:10px 18px; border:1px solid #c9b36c; border-radius:8px; background:rgba(5,7,5,.72); color:#eee5c5; font:inherit; text-transform:lowercase; cursor:pointer; touch-action:manipulation; }
.retry:disabled { opacity:.58; cursor:wait; }
.telegram-login { width:100%; text-transform:none; font-weight:700; background:rgba(36,107,160,.88); border-color:#75b9df; }