/* GrowBlocks City loading screen (plaza.html #cityLoad, driven by src/city/loader.js): the T2 key art full screen, the
   logo, a charging bar that follows the real load (engine, city, the streets around you) and a tip. In the HTML so it
   paints with the page; the old Launch Plaza (?world=plaza) removes it (src/boot.js). */
@font-face{font-family:'Lilita One';src:url(fonts/LilitaOne.ttf) format('truetype');font-display:swap}
#cityLoad{--cl-edge:linear-gradient(90deg,#3fe8ff,#8b5cff 55%,#ff5ccf);position:fixed;inset:0;z-index:200;display:grid;grid-template-rows:1fr auto;overflow:hidden;
 background:#0d0a2e;color:#fff;font-family:Nunito,system-ui,sans-serif;transition:opacity .6s ease,visibility .6s}
#cityLoad.cl-out{opacity:0;visibility:hidden;pointer-events:none}
#cityLoad .cl-art{position:absolute;inset:0}
#cityLoad .cl-art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;animation:clZoom 26s ease-out both}
@keyframes clZoom{from{transform:scale(1.14)}to{transform:scale(1.02)}}
#cityLoad .cl-art::after{content:"";position:absolute;inset:0;
 background:radial-gradient(120% 70% at 50% 34%,rgba(13,10,46,0) 40%,rgba(13,10,46,.55) 100%),linear-gradient(0deg,#0d0a2e 4%,rgba(13,10,46,.88) 26%,rgba(13,10,46,0) 56%)}
#cityLoad .cl-body{position:relative;grid-row:2;display:grid;justify-items:center;gap:12px;width:min(640px,100% - 32px);margin:0 auto;
 padding:0 0 calc(30px + env(safe-area-inset-bottom))}
#cityLoad .cl-logo{width:min(300px,62vw);height:auto;filter:drop-shadow(0 5px 0 #0f0b33) drop-shadow(0 0 18px rgba(198,255,58,.45));animation:clBob 3.2s ease-in-out infinite}
@keyframes clBob{50%{transform:translateY(-4px)}}
#cityLoad .cl-hi{margin:0;min-height:1.1em;font:400 clamp(22px,3.4vw,30px)/1.1 "Lilita One",sans-serif;text-align:center;-webkit-text-stroke:2px #140d40;paint-order:stroke fill;
 text-shadow:0 3px 0 #140d40,0 0 20px rgba(139,92,255,.55)}
#cityLoad .cl-hi span{color:#d8ff4a;text-shadow:0 3px 0 #12320a,0 0 18px rgba(198,255,58,.6)}
#cityLoad .cl-bar{position:relative;width:100%;height:30px;margin-top:4px;padding:4px;box-sizing:border-box;border-radius:99px;
 background:linear-gradient(#0a0828,#0a0828) padding-box,var(--cl-edge) border-box;border:3px solid transparent;
 box-shadow:0 6px 0 #0a0720,0 0 22px rgba(139,92,255,.45),inset 0 2px 8px rgba(0,0,0,.6)}
#cityLoad .cl-fill{position:relative;height:100%;width:var(--cl-p,4%);min-width:16px;border-radius:99px;transition:width .35s ease-out;
 background:repeating-linear-gradient(115deg,rgba(255,255,255,.22) 0 10px,rgba(255,255,255,0) 10px 20px),linear-gradient(#ecff8a,#b6f04a 45%,#7cc80f);
 background-size:28px 100%,100% 100%;animation:clStripe .9s linear infinite;box-shadow:0 0 14px rgba(198,255,58,.75),inset 0 -3px 0 rgba(40,90,0,.45),inset 0 2px 0 rgba(255,255,255,.55)}
@keyframes clStripe{to{background-position:28px 0,0 0}}
#cityLoad .cl-seed{position:absolute;right:-18px;top:50%;width:40px;height:40px;transform:translateY(-50%);filter:drop-shadow(0 0 10px rgba(198,255,58,.9));animation:clSpin 2.4s ease-in-out infinite}
@keyframes clSpin{50%{transform:translateY(-50%) rotate(-12deg) scale(1.08)}}
#cityLoad .cl-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;padding:0 6px;box-sizing:border-box}
#cityLoad .cl-step{font:800 15px/1.2 Nunito,sans-serif;color:#e9e1ff;text-shadow:0 2px 6px rgba(0,0,0,.7)}
#cityLoad .cl-pct{font:400 22px/1 "Lilita One",sans-serif;color:#d8ff4a;text-shadow:0 2px 0 #12320a,0 0 12px rgba(198,255,58,.5);font-variant-numeric:tabular-nums}
#cityLoad .cl-tip{display:flex;align-items:center;gap:10px;margin:4px 0 0;padding:9px 16px 9px 9px;border-radius:16px;max-width:100%;box-sizing:border-box;
 background:rgba(26,19,80,.72);border:2px solid rgba(139,92,255,.5);box-shadow:0 0 12px rgba(139,92,255,.25);font:700 14px/1.35 Nunito,sans-serif;color:#d7ccf5;transition:opacity .35s}
#cityLoad .cl-tip.cl-swap{opacity:0}
#cityLoad .cl-tip img{width:30px;height:30px;flex:none;border-radius:50%;padding:4px;box-sizing:border-box;background:radial-gradient(circle at 40% 35%,#5a46d8,#1a1450 75%);box-shadow:0 0 0 2px #3fe8ff}
#cityLoad .cl-tip b{color:#fff}
#cityLoad .cl-who{margin:0;font:700 13px/1.3 Nunito,sans-serif;color:#a99bd6;text-align:center}
#cityLoad .cl-who button{all:unset;cursor:pointer;color:#7ef2ff;text-decoration:underline;text-underline-offset:3px;margin-left:6px}
#cityLoad .cl-who button:focus-visible{outline:2px solid #7ef2ff;outline-offset:2px;border-radius:4px}
#cityLoad .cl-err{color:#ff9db8}
/* while it is up, the start card waits under it */
html:has(#cityLoad:not(.cl-out)) #start{visibility:hidden}
/* the start card's own small bar (the city still building while you pick a name) */
#start .cl-mini{display:grid;gap:5px;margin:2px 0 12px}
#start .cl-mini[hidden]{display:none}
#start .cl-mini i{display:block;height:8px;border-radius:99px;background:#0a0828;box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 0 1px rgba(139,92,255,.45);overflow:hidden}
#start .cl-mini i::before{content:"";display:block;height:100%;width:var(--cl-p,4%);border-radius:99px;background:linear-gradient(90deg,#b6f04a,#ecff8a);box-shadow:0 0 8px rgba(198,255,58,.7);transition:width .35s ease-out}
#start .cl-mini small{font:700 12px/1.2 Nunito,sans-serif;color:#a99bd6}
@media (max-width:720px){
 #cityLoad .cl-art img{object-position:46% 30%}
 #cityLoad .cl-art::after{background:linear-gradient(0deg,#0d0a2e 12%,rgba(13,10,46,.9) 40%,rgba(13,10,46,0) 66%)}
 #cityLoad .cl-body{gap:10px;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
 #cityLoad .cl-bar{height:26px}#cityLoad .cl-seed{width:34px;height:34px;right:-14px}
 #cityLoad .cl-tip{font-size:13px}
}
@media (max-height:480px) and (orientation:landscape){
 #cityLoad .cl-logo{width:200px}#cityLoad .cl-body{gap:6px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}#cityLoad .cl-tip{display:none}
}
@media (prefers-reduced-motion:reduce){#cityLoad *{animation:none!important}#cityLoad .cl-fill{transition:none}}