/* Map loading gate (src/map-loading.js, 2026-10-09): a full-screen cover shown while a destination map's scene is
   still loading after a warp/door/channel move, so the unfinished map is never seen. On the first entry the
   entry shell's own loading screen stays up instead; this cover only rises above it (.map-loading-top) when the
   scene fails or loads unusually slowly, so its buttons can be reached. Below the entry shell (1000) and above
   the warp gate layer (900). */
#map-loading{position:fixed;inset:0;z-index:960;display:grid;place-items:center;padding:16px;box-sizing:border-box;background:#0d1b14;color:#4a3526;font:15px/1.55 'Noto Sans Thai','Nunito Sans','Leelawadee UI',Tahoma,sans-serif;overflow:hidden;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}
#map-loading[hidden]{display:none}
#map-loading.map-loading-top{z-index:1100}
#map-loading *,#map-loading *::before,#map-loading *::after{box-sizing:border-box}
#map-loading :focus-visible{outline:3px solid #f0c75e;outline-offset:2px}
.map-loading-scene{position:absolute;inset:-3%;background:#0d1b14 url('../assets/loading-adventure-world-v1.webp') center/cover no-repeat;filter:saturate(.55) brightness(.42) blur(2px);transform-origin:60% 45%;animation:map-loading-drift 30s ease-in-out infinite alternate}
.map-loading-scene::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 45%,#0000 40%,#061009cc 100%)}
.map-loading-scene i{position:absolute;bottom:-4%;left:calc(14% + var(--i,0)*33%);width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#fff8df 0 30%,#ffd98aee 48%,#ffd06a00 72%);box-shadow:0 0 12px 4px #ffe39a66;animation:map-loading-rise 9s ease-in-out infinite;opacity:0}
.map-loading-scene i:nth-child(2){--i:1;animation-delay:-3s;animation-duration:11s}.map-loading-scene i:nth-child(3){--i:2;animation-delay:-6s;animation-duration:10s}
@keyframes map-loading-drift{from{transform:scale(1.02)}to{transform:scale(1.08) translate3d(-1%,-.8%,0)}}
@keyframes map-loading-rise{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}15%{opacity:1}60%{opacity:.85}100%{transform:translate3d(3vw,-70vh,0) scale(1.1);opacity:0}}
.map-loading-card{position:relative;width:min(440px,100%);padding:22px 24px 20px;border:2px solid #c99a55;border-radius:10px;background:linear-gradient(#fffaf0,#f6e3bd 70%,#efd29c);box-shadow:inset 0 0 0 3px #fffdf5cc,inset 0 -3px 0 #e2bf85,0 18px 40px #02070499;text-align:center;animation:map-loading-in .28s ease-out}
@keyframes map-loading-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.map-loading-kicker{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.28em;color:#9a7a46}
#map-loading-title{margin:0;font-size:22px;line-height:1.3;font-weight:800;color:#5d3f24;text-shadow:0 1px 0 #fff8e6}
.map-loading-map{margin:4px 0 14px;font-size:15px;font-weight:600;color:#2f5b3e;min-height:1.4em}
.map-loading-bar{position:relative;height:14px;margin:0 2px;border-radius:999px;background:#e5d1a8;box-shadow:inset 0 1px 3px #7a52302e,inset 0 0 0 1px #d2b27a;overflow:hidden}
.map-loading-fill{position:absolute;inset:0 auto 0 0;width:28%;border-radius:999px;background:linear-gradient(90deg,#7fb757,#4f9a3e 60%,#d2a654);box-shadow:inset 0 1px 0 #fff6;transition:width .25s ease-out;overflow:hidden}
.map-loading-shine{position:absolute;inset:0;background:linear-gradient(90deg,#fff0 0,#fff8 50%,#fff0 100%);transform:translateX(-100%);animation:map-loading-shine 1.6s linear infinite}
@keyframes map-loading-shine{to{transform:translateX(100%)}}
.map-loading-bar[data-mode=wait] .map-loading-fill{animation:map-loading-sweep 1.8s ease-in-out infinite}
@keyframes map-loading-sweep{0%{left:-28%}100%{left:100%}}
.map-loading-bar[data-mode=done] .map-loading-fill{background:linear-gradient(90deg,#8fc96a,#d2a654)}
.map-loading-bar[data-mode=failed] .map-loading-fill{background:#c0533b;animation:none}
.map-loading-status{margin:12px 0 0;min-height:1.5em;font-size:14px;color:#6b5236}
.map-loading-note{margin:8px 0 0;font-size:13px;color:#9a4b31}
.map-loading-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.map-loading-actions button{appearance:none;min-height:40px;padding:8px 18px;border:2px solid #b8894c;border-radius:8px;background:linear-gradient(#fff6e2,#edcf96);color:#5d3f24;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 2px 0 #b8894c,0 4px 10px #4a2e1433}
.map-loading-actions button:hover{background:linear-gradient(#fffaf0,#f3dba8)}
.map-loading-actions button[hidden]{display:none}
#map-loading-retry{border-color:#2f5b3e;background:linear-gradient(#5aa557,#2f7a3e);color:#fff;box-shadow:0 2px 0 #1f4a2b,0 4px 10px #0b2a1444}
#map-loading-retry:hover{background:linear-gradient(#66b363,#378a48)}
@media (max-height:500px){#map-loading{padding:10px}.map-loading-card{padding:12px 16px 12px}#map-loading-title{font-size:18px}.map-loading-map{margin-bottom:8px}.map-loading-status{margin-top:8px}.map-loading-actions{margin-top:8px}}
@media (prefers-reduced-motion:reduce){.map-loading-scene,.map-loading-scene i,.map-loading-shine,.map-loading-bar[data-mode=wait] .map-loading-fill,.map-loading-card{animation:none}.map-loading-bar[data-mode=wait] .map-loading-fill{width:40%;left:30%}}