/* Cloudline: a quiet, illustrated interlude shared by every real transition. */
#loading{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;overflow:hidden;background:#f8f7ef;color:#344e48;text-align:center;padding:44px 24px;font-family:var(--font-ui);isolation:isolate;opacity:1;transition:none;outline:none;cursor:wait;}
#loading::before,#loading::after{content:"";position:absolute;z-index:-1;width:70vw;height:70vw;min-width:620px;min-height:620px;border-radius:50%;pointer-events:none;}
#loading::before{top:-52vw;left:-12vw;background:radial-gradient(ellipse,#dbe8db 0,transparent 70%);}
#loading::after{right:-35vw;bottom:-47vw;background:radial-gradient(ellipse,#e5dcf1 0,transparent 70%);}
#loading.done{opacity:0;pointer-events:auto;transition:opacity .32s ease;}
#loading[lang=zh-Hant]{font-family:'Lumi TC',var(--font-ui);}
.loading-brand{position:absolute;top:max(32px,env(safe-area-inset-top));left:clamp(24px,5vw,80px);font-size:12px;letter-spacing:.23em;font-weight:800;color:#627b70;display:flex;align-items:center;gap:14px;}
.loading-brand svg{width:28px;height:28px;color:#88a793;}
.loading-edition{position:absolute;right:clamp(24px,5vw,80px);top:36px;font-size:10px;letter-spacing:.18em;color:#839488;font-weight:800;}
.loading-scene{position:relative;width:330px;height:265px;flex-shrink:0;margin:6px 0 2px;}
.loading-orbit{position:absolute;inset:17px -7px 15px;border:1px solid #b7cdb757;border-radius:50%;transform:rotate(-18deg);}
.loading-orbit::before,.loading-orbit::after{content:"✦";position:absolute;color:#d4b574;font-size:16px;animation:loading-twinkle 3.4s ease-in-out infinite;}
.loading-orbit::before{left:17px;top:53px;}.loading-orbit::after{right:7px;bottom:77px;font-size:23px;animation-delay:-1.4s;}
#loading-art{position:absolute;inset:0 20px;background-image:var(--lumi-art-5);background-size:300% 200%;background-position:var(--art-x,50%) var(--art-y,0%);background-repeat:no-repeat;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse 49% 48%,#000 65%,transparent 100%);animation:loading-float 4s ease-in-out infinite;}
#loading-art[data-atlas=landmark]{background-image:var(--lumi-art-0);background-size:400% 400%;mask-image:none;inset:0 30px;}
.loading-shadow{position:absolute;left:90px;right:90px;bottom:12px;height:13px;border-radius:50%;background:#91aaa227;filter:blur(6px);animation:loading-shadow 4s ease-in-out infinite;}
.loading-cloud{position:absolute;left:-22px;top:93px;width:80px;height:25px;background:#fffefa;border-radius:30px;box-shadow:0 9px 24px #849e9b0b;animation:loading-cloud 7s ease-in-out infinite;}
.loading-cloud::before,.loading-cloud::after{content:"";position:absolute;background:inherit;border-radius:50%;width:38px;height:38px;left:14px;bottom:4px;}.loading-cloud::after{width:28px;height:28px;left:43px;bottom:1px;}
.loading-cloud.back{left:auto;right:-4px;top:179px;transform:scale(.7);animation-delay:-3s;opacity:.85;}
#loading .loading-eyebrow{margin:10px 0 11px;font-size:10px;font-weight:800;letter-spacing:.22em;color:#7b9079;}
#loading h1{font-family:var(--font-display);font-size:clamp(28px,3.3vw,42px);font-weight:800;line-height:1.2;letter-spacing:-.025em;margin:0;max-width:700px;}
#loading[lang=zh-Hant] h1{font-family:'Lumi TC',var(--font-ui);font-weight:400;letter-spacing:.035em;}
#loading #loading-subtitle{font-size:14px;line-height:1.7;letter-spacing:.02em;color:#6d817a;margin:13px 0 25px;max-width:470px;}
.loading-progress-wrap{width:min(360px,100%);}
.loading-status{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;}
#loading #loading-label{margin:0;font-size:12px;line-height:1.5;letter-spacing:0;text-align:left;color:#586e64;}
#loading-percent{font-size:11px;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.03em;min-width:33px;text-align:right;color:#678273;}
#loading-progress{height:9px;border-radius:20px;background:#e3e9df;box-shadow:inset 0 1px 3px #3a695010;overflow:hidden;}
#loading-fill{display:block;position:relative;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#8aac98,#afcdb8 52%,#c4b9de);overflow:hidden;min-width:0;}
#loading-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,#fff9 48%,transparent 78%);transform:translateX(-100%);animation:loading-shimmer 2.4s ease-in-out infinite;}
#loading-steps{display:flex;justify-content:center;gap:6px;padding-top:16px;}
#loading-steps i{width:5px;height:5px;border-radius:4px;background:#d8e1d6;transition:background .2s,width .2s;}#loading-steps i[data-current=true]{width:19px;background:#a9b9a2;}#loading-steps i[data-done=true]{background:#93ae98;}
.loading-tip{margin-top:33px;max-width:430px;display:flex;gap:10px;align-items:baseline;justify-content:center;color:#7d8b7b;}
#loading #loading-tip{margin:0;font-size:12px;line-height:1.7;letter-spacing:0;text-align:left;}#loading-tip-label{flex-shrink:0;font-size:9px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:#8b987e;border:1px solid #dce3d2;border-radius:5px;padding:3px 6px;}
#loading #loading-footer{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));font-size:10px;letter-spacing:.08em;color:#87978b;margin:0;}
#loading-retry{margin-top:23px;border:0;border-radius:24px;background:#587d68;color:#fffdf5;font:800 14px var(--font-ui);padding:12px 28px;box-shadow:0 5px 16px #3d645a16;cursor:pointer;}#loading-retry:focus-visible{outline:3px solid #b6a1cd;outline-offset:4px;}
#loading[data-state=error]{cursor:auto;}#loading[data-state=error] .loading-status{display:none;}#loading[data-state=error] #loading-progress{background:#eaddd2;}#loading[data-state=error] #loading-fill{background:#c6a991;}#loading[data-state=error] .loading-tip{display:none;}#loading[data-state=error] #loading-subtitle{max-width:440px;}#loading[data-state=error] #loading-fill::after{animation:none;}
.is-loading #world,.is-loading .hud{pointer-events:none;}
/* Network waits belong beside their status, not in a world-blocking screen. */
#game[data-connection=connecting] .social-state,#game[data-connection=reconnecting] .social-state,#game[data-connection=connecting] #chat-status,#game[data-connection=reconnecting] #chat-status{position:relative;overflow:hidden;padding-bottom:13px;}
#game[data-connection=connecting] .social-state::after,#game[data-connection=reconnecting] .social-state::after,#game[data-connection=connecting] #chat-status::after,#game[data-connection=reconnecting] #chat-status::after{content:"";position:absolute;bottom:0;left:0;height:3px;width:35%;border-radius:3px;background:linear-gradient(90deg,#9cbfa7,#c1b0dc);animation:loading-network 1.6s ease-in-out infinite;}
@keyframes loading-float{50%{transform:translateY(-9px) rotate(1deg)}}
@keyframes loading-shadow{50%{transform:scale(.86);opacity:.6}}
@keyframes loading-cloud{50%{translate:12px 2px}}
@keyframes loading-twinkle{50%{opacity:.35;scale:.8}}
@keyframes loading-shimmer{65%,100%{transform:translateX(100%)}}
@keyframes loading-network{from{left:-35%}to{left:100%}}
@media(max-width:600px){#loading{padding:65px 24px;}.loading-brand{top:24px;font-size:10px;gap:9px;}.loading-edition{display:none;}.loading-scene{width:270px;height:225px;}.loading-cloud{left:-7px;width:65px;}.loading-cloud.back{right:-7px;top:162px;}.loading-tip{margin-top:27px;max-width:330px;}#loading #loading-tip{font-size:11px;}#loading h1{font-size:28px;}.loading-orbit{inset:17px 0 7px;}#loading #loading-footer{font-size:9px;}}
@media(max-height:690px){.loading-scene{width:240px;height:185px;}#loading .loading-eyebrow{margin:6px 0 8px;}#loading #loading-subtitle{margin:9px 0 19px;}.loading-tip{margin-top:22px;}#loading h1{font-size:29px;}.loading-cloud{top:72px;}.loading-cloud.back{top:125px;}}
@media(max-height:480px){#loading{padding:24px;} .loading-scene{display:none;}.loading-brand,.loading-edition{top:16px;}#loading .loading-eyebrow{margin-top:28px;}.loading-tip{margin-top:15px;}#loading #loading-footer{bottom:12px;}}
@media(prefers-reduced-motion:reduce){#loading,#loading *{animation:none!important;transition:none!important;}#game[data-connection] .social-state::after,#game[data-connection] #chat-status::after{animation:none!important;left:0;width:100%;}}