@font-face{font-family:Trail;src:url(ui-font.ttf) format('truetype');font-display:swap}
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;touch-action:auto;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#status{position:fixed!important;inset:0!important;z-index:100;visibility:visible!important;overflow:hidden;background:#101b28!important;color:#fff;font-family:Trail,Arial,sans-serif}
#status{left:var(--hill-visible-left,0px)!important;top:var(--hill-visible-top,0px)!important;right:auto!important;bottom:auto!important;width:var(--hill-visible-width,100vw);height:var(--hill-visible-height,100vh);height:var(--hill-visible-height,100dvh)}
#status:before,#status:after{content:none!important}#status-splash{display:none!important}
.loading-brand{position:absolute;left:42%;top:12%;width:51%;text-align:center;transform:rotate(-6deg)}
.loading-brand h1{margin:0;font:italic 900 clamp(65px,11vw,184px)/.86 Trail,Arial,sans-serif;letter-spacing:-.035em}
.loading-brand h1 span{display:block;-webkit-text-stroke:2px #201b17;paint-order:stroke fill}
.loading-brand .silver{background:linear-gradient(#fff 10%,#c6cbd0 48%,#f6f5ee 52%,#929ba2);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 5px #5c6064) drop-shadow(0 5px #151313)}
.loading-brand .gold{font-size:1.22em;margin-top:12px;background:linear-gradient(#fff2a2,#ffd344 35%,#f2a914 64%,#b5640a);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 5px #945008) drop-shadow(0 5px #151313)}
.loading-tagline{margin:24px auto 0;padding:9px 22px 12px;max-width:440px;background:#111820eb;clip-path:polygon(4% 0,100% 6%,96% 93%,0 100%);font-size:clamp(15px,2.3vw,34px);letter-spacing:.05em}
.loading-corner{position:absolute;top:5%;left:3.5%;font-size:clamp(12px,1.25vw,20px);letter-spacing:.24em;line-height:1.6;color:#203242;text-shadow:0 1px #ffffff70}.loading-corner b{display:block}
.loading-bottom{position:absolute;bottom:max(6%,env(safe-area-inset-bottom));left:27%;width:58%;max-width:1000px;text-align:center}
.loading-heading{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:12px;font-size:clamp(18px,2vw,28px);letter-spacing:.22em;text-shadow:2px 3px #111}
.loading-dot{width:8px;height:8px;background:#77e7ff;border-radius:50%;box-shadow:0 0 14px #23caff;animation:loading-breathe 1.5s ease-in-out infinite}
.loading-meter{display:flex;align-items:center;gap:16px}
#status-progress{display:block;position:static!important;flex:1;min-width:0;width:100%!important;height:34px!important;margin:0!important;padding:5px;box-sizing:border-box;border:2px solid #8b9eab;border-radius:22px;background:#09121b;box-shadow:inset 0 2px 5px #000,0 3px 0 #161a20,0 6px 15px #0008;appearance:none;-webkit-appearance:none}
#status-progress::-webkit-progress-bar{background:#09121b;border-radius:20px;box-shadow:inset 0 1px 4px #000}
#status-progress::-webkit-progress-value{background:linear-gradient(#d8fcff,#35dcff 35%,#079ae1 65%,#11649f);border-radius:20px;box-shadow:0 0 12px #39d6ff}
#status-progress::-moz-progress-bar{background:linear-gradient(#d8fcff,#35dcff 35%,#079ae1 65%,#11649f);border-radius:20px}
.loading-percent{min-width:64px;font-size:clamp(25px,3vw,42px);text-align:right;text-shadow:2px 3px #111}

.loading-signature{position:absolute;left:3.5%;bottom:4%;font-size:18px;letter-spacing:.15em;text-shadow:0 2px 4px #000}.loading-signature small{display:block;margin-top:5px;font-size:10px;letter-spacing:.22em;color:#c4ccd0}
#status-notice{position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(580px,88vw);max-height:70vh;overflow:auto;padding:24px!important;border:1px solid #738390;border-radius:12px;background:#101821f7!important;color:#fff;box-shadow:0 12px 60px #000b;font:18px/1.45 Trail,Arial,sans-serif}
#status-notice{margin:0!important;max-height:70%;touch-action:pan-y pinch-zoom;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.loading-error .loading-bottom{display:none}.loading-retry{display:block;margin-top:18px;padding:10px 22px;border:1px solid #ffdc76;border-radius:6px;background:#ffbf24;color:#15191d;font:22px Trail,Arial,sans-serif;cursor:pointer}
@keyframes loading-breathe{50%{opacity:.35}}
@media(max-aspect-ratio:1/1){#status{background-position:30% center!important}.loading-brand{top:10%;left:7%;width:86%}.loading-brand h1{font-size:21vw}.loading-tagline{font-size:5vw;margin-top:20px}.loading-corner{top:3%;left:7%;font-size:10px}.loading-corner b{display:inline;margin-right:9px}.loading-bottom{left:6%;width:88%;bottom:max(10%,env(safe-area-inset-bottom))}.loading-heading{font-size:19px}.loading-percent{font-size:29px;min-width:50px}.loading-meter{gap:10px}.loading-signature{left:6%;bottom:3%;font-size:12px}.loading-signature small{font-size:9px}}
@media(max-height:480px) and (min-aspect-ratio:1/1){.loading-brand{top:8%;left:47%;width:45%}.loading-brand h1{font-size:17vh}.loading-tagline{margin-top:12px;padding:5px 12px;font-size:17px}.loading-bottom{bottom:5%;left:30%;width:62%}.loading-heading{font-size:16px;margin-bottom:5px}#status-progress{height:26px!important}.loading-signature{font-size:12px}.loading-corner{font-size:10px}}
@media(prefers-reduced-motion:reduce){.loading-dot{animation:none}}
.loading-brand h1{width:85%;margin:0 auto;line-height:0}.loading-brand svg{display:block;width:100%;height:auto;overflow:visible}
@media(max-aspect-ratio:1/1){#status{background-position:12% center!important}}

/* Grade only the illustration; text and progress retain their exact colors. */
#status::before{content:""!important;position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#06111deb,transparent 44%),url(loading.png) center/cover;filter:saturate(1.22) contrast(1.10) brightness(.97)}
.loading-brand svg{filter:drop-shadow(0 3px 2px #10172266)}
.loading-tagline{background:#081522ed;border-top:1px solid #fff3}
@media(max-aspect-ratio:1/1){#status::before{background-position:12% center}}

/* Insets are added to the original composition rather than shrinking artwork. */
.loading-corner{top:max(5%,calc(env(safe-area-inset-top,0px) + 8px));left:max(3.5%,calc(env(safe-area-inset-left,0px) + 12px))}
.loading-signature{left:max(3.5%,calc(env(safe-area-inset-left,0px) + 12px));bottom:max(4%,calc(env(safe-area-inset-bottom,0px) + 8px))}
.loading-bottom{bottom:max(6%,calc(env(safe-area-inset-bottom,0px) + 16px));max-width:calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 24px)}
@media(max-aspect-ratio:1/1){.loading-corner{top:max(3%,calc(env(safe-area-inset-top,0px) + 8px));left:max(7%,calc(env(safe-area-inset-left,0px) + 12px))}.loading-bottom{bottom:max(10%,calc(env(safe-area-inset-bottom,0px) + 32px))}.loading-signature{left:max(6%,calc(env(safe-area-inset-left,0px) + 12px));bottom:max(3%,calc(env(safe-area-inset-bottom,0px) + 8px))}}
