/* Atelier landscape and ceremonial progress frame; the existing controller owns all progress. */
#loading.entry-shell[data-screen="loading"]{--load:0;--ink:#f6eddd;--lilac:#d4b7ee;display:block;padding:0;overflow:hidden;background:#0b0716;color:var(--ink);font-family:'Noto Sans Thai','Leelawadee UI',Tahoma,sans-serif}
#loading[data-screen="loading"]>.entry-header,#loading[data-screen="loading"]>.entry-steps,#loading[data-screen="loading"]>.entry-footer,#loading[data-screen="loading"]>.entry-atmosphere{display:none}
#loading[data-screen="loading"] .entry-load{position:relative;width:100%;height:100%;min-height:0;margin:0;padding:0;text-align:left;isolation:isolate}
.loading-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.loading-backdrop{position:absolute;inset:0;display:block;background:#0b0716}
.loading-backdrop img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.loading-backdrop img{filter:blur(20px) saturate(.8);transform:scale(1.07);transition:filter 1.1s ease,transform 1.4s ease}
.loading-backdrop.is-ready img{filter:none;transform:none}
@media(prefers-reduced-motion:reduce){.loading-backdrop img{transition:none}}
.loading-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0b071610,transparent 32%,#0b071610 48%,#0b071699 68%,#0b0716ee 100%)}
.loading-shade:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b07162e,transparent 55%)}
.loading-adventure-logo{position:absolute;z-index:2;top:max(clamp(18px,2.1vh,30px),env(safe-area-inset-top));left:max(clamp(20px,2.5vw,48px),env(safe-area-inset-left));width:clamp(200px,20vw,360px);height:auto;max-width:calc(100% - 40px);pointer-events:none;filter:drop-shadow(0 5px 12px #0008)}
.loading-adventure-panel{position:absolute;z-index:2;left:max(clamp(28px,3.6vw,72px),env(safe-area-inset-left));bottom:max(clamp(28px,5.6vh,64px),env(safe-area-inset-bottom));width:min(1160px,72vw);animation:none}
#loading.entry-shell .loading-title{margin:0;color:var(--ink);font-size:clamp(28px,3.15vw,56px);font-weight:500;line-height:1.4;letter-spacing:0;text-wrap:balance;text-shadow:0 2px 18px #000b}
.loading-stage{display:block;min-width:0;margin-top:4px;color:var(--lilac);font-size:clamp(16px,1.5vw,24px);font-weight:400;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 8px #000b}
.loading-percent{margin-top:clamp(10px,1.5vh,18px);text-align:right}
#loading #entry-percent{display:inline-block;margin-bottom:8px;color:#f1dfff;font:500 clamp(16px,1.35vw,22px)/1.2 'Noto Sans Thai',Tahoma,sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 1px 6px #000b}
/* A forged gold frame with fixed jewel ends; only the inset energy follows real progress. */
.loading-bar{position:relative;height:44px;margin:0 6px;filter:drop-shadow(0 5px 5px #09041180)}
#loading .entry-load #entry-progress{-webkit-appearance:none;appearance:none;position:absolute;left:0;top:8px;display:block;width:100%;height:28px;margin:0;padding:0;border:1px solid #9f783f;border-radius:3px;background:#20172df5;box-shadow:inset 0 3px 5px #08030ec9,inset 0 -1px #efd8a62c;color:transparent;overflow:hidden;accent-color:transparent}
#loading .entry-load #entry-progress::-webkit-progress-bar{background:transparent}
#loading .entry-load #entry-progress::-webkit-progress-value{background:transparent}
#loading .entry-load #entry-progress::-moz-progress-bar{background:transparent}
.loading-bar-rail{position:absolute;left:17px;right:17px;z-index:3;height:4px;background:linear-gradient(180deg,#f9e7bd,#ad7e3e 48%,#5e3e24 52%,#ddbd7b);border-radius:1px}
.loading-bar-rail-top{top:4px}.loading-bar-rail-bottom{bottom:4px}
.loading-bar-rail:before,.loading-bar-rail:after{content:'';position:absolute;width:13%;height:1px;background:#efd8a6;opacity:.75}
.loading-bar-rail-top:before{left:7%;top:-4px}.loading-bar-rail-top:after{right:7%;top:-4px}
.loading-bar-rail-bottom:before{left:7%;bottom:-4px}.loading-bar-rail-bottom:after{right:7%;bottom:-4px}
.loading-bar-cap{position:absolute;z-index:5;top:-6px;width:52px;height:56px;pointer-events:none}
.loading-bar-cap-left{left:-20px}.loading-bar-cap-right{right:-20px}
.loading-bar-fill{position:absolute;left:18px;top:14px;bottom:14px;width:calc((100% - 36px)*var(--load)/100);min-width:0;border-radius:1px;background:linear-gradient(180deg,#e1b5ff,#a051e1 24%,#7322ac 65%,#c482e9);box-shadow:inset 0 1px #fbe7ffb3,inset 0 -1px #fbe7ff4d}
.loading-bar-fill:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 45%,#bc64e638 72%,#f3b9dc99);pointer-events:none}
.loading-bar-shine{position:absolute;inset:0;overflow:hidden}
.loading-bar-shine:after{content:'';position:absolute;top:0;bottom:0;width:90px;left:-100px;background:linear-gradient(110deg,#fff0,#eed1ff77 48%,#fff0);animation:loading-current 3.8s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes loading-current{0%,8%{left:-100px}85%,100%{left:110%}}
.loading-bar-head{position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border:1px solid #fff0d2;background:#f4d7ff;transform:rotate(45deg);box-shadow:0 2px 10px #d880f178}
#loading #entry-percent{padding:4px 13px;border:1px solid #bd985e80;border-radius:3px;background:#24172ce6;color:#fae8bc;font-weight:600;line-height:1.3}
.loading-percent{margin-right:0;margin-top:18px}
#loading.entry-shell .loading-note{margin:clamp(12px,1.8vh,20px) 0 0;color:#eadff4;font-size:clamp(14px,1.08vw,18px);line-height:1.6;text-shadow:0 1px 8px #000b}
#loading.entry-shell .loading-tip{display:flex;align-items:baseline;gap:9px;min-height:26px;margin:clamp(14px,2.2vh,24px) 0 0;color:#c5a9db;font-size:clamp(14px,1vw,17px);line-height:1.6;text-shadow:0 1px 6px #000b}
#loading.entry-shell .loading-tip b{flex:none;font-size:inherit;font-weight:500;color:#d7afff}
#loading.entry-shell .loading-tip b:before{content:'✦';margin-right:9px;color:#c888ff}
#loading.entry-shell .loading-tip b:after{content:':';margin-left:1px}
#loading-tip-text{min-width:0;transition:opacity .3s ease}
#loading-tip-text.loading-tip-out{opacity:0}
#loading.entry-shell #loading-message{margin:12px 0 0;color:#e8dcf4;font-size:15px;line-height:1.6;text-shadow:0 1px 6px #000b}
.loading-adventure-panel:has(#entry-retry:not([hidden])) #loading-message{color:#ffc3b7;font-weight:600}
.loading-adventure-panel:has(#loading-message:not([hidden])) .loading-tip,.loading-adventure-panel:has(#loading-message:not([hidden])) .loading-note{display:none}
#loading .entry-load #entry-retry{display:block;width:auto;min-height:44px;margin:14px 0 0;padding:9px 26px;border:1px solid #d7b8ff88;border-radius:7px;background:linear-gradient(#8f46db,#6723b2);box-shadow:0 5px 20px #3c137b55,inset 0 1px #ffffff30;color:#fff;font:600 15px 'Noto Sans Thai',Tahoma,sans-serif;cursor:pointer}
#loading .entry-load #entry-retry[hidden]{display:none}
#loading .entry-load #entry-retry:hover{background:linear-gradient(#a15de8,#7b38c5)}
#loading .entry-load #entry-retry:focus-visible{outline:2px solid #f5dcff;outline-offset:4px}
#loading.entry-shell.loading-arriving{pointer-events:none}
#loading.entry-shell.loading-leaving{opacity:0;transition:opacity .4s ease}
/* Short screens: preserve the complete logo and leave the kingdom visible on the right. */
@media(max-height:560px) and (orientation:landscape){
 .loading-adventure-logo{top:max(12px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));width:min(19vw,36vh)}
 .loading-adventure-panel{left:max(26px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));width:min(720px,70vw)}
 #loading.entry-shell .loading-title{font-size:clamp(22px,3.1vw,32px);line-height:1.35}
 .loading-stage{font-size:14px;margin-top:3px}
 .loading-percent{margin-top:8px}#loading #entry-percent{font-size:15px;margin-bottom:5px}
 .loading-bar{height:36px;margin:0 6px}
 .loading-bar-cap{width:44px;height:48px;top:-6px}.loading-bar-cap-left{left:-17px}.loading-bar-cap-right{right:-17px}
 #loading .entry-load #entry-progress{top:7px;height:22px}
 .loading-bar-fill{top:12px;bottom:12px}
 #loading.entry-shell .loading-note{display:none}
 #loading.entry-shell .loading-tip{margin-top:12px;font-size:14px;line-height:1.5}
 #loading.entry-shell #loading-message{font-size:14px;margin-top:8px}
 #loading .entry-load #entry-retry{margin-top:8px}
 .loading-shade{background:linear-gradient(180deg,transparent 25%,#0b071612 40%,#0b0716ba 72%,#0b0716f0)}
}
/* Portrait gets its own composition, rather than losing the traveler to a landscape crop. */
@media(max-aspect-ratio:3/4){
 .loading-backdrop img{object-position:50% 42%}
 .loading-adventure-logo{top:max(20px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));width:clamp(160px,51vw,240px)}
 .loading-adventure-panel{left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));width:auto;bottom:max(32px,env(safe-area-inset-bottom))}
 #loading.entry-shell .loading-title{font-size:clamp(27px,7vw,40px);line-height:1.45}
 .loading-stage{font-size:16px}
 .loading-percent{margin-top:16px}
 #loading.entry-shell .loading-note{font-size:14px}
 #loading.entry-shell .loading-tip{align-items:flex-start;font-size:14px;margin-top:18px;gap:8px}
 .loading-shade{background:linear-gradient(180deg,#0b07161a,transparent 30%,#0b071619 49%,#0b0716d9 75%,#0b0716f5)}
}
@media(max-width:380px) and (orientation:portrait){
 .loading-adventure-panel{left:20px;right:20px;bottom:max(24px,env(safe-area-inset-bottom))}
 #loading.entry-shell .loading-tip{flex-wrap:wrap;gap:2px 8px}
}
@media(prefers-reduced-motion:reduce){
 .loading-bar-shine:after,.loading-adventure-panel{animation:none!important}
 #loading-tip-text,#loading.entry-shell.loading-leaving{transition:none}
}

/* The frame is the anchor. Copy, changing tips, percentages and retry never reflow it. */
#loading[data-screen="loading"] .loading-adventure-panel{
 --loading-anchor:max(clamp(164px,19vh,204px),calc(160px + env(safe-area-inset-bottom)));
 --loading-frame-height:44px;
 bottom:var(--loading-anchor);height:0;animation:none;transform:none;
}
#loading.entry-shell .loading-title{position:absolute;left:0;right:0;bottom:106px;margin:0}
#loading[data-screen="loading"] .loading-stage{position:absolute;left:0;right:0;bottom:64px;margin:0}
#loading[data-screen="loading"] .loading-percent{position:absolute;right:0;bottom:8px;margin:0}
#loading #entry-percent{min-width:4.3ch;margin:0;text-align:center}
#loading[data-screen="loading"] .loading-bar{position:absolute;left:6px;right:6px;top:0;height:var(--loading-frame-height);margin:0}
#loading.entry-shell .loading-note{position:absolute;left:0;right:0;top:calc(var(--loading-frame-height) + 14px);margin:0;line-height:1.6}
#loading.entry-shell .loading-tip{position:absolute;left:0;right:0;top:calc(var(--loading-frame-height) + 66px);margin:0;max-height:calc(var(--loading-anchor) - var(--loading-frame-height) - 88px);overflow:auto;scrollbar-width:thin;scrollbar-color:#bf94d9 #24172c}
#loading.entry-shell #loading-message{position:absolute;left:0;right:0;top:calc(var(--loading-frame-height) + 12px);margin:0;max-height:3.2em;overflow:auto;scrollbar-width:thin;scrollbar-color:#bf94d9 #24172c}
#loading .entry-load #entry-retry{position:absolute;left:0;top:calc(var(--loading-frame-height) + 74px);margin:0}
/* A traveling current and the leading crystal share one pulse; the forged gold never moves. */
.loading-bar-fill{overflow:visible;background:linear-gradient(180deg,#eed0ff 0%,#bd78f5 20%,#7e29be 56%,#5c168e 70%,#ba71e5 100%)}
.loading-bar-fill:before{background:linear-gradient(90deg,#64189233,transparent 38%,#c376ef44 72%,#efbaffaa)}
.loading-bar-shine:after{left:-40%;width:35%;background:linear-gradient(105deg,transparent,#f2dcff22 22%,#fff1ffb3 51%,#cba0ff44 68%,transparent);animation:loading-energy-current 3.2s cubic-bezier(.16,1,.3,1) infinite;animation-play-state:paused}
@keyframes loading-energy-current{0%{transform:translateX(0);opacity:0}14%{opacity:.85}78%{opacity:.85}100%{transform:translateX(420%);opacity:0}}
.loading-bar-head{opacity:clamp(0,calc(var(--load)*1),1);border-color:#fff1ca;background:#f7e3ff;box-shadow:0 2px 12px #eab7ff99}
.loading-bar-head:before{content:'';position:absolute;inset:-10px;background:radial-gradient(ellipse,#fff3dd99,transparent 65%);opacity:.3;animation:loading-energy-crystal 3.2s ease-in-out infinite;animation-play-state:paused;pointer-events:none}
@keyframes loading-energy-crystal{0%,100%{opacity:.22}48%{opacity:.8}}
#loading[data-loading-motion="active"] .loading-bar-shine:after,#loading[data-loading-motion="active"] .loading-bar-head:before{animation-play-state:running}
@media(max-height:560px) and (orientation:landscape){
 #loading[data-screen="loading"] .loading-adventure-panel{--loading-anchor:max(118px,calc(114px + env(safe-area-inset-bottom)));--loading-frame-height:36px}
 #loading.entry-shell .loading-title{bottom:88px}
 #loading[data-screen="loading"] .loading-stage{bottom:60px}
 #loading[data-screen="loading"] .loading-percent{bottom:6px}
 #loading.entry-shell .loading-tip{top:calc(var(--loading-frame-height) + 16px);max-height:calc(var(--loading-anchor) - var(--loading-frame-height) - 32px)}
 #loading.entry-shell #loading-message{top:calc(var(--loading-frame-height) + 7px);max-height:1.5em}
 #loading .entry-load #entry-retry{top:calc(var(--loading-frame-height) + 34px)}
}
@media(max-aspect-ratio:3/4){
 #loading[data-screen="loading"] .loading-adventure-panel{--loading-anchor:max(clamp(200px,27vh,250px),calc(192px + env(safe-area-inset-bottom)))}
 #loading.entry-shell .loading-title{bottom:106px}
 #loading.entry-shell .loading-tip{top:calc(var(--loading-frame-height) + 60px);max-height:calc(var(--loading-anchor) - var(--loading-frame-height) - 82px)}
}
@media(prefers-reduced-motion:reduce){
 .loading-bar-shine:after,.loading-bar-head:before{animation:none!important}
 .loading-bar-shine:after{transform:none;left:65%;opacity:.25}
 .loading-bar-head:before{opacity:.3}
}

/* W239 (2026-10-19) bar v2: a dark crystal channel between the jewels. The energy is coloured along the whole channel
   (deep violet at the start, bright lilac-gold at the end), flows inside, and a light flare leads it.
   entry.js still owns the value (--load, eased every frame); loading-bar-fx.js only adds sparks and the "full" flag. */
#loading[data-screen="loading"] .loading-bar{container-type:inline-size;filter:drop-shadow(0 6px 10px #07031099)}
#loading .entry-load #entry-progress{top:8px;height:28px;border:1px solid #8c6a3c;border-radius:14px;
 background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#e7c98a1f calc(10% - 1px) 10%) 18px 0/calc(100% - 36px) 100% no-repeat,
  linear-gradient(180deg,#0d0717 0%,#1b1129 46%,#24173a 54%,#120a1e 100%);
 box-shadow:inset 0 4px 8px #04010acc,inset 0 -2px 4px #3a2550aa,0 0 0 1px #2a1a12,0 1px 0 1px #f4dcaa22}
.loading-bar-rail{left:24px;right:24px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#a77a3d 7%,#f8e3b2 50%,#a77a3d 93%,transparent);box-shadow:0 1px #2b1a0e}
.loading-bar-rail-top{top:3px}.loading-bar-rail-bottom{bottom:3px}
.loading-bar-rail:before,.loading-bar-rail:after{width:7px;height:7px;background:#f3d9a0;border:1px solid #6e4c25;opacity:1;transform:rotate(45deg);box-shadow:0 0 6px #ffd9905a}
.loading-bar-rail-top:before,.loading-bar-rail-bottom:before{left:calc(50% - 4px);top:-3.5px;bottom:auto}
.loading-bar-rail-top:after,.loading-bar-rail-bottom:after{display:none}
.loading-bar-cap{filter:drop-shadow(0 0 5px #b67cff55);transition:filter .6s ease}
#loading[data-loading-full] .loading-bar-cap-right{filter:drop-shadow(0 0 10px #f3c7ff) drop-shadow(0 0 22px #b06cff) brightness(1.18)}
.loading-bar-fill{left:18px;top:12px;bottom:12px;border-radius:10px;overflow:visible;
 background:linear-gradient(90deg,#3c0f73 0%,#6224b8 28%,#9246ec 56%,#c588ff 82%,#ffe0b8 100%) 0 0/calc(100cqw - 36px) 100% no-repeat;
 box-shadow:0 0 14px #9b4dff70,0 0 3px #e2b8ff99,inset 0 1px #ffffffaa,inset 0 -2px 3px #2a0650aa}
.loading-bar-fill:before{border-radius:inherit;background:linear-gradient(180deg,#ffffff70 0%,#ffffff1a 38%,transparent 52%,#1a033a55 100%)}
.loading-bar-shine{border-radius:inherit}
.loading-bar-shine:before{content:'';position:absolute;top:0;bottom:0;left:-64px;right:0;
 background:repeating-linear-gradient(112deg,transparent 0,#ffffff00 10px,#f3ddff1f 20px,#ffffff33 26px,#f3ddff1f 32px,transparent 44px,transparent 64px);
 animation:loading-bar-flow 2.2s linear infinite;animation-play-state:paused;will-change:transform}
@keyframes loading-bar-flow{to{transform:translateX(64px)}}
.loading-bar-shine:after{left:-40%;width:28%;background:linear-gradient(100deg,transparent,#fff2ff00 10%,#fff6ffcc 50%,#e9c8ff33 75%,transparent);
 animation:loading-bar-sweep 2.8s cubic-bezier(.45,0,.2,1) infinite;animation-play-state:paused}
@keyframes loading-bar-sweep{0%{transform:translateX(0);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateX(520%);opacity:0}}
/* The leading light: a soft halo, a white core line and a turning four-point star. */
.loading-bar-head{right:-16px;top:50%;width:32px;height:44px;margin-top:-22px;border:0;transform:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,#fff 0 9%,#f9e4ff 15%,#d39bff88 34%,#9b4dff22 58%,transparent 72%);
 box-shadow:none;opacity:clamp(0,calc(var(--load)*.5),1);mix-blend-mode:screen}
.loading-bar-head:before{content:'';position:absolute;inset:auto;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;opacity:1;
 background:radial-gradient(circle,#fff 0 18%,#ffe9ff 26%,transparent 60%);
 clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
 animation:loading-bar-star 4s linear infinite;animation-play-state:paused}
.loading-bar-head:after{content:'';position:absolute;left:50%;top:50%;width:120px;height:2px;margin:-1px 0 0 -60px;border-radius:2px;
 background:linear-gradient(90deg,transparent,#f4dcff99 40%,#fff 50%,#f4dcff99 60%,transparent);opacity:.7}
@keyframes loading-bar-star{to{transform:rotate(360deg)}}
#loading[data-loading-motion="active"] .loading-bar-shine:before,#loading[data-loading-motion="active"] .loading-bar-head:before{animation-play-state:running}
/* Full: one bright sweep along the whole channel. */
#loading[data-loading-full] .loading-bar-fill{box-shadow:0 0 22px #c27dffaa,0 0 6px #fff0d6,inset 0 1px #ffffffcc,inset 0 -2px 3px #2a0650aa}
.loading-bar-sparks{position:absolute;left:0;right:0;top:-34px;bottom:-34px;z-index:6;width:100%;height:calc(100% + 68px);pointer-events:none}
#loading #entry-percent{position:relative;padding:5px 14px 4px;border:1px solid #c9a265b0;border-radius:4px;background:linear-gradient(180deg,#2d1a3d,#180e24);
 box-shadow:0 4px 14px #0008,inset 0 1px #f6deb033;color:#fbe9c2;letter-spacing:.02em;text-shadow:0 0 10px #d9a8ff66,0 1px 2px #000}
#loading #entry-percent:after{content:'';position:absolute;left:calc(50% - 4px);bottom:-5px;width:8px;height:8px;background:#180e24;border:solid #c9a265b0;border-width:0 1px 1px 0;transform:rotate(45deg)}
@media(max-height:560px) and (orientation:landscape){
 #loading .entry-load #entry-progress{top:7px;height:22px;border-radius:11px}
 .loading-bar-fill{top:11px;bottom:11px;border-radius:7px}
 .loading-bar-head{height:36px;margin-top:-18px}
 .loading-bar-rail-top{top:2px}.loading-bar-rail-bottom{bottom:2px}
}
@media(prefers-reduced-motion:reduce){
 .loading-bar-shine:before,.loading-bar-head:before{animation:none!important}
 .loading-bar-sparks{display:none}
}