/* WORD RUN loading screen (2026-10-30): one of 3 pictures at random, the logo on top, a candy loading bar.
   Only restyles Godot's default shell (#status, #status-splash, #status-progress); load.js adds the parts. */
#status-splash { object-fit: cover !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; image-rendering: auto !important; }
#status-progress { opacity: 0 !important; }
#wr-logo { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); width: clamp(220px, 34vw, 560px); filter: drop-shadow(0 6px 10px rgba(58,35,64,.35)); pointer-events: none; }
#wr-bar { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); width: clamp(260px, 56vw, 640px); aspect-ratio: 467 / 70; }
#wr-bar .track { position: absolute; inset: 0; background: url(load-bar-track.png) center / 100% 100% no-repeat; }
#wr-bar .well { position: absolute; left: 8.5%; right: 8.5%; top: 19%; bottom: 19%; }
#wr-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; min-width: 2.4em; border-radius: 999px;
  border-style: solid; border-width: 0 1.2em; border-image: url(load-bar-fill.png) 0 26 fill / 0 1.2em round; transition: width .25s ease-out; }
#wr-bar .cap { position: absolute; top: 50%; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%); background: url(load-bar-cap.png) center / contain no-repeat; transition: left .25s ease-out; }
#wr-load { bottom: calc(5% + clamp(260px, 56vw, 640px) * 70 / 467 + 10px) !important; }
#wr-nowasm { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 90vw); padding: 20px 24px; background: #fff7fb; border: 3px solid #ff8fb1; border-radius: 18px; color: #5b3943; font: 18px/1.5 Itim, "Noto Sans Thai", Arial, sans-serif; text-align: center; z-index: 5; }
#wr-nowasm b { color: #ff6a00; font-size: 22px; }
.wr-nowasm #status-notice, .wr-nowasm #status-progress, .wr-nowasm #wr-load { display: none !important; }