#scene-loading:not([hidden]){position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#080e1c;color:#e4efff;font:500 16px system-ui;pointer-events:auto}
/* Own the palette: the older light storefront theme must not wash out loading copy. */
html body #loading{background:radial-gradient(ellipse at 50% 40%,#1a3046,#080e1c 72%);color:#f1f6ff;color-scheme:dark}
html body #loading .brand,html body #loading .brand-name{color:#f1f6ff;text-shadow:none}
html body #loading p{color:#e1edf9;text-shadow:none}
html body #loading small{color:#c3d7e8;letter-spacing:.16em}
html body #loading .loading-line{background:#72ebd2}
/* Keep the mall name at the viewport centre, with status underneath. */
html body #loading .brand{position:absolute;top:50%;left:5%;right:5%;transform:translateY(-50%);margin:0;text-align:center;font-size:clamp(28px,6vw,58px);line-height:1.2;letter-spacing:.1em}
html body #loading .loading-line{position:absolute;top:calc(50% + 48px);margin:0}
html body #loading p{position:absolute;top:calc(50% + 66px);left:5%;right:5%;margin:0;text-align:center;line-height:1.5}
html body #loading small{position:absolute;top:calc(50% + 104px);left:5%;right:5%;text-align:center}
#scene-loading .travel-header p{color:#e1edf9;text-shadow:none}
#scene-loading .travel-caption{color:#dceaf8;text-shadow:none}
#scene-loading .travel-stage{color-scheme:dark}
#scene-loading .travel-header{top:8%}
#scene-loading .travel-header strong{font-size:clamp(40px,10dvh,78px)}
#scene-loading .travel-header p{margin:8px 0 0}
.travel-stage{position:relative;width:min(640px,100vw);height:100dvh;max-height:900px;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#36506a,#0c1728 70%);border-inline:1px solid #b7d5d638}
.travel-header{position:absolute;top:12%;left:0;right:0;text-align:center;z-index:3}.travel-header small{letter-spacing:.3em;font-size:12px;color:#deb982}.travel-header strong{display:block;font:300 clamp(52px,10vw,88px) system-ui;color:#c8fff2;font-variant-numeric:tabular-nums}.travel-header p{font-size:13px;letter-spacing:.1em}
.travel-shaft{position:absolute;inset:34% 15% 17%;overflow:hidden;background:linear-gradient(90deg,#0b1423,#243b4c,#0b1423);border:2px solid #b9a485;border-radius:60px 60px 3px 3px}
.travel-shaft i{position:absolute;left:0;right:0;height:2px;background:#baf4ff;box-shadow:0 0 20px #72dfff;animation:shaft-pass 1s linear infinite}.travel-shaft i:nth-child(2){animation-delay:-.33s}.travel-shaft i:nth-child(3){animation-delay:-.66s}
[data-direction=down] .travel-shaft i{animation-direction:reverse}
.travel-doors{position:absolute;inset:34% 15% 17%;display:flex;overflow:hidden;border:2px solid #ae9b81;border-radius:60px 60px 3px 3px;pointer-events:none}
.travel-doors i{width:50%;height:100%;background:linear-gradient(100deg,#91c9d32a,#d2f1f518,#528aa533);border:1px solid #dce9ee66;transform:translateX(-100%);transition:transform .5s}
.travel-doors i+ i{transform:translateX(100%)}[data-kind=portal] .travel-doors i{animation:glass-open 1.3s ease both}[data-kind=portal] .travel-doors i+i{animation-name:glass-open-right}
.travel-progress{position:absolute;bottom:12%;left:20%;right:20%;height:2px;background:#fff2}.travel-progress i{display:block;background:#e8c28c;height:100%;transform-origin:left}.travel-caption{position:absolute;bottom:5%;left:5%;right:5%;text-align:center;line-height:1.7;font-size:13px;color:#c0d1e2}
@keyframes shaft-pass{from{top:-5%}to{top:105%}}@keyframes glass-open{0%,30%{transform:translateX(0)}100%{transform:translateX(-100%)}}@keyframes glass-open-right{0%,30%{transform:translateX(0)}100%{transform:translateX(100%)}}[data-stage=arrived] .travel-shaft i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.travel-shaft i,.travel-doors i{animation:none!important}.travel-doors i{transition:none}}
#scene-loading[data-kind=area] .travel-stage{width:100%;max-height:none;border:0}
#scene-loading[data-kind=area] .travel-header{top:50%;left:5%;right:5%;transform:translateY(-50%)}
#scene-loading[data-kind=area] .travel-header small,#scene-loading[data-kind=area] .travel-shaft,#scene-loading[data-kind=area] .travel-doors{display:none}
#scene-loading[data-kind=area] .travel-header strong{font-size:clamp(28px,6vw,58px);line-height:1.2;letter-spacing:.06em}
#scene-loading[data-kind=area] .travel-header p{position:absolute;top:100%;left:0;right:0;margin:18px 0 0}
#scene-loading[data-kind=area] .travel-progress{top:calc(50% + 76px);bottom:auto;left:calc(50% - 70px);right:calc(50% - 70px)}
#scene-loading[data-kind=area] .travel-caption{top:calc(50% + 96px);bottom:auto;margin:0}

/* Keep the mall title centred; the exact logo sits immediately above it. */
html body #loading .loading-logo{position:absolute;left:50%;bottom:calc(50% + 40px);transform:translateX(-50%);width:min(220px,32dvh,52vw);height:auto;object-fit:contain}
#scene-loading .travel-logo{display:block;width:72px;height:72px;object-fit:contain;margin:0 auto 12px}
#scene-loading[data-kind=area] .travel-logo{position:absolute;bottom:calc(100% + 18px);left:50%;transform:translateX(-50%);width:min(220px,32dvh,52vw);height:auto;margin:0}
@media(max-height:650px){#scene-loading:not([data-kind=area]) .travel-logo{width:44px;height:44px;margin-bottom:4px}#scene-loading:not([data-kind=area]) .travel-header{top:3%}#scene-loading:not([data-kind=area]) .travel-header strong{font-size:36px}}
html body #loading #quick-visit{position:absolute;top:calc(50% + 170px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:10px 18px;border:1px solid #75b8d2;border-radius:24px;color:#e4f3ff;background:#122739;font:14px system-ui;text-decoration:none}
html body #loading #loading-slow{top:calc(50% + 221px);font-size:12px;max-width:90vw}
html body #loading #loading-retry{top:calc(50% + 258px)}

#visit-mode{position:fixed;bottom:8px;left:12px;z-index:36;padding:5px 9px;border-radius:14px;color:#c1d6e4;background:#102237cc;font:11px system-ui;text-decoration:none}body:has(dialog[open]) #visit-mode,body.booting #visit-mode{display:none}
/* SKY LIFT / quiet brass, smoked metal, illuminated centre seam. */
#scene-loading[data-kind=lift]{background:#090b0c;color:#eee8da}
#scene-loading[data-kind=lift] .travel-stage{width:min(1080px,100%);max-height:none;border:0;background:radial-gradient(ellipse at 50% 60%,#272a28 0,#111616 44%,#090b0c 80%)}
#scene-loading[data-kind=lift] .travel-header{top:10%;z-index:4}
#scene-loading[data-kind=lift] .travel-logo{width:48px;height:48px;margin-bottom:14px;filter:grayscale(.65)}
#scene-loading[data-kind=lift] .travel-header small{color:#c6b18b;font-size:10px;letter-spacing:.36em}
#scene-loading[data-kind=lift] .travel-header strong{font:200 clamp(44px,8dvh,76px) system-ui;color:#f0e9da;letter-spacing:.025em;margin-top:8px}
#scene-loading[data-kind=lift] .travel-header p{color:#b9bcb6;font-size:11px;letter-spacing:.15em}
#scene-loading[data-kind=lift] .travel-shaft,#scene-loading[data-kind=lift] .travel-doors{inset:38% 25% 19%;border-radius:2px;border:1px solid #ae97705c}
#scene-loading[data-kind=lift] .travel-shaft{background:linear-gradient(90deg,#090d0e,#2c3330 49.5%,#e1c791 50%,#2c3330 50.5%,#090d0e);box-shadow:0 0 70px #c2a46d0a}
#scene-loading[data-kind=lift] .travel-shaft i{height:1px;background:#bda574;opacity:.35;box-shadow:0 0 18px #bda574;animation-duration:2.4s}
#scene-loading[data-kind=lift] .travel-doors i{background:repeating-linear-gradient(90deg,#242b28 0px,#2c322e 2px,#252c29 4px);border:0;border-right:1px solid #d2b780;transform:translateX(0);transition:transform .65s cubic-bezier(.22,.7,.2,1);box-shadow:inset -20px 0 50px #070c0b80}
#scene-loading[data-kind=lift] .travel-doors i+i{border-right:0;border-left:1px solid #d2b780;box-shadow:inset 20px 0 50px #070c0b80}
#scene-loading[data-kind=lift][data-stage=opening] .travel-doors i{transform:translateX(-100%)}
#scene-loading[data-kind=lift][data-stage=opening] .travel-doors i+i{transform:translateX(100%)}
#scene-loading[data-kind=lift] .travel-route{position:absolute;top:33%;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.35em;color:#c5b28d}
#scene-loading[data-kind=lift] .travel-progress{left:35%;right:35%;bottom:14%;height:1px;background:#b7a07824}
#scene-loading[data-kind=lift] .travel-progress i{background:#cdb488;box-shadow:0 0 12px #cdb48855}
#scene-loading[data-kind=lift] .travel-caption{bottom:6%;left:10%;right:10%;max-width:none;font-size:11px;color:#bcb6a7;letter-spacing:.13em}
#scene-loading[data-kind=lift] .travel-percent{display:none}
@media(max-height:600px){#scene-loading[data-kind=lift] .travel-header{top:6%}#scene-loading[data-kind=lift] .travel-logo{display:none}#scene-loading[data-kind=lift] .travel-header strong{font-size:38px;margin:3px 0}#scene-loading[data-kind=lift] .travel-header p{margin:2px 0}#scene-loading[data-kind=lift] .travel-route{top:35%}#scene-loading[data-kind=lift] .travel-shaft,#scene-loading[data-kind=lift] .travel-doors{inset:42% 31% 20%}#scene-loading[data-kind=lift] .travel-caption{bottom:4%}}
@media(max-width:500px) and (min-height:601px){#scene-loading[data-kind=lift] .travel-shaft,#scene-loading[data-kind=lift] .travel-doors{left:14%;right:14%}}
@media(prefers-reduced-motion:reduce){#scene-loading[data-kind=lift] .travel-doors i{transition:none}#scene-loading[data-kind=lift] .travel-shaft i{animation:none}}

/* A real rendered-frame gate keeps movement locked through the visible countdown. */
#scene-loading:is([data-stage=preparing],[data-stage=countdown],[data-stage=failed]) .travel-shaft i{animation-play-state:paused}
#scene-loading[data-stage=countdown] .travel-percent{display:block;position:absolute;top:52%;left:0;right:0;margin:0;font:300 clamp(60px,12dvh,96px) system-ui;color:#e8cf9e}
#scene-loading[data-stage=countdown]:not([data-kind=area]) .travel-doors i{transform:translateX(-100%)}
#scene-loading[data-stage=countdown]:not([data-kind=area]) .travel-doors i+i{transform:translateX(100%)}
#scene-loading[data-kind=area][data-stage=countdown] .travel-header{top:40%}
#scene-loading[data-kind=area][data-stage=countdown] .travel-progress{top:73%}
#scene-loading[data-kind=area][data-stage=countdown] .travel-caption{top:78%}
#scene-loading .travel-recovery{position:absolute;bottom:15%;left:10%;right:10%;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
#scene-loading .travel-recovery[hidden]{display:none}
#scene-loading .travel-recovery :is(button,a){min-height:44px;box-sizing:border-box;padding:12px 20px;border:1px solid #8aa9b8;border-radius:10px;background:#173447;color:#f0f8ff;font:500 14px system-ui;text-decoration:none;cursor:pointer}
#scene-loading .travel-recovery :is(button,a):focus-visible{outline:2px solid #e8cf9e;outline-offset:3px}
#scene-loading[data-stage=failed] .travel-progress,#scene-loading[data-stage=failed] .travel-percent{display:none}
@media(max-height:500px){#scene-loading[data-stage=countdown] .travel-percent{top:50%;font-size:48px}#scene-loading .travel-recovery{bottom:17%}}