/* Wordmarks keep their intrinsic 2:1 ratio; square icons use separate artwork. */
.raja-logo {display:block;width:min(320px,72vw,100%);height:auto;max-width:100%;object-fit:contain;flex-shrink:0;margin:0 auto 12px}
.loading-content {width:min(440px,calc(100% - 32px));text-align:center}
#loading-status {font:14px/1.7 "Noto Sans Thai",Tahoma,system-ui,sans-serif;overflow-wrap:anywhere}
#loading-actions button {padding:10px 20px}
#pwa-install-banner img {width:44px;height:44px;aspect-ratio:1;object-fit:contain;flex-shrink:0}
@media(max-height:550px) {.raja-logo {width:min(200px,48vw,100%);margin-bottom:6px}}

/* The splash meter follows completed startup work, rather than a looping timer. */
#loading {background:radial-gradient(ellipse at 50% 52%,#1c3026 0%,#17261e 65%)}
#loading .raja-logo {margin-bottom:36px}
.loading-progress {width:min(320px,64vw);margin:0 auto}
#loading-meter {height:20px;padding:3px;border:1px solid #f1c56d;border-radius:999px;background:linear-gradient(#0c1812,#15291d);box-shadow:0 0 0 1px #7b511f,inset 0 2px 5px #0009,0 1px 2px #0008}
#loading-fill {position:relative;display:block;width:0%;height:100%;border-radius:inherit;background:linear-gradient(180deg,#fff2b0 0%,#f8cb62 28%,#d99528 65%,#f9d47c 100%);box-shadow:inset 0 0 0 1px #ffe8a7aa,0 0 9px #ffbd4766;transition:width .25s ease-out}
#loading-fill::after {content:"";position:absolute;right:0;top:0;bottom:0;width:4px;border-radius:50%;background:#fff3bd;box-shadow:0 0 8px 2px #ffc95c;opacity:0}
#loading-meter[aria-valuenow]:not([aria-valuenow="0"]) #loading-fill::after {opacity:1}
#loading-percent {margin:12px 0 0;color:#f0d699;font:24px/1.2 Georgia,"Noto Sans Thai",serif;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #0006}
#loading-status {margin:20px 0 12px}
@media(max-height:550px) {#loading .raja-logo {margin-bottom:18px}.loading-progress {width:min(280px,60vw)}#loading-meter {height:16px}#loading-percent {font-size:20px;margin-top:8px}}
@media(prefers-reduced-motion:reduce) {#loading-fill {transition:none}}