/* ---- welcome screen: loading first, then the live 3D world shows through ---- */
#welcome { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-end; font-family: var(--ui); color: #fff; }
.wl-bg { position: absolute; inset: 0; transition: opacity 1.2s; }
.wl-bg svg { width: 100%; height: 100%; display: block; }
#welcome::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,18,44,.82) 0%, rgba(6,18,44,.45) 45%, rgba(6,18,44,0) 75%), linear-gradient(0deg, rgba(6,18,44,.6), rgba(6,18,44,0) 45%); z-index: 1; pointer-events: none; }
#welcome.ready .wl-bg { opacity: 0; pointer-events: none; }
.wl-content { position: relative; z-index: 2; padding: 0 0 9vh 7vw; max-width: 640px; }
.wl-kicker { display: inline-block; font: 700 13px var(--ui); letter-spacing: 1.5px; text-transform: uppercase; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); padding: 7px 14px; border-radius: 999px; margin-bottom: 18px; }
#welcome h1 { font: 800 clamp(40px, 6.5vw, 82px)/1.02 var(--ui); margin: 0 0 16px; letter-spacing: -1.5px; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
#welcome h1 span { color: var(--gold); }
.wl-tag { font: 500 clamp(16px, 1.6vw, 19px)/1.5 var(--ui); margin: 0 0 30px; opacity: .92; max-width: 520px; }
.wl-load .bar { width: min(380px, 80vw); height: 8px; border-radius: 6px; background: rgba(255,255,255,.2); overflow: hidden; }
.wl-load .bar div { height: 100%; width: 3%; background: linear-gradient(90deg, var(--gold), #ff8a3d); transition: width .25s; }
.wl-load .step { font: 500 14px var(--ui); opacity: .85; margin-top: 10px; min-height: 18px; }
.wl-actions { display: none; gap: 12px; flex-wrap: wrap; }
#welcome.ready .wl-load { display: none; }
#welcome.ready .wl-actions { display: flex; animation: rise .5s ease-out; }
.wl-foot { position: absolute; right: 16px; bottom: 12px; z-index: 2; font: 11px var(--ui); opacity: .6; }

@media (max-width: 760px) { .wl-content { padding: 0 22px 8vh; } }

/* login / sign-up (ui/welcome.js requireLogin) */
#welcome.auth .wl-load, #welcome.auth .wl-actions { display: none !important; }
.wl-auth { display: flex; flex-direction: column; gap: 10px; width: min(380px, 86vw); background: rgba(10,25,45,.55); backdrop-filter: blur(8px); padding: 18px; border-radius: 22px; animation: rise .4s ease-out; }
.wl-auth .tabs { display: flex; gap: 6px; background: rgba(255,255,255,.12); border-radius: 999px; padding: 4px; }
.wl-auth .tabs button { flex: 1; border: 0; background: none; color: #fff; border-radius: 999px; padding: 9px; font: 700 14px var(--ui); cursor: pointer; opacity: .8; }
.wl-auth .tabs button.on { background: #fff; color: var(--ink); opacity: 1; }
.wl-auth input { border: 0; border-radius: 14px; padding: 13px 15px; font: 600 15px var(--ui); }
.wl-auth .err { margin: 0; background: #ffe2df; color: #a8231a; border-radius: 12px; padding: 9px 12px; font: 600 13px var(--ui); }
.wl-auth a { color: #fff; opacity: .75; font: 600 13px var(--ui); text-align: center; }
.wl-who { margin-top: 12px; font: 500 14px var(--ui); opacity: .9; }
.wl-who button { border: 0; background: none; color: #fff; text-decoration: underline; font: 600 14px var(--ui); cursor: pointer; padding: 0; }
.wl-auth-t { font: 800 20px var(--ui); color: #fff; }
.wl-saver { margin-top: 12px; border: 1px solid rgba(255,255,255,.45); background: rgba(0,0,0,.18); color: #fff; border-radius: 999px; padding: 7px 14px; font: 600 13px var(--ui); cursor: pointer; }
.wl-saver.on { background: #2f8f4a; border-color: #2f8f4a; }