:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #d9e7f1; background: #080e18; }
* { box-sizing: border-box; }
body { margin: 0; }
#game { position: relative; width: 100%; height: calc(100dvh - 40px); overflow: hidden; background: #080e18; }
#game:fullscreen { height: 100dvh; }
#unity-canvas { width: 100%; height: 100%; display: block; background: #080e18; outline: none; }
#loading { position: absolute; inset: 0; display: grid; place-items: safe center; overflow-x: hidden; overflow-y: auto; padding-block: 64px 80px; background: radial-gradient(ellipse at 65% 65%, #122b3c 0, #0b1826 35%, #080e18 75%); transition: opacity .6s ease; z-index: 2; }
#loading::before { content: ""; position: absolute; inset: 0; opacity: .45; background-image: var(--starfield, radial-gradient(1px 1px at 15% 18%, #cfebff 90%, transparent), radial-gradient(1px 1px at 75% 24%, #cfebff 90%, transparent), radial-gradient(1px 1px at 62% 78%, #cfebff 90%, transparent), radial-gradient(1px 1px at 28% 72%, #cfebff 90%, transparent)); background-size: 383px 307px, 607px 397px, 557px 487px, 433px 599px; }
#loading.leaving { opacity: 0; pointer-events: none; }
#loading[hidden] { display: none; }
.orbit { position: absolute; width: 110vw; height: 110vw; border: 1px solid #a7d5ec0d; border-radius: 50%; transform: rotate(-25deg) scaleY(.55); pointer-events: none; }
.orbit-one { left: 16%; top: -30%; }
.orbit-two { left: -35%; top: 5%; width: 130vw; height: 130vw; }
.loading-content { position: relative; width: min(960px, calc(100% - 48px)); padding-bottom: 30px; }
.brand { display: block; width: 100%; height: auto; margin: 0 auto 52px; }
.loading-status { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 15px; }
#percent { color: #8fbdcf; font-variant-numeric: tabular-nums; }
.progress { height: 3px; background: #c7e6f31c; margin-top: 16px; overflow: hidden; }
#progress-fill { width: 0; height: 100%; background: #9bd0df; box-shadow: 0 0 12px #93ccdf66; transition: width .2s linear; }
.indeterminate #progress-fill { width: 28%; animation: travel 1.8s ease-in-out infinite; }
#detail { min-height: 20px; color: #8da5b8; font-size: 13px; line-height: 1.5; margin: 14px 0 34px; }
.steps { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; letter-spacing: .14em; color: #526879; }
.steps .active { color: #b8d6e3; }
.loading-footer { position: absolute; bottom: 30px; left: 32px; right: 32px; display: flex; justify-content: space-between; gap: 20px; color: #6f879a; font-size: 11px; letter-spacing: .04em; }
.alpha { font-size: 9px; letter-spacing: .18em; border: 1px solid #708da044; padding: 5px 8px; }
#game-footer { height: 40px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; letter-spacing: .12em; }
.muted { color: #647e91; margin-left: 8px; }
button { background: transparent; color: #b9d5e3; border: 1px solid #68889c55; border-radius: 3px; padding: 7px 12px; cursor: pointer; font: inherit; }
button:disabled { opacity: .4; cursor: default; }
button:hover:not(:disabled), button:focus-visible { background: #1b3549; }
#fullscreen { border: 0; }
#failure { margin-top: 20px; color: #e9c3b6; font-size: 13px; }
#failure details { margin-top: 16px; color: #8da5b8; }
#failure pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 100px; overflow: auto; }
@keyframes travel { 0% { transform: translateX(-110%); } 100% { transform: translateX(470%); } }
@media (max-width: 600px) { .brand { margin-bottom: 36px; } .loading-footer { left: 24px; right: 24px; bottom: 20px; } .loading-footer > :last-child { max-width: 160px; text-align: right; } .muted { display: none; } }
@media (max-height: 500px) { .brand { max-width: 600px; margin-bottom: 16px; } .loading-footer { display: none; } #detail { margin-bottom: 16px; } .loading-content { padding: 16px 0; } }
@media (prefers-reduced-motion: reduce) { #loading, #progress-fill { transition: none; } .indeterminate #progress-fill { animation: none; width: 100%; opacity: .45; } }

[data-animated-logo] > img, [data-animated-logo] > svg { display: block; width: 100%; height: auto; }

.loading-panel { max-width: 480px; margin-inline: auto; }
.loading-panel h1 { margin: 0; font-size: 15px; font-weight: 400; }
.divider { height: 1px; background: #c7e6f31c; margin-top: 16px; }
.shipyard-intro { color: #8da5b8; font-size: 13px; line-height: 1.5; margin: 14px 0 28px; }
.shipyard-intro p { margin: 0 0 8px; }
@media (max-height: 500px) { #loading { padding-block: 32px 56px; } }

.loading-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
@media (max-height: 850px) and (min-height: 501px) {
  #loading { padding-block: 32px 48px; }
  .loading-content { padding-bottom: 0; }
  .loading-content > .brand { max-width: 760px; margin-bottom: 24px; }
  #detail { margin-bottom: 20px; }
}

#game-footer { display: grid; grid-template-columns: 1fr auto 1fr; }
#game-footer .copyright { text-align: center; font-size: 9px; letter-spacing: 0; color: #8da5b8; }
#fullscreen { justify-self: end; }
@media (max-width: 700px) {
  #game { height: calc(100dvh - 64px); }
  #game-footer { height: 64px; grid-template-columns: 1fr 1fr; gap: 0 12px; padding-block: 4px 8px; }
  #game-footer .copyright { grid-row: 2; grid-column: 1 / -1; }
}